// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
"
<ul class=\\"nav nav-tabs nav-fill\\">
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Starts
      </span>
      <span class=\\"badge bg-light\\">
        now
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Ends
      </span>
      <span class=\\"badge bg-light\\">
        in 366d
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer active\\">
      <span class=\\"me-1\\">
        Duration
      </span>
      <span class=\\"badge bg-light\\">
        366d
      </span>
    </span>
  </li>
</ul>
<div class=\\"tab-content mb-3\\">
  <div class=\\"d-flex flex-sm-row flex-column justify-content-around mt-2 mx-3\\">
    <div class=\\"components-duration\\">
      <table class=\\"w-100\\">
        <tbody>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center\\">
              <h2>
                366
              </h2>
            </td>
            <td class=\\"w-50\\">
              <span class=\\"text-muted ms-2\\">
                days
              </span>
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class=\\"components-duration\\">
      <table class=\\"w-100\\">
        <tbody>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center\\">
              <h2>
                0
              </h2>
            </td>
            <td class=\\"w-50\\">
              <span class=\\"text-muted ms-2\\">
                hours
              </span>
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class=\\"components-duration\\">
      <table class=\\"w-100\\">
        <tbody>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center\\">
              <h2>
                0
              </h2>
            </td>
            <td class=\\"w-50\\">
              <span class=\\"text-muted ms-2\\">
                minutes
              </span>
            </td>
          </tr>
          <tr>
            <td class=\\"w-50 text-center with-click px-2\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td class=\\"w-50\\">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
"
`;

exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
"
<ul class=\\"nav nav-tabs nav-fill\\">
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Starts
      </span>
      <span class=\\"badge bg-light\\">
        now
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer active\\">
      <span class=\\"me-1\\">
        Ends
      </span>
      <span class=\\"badge bg-light\\">
        in 366d
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Duration
      </span>
      <span class=\\"badge bg-light\\">
        366d
      </span>
    </span>
  </li>
</ul>
<div class=\\"tab-content mb-3\\">
  <div class=\\"d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2\\">
    <div class=\\"d-flex justify-content-center align-items-center\\">
      <div class=\\"components-date-range\\">
        <div class=\\"rdp-months\\">
          <div class=\\"rdp-month rdp-caption_start rdp-caption_end\\">
            <div class=\\"rdp-caption\\">
              <h2
                class=\\"rdp-caption_label\\"
                aria-live=\\"polite\\"
                aria-atomic=\\"true\\"
                id=\\"react-day-picker-6\\"
              >
                February 2061
              </h2>
              <div class=\\"rdp-nav\\">
                <button
                  aria-label=\\"Go to previous month\\"
                  class=\\"rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous\\"
                  type=\\"button\\"
                >
                  <svg
                    width=\\"16px\\"
                    height=\\"16px\\"
                    viewbox=\\"0 0 120 120\\"
                    class=\\"rdp-nav_icon\\"
                  >
                    <path
                      d=\\"M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z\\"
                      fill=\\"currentColor\\"
                      fill-rule=\\"nonzero\\"
                    >
                    </path>
                  </svg>
                </button>
                <button
                  aria-label=\\"Go to next month\\"
                  class=\\"rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next\\"
                  type=\\"button\\"
                >
                  <svg
                    width=\\"16px\\"
                    height=\\"16px\\"
                    viewbox=\\"0 0 120 120\\"
                    class=\\"rdp-nav_icon\\"
                  >
                    <path
                      d=\\"M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z\\"
                      fill=\\"currentColor\\"
                    >
                    </path>
                  </svg>
                </button>
              </div>
            </div>
            <table
              class=\\"rdp-table\\"
              role=\\"grid\\"
              aria-labelledby=\\"react-day-picker-6\\"
            >
              <thead class=\\"rdp-head\\">
                <tr class=\\"rdp-head_row\\">
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Su
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Sunday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Mo
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Monday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Tu
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Tuesday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      We
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Wednesday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Th
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Thursday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Fr
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Friday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Sa
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Saturday
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class=\\"rdp-tbody\\">
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_end\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"0\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        1
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        1st February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        2
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        2nd February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        3
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        3rd February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        4
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        4th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        5
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        5th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        6
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        6th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        7
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        7th February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        8
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        8th February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        9
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        9th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        10
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        10th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        11
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        11th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        12
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        12th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        13
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        13th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        14
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        14th February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        15
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        15th February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        16
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        16th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        17
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        17th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        18
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        18th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        19
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        19th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        20
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        20th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        21
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        21st February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        22
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        22nd February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        23
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        23rd February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        24
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        24th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        25
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        25th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        26
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        26th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        27
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        27th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        28
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        28th February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                </tr>
              </tbody>
              <tfoot class=\\"rdp-tfoot\\">
                <tr>
                  <td colspan=\\"8\\">
                    <div class=\\"d-flex justify-content-around mt-3\\">
                      <button class=\\"btn btn-light btn-sm\\">
                        <svg
                          aria-hidden=\\"true\\"
                          focusable=\\"false\\"
                          data-prefix=\\"fas\\"
                          data-icon=\\"calendar-day\\"
                          class=\\"svg-inline--fa fa-calendar-day fa-fw me-1\\"
                          role=\\"img\\"
                          xmlns=\\"http://www.w3.org/2000/svg\\"
                          viewbox=\\"0 0 448 512\\"
                        >
                          <path
                            fill=\\"currentColor\\"
                            d=\\"M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM80 256C71.16 256 64 263.2 64 272V368C64 376.8 71.16 384 80 384H176C184.8 384 192 376.8 192 368V272C192 263.2 184.8 256 176 256H80z\\"
                          >
                          </path>
                        </svg>
                        Today
                      </button>
                    </div>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class=\\"d-flex justify-content-center align-items-center components-hour-minute\\">
      <table class=\\"text-center border-0\\">
        <tbody>
          <tr>
            <td class=\\"components-hour-up with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td>
            </td>
            <td class=\\"components-minute-up with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
          </tr>
          <tr>
            <td class=\\"components-hour\\">
              <h2>
                00
              </h2>
            </td>
            <td>
              <h2 class=\\"mx-2\\">
                :
              </h2>
            </td>
            <td class=\\"components-minute\\">
              <h2>
                00
              </h2>
            </td>
          </tr>
          <tr>
            <td class=\\"components-hour-down with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td>
            </td>
            <td class=\\"components-minute-down with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
"
`;

exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
"
<ul class=\\"nav nav-tabs nav-fill\\">
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer active\\">
      <span class=\\"me-1\\">
        Starts
      </span>
      <span class=\\"badge bg-light\\">
        now
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Ends
      </span>
      <span class=\\"badge bg-light\\">
        in 366d
      </span>
    </span>
  </li>
  <li class=\\"nav-item\\">
    <span class=\\"nav-link cursor-pointer \\">
      <span class=\\"me-1\\">
        Duration
      </span>
      <span class=\\"badge bg-light\\">
        366d
      </span>
    </span>
  </li>
</ul>
<div class=\\"tab-content mb-3\\">
  <div class=\\"d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2\\">
    <div class=\\"d-flex justify-content-center align-items-center\\">
      <div class=\\"components-date-range\\">
        <div class=\\"rdp-months\\">
          <div class=\\"rdp-month rdp-caption_start rdp-caption_end\\">
            <div class=\\"rdp-caption\\">
              <h2
                class=\\"rdp-caption_label\\"
                aria-live=\\"polite\\"
                aria-atomic=\\"true\\"
                id=\\"react-day-picker-3\\"
              >
                February 2060
              </h2>
              <div class=\\"rdp-nav\\">
                <button
                  aria-label=\\"Go to previous month\\"
                  class=\\"rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous\\"
                  type=\\"button\\"
                >
                  <svg
                    width=\\"16px\\"
                    height=\\"16px\\"
                    viewbox=\\"0 0 120 120\\"
                    class=\\"rdp-nav_icon\\"
                  >
                    <path
                      d=\\"M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z\\"
                      fill=\\"currentColor\\"
                      fill-rule=\\"nonzero\\"
                    >
                    </path>
                  </svg>
                </button>
                <button
                  aria-label=\\"Go to next month\\"
                  class=\\"rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next\\"
                  type=\\"button\\"
                >
                  <svg
                    width=\\"16px\\"
                    height=\\"16px\\"
                    viewbox=\\"0 0 120 120\\"
                    class=\\"rdp-nav_icon\\"
                  >
                    <path
                      d=\\"M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z\\"
                      fill=\\"currentColor\\"
                    >
                    </path>
                  </svg>
                </button>
              </div>
            </div>
            <table
              class=\\"rdp-table\\"
              role=\\"grid\\"
              aria-labelledby=\\"react-day-picker-3\\"
            >
              <thead class=\\"rdp-head\\">
                <tr class=\\"rdp-head_row\\">
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Su
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Sunday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Mo
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Monday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Tu
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Tuesday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      We
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Wednesday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Th
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Thursday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Fr
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Friday
                    </span>
                  </th>
                  <th
                    scope=\\"col\\"
                    class=\\"rdp-head_cell\\"
                  >
                    <span aria-hidden=\\"true\\">
                      Sa
                    </span>
                    <span class=\\"rdp-vhidden\\">
                      Saturday
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class=\\"rdp-tbody\\">
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_today rdp-day_range_start\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"0\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        1
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        1st February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        2
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        2nd February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        3
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        3rd February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        4
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        4th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        5
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        5th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        6
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        6th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        7
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        7th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        8
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        8th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        9
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        9th February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        10
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        10th February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        11
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        11th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        12
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        12th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        13
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        13th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        14
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        14th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        15
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        15th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        16
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        16th February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        17
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        17th February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        18
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        18th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        19
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        19th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        20
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        20th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        21
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        21st February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        22
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        22nd February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        23
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        23rd February (Monday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        24
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        24th February (Tuesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        25
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        25th February (Wednesday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        26
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        26th February (Thursday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        27
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        27th February (Friday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        28
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        28th February (Saturday)
                      </span>
                    </button>
                  </td>
                </tr>
                <tr class=\\"rdp-row\\">
                  <td class=\\"rdp-cell\\">
                    <button
                      class=\\"rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle\\"
                      aria-pressed=\\"true\\"
                      tabindex=\\"-1\\"
                      type=\\"button\\"
                    >
                      <span aria-hidden=\\"true\\">
                        29
                      </span>
                      <span class=\\"rdp-vhidden\\">
                        29th February (Sunday)
                      </span>
                    </button>
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                  <td class=\\"rdp-cell\\">
                  </td>
                </tr>
              </tbody>
              <tfoot class=\\"rdp-tfoot\\">
                <tr>
                  <td colspan=\\"8\\">
                    <div class=\\"d-flex justify-content-around mt-3\\">
                      <button
                        class=\\"btn btn-light btn-sm\\"
                        disabled
                      >
                        <svg
                          aria-hidden=\\"true\\"
                          focusable=\\"false\\"
                          data-prefix=\\"fas\\"
                          data-icon=\\"calendar-day\\"
                          class=\\"svg-inline--fa fa-calendar-day fa-fw me-1\\"
                          role=\\"img\\"
                          xmlns=\\"http://www.w3.org/2000/svg\\"
                          viewbox=\\"0 0 448 512\\"
                        >
                          <path
                            fill=\\"currentColor\\"
                            d=\\"M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM80 256C71.16 256 64 263.2 64 272V368C64 376.8 71.16 384 80 384H176C184.8 384 192 376.8 192 368V272C192 263.2 184.8 256 176 256H80z\\"
                          >
                          </path>
                        </svg>
                        Today
                      </button>
                    </div>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class=\\"d-flex justify-content-center align-items-center components-hour-minute\\">
      <table class=\\"text-center border-0\\">
        <tbody>
          <tr>
            <td class=\\"components-hour-up with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td>
            </td>
            <td class=\\"components-minute-up with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-up\\"
                  class=\\"svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
          </tr>
          <tr>
            <td class=\\"components-hour\\">
              <h2>
                00
              </h2>
            </td>
            <td>
              <h2 class=\\"mx-2\\">
                :
              </h2>
            </td>
            <td class=\\"components-minute\\">
              <h2>
                00
              </h2>
            </td>
          </tr>
          <tr>
            <td class=\\"components-hour-down with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
            <td>
            </td>
            <td class=\\"components-minute-down with-click\\">
              <span>
                <svg
                  aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"angle-down\\"
                  class=\\"svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 384 512\\"
                >
                  <path
                    fill=\\"currentColor\\"
                    d=\\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\\"
                  >
                  </path>
                </svg>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
"
`;
