cronofy-elements 1.48.2 → 1.49.2

package/tests/AvailabilityRules/__snapshots__/AvailabilityRules.test.js.snap

@@ -1,1045 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules component 1`] = `
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-.emotion-0 {
-  box-sizing: border-box;
-  font-size: 16px;
-  width: 100%;
-  min-height: 300px;
-  height: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
-  -ms-flex-pack: stretch;
-  justify-content: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-transition: height 0.2s;
-  transition: height 0.2s;
-  position: relative;
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-bottom: 40px;
-}
-
-.emotion-0 .visuallyhidden {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-0 .visuallyhidden.focusable:active,
-.emotion-0 .visuallyhidden.focusable:focus {
-  -webkit-clip: auto;
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
-}
-
-.emotion-0 *,
-.emotion-0 *:before,
-.emotion-0 *:after {
-  box-sizing: inherit;
-}
-
-.emotion-0 button {
-  font-family: inherit;
-}
-
-.emotion-0 a {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-
-.emotion-0 h1,
-.emotion-0 h2,
-.emotion-0 h3,
-.emotion-0 h4,
-.emotion-0 h5,
-.emotion-0 h6 {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-.emotion-0*,
-.emotion-0*:before,
-.emotion-0*:after {
-  box-sizing: inherit;
-}
-
-@media (max-width:550px) {
-  .emotion-0 {
-    overflow: hidden;
-  }
-}
-
-.emotion-1 {
-  z-index: 5;
-  position: relative;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-@media (max-width:650px) {
-  .emotion-1 {
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-  }
-}
-
-.emotion-2 {
-  display: block;
-  margin-right: 12px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-@media (max-width:650px) {
-  .emotion-2 {
-    margin-bottom: 10px;
-  }
-}
-
-.emotion-3 {
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  border: 1px solid #D8D8D8;
-  background: #FFFFFF;
-  border-radius: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 5px 5px 0 5px;
-  position: relative;
-}
-
-.emotion-4 {
-  width: 28px;
-  height: 28px;
-  padding: 4px;
-  fill: #4D4D4D;
-  -webkit-animation: animation-0 infinite linear 1s;
-  animation: animation-0 infinite linear 1s;
-}
-
-.emotion-5 {
-  position: relative;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media (max-width:650px) {
-  .emotion-5 {
-    margin-top: 16px;
-  }
-}
-
-.emotion-6 {
-  display: block;
-  width: 60px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-@media (max-width:650px) {
-  .emotion-6 {
-    width: 24px;
-  }
-}
-
-.emotion-7 {
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.emotion-8 {
-  height: 40px;
-  line-height: 40px;
-  width: 100px;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  text-transform: capitalize;
-  text-align: center;
-}
-
-.emotion-15 {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.emotion-16 {
-  position: relative;
-  width: 60px;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  padding-right: 4px;
-}
-
-@media (max-width:650px) {
-  .emotion-16 {
-    width: 24px;
-  }
-}
-
-.emotion-17 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-  display: inline-block;
-  border: none;
-  border-radius: 0;
-  font-family: inherit;
-  font-size: 1em;
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  cursor: pointer;
-  width: 100%;
-  height: 40px;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.emotion-17:hover>svg {
-  fill: #15B3D6;
-}
-
-.emotion-18 {
-  position: absolute;
-  top: 50%;
-  right: 50%;
-  width: 16px;
-  height: 16px;
-  fill: #4D4D4D;
-  -webkit-transform: translate(50%,-50%) rotate(-90deg);
-  -ms-transform: translate(50%,-50%) rotate(-90deg);
-  transform: translate(50%,-50%) rotate(-90deg);
-  -webkit-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  pointer-events: none;
-}
-
-.emotion-19 {
-  height: 40px;
-  line-height: 1;
-  text-align: right;
-  font-size: 12px;
-  text-transform: lowercase;
-  -webkit-transform: translateY(-6px);
-  -ms-transform: translateY(-6px);
-  transform: translateY(-6px);
-  padding-right: 2px;
-  width: 60px;
-}
-
-@media (max-width:650px) {
-  .emotion-19 {
-    width: 24px;
-  }
-}
-
-.emotion-27 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-  display: inline-block;
-  border: none;
-  border-radius: 0;
-  font-family: inherit;
-  font-size: 1em;
-  display: block;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  z-index: 1;
-  cursor: pointer;
-  width: 100%;
-  height: 40px;
-  -webkit-transform: translateY(50%);
-  -ms-transform: translateY(50%);
-  transform: translateY(50%);
-}
-
-.emotion-27:hover>svg {
-  fill: #15B3D6;
-}
-
-.emotion-28 {
-  position: absolute;
-  top: 50%;
-  right: 50%;
-  width: 16px;
-  height: 16px;
-  fill: #4D4D4D;
-  -webkit-transform: translate(50%,-50%) rotate(90deg);
-  -ms-transform: translate(50%,-50%) rotate(90deg);
-  transform: translate(50%,-50%) rotate(90deg);
-  -webkit-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  pointer-events: none;
-}
-
-.emotion-29 {
-  width: 100%;
-}
-
-.emotion-30 {
-  position: relative;
-  height: 320px;
-}
-
-.emotion-31 {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  border: 1px solid #D8D8D8;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-}
-
-.emotion-32 {
-  display: block;
-  margin: 0;
-  padding: 0;
-  height: 40px;
-  width: 100%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-  position: relative;
-}
-
-.emotion-32:first-of-type .PREFIX__tick-mark {
-  display: none;
-}
-
-.emotion-33 {
-  width: 100%;
-  height: 1.5px;
-  position: absolute;
-  top: -1px;
-  left: 0;
-}
-
-.emotion-48 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.2);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-49 {
-  width: 2em;
-  height: 2em;
-  fill: #ffffff;
-  -webkit-animation: animation-0 infinite linear 1s;
-  animation: animation-0 infinite linear 1s;
-}
-
-.emotion-50 {
-  margin-top: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
-  -ms-flex-pack: stretch;
-  justify-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-@media (max-width:650px) {
-  .emotion-50 {
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-align-items: flex-end;
-    -webkit-box-align: flex-end;
-    -ms-flex-align: flex-end;
-    align-items: flex-end;
-  }
-}
-
-.emotion-51 {
-  display: block;
-  width: 60px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-@media (max-width:650px) {
-  .emotion-51 {
-    display: none;
-  }
-}
-
-.emotion-52 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-@media (max-width:650px) {
-  .emotion-52 {
-    margin-bottom: 16px;
-  }
-}
-
-.emotion-53 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: 20px;
-}
-
-.emotion-54 {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #D8D8D8;
-  margin-right: 10px;
-  background: #E2FAC8;
-}
-
-.emotion-56 {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #D8D8D8;
-  margin-right: 10px;
-  background: #FFFFFF;
-}
-
-.emotion-57 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  padding-right: 1em;
-}
-
-@media (max-width:650px) {
-  .emotion-57 {
-    margin-bottom: 16px;
-  }
-}
-
-.emotion-58 {
-  padding: 0.3em 0.6em 0 0;
-  margin: 0;
-}
-
-.emotion-59 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: none;
-  display: inline-block;
-  border: none;
-  border-radius: 0;
-  font-family: inherit;
-  font-size: 1em;
-  display: block;
-  cursor: pointer;
-  position: relative;
-  background: #15B3D6;
-  color: #FFFFFF;
-  padding: 10px;
-  border-radius: 2px;
-  min-width: 132px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  text-align: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-<div
-  class="PREFIX AR emotion-0"
->
-  <div
-    class="PREFIX__calendars emotion-1"
-  >
-    <span
-      class="PREFIX__calendars__title emotion-2"
-    >
-      Included calendars
-    </span>
-    <div
-      class="PREFIX__calendars__selector emotion-3"
-    >
-      <svg
-        class="emotion-4"
-        viewBox="0 0 489.711 489.711"
-      >
-        <path
-          d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z"
-        />
-        <path
-          d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    class="PREFIX__label-row emotion-5"
-  >
-    <div
-      class="spacer emotion-6"
-    />
-    <div
-      class="emotion-7"
-    >
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Sun
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Mon
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Tue
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Wed
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Thu
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Fri
-      </div>
-      <div
-        class="PREFIX__label--day emotion-8"
-      >
-        Sat
-      </div>
-    </div>
-  </div>
-  <div
-    class="PREFIX__wrapper emotion-15"
-  >
-    <div
-      class="PREFIX__label-column emotion-16"
-    >
-      <button
-        class="PREFIX__time-expander-button PREFIX__time-expander-button--backwards emotion-17"
-        type="button"
-      >
-        <span
-          class="visuallyhidden"
-        >
-          Earlier
-        </span>
-        <svg
-          class="PREFIX__time-expander-button-icon emotion-18"
-          viewBox="0 0 512 364"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M323.114,3.795 C327.274,-0.365 334.037,-0.365 338.197,3.795 L338.197,3.795 L508.466432,174.062857 C510.636034,176.015872 512.001,178.845594 512.001,181.992 C512.001,184.915901 510.822508,187.566325 508.914941,189.493853 L508.864,189.545 L508.864,189.545 L508.84,189.568 L338.198,360.211 C336.21425,362.19475 333.624354,363.237137 331.008322,363.320559 L330.667,363.326 C327.936,363.326 325.206,362.28 323.115,360.211 C318.955,356.051 318.955,349.288 323.115,345.128 L323.115,345.128 L475.583,192.658 L10.667,192.659 C4.87396774,192.659 0.154449792,188.032918 0.00371430969,182.276022 L0,181.992 C0,176.104 4.779,171.325 10.667,171.325 L10.667,171.325 L475.559,171.324 L323.114,18.878 C319.028286,14.7922857 318.955327,8.19570568 322.895122,4.02031761 Z"
-          />
-        </svg>
-      </button>
-      <div
-        class="PREFIX__label--time emotion-19"
-      />
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        10:00 AM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        11:00 AM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        12:00 PM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        1:00 PM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        2:00 PM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        3:00 PM
-      </div>
-      <div
-        class="PREFIX__label--time emotion-19"
-      >
-        4:00 PM
-      </div>
-      <button
-        class="PREFIX__time-expander-button PREFIX__time-expander-button--forwards emotion-27"
-        type="button"
-      >
-        <span
-          class="visuallyhidden"
-        >
-          Later
-        </span>
-        <svg
-          class="PREFIX__time-expander-button-icon emotion-28"
-          viewBox="0 0 512 364"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M323.114,3.795 C327.274,-0.365 334.037,-0.365 338.197,3.795 L338.197,3.795 L508.466432,174.062857 C510.636034,176.015872 512.001,178.845594 512.001,181.992 C512.001,184.915901 510.822508,187.566325 508.914941,189.493853 L508.864,189.545 L508.864,189.545 L508.84,189.568 L338.198,360.211 C336.21425,362.19475 333.624354,363.237137 331.008322,363.320559 L330.667,363.326 C327.936,363.326 325.206,362.28 323.115,360.211 C318.955,356.051 318.955,349.288 323.115,345.128 L323.115,345.128 L475.583,192.658 L10.667,192.659 C4.87396774,192.659 0.154449792,188.032918 0.00371430969,182.276022 L0,181.992 C0,176.104 4.779,171.325 10.667,171.325 L10.667,171.325 L475.559,171.324 L323.114,18.878 C319.028286,14.7922857 318.955327,8.19570568 322.895122,4.02031761 Z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="emotion-29"
-    >
-      <div
-        class="PREFIX__grid emotion-30"
-      >
-        <div
-          class="PREFIX__grid-border emotion-31"
-        >
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              09:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              10:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              11:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              12:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              13:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              14:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              15:00
-            </span>
-          </div>
-          <div
-            class="PREFIX__tick-mark-wrapper emotion-32"
-          >
-            <svg
-              class="PREFIX__tick-mark emotion-33"
-              preserveAspectRatio="none"
-              viewBox="0 0 500 1"
-            >
-              <path
-                d="M0,1 L500,1"
-                stroke="#D8D8D8"
-                stroke-dasharray="3,4"
-                stroke-linecap="square"
-                stroke-width="1.5px"
-              />
-            </svg>
-            <span
-              class="visuallyhidden"
-            >
-              16:00
-            </span>
-          </div>
-        </div>
-        <div
-          class="PREFIX__loading-wrapper emotion-48"
-        >
-          <svg
-            class="emotion-49"
-            viewBox="0 0 489.711 489.711"
-          >
-            <path
-              d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z"
-            />
-            <path
-              d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z"
-            />
-          </svg>
-          <span
-            class="visuallyhidden"
-          >
-            Loading
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="PREFIX__footer emotion-50"
-  >
-    <div
-      class="PREFIX__footer-spacer emotion-51"
-    />
-    <div
-      class="PREFIX__legend emotion-52"
-    >
-      <div
-        class="PREFIX__legend-item emotion-53"
-      >
-        <div
-          class="PREFIX__example PREFIX__example--available emotion-54"
-        />
-        <span
-          class="PREFIX__legend-label"
-        >
-          Available
-        </span>
-      </div>
-      <div
-        class="PREFIX__legend-item emotion-53"
-      >
-        <div
-          class="PREFIX__example PREFIX__example--unavailable emotion-56"
-        />
-        <span
-          class="PREFIX__legend-label"
-        >
-          Unavailable
-        </span>
-      </div>
-    </div>
-    <div
-      class="PREFIX__timezone emotion-57"
-    >
-      <p
-        class="emotion-58"
-      >
-        Time Zone
-      </p>
-      <div
-        class="PREFIX__timezone-selector AR__timezone-selector"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-label="Choose a timezone"
-          class="PREFIX__timezone-selector--button AR__timezone-selector--button"
-          id="timezone-button"
-          type="button"
-        >
-          London
-          <svg
-            aria-hidden="true"
-            class="PREFIX__timezone-selector--icon AR__timezone-selector--icon"
-            viewBox="0 0 13 7"
-          >
-            <path
-              d="M.809 1.315L2.124 0l4.383 4.342L10.876.013l1.315 1.302L6.507 7l-.939-.938z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <button
-      class="PREFIX__submit emotion-59"
-      type="button"
-    >
-      Save new rules
-    </button>
-  </div>
-</div>
-`;