// 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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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="rdp components-date-range">
        <div class="rdp-months">
          <div class="rdp-month rdp-caption_start rdp-caption_end">
            <div class="rdp-caption">
              <div
                class="rdp-caption_label"
                aria-live="polite"
                role="presentation"
                id="react-day-picker-6"
              >
                February 2061
              </div>
              <div class="rdp-nav">
                <button
                  name="previous-month"
                  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
                  name="next-month"
                  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"
                    aria-label="Sunday"
                  >
                    Su
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Monday"
                  >
                    Mo
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Tuesday"
                  >
                    Tu
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Wednesday"
                  >
                    We
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Thursday"
                  >
                    Th
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Friday"
                  >
                    Fr
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Saturday"
                  >
                    Sa
                  </th>
                </tr>
              </thead>
              <tbody class="rdp-tbody">
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_end"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="0"
                      type="button"
                    >
                      1
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      2
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      3
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      4
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      5
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      6
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      7
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      8
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      9
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      10
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      11
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      12
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      13
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      14
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      15
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      16
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      17
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      18
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      19
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      20
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      21
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      22
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      23
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      24
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      25
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      26
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      27
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day"
                      role="gridcell"
                      tabindex="-1"
                      type="button"
                    >
                      28
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </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="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm80 64c-8.8 0-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16l96 0c8.8 0 16-7.2 16-16l0-96c0-8.8-7.2-16-16-16l-96 0z"
                          >
                          </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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="rdp components-date-range">
        <div class="rdp-months">
          <div class="rdp-month rdp-caption_start rdp-caption_end">
            <div class="rdp-caption">
              <div
                class="rdp-caption_label"
                aria-live="polite"
                role="presentation"
                id="react-day-picker-3"
              >
                February 2060
              </div>
              <div class="rdp-nav">
                <button
                  name="previous-month"
                  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
                  name="next-month"
                  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"
                    aria-label="Sunday"
                  >
                    Su
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Monday"
                  >
                    Mo
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Tuesday"
                  >
                    Tu
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Wednesday"
                  >
                    We
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Thursday"
                  >
                    Th
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Friday"
                  >
                    Fr
                  </th>
                  <th
                    scope="col"
                    class="rdp-head_cell"
                    aria-label="Saturday"
                  >
                    Sa
                  </th>
                </tr>
              </thead>
              <tbody class="rdp-tbody">
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_today rdp-day_range_start"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="0"
                      type="button"
                    >
                      1
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      2
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      3
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      4
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      5
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      6
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      7
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      8
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      9
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      10
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      11
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      12
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      13
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      14
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      15
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      16
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      17
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      18
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      19
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      20
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      21
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      22
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      23
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      24
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      25
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      26
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      27
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      28
                    </button>
                  </td>
                </tr>
                <tr class="rdp-row">
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <button
                      name="day"
                      class="rdp-button_reset rdp-button rdp-day rdp-day_selected rdp-day_range_middle"
                      role="gridcell"
                      aria-selected="true"
                      tabindex="-1"
                      type="button"
                    >
                      29
                    </button>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </td>
                  <td
                    class="rdp-cell"
                    role="presentation"
                  >
                    <div role="gridcell">
                    </div>
                  </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="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm80 64c-8.8 0-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16l96 0c8.8 0 16-7.2 16-16l0-96c0-8.8-7.2-16-16-16l-96 0z"
                          >
                          </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </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 448 512"
                >
                  <path
                    fill="currentColor"
                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
                  >
                  </path>
                </svg>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
"
`;
