@alfalab/core-components 42.4.0 → 42.5.1

package/date-time-input/esm/components/date-time-input/index.css

@@ -1,4 +1,4 @@
-/* hash: juw3m */
+/* hash: ytc1o */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_adunq {
+} .date-time-input__component_v5edp {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_adunq {
+} .date-time-input__calendarContainer_v5edp {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_adunq {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_v5edp {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_adunq {
+    } .date-time-input__calendarResponsive_v5edp {
     width: var(--calendar-width);
-} .date-time-input__block_adunq {
+} .date-time-input__block_v5edp {
     width: 100%;
-} .date-time-input__calendarIcon_adunq {
+} .date-time-input__calendarIcon_v5edp {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/esm/index-2abb571d.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/date-time-input/index-2abb571d.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/date-time-input/modern/components/date-time-input/Component.d.ts

@@ -144,13 +144,8 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
         open: boolean;
         title?: string | undefined;
         onClose?: (() => void) | undefined;
-        /**
-         * Обработчик изменения значения
-         */
         onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
-        yearsAmount?: number | undefined; /**
-         * Обработчик окончания ввода
-         */
+        yearsAmount?: number | undefined;
         hasHeader?: boolean | undefined;
         allowSelectionFromEmptyRange?: boolean | undefined;
     } & Record<string, unknown>) | undefined;

package/date-time-input/modern/components/date-time-input/Component.js

@@ -10,7 +10,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"component":"date-time-input__component_adunq","calendarContainer":"date-time-input__calendarContainer_adunq","calendarResponsive":"date-time-input__calendarResponsive_adunq","block":"date-time-input__block_adunq","calendarIcon":"date-time-input__calendarIcon_adunq"};
+const styles = {"component":"date-time-input__component_v5edp","calendarContainer":"date-time-input__calendarContainer_v5edp","calendarResponsive":"date-time-input__calendarResponsive_v5edp","block":"date-time-input__block_v5edp","calendarIcon":"date-time-input__calendarIcon_v5edp"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -106,12 +106,6 @@ const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClas
     const handleClear = () => {
         setValue('');
     };
-    const handleInputKeyDown = (event) => {
-        const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy && event.key !== 'Tab') {
-            event.preventDefault();
-        }
-    };
     const handleCalendarChange = (date) => {
         if (date) {
             const newValue = parseTimestampToDate(date);
@@ -137,7 +131,7 @@ const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClas
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, error: error, rightAddons: React.createElement(React.Fragment, null,
+        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, error: error, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {

package/date-time-input/modern/components/date-time-input/index.css

@@ -1,4 +1,4 @@
-/* hash: juw3m */
+/* hash: ytc1o */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_adunq {
+} .date-time-input__component_v5edp {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_adunq {
+} .date-time-input__calendarContainer_v5edp {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_adunq {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_v5edp {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_adunq {
+    } .date-time-input__calendarResponsive_v5edp {
     width: var(--calendar-width);
-} .date-time-input__block_adunq {
+} .date-time-input__block_v5edp {
     width: 100%;
-} .date-time-input__calendarIcon_adunq {
+} .date-time-input__calendarIcon_v5edp {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/modern/index-2abb571d.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/divider/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"divider__component_okfma"};
+var styles = {"component":"divider__component_1uyxr"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_okfma"};
+var styles = {"component":"divider__component_1uyxr"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_okfma {
+} .divider__component_1uyxr {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_okfma {
+} .divider__component_1uyxr {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"divider__component_okfma"};
+const styles = {"component":"divider__component_1uyxr"};
 require('./index.css');
 
 const Divider = ({ className, dataTestId }) => (React.createElement("hr", { className: cn(styles.component, className), "data-test-id": dataTestId }));

package/divider/modern/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_okfma {
+} .divider__component_1uyxr {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/drawer/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"drawer__component_13pqi","customScrollbar":"drawer__customScrollbar_13pqi","rightPlacement":"drawer__rightPlacement_13pqi","leftPlacement":"drawer__leftPlacement_13pqi","content":"drawer__content_13pqi","enterRight":"drawer__enterRight_13pqi","enterLeft":"drawer__enterLeft_13pqi","contentEnter":"drawer__contentEnter_13pqi","backdropEnter":"drawer__backdropEnter_13pqi","enterActive":"drawer__enterActive_13pqi","backdropEnterActive":"drawer__backdropEnterActive_13pqi","backdropEnterDone":"drawer__backdropEnterDone_13pqi","contentEnterActive":"drawer__contentEnterActive_13pqi","exit":"drawer__exit_13pqi","backdropExit":"drawer__backdropExit_13pqi","contentExit":"drawer__contentExit_13pqi","exitActiveRight":"drawer__exitActiveRight_13pqi","exitActiveLeft":"drawer__exitActiveLeft_13pqi","backdropExitActive":"drawer__backdropExitActive_13pqi","backdropExitDone":"drawer__backdropExitDone_13pqi","contentExitActive":"drawer__contentExitActive_13pqi"};
+var styles = {"component":"drawer__component_1g38s","customScrollbar":"drawer__customScrollbar_1g38s","rightPlacement":"drawer__rightPlacement_1g38s","leftPlacement":"drawer__leftPlacement_1g38s","content":"drawer__content_1g38s","enterRight":"drawer__enterRight_1g38s","enterLeft":"drawer__enterLeft_1g38s","contentEnter":"drawer__contentEnter_1g38s","backdropEnter":"drawer__backdropEnter_1g38s","enterActive":"drawer__enterActive_1g38s","backdropEnterActive":"drawer__backdropEnterActive_1g38s","backdropEnterDone":"drawer__backdropEnterDone_1g38s","contentEnterActive":"drawer__contentEnterActive_1g38s","exit":"drawer__exit_1g38s","backdropExit":"drawer__backdropExit_1g38s","contentExit":"drawer__contentExit_1g38s","exitActiveRight":"drawer__exitActiveRight_1g38s","exitActiveLeft":"drawer__exitActiveLeft_1g38s","backdropExitActive":"drawer__backdropExitActive_1g38s","backdropExitDone":"drawer__backdropExitDone_1g38s","contentExitActive":"drawer__contentExitActive_1g38s"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/Component.js

@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { BaseModal, BaseModalContext } from '../../base-modal/esm';
 
-var styles = {"component":"drawer__component_13pqi","customScrollbar":"drawer__customScrollbar_13pqi","rightPlacement":"drawer__rightPlacement_13pqi","leftPlacement":"drawer__leftPlacement_13pqi","content":"drawer__content_13pqi","enterRight":"drawer__enterRight_13pqi","enterLeft":"drawer__enterLeft_13pqi","contentEnter":"drawer__contentEnter_13pqi","backdropEnter":"drawer__backdropEnter_13pqi","enterActive":"drawer__enterActive_13pqi","backdropEnterActive":"drawer__backdropEnterActive_13pqi","backdropEnterDone":"drawer__backdropEnterDone_13pqi","contentEnterActive":"drawer__contentEnterActive_13pqi","exit":"drawer__exit_13pqi","backdropExit":"drawer__backdropExit_13pqi","contentExit":"drawer__contentExit_13pqi","exitActiveRight":"drawer__exitActiveRight_13pqi","exitActiveLeft":"drawer__exitActiveLeft_13pqi","backdropExitActive":"drawer__backdropExitActive_13pqi","backdropExitDone":"drawer__backdropExitDone_13pqi","contentExitActive":"drawer__contentExitActive_13pqi"};
+var styles = {"component":"drawer__component_1g38s","customScrollbar":"drawer__customScrollbar_1g38s","rightPlacement":"drawer__rightPlacement_1g38s","leftPlacement":"drawer__leftPlacement_1g38s","content":"drawer__content_1g38s","enterRight":"drawer__enterRight_1g38s","enterLeft":"drawer__enterLeft_1g38s","contentEnter":"drawer__contentEnter_1g38s","backdropEnter":"drawer__backdropEnter_1g38s","enterActive":"drawer__enterActive_1g38s","backdropEnterActive":"drawer__backdropEnterActive_1g38s","backdropEnterDone":"drawer__backdropEnterDone_1g38s","contentEnterActive":"drawer__contentEnterActive_1g38s","exit":"drawer__exit_1g38s","backdropExit":"drawer__backdropExit_1g38s","contentExit":"drawer__contentExit_1g38s","exitActiveRight":"drawer__exitActiveRight_1g38s","exitActiveLeft":"drawer__exitActiveLeft_1g38s","backdropExitActive":"drawer__backdropExitActive_1g38s","backdropExitDone":"drawer__backdropExitDone_1g38s","contentExitActive":"drawer__contentExitActive_1g38s"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/index.css

@@ -23,26 +23,26 @@
     --backdrop-hidden-background: transparent;
 } :root {
     --drawer-width: 500px;
-} .drawer__component_13pqi {
+} .drawer__component_1g38s {
     top: 0;
     height: 100%;
     width: var(--drawer-width);
     flex: 1;
     overflow: auto;
     will-change: transform;
-} .drawer__component_13pqi.drawer__component_13pqi {
+} .drawer__component_1g38s.drawer__component_1g38s {
     position: fixed;
-} .drawer__customScrollbar_13pqi {
+} .drawer__customScrollbar_1g38s {
     overflow: auto;
     overflow: overlay;
     cursor: auto;
-} .drawer__customScrollbar_13pqi::-webkit-scrollbar {
+} .drawer__customScrollbar_1g38s::-webkit-scrollbar {
         width: 12px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-track {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-track {
         background-color: transparent;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-track-piece {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -50,63 +50,63 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb:hover {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb:active {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .drawer__customScrollbar_13pqi::-webkit-resizer {
+    } .drawer__customScrollbar_1g38s::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-button,
-    .drawer__customScrollbar_13pqi::-webkit-scrollbar-corner {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-button,
+    .drawer__customScrollbar_1g38s::-webkit-scrollbar-corner {
         display: none;
-    } .drawer__rightPlacement_13pqi {
+    } .drawer__rightPlacement_1g38s {
     right: 0;
     align-self: flex-end;
-} .drawer__leftPlacement_13pqi {
+} .drawer__leftPlacement_1g38s {
     left: 0;
     align-self: flex-start;
-} .drawer__content_13pqi {
+} .drawer__content_1g38s {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} /* enter */ .drawer__enterRight_13pqi {
+} /* enter */ .drawer__enterRight_1g38s {
     transform: translateX(100%);
-} .drawer__enterLeft_13pqi {
+} .drawer__enterLeft_1g38s {
     transform: translateX(-100%);
-} .drawer__contentEnter_13pqi {
+} .drawer__contentEnter_1g38s {
     opacity: 0;
-} .drawer__backdropEnter_13pqi {
+} .drawer__backdropEnter_1g38s {
     background-color: var(--backdrop-hidden-background);
-} .drawer__enterActive_13pqi {
+} .drawer__enterActive_1g38s {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
-} .drawer__backdropEnterActive_13pqi,
-.drawer__backdropEnterDone_13pqi {
+} .drawer__backdropEnterActive_1g38s,
+.drawer__backdropEnterDone_1g38s {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
-} .drawer__contentEnterActive_13pqi {
+} .drawer__contentEnterActive_1g38s {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
-} /* exit */ .drawer__exit_13pqi {
+} /* exit */ .drawer__exit_1g38s {
     transform: translateX(0);
-} .drawer__backdropExit_13pqi {
+} .drawer__backdropExit_1g38s {
     background-color: var(--backdrop-visible-background);
-} .drawer__contentExit_13pqi {
+} .drawer__contentExit_1g38s {
     opacity: 1;
-} .drawer__exitActiveRight_13pqi {
+} .drawer__exitActiveRight_1g38s {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
-} .drawer__exitActiveLeft_13pqi {
+} .drawer__exitActiveLeft_1g38s {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
-} .drawer__backdropExitActive_13pqi,
-.drawer__backdropExitDone_13pqi {
+} .drawer__backdropExitActive_1g38s,
+.drawer__backdropExitDone_1g38s {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
-} .drawer__contentExitActive_13pqi {
+} .drawer__contentExitActive_1g38s {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/drawer/index.css

@@ -23,26 +23,26 @@
     --backdrop-hidden-background: transparent;
 } :root {
     --drawer-width: 500px;
-} .drawer__component_13pqi {
+} .drawer__component_1g38s {
     top: 0;
     height: 100%;
     width: var(--drawer-width);
     flex: 1;
     overflow: auto;
     will-change: transform;
-} .drawer__component_13pqi.drawer__component_13pqi {
+} .drawer__component_1g38s.drawer__component_1g38s {
     position: fixed;
-} .drawer__customScrollbar_13pqi {
+} .drawer__customScrollbar_1g38s {
     overflow: auto;
     overflow: overlay;
     cursor: auto;
-} .drawer__customScrollbar_13pqi::-webkit-scrollbar {
+} .drawer__customScrollbar_1g38s::-webkit-scrollbar {
         width: 12px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-track {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-track {
         background-color: transparent;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-track-piece {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -50,63 +50,63 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb:hover {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-thumb:active {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .drawer__customScrollbar_13pqi::-webkit-resizer {
+    } .drawer__customScrollbar_1g38s::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .drawer__customScrollbar_13pqi::-webkit-scrollbar-button,
-    .drawer__customScrollbar_13pqi::-webkit-scrollbar-corner {
+    } .drawer__customScrollbar_1g38s::-webkit-scrollbar-button,
+    .drawer__customScrollbar_1g38s::-webkit-scrollbar-corner {
         display: none;
-    } .drawer__rightPlacement_13pqi {
+    } .drawer__rightPlacement_1g38s {
     right: 0;
     align-self: flex-end;
-} .drawer__leftPlacement_13pqi {
+} .drawer__leftPlacement_1g38s {
     left: 0;
     align-self: flex-start;
-} .drawer__content_13pqi {
+} .drawer__content_1g38s {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} /* enter */ .drawer__enterRight_13pqi {
+} /* enter */ .drawer__enterRight_1g38s {
     transform: translateX(100%);
-} .drawer__enterLeft_13pqi {
+} .drawer__enterLeft_1g38s {
     transform: translateX(-100%);
-} .drawer__contentEnter_13pqi {
+} .drawer__contentEnter_1g38s {
     opacity: 0;
-} .drawer__backdropEnter_13pqi {
+} .drawer__backdropEnter_1g38s {
     background-color: var(--backdrop-hidden-background);
-} .drawer__enterActive_13pqi {
+} .drawer__enterActive_1g38s {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
-} .drawer__backdropEnterActive_13pqi,
-.drawer__backdropEnterDone_13pqi {
+} .drawer__backdropEnterActive_1g38s,
+.drawer__backdropEnterDone_1g38s {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
-} .drawer__contentEnterActive_13pqi {
+} .drawer__contentEnterActive_1g38s {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
-} /* exit */ .drawer__exit_13pqi {
+} /* exit */ .drawer__exit_1g38s {
     transform: translateX(0);
-} .drawer__backdropExit_13pqi {
+} .drawer__backdropExit_1g38s {
     background-color: var(--backdrop-visible-background);
-} .drawer__contentExit_13pqi {
+} .drawer__contentExit_1g38s {
     opacity: 1;
-} .drawer__exitActiveRight_13pqi {
+} .drawer__exitActiveRight_1g38s {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
-} .drawer__exitActiveLeft_13pqi {
+} .drawer__exitActiveLeft_1g38s {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
-} .drawer__backdropExitActive_13pqi,
-.drawer__backdropExitDone_13pqi {
+} .drawer__backdropExitActive_1g38s,
+.drawer__backdropExitDone_1g38s {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
-} .drawer__contentExitActive_13pqi {
+} .drawer__contentExitActive_1g38s {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/drawer/modern/Component.js

@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { BaseModal, BaseModalContext } from '../../base-modal/modern';
 
-const styles = {"component":"drawer__component_13pqi","customScrollbar":"drawer__customScrollbar_13pqi","rightPlacement":"drawer__rightPlacement_13pqi","leftPlacement":"drawer__leftPlacement_13pqi","content":"drawer__content_13pqi","enterRight":"drawer__enterRight_13pqi","enterLeft":"drawer__enterLeft_13pqi","contentEnter":"drawer__contentEnter_13pqi","backdropEnter":"drawer__backdropEnter_13pqi","enterActive":"drawer__enterActive_13pqi","backdropEnterActive":"drawer__backdropEnterActive_13pqi","backdropEnterDone":"drawer__backdropEnterDone_13pqi","contentEnterActive":"drawer__contentEnterActive_13pqi","exit":"drawer__exit_13pqi","backdropExit":"drawer__backdropExit_13pqi","contentExit":"drawer__contentExit_13pqi","exitActiveRight":"drawer__exitActiveRight_13pqi","exitActiveLeft":"drawer__exitActiveLeft_13pqi","backdropExitActive":"drawer__backdropExitActive_13pqi","backdropExitDone":"drawer__backdropExitDone_13pqi","contentExitActive":"drawer__contentExitActive_13pqi"};
+const styles = {"component":"drawer__component_1g38s","customScrollbar":"drawer__customScrollbar_1g38s","rightPlacement":"drawer__rightPlacement_1g38s","leftPlacement":"drawer__leftPlacement_1g38s","content":"drawer__content_1g38s","enterRight":"drawer__enterRight_1g38s","enterLeft":"drawer__enterLeft_1g38s","contentEnter":"drawer__contentEnter_1g38s","backdropEnter":"drawer__backdropEnter_1g38s","enterActive":"drawer__enterActive_1g38s","backdropEnterActive":"drawer__backdropEnterActive_1g38s","backdropEnterDone":"drawer__backdropEnterDone_1g38s","contentEnterActive":"drawer__contentEnterActive_1g38s","exit":"drawer__exit_1g38s","backdropExit":"drawer__backdropExit_1g38s","contentExit":"drawer__contentExit_1g38s","exitActiveRight":"drawer__exitActiveRight_1g38s","exitActiveLeft":"drawer__exitActiveLeft_1g38s","backdropExitActive":"drawer__backdropExitActive_1g38s","backdropExitDone":"drawer__backdropExitDone_1g38s","contentExitActive":"drawer__contentExitActive_1g38s"};
 require('./index.css');
 
 const ANIMATION_DURATION = 600;