@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap

@@ -1,3183 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`OverlayComponent > should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-default);
-  border-radius: var(--ictinus-border-radius-2);
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  background-color: var(--ictinus-color-background-default);
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  position: relative;
-  z-index: 10;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: var(--ictinus-spacing-5);
-  padding: var(--ictinus-spacing-7);
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-}
-
-.emotion-6 {
-  cursor: pointer;
-  margin: auto 0.3125rem;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  z-index: 10;
-}
-
-.emotion-7 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-default-active);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-tertiary-base);
-  padding: 0;
-  border-radius: var(--ictinus-border-radius-7);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-8:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-8:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-8:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-8:active:not(:disabled),
-.emotion-8[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-tertiary-contrast);
-}
-
-.emotion-9 {
-  padding: 0;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  text-align: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-}
-
-.emotion-10 {
-  margin: 0 var(--ictinus-spacing-4);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  cursor: pointer;
-  font-weight: var(--ictinus-weight-medium);
-}
-
-.emotion-12 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-default-active);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-tertiary-base);
-  padding: var(--ictinus-spacing-0) var(--ictinus-spacing-6) var(--ictinus-spacing-0) var(--ictinus-spacing-6);
-  border-radius: var(--ictinus-border-radius-2);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-12:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-12:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-12:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-12:active:not(:disabled),
-.emotion-12[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-tertiary-contrast);
-}
-
-.emotion-13 {
-  cursor: pointer;
-  margin: auto 0.3125rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  z-index: 10;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -ms-flex-pack: space-around;
-  -webkit-justify-content: space-around;
-  justify-content: space-around;
-}
-
-.emotion-17 {
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  color: var(--ictinus-color-text-default-secondary);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  font-size: var(--ictinus-font-size-3);
-  line-height: var(--ictinus-line-height-4);
-  text-align: center;
-  font-weight: var(--ictinus-weight-medium);
-}
-
-.emotion-24 {
-  border-collapse: separate;
-  border-spacing: 0 var(--ictinus-spacing-5);
-}
-
-.emotion-25 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  background: var(--ictinus-color-palette-tertiary-base);
-}
-
-.emotion-31 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-}
-
-.emotion-31:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-32 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-transparent);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-32:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-35 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 1;
-}
-
-.emotion-35:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-36 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-36:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-37 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-inverted-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-  background: var(--ictinus-color-palette-primary-contrast);
-  border-bottom-left-radius: 100%;
-  border-top-left-radius: 100%;
-}
-
-.emotion-37:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-37:after {
-  z-index: -1;
-  content: ' ';
-  height: 100%;
-  width: 50%;
-  position: absolute;
-  top: 0;
-  left: initial;
-  right: 0;
-  border-bottom-right-radius: false;
-  border-top-right-radius: false;
-  border-bottom-left-radius: 100%;
-  border-top-left-radius: 100%;
-}
-
-.emotion-38 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: 0 solid var(--ictinus-color-border-color-decorative-transparent);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-inverted-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: var(--ictinus-color-palette-primary-contrast);
-}
-
-.emotion-38:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: false;
-}
-
-.emotion-39 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-39:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-40 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-transparent);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-40:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: transparent;
-}
-
-.emotion-97 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-  height: var(--ictinus-sizing-15);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: var(--ictinus-spacing-4);
-  padding: 0 var(--ictinus-spacing-7);
-  border-top: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-default);
-}
-
-.emotion-101 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-inverted-primary);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-primary-base);
-  padding: var(--ictinus-spacing-0) var(--ictinus-spacing-6) var(--ictinus-spacing-0) var(--ictinus-spacing-6);
-  border-radius: var(--ictinus-border-radius-2);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-101:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-primary-muted);
-}
-
-.emotion-101:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-101:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-primary-muted);
-}
-
-.emotion-101:active:not(:disabled),
-.emotion-101[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-primary-contrast);
-}
-
-<div>
-  <div
-    class="emotion-0"
-  >
-    <div
-      class="emotion-1"
-      data-testid="buttonMonthsWrapperStyle"
-    >
-      <div
-        class="emotion-2"
-      >
-        <div
-          class="emotion-3"
-        >
-          <div
-            class="emotion-4"
-          >
-            <div
-              class="emotion-5"
-            >
-              <div
-                class="emotion-6"
-              >
-                <div
-                  class="emotion-7"
-                >
-                  <button
-                    class="emotion-8"
-                    data-slot="button"
-                    data-testid="icon-button-month_back"
-                    type="button"
-                  >
-                    <svg
-                      class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
-                      data-ictinus="test-version"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10.3598 13.6332C11.0111 14.176 12 13.7128 12 12.865V7.13504C12 6.2872 11.0111 5.82405 10.3598 6.36682L6.92186 9.23178C6.44211 9.63157 6.44211 10.3684 6.92187 10.7682L10.3598 13.6332Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div>
-                <div
-                  class="emotion-9"
-                >
-                  <div
-                    class="emotion-10"
-                    data-testid="month_header"
-                  >
-                    <div
-                      class="emotion-7"
-                    >
-                      <button
-                        class="emotion-12"
-                        data-slot="button"
-                        data-testid="button-month"
-                        type="button"
-                      >
-                        <span
-                          class="Text__t6529w6"
-                          data-ictinus="test-version"
-                        >
-                          November
-                           
-                          2020
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="emotion-13"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <button
-                      class="emotion-8"
-                      data-slot="button"
-                      data-testid="icon-button-month_forward"
-                      type="button"
-                    >
-                      <svg
-                        class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
-                        data-ictinus="test-version"
-                        viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.64018 13.6332C8.98886 14.176 8 13.7128 8 12.865V7.13504C8 6.2872 8.98886 5.82405 9.64018 6.36682L13.0781 9.23178C13.5579 9.63157 13.5579 10.3684 13.0781 10.7682L9.64018 13.6332Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="emotion-16"
-            >
-              <div
-                class="emotion-17"
-              >
-                Mo
-              </div>
-              <div
-                class="emotion-17"
-              >
-                Tu
-              </div>
-              <div
-                class="emotion-17"
-              >
-                We
-              </div>
-              <div
-                class="emotion-17"
-              >
-                Th
-              </div>
-              <div
-                class="emotion-17"
-              >
-                Fr
-              </div>
-              <div
-                class="emotion-17"
-              >
-                Sa
-              </div>
-              <div
-                class="emotion-17"
-              >
-                Su
-              </div>
-            </div>
-            <table
-              class="emotion-24"
-              data-testid="calendar_table"
-              tabindex="0"
-            >
-              <tbody>
-                <tr>
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-31"
-                      data-testid="1_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-32"
-                      >
-                        1
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-31"
-                      data-testid="2_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-32"
-                      >
-                        2
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-35"
-                      data-testid="3_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-36"
-                      >
-                        3
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-37"
-                      data-testid="4_11_2020_selected"
-                      tabindex="0"
-                    >
-                      <div
-                        class="emotion-38"
-                      >
-                        4
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="5_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        5
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="6_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        6
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="7_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        7
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="8_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        8
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="9_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        9
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="10_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        10
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="11_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        11
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="12_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        12
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="13_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        13
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="14_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        14
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="15_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        15
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="16_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        16
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="17_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        17
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="18_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        18
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="19_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        19
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="20_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        20
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="21_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        21
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="22_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        22
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="23_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        23
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="24_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        24
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="25_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        25
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="26_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        26
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="27_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        27
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="28_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        28
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="29_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        29
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-39"
-                      data-testid="30_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-40"
-                      >
-                        30
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                  <td
-                    class="emotion-25"
-                  />
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div
-        class="emotion-97"
-      >
-        <div
-          class="emotion-7"
-        >
-          <button
-            class="emotion-12"
-            data-slot="button"
-            data-testid="button-cancel"
-            type="button"
-          >
-            <span
-              class="Text__t6529w6"
-              data-ictinus="test-version"
-            >
-              Clear All
-            </span>
-          </button>
-        </div>
-        <div
-          class="emotion-7"
-        >
-          <button
-            class="emotion-101"
-            data-slot="button"
-            data-testid="button-apply"
-            type="button"
-          >
-            <span
-              class="Text__t6529w6"
-              data-ictinus="test-version"
-            >
-              Apply
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`OverlayComponent > should render datepicker correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-default);
-  border-radius: var(--ictinus-border-radius-2);
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  background-color: var(--ictinus-color-background-default);
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-3 {
-  border-right: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-default);
-}
-
-.emotion-4 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  white-space: nowrap;
-  padding: var(--ictinus-spacing-6);
-  font-weight: var(--ictinus-weight-regular);
-  cursor: pointer;
-  background-color: transparent;
-  position: relative;
-}
-
-.emotion-4:hover {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  position: relative;
-  z-index: 10;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: var(--ictinus-spacing-5);
-  padding: var(--ictinus-spacing-7);
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-}
-
-.emotion-10 {
-  cursor: pointer;
-  margin: auto 0.3125rem;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  z-index: 10;
-}
-
-.emotion-11 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-12 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-default-active);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-tertiary-base);
-  padding: 0;
-  border-radius: var(--ictinus-border-radius-7);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-12:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-12:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-12:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-12:active:not(:disabled),
-.emotion-12[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-tertiary-contrast);
-}
-
-.emotion-13 {
-  padding: 0;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  text-align: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-}
-
-.emotion-14 {
-  margin: 0 var(--ictinus-spacing-4);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  font-weight: var(--ictinus-weight-medium);
-}
-
-.emotion-16 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-default-active);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-tertiary-base);
-  padding: var(--ictinus-spacing-0) var(--ictinus-spacing-6) var(--ictinus-spacing-0) var(--ictinus-spacing-6);
-  border-radius: var(--ictinus-border-radius-2);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-16:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-16:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-16:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-16:active:not(:disabled),
-.emotion-16[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-tertiary-contrast);
-}
-
-.emotion-17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -ms-flex-pack: space-around;
-  -webkit-justify-content: space-around;
-  justify-content: space-around;
-}
-
-.emotion-18 {
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  color: var(--ictinus-color-text-default-secondary);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  font-size: var(--ictinus-font-size-3);
-  line-height: var(--ictinus-line-height-4);
-  text-align: center;
-  font-weight: var(--ictinus-weight-medium);
-}
-
-.emotion-25 {
-  border-collapse: separate;
-  border-spacing: 0 var(--ictinus-spacing-5);
-}
-
-.emotion-26 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  background: var(--ictinus-color-palette-tertiary-base);
-}
-
-.emotion-32 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-}
-
-.emotion-32:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-33 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-transparent);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-33:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-36 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 1;
-}
-
-.emotion-36:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-37 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-37:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-38 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-inverted-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-  background: var(--ictinus-color-palette-primary-contrast);
-  border-bottom-left-radius: 100%;
-  border-top-left-radius: 100%;
-}
-
-.emotion-38:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-38:after {
-  z-index: -1;
-  content: ' ';
-  height: 100%;
-  width: 50%;
-  position: absolute;
-  top: 0;
-  left: initial;
-  right: 0;
-  border-bottom-right-radius: false;
-  border-top-right-radius: false;
-  border-bottom-left-radius: 100%;
-  border-top-left-radius: 100%;
-}
-
-.emotion-39 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: 0 solid var(--ictinus-color-border-color-decorative-transparent);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-inverted-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: var(--ictinus-color-palette-primary-contrast);
-}
-
-.emotion-39:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: false;
-}
-
-.emotion-40 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-.emotion-40:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-41 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-transparent);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-41:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: transparent;
-}
-
-.emotion-104 {
-  cursor: pointer;
-  margin: auto 0.3125rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  z-index: 10;
-}
-
-.emotion-149 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-inverted-primary);
-  width: var(--ictinus-sizing-9);
-  opacity: 1;
-  background: var(--ictinus-color-palette-primary-contrast);
-  border-bottom-right-radius: 100%;
-  border-top-right-radius: 100%;
-}
-
-.emotion-149:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-149:after {
-  z-index: -1;
-  content: ' ';
-  height: 100%;
-  width: 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: initial;
-  border-bottom-right-radius: 100%;
-  border-top-right-radius: 100%;
-  border-bottom-left-radius: false;
-  border-top-left-radius: false;
-}
-
-.emotion-182 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-  height: var(--ictinus-sizing-15);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: var(--ictinus-spacing-4);
-  padding: 0 var(--ictinus-spacing-7);
-  border-top: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-decorative-default);
-}
-
-.emotion-186 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  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;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  gap: var(--ictinus-spacing-4);
-  color: var(--ictinus-color-text-inverted-primary);
-  height: var(--ictinus-sizing-9);
-  background-color: var(--ictinus-color-palette-primary-base);
-  padding: var(--ictinus-spacing-0) var(--ictinus-spacing-6) var(--ictinus-spacing-0) var(--ictinus-spacing-6);
-  border-radius: var(--ictinus-border-radius-2);
-  border: none;
-  cursor: pointer;
-  -webkit-transition: background-color,border 150ms linear;
-  transition: background-color,border 150ms linear;
-}
-
-.emotion-186:focus-visible:not(:disabled) {
-  background-color: var(--ictinus-color-palette-primary-muted);
-}
-
-.emotion-186:disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-186:hover:not(:disabled) {
-  background-color: var(--ictinus-color-palette-primary-muted);
-}
-
-.emotion-186:active:not(:disabled),
-.emotion-186[aria-expanded="true"] {
-  background-color: var(--ictinus-color-palette-primary-contrast);
-}
-
-<div>
-  <div
-    class="emotion-0"
-  >
-    <div
-      class="emotion-1"
-      data-testid="buttonMonthsWrapperStyle"
-    >
-      <div
-        class="emotion-2"
-      >
-        <div
-          class="emotion-3"
-          data-testid="optionsWrapperStyle"
-        >
-          <div
-            class="emotion-4"
-          >
-            Last 7 days
-          </div>
-          <div
-            class="emotion-4"
-          >
-            Last 30 days
-          </div>
-          <div
-            class="emotion-4"
-          >
-            Custom
-          </div>
-        </div>
-        <div
-          class="emotion-7"
-        >
-          <div
-            class="emotion-8"
-          >
-            <div
-              class="emotion-9"
-            >
-              <div
-                class="emotion-10"
-              >
-                <div
-                  class="emotion-11"
-                >
-                  <button
-                    class="emotion-12"
-                    data-slot="button"
-                    data-testid="icon-button-month_back"
-                    type="button"
-                  >
-                    <svg
-                      class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
-                      data-ictinus="test-version"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10.3598 13.6332C11.0111 14.176 12 13.7128 12 12.865V7.13504C12 6.2872 11.0111 5.82405 10.3598 6.36682L6.92186 9.23178C6.44211 9.63157 6.44211 10.3684 6.92187 10.7682L10.3598 13.6332Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div>
-                <div
-                  class="emotion-13"
-                >
-                  <div
-                    class="emotion-14"
-                    data-testid="month_header"
-                  >
-                    <div
-                      class="emotion-11"
-                    >
-                      <button
-                        class="emotion-16"
-                        data-slot="button"
-                        data-testid="button-left_month"
-                        type="button"
-                      >
-                        <span
-                          class="Text__t6529w6"
-                          data-ictinus="test-version"
-                        >
-                          November
-                           
-                          2020
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="emotion-17"
-            >
-              <div
-                class="emotion-18"
-              >
-                Mo
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Tu
-              </div>
-              <div
-                class="emotion-18"
-              >
-                We
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Th
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Fr
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Sa
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Su
-              </div>
-            </div>
-            <table
-              class="emotion-25"
-              data-testid="calendar_table"
-              tabindex="0"
-            >
-              <tbody>
-                <tr>
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="1_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        1
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="2_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        2
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-36"
-                      data-testid="3_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-37"
-                      >
-                        3
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-38"
-                      data-testid="4_11_2020_selected"
-                      tabindex="0"
-                    >
-                      <div
-                        class="emotion-39"
-                      >
-                        4
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="5_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        5
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="6_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        6
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="7_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        7
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="8_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        8
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="9_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        9
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="10_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        10
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="11_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        11
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="12_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        12
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="13_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        13
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="14_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        14
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="15_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        15
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="16_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        16
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="17_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        17
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="18_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        18
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="19_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        19
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="20_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        20
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="21_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        21
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="22_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        22
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="23_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        23
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="24_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        24
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="25_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        25
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="26_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        26
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="27_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        27
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="28_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        28
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="29_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        29
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="30_11_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        30
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="emotion-8"
-          >
-            <div
-              class="emotion-9"
-            >
-              <div>
-                <div
-                  class="emotion-13"
-                >
-                  <div
-                    class="emotion-14"
-                    data-testid="month_header"
-                  >
-                    <div
-                      class="emotion-11"
-                    >
-                      <button
-                        class="emotion-16"
-                        data-slot="button"
-                        data-testid="button-right_month"
-                        type="button"
-                      >
-                        <span
-                          class="Text__t6529w6"
-                          data-ictinus="test-version"
-                        >
-                          December
-                           
-                          2020
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="emotion-104"
-                >
-                  <div
-                    class="emotion-11"
-                  >
-                    <button
-                      class="emotion-12"
-                      data-slot="button"
-                      data-testid="icon-button-month_forward"
-                      type="button"
-                    >
-                      <svg
-                        class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
-                        data-ictinus="test-version"
-                        viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.64018 13.6332C8.98886 14.176 8 13.7128 8 12.865V7.13504C8 6.2872 8.98886 5.82405 9.64018 6.36682L13.0781 9.23178C13.5579 9.63157 13.5579 10.3684 13.0781 10.7682L9.64018 13.6332Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="emotion-17"
-            >
-              <div
-                class="emotion-18"
-              >
-                Mo
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Tu
-              </div>
-              <div
-                class="emotion-18"
-              >
-                We
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Th
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Fr
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Sa
-              </div>
-              <div
-                class="emotion-18"
-              >
-                Su
-              </div>
-            </div>
-            <table
-              class="emotion-25"
-              data-testid="calendar_table"
-              tabindex="0"
-            >
-              <tbody>
-                <tr>
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="1_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        1
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="2_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        2
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="3_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        3
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="4_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        4
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="5_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        5
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="6_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        6
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="7_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        7
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="8_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        8
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="9_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        9
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="10_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        10
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="11_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        11
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="12_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        12
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="13_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        13
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="14_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        14
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="15_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        15
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-40"
-                      data-testid="16_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-41"
-                      >
-                        16
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-149"
-                      data-testid="17_12_2020_selected"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-39"
-                      >
-                        17
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="18_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        18
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="19_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        19
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="20_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        20
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="21_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        21
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="22_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        22
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="23_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        23
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="24_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        24
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="25_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        25
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="26_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        26
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="27_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        27
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="28_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        28
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="29_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        29
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="30_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        30
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    style="padding: 0px;"
-                  >
-                    <div
-                      class="emotion-32"
-                      data-testid="31_12_2020"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="emotion-33"
-                      >
-                        31
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                  <td
-                    class="emotion-26"
-                  />
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div
-        class="emotion-182"
-      >
-        <div
-          class="emotion-11"
-        >
-          <button
-            class="emotion-16"
-            data-slot="button"
-            data-testid="button-cancel"
-            type="button"
-          >
-            <span
-              class="Text__t6529w6"
-              data-ictinus="test-version"
-            >
-              Clear All
-            </span>
-          </button>
-        </div>
-        <div
-          class="emotion-11"
-        >
-          <button
-            class="emotion-186"
-            data-slot="button"
-            data-testid="button-apply"
-            type="button"
-          >
-            <span
-              class="Text__t6529w6"
-              data-ictinus="test-version"
-            >
-              Apply
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;