@alfalab/core-components 27.0.0-beta.0 → 27.0.0

package/calendar/modern/components/header/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_sr4za","withShadow":"calendar__withShadow_sr4za"};
+var styles = {"header":"calendar__header_xqijo","withShadow":"calendar__withShadow_xqijo"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => {

package/calendar/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1u059 */
+/* hash: 1ciq4 */
 :root {
     --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__header_sr4za {
+.calendar__header_xqijo {
     width: 100%;
     box-sizing: border-box;
     padding: var(--gap-m) 0 var(--gap-s);
@@ -40,6 +40,6 @@
     display: flex;
     justify-content: center;
 }
-.calendar__withShadow_sr4za {
+.calendar__withShadow_xqijo {
     box-shadow: var(--shadow-s);
 }

package/calendar/modern/components/month-year-header/Component.js

@@ -26,7 +26,7 @@ import '../../../../button/modern';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"component":"calendar__component_gf7mj","button":"calendar__button_gf7mj","month":"calendar__month_gf7mj","year":"calendar__year_gf7mj","buttonContent":"calendar__buttonContent_gf7mj","upDownIcon":"calendar__upDownIcon_gf7mj"};
+var styles = {"component":"calendar__component_5vcbf","button":"calendar__button_5vcbf","month":"calendar__month_5vcbf","year":"calendar__year_5vcbf","buttonContent":"calendar__buttonContent_5vcbf","upDownIcon":"calendar__upDownIcon_5vcbf"};
 require('./index.css');
 
 const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, }) => {

package/calendar/modern/components/month-year-header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ep9t */
+/* hash: 16iox */
 :root {
 
     /* Hard */
@@ -33,44 +33,44 @@
 
     /* marker */
 }
-.calendar__component_gf7mj {
+.calendar__component_5vcbf {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__button_gf7mj {
+.calendar__button_5vcbf {
     border-radius: var(--border-radius-s);
 }
-.calendar__month_gf7mj {
+.calendar__month_5vcbf {
     flex-basis: 65%
 }
 @media (max-width: 374px) {
-.calendar__month_gf7mj {
+.calendar__month_5vcbf {
         flex-grow: 1
 }
     }
-.calendar__year_gf7mj {
+.calendar__year_5vcbf {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__year_gf7mj {
+.calendar__year_5vcbf {
         width: 90px
 }
     }
-.calendar__buttonContent_gf7mj {
+.calendar__buttonContent_5vcbf {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
-.calendar__upDownIcon_gf7mj {
+.calendar__upDownIcon_5vcbf {
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__upDownIcon_gf7mj {
+.calendar__upDownIcon_5vcbf {
         margin-left: auto
 }
     }

package/calendar/modern/components/months-table/Component.js

@@ -27,7 +27,7 @@ import '../../../../button/modern';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_16xql","button":"calendar__button_16xql"};
+var styles = {"monthsTable":"calendar__monthsTable_qbwri","button":"calendar__button_qbwri"};
 require('./index.css');
 
 const MonthsTable = ({ selectedMonth, months = [], getMonthProps, }) => {

package/calendar/modern/components/months-table/index.css

@@ -1,4 +1,4 @@
-/* hash: sreuj */
+/* hash: 1nqgl */
 :root {
 
     /* Hard */
@@ -33,38 +33,38 @@
 
     /* marker */
 }
-.calendar__monthsTable_16xql {
+.calendar__monthsTable_qbwri {
     display: flex;
     flex-wrap: wrap;
     width: var(--calendar-inner-width);
     justify-content: flex-start
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_16xql {
+.calendar__monthsTable_qbwri {
         width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_16xql {
+.calendar__button_qbwri {
     width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
     margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_16xql:nth-child(3n) {
+.calendar__button_qbwri:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_16xql {
+.calendar__button_qbwri {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_16xql:nth-child(3n) {
+        .calendar__button_qbwri:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_16xql:nth-child(2n) {
+        .calendar__button_qbwri:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_16xql {
+.calendar__button_qbwri {
 
         height: 36px
 }

package/calendar/modern/components/period-slider/Component.js

@@ -37,7 +37,7 @@ import { monthName } from '../../utils.js';
 import { IconButton } from '../../../../icon-button/modern';
 import { formatPeriod, getYearSelectorValue, shiftValues } from './utils.js';
 
-var styles = {"component":"calendar__component_18trg","period":"calendar__period_18trg","empty":"calendar__empty_18trg","arrow":"calendar__arrow_18trg","full":"calendar__full_18trg","yearSelectorButton":"calendar__yearSelectorButton_18trg"};
+var styles = {"component":"calendar__component_1wzp4","period":"calendar__period_1wzp4","empty":"calendar__empty_1wzp4","arrow":"calendar__arrow_1wzp4","full":"calendar__full_1wzp4","yearSelectorButton":"calendar__yearSelectorButton_1wzp4"};
 require('./index.css');
 
 const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, dataTestId, }) => {

package/calendar/modern/components/period-slider/index.css

@@ -1,4 +1,4 @@
-/* hash: rl9bt */
+/* hash: 1l5d5 */
 :root {
     --color-light-text-secondary: #546272;
 }
@@ -40,14 +40,14 @@
 
     /* marker */
 }
-.calendar__component_18trg {
+.calendar__component_1wzp4 {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__period_18trg {
+.calendar__period_1wzp4 {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
@@ -55,30 +55,30 @@
     text-align: center
 }
 @media (max-width: 374px) {
-.calendar__period_18trg {
+.calendar__period_1wzp4 {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__empty_18trg {
+.calendar__empty_1wzp4 {
     color: var(--color-light-text-secondary);
 }
-.calendar__arrow_18trg {
+.calendar__arrow_1wzp4 {
     position: absolute;
     top: 4px
 }
-.calendar__arrow_18trg:first-child {
+.calendar__arrow_1wzp4:first-child {
         left: 0;
     }
-.calendar__arrow_18trg:last-child {
+.calendar__arrow_1wzp4:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_18trg .calendar__arrow_18trg {
+.calendar__full_1wzp4 .calendar__arrow_1wzp4 {
         display: none
 }
     }
-.calendar__yearSelectorButton_18trg {
+.calendar__yearSelectorButton_1wzp4 {
     margin-left: var(--gap-xs);
 }

package/calendar/modern/components/select-button/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/modern';
 
-var styles = {"button":"calendar__button_euvin","filled":"calendar__filled_euvin","outlined":"calendar__outlined_euvin","selected":"calendar__selected_euvin"};
+var styles = {"button":"calendar__button_1m2l3","filled":"calendar__filled_1m2l3","outlined":"calendar__outlined_1m2l3","selected":"calendar__selected_1m2l3"};
 require('./index.css');
 
 const SelectButton = forwardRef(({ className, children, view = 'default', ...restProps }, ref) => (React.createElement(Button, Object.assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }), children)));

package/calendar/modern/components/select-button/index.css

@@ -1,4 +1,4 @@
-/* hash: mj1jp */
+/* hash: 51mf7 */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-tertiary: #e7e9eb;
@@ -43,7 +43,7 @@
 
     /* marker */
 }
-.calendar__button_euvin {
+.calendar__button_1m2l3 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -54,28 +54,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-l)
 }
-.calendar__button_euvin:not(:disabled):hover {
+.calendar__button_1m2l3:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_euvin.calendar__filled_euvin {
+.calendar__button_1m2l3.calendar__filled_1m2l3 {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_euvin.calendar__filled_euvin:not(:disabled):hover {
+.calendar__button_1m2l3.calendar__filled_1m2l3:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_euvin.calendar__outlined_euvin {
+.calendar__button_1m2l3.calendar__outlined_1m2l3 {
         border: 1px solid var(--calendar-select-button-today-border-color);
     }
-.calendar__button_euvin.calendar__selected_euvin,
-    .calendar__button_euvin.calendar__selected_euvin:disabled {
+.calendar__button_1m2l3.calendar__selected_1m2l3,
+    .calendar__button_1m2l3.calendar__selected_1m2l3:disabled {
         background-color: var(--calendar-select-button-selected-background);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_euvin.calendar__selected_euvin:not(:disabled):hover, .calendar__button_euvin.calendar__selected_euvin:disabled:not(:disabled):hover {
+.calendar__button_1m2l3.calendar__selected_1m2l3:not(:disabled):hover, .calendar__button_1m2l3.calendar__selected_1m2l3:disabled:not(:disabled):hover {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_euvin > * {
+.calendar__button_1m2l3 > * {
         flex-grow: 1;
     }

package/calendar/modern/components/years-table/Component.js

@@ -5,7 +5,7 @@ import isThisYear from 'date-fns/isThisYear';
 import '../../../../button/modern';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"yearsTable":"calendar__yearsTable_u80t2","inner":"calendar__inner_u80t2","button":"calendar__button_u80t2"};
+var styles = {"yearsTable":"calendar__yearsTable_2emcc","inner":"calendar__inner_2emcc","button":"calendar__button_2emcc"};
 require('./index.css');
 
 const YearsTable = ({ selectedYear, years = [], getYearProps, onScroll, }) => {

package/calendar/modern/components/years-table/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tvad */
+/* hash: 1cdv9 */
 :root {
 
     /* Hard */
@@ -33,12 +33,12 @@
 
     /* marker */
 }
-.calendar__yearsTable_u80t2 {
+.calendar__yearsTable_2emcc {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
 }
-.calendar__inner_u80t2 {
+.calendar__inner_2emcc {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -49,32 +49,32 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__inner_u80t2 {
+.calendar__inner_2emcc {
         left: 16px
 }
     }
-.calendar__button_u80t2 {
+.calendar__button_2emcc {
     /* 3 колонки с равными отступами */
     width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
     margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_u80t2:nth-child(3n) {
+.calendar__button_2emcc:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_u80t2 {
+.calendar__button_2emcc {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_u80t2:nth-child(3n) {
+        .calendar__button_2emcc:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_u80t2:nth-child(2n) {
+        .calendar__button_2emcc:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_u80t2 {
+.calendar__button_2emcc {
 
         height: 36px
 }

package/calendar/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1jce6 */
+/* hash: 1b5ta */
 :root {
 
     /* Hard */
@@ -34,7 +34,7 @@
 
     /* marker */
 }
-.calendar__component_1xft2 {
+.calendar__component_1h6gr {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -43,13 +43,13 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_1xft2 {
+.calendar__component_1h6gr {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_1xft2 {
+.calendar__container_1h6gr {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -59,33 +59,33 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_1xft2 {
+.calendar__container_1h6gr {
         width: 288px
 }
     }
-.calendar__sixWeeks_1xft2 {
+.calendar__sixWeeks_1h6gr {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_1xft2 {
+.calendar__sixWeeks_1h6gr {
         height: 360px
 }
     }
-.calendar__period_1xft2 {
+.calendar__period_1h6gr {
     width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
-.calendar__period_1xft2 {
+.calendar__period_1h6gr {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
     }
-.calendar__monthYear_1xft2 {
+.calendar__monthYear_1h6gr {
     width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
-.calendar__monthYear_1xft2 {
+.calendar__monthYear_1h6gr {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar-input/Component.js

@@ -57,7 +57,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_1ie4q","block":"calendar-input__block_1ie4q","calendarContainer":"calendar-input__calendarContainer_1ie4q","calendarIcon":"calendar-input__calendarIcon_1ie4q","nativeInput":"calendar-input__nativeInput_1ie4q"};
+var styles = {"component":"calendar-input__component_ks2uu","block":"calendar-input__block_ks2uu","calendarContainer":"calendar-input__calendarContainer_ks2uu","calendarIcon":"calendar-input__calendarIcon_ks2uu","nativeInput":"calendar-input__nativeInput_ks2uu"};
 require('./index.css');
 
 var CalendarInput = React.forwardRef(function (_a, ref) {

package/calendar-input/esm/Component.js

@@ -49,7 +49,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_1ie4q","block":"calendar-input__block_1ie4q","calendarContainer":"calendar-input__calendarContainer_1ie4q","calendarIcon":"calendar-input__calendarIcon_1ie4q","nativeInput":"calendar-input__nativeInput_1ie4q"};
+var styles = {"component":"calendar-input__component_ks2uu","block":"calendar-input__block_ks2uu","calendarContainer":"calendar-input__calendarContainer_ks2uu","calendarIcon":"calendar-input__calendarIcon_ks2uu","nativeInput":"calendar-input__nativeInput_ks2uu"};
 require('./index.css');
 
 var CalendarInput = forwardRef(function (_a, ref) {

package/calendar-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n6yq */
+/* hash: 1h3zx */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -40,35 +40,35 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_1ie4q {
+.calendar-input__component_ks2uu {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ie4q {
+.calendar-input__block_ks2uu {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ie4q {
+.calendar-input__calendarIcon_ks2uu {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ie4q:not(:only-child) {
+.calendar-input__calendarIcon_ks2uu:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ie4q {
+.calendar-input__nativeInput_ks2uu {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +79,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ie4q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_ks2uu::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ie4q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_ks2uu::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n6yq */
+/* hash: 1h3zx */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -40,35 +40,35 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_1ie4q {
+.calendar-input__component_ks2uu {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ie4q {
+.calendar-input__block_ks2uu {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ie4q {
+.calendar-input__calendarIcon_ks2uu {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ie4q:not(:only-child) {
+.calendar-input__calendarIcon_ks2uu:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ie4q {
+.calendar-input__nativeInput_ks2uu {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +79,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ie4q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_ks2uu::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ie4q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_ks2uu::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/modern/Component.js

@@ -10,7 +10,7 @@ import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '../
 import { Calendar, dateInLimits } from '../../calendar/modern';
 import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
 
-var styles = {"component":"calendar-input__component_1ie4q","block":"calendar-input__block_1ie4q","calendarContainer":"calendar-input__calendarContainer_1ie4q","calendarIcon":"calendar-input__calendarIcon_1ie4q","nativeInput":"calendar-input__nativeInput_1ie4q"};
+var styles = {"component":"calendar-input__component_ks2uu","block":"calendar-input__block_ks2uu","calendarContainer":"calendar-input__calendarContainer_ks2uu","calendarIcon":"calendar-input__calendarIcon_ks2uu","nativeInput":"calendar-input__nativeInput_ks2uu"};
 require('./index.css');
 
 const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, ...restProps }, ref) => {

package/calendar-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n6yq */
+/* hash: 1h3zx */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -40,35 +40,35 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_1ie4q {
+.calendar-input__component_ks2uu {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ie4q {
+.calendar-input__block_ks2uu {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ie4q {
+.calendar-input__calendarContainer_ks2uu {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ie4q {
+.calendar-input__calendarIcon_ks2uu {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ie4q:not(:only-child) {
+.calendar-input__calendarIcon_ks2uu:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ie4q {
+.calendar-input__nativeInput_ks2uu {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +79,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ie4q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_ks2uu::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ie4q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_ks2uu::-webkit-inner-spin-button {
         display: none;
     }