@alfalab/core-components 42.2.1-beta.0 → 42.2.2

package/date-time-input/modern/mobile-c219f8ca.d.ts

@@ -1 +1,367 @@
-export * from "./Component-8b5756fe";
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from "react";
+import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
+import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { NavigationBarProps } from "./types-83e2bd9e";
+type CalendarMobileProps = CalendarDesktopProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopProps & {
+    open: boolean;
+    title?: string | undefined;
+    onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    hasHeader?: boolean | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+    /**
+     * Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
+     */
+    immediateMount?: boolean;
+};
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps["getPortalContainer"];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     * @default false
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на обертку контента
+     */
+    contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительные пропсы на компонентную обертку контента
+     */
+    componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>["onClose"];
+};
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+declare const BaseModalContext: React.Context<BaseModalContext>;
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: "s" | "m" | "l" | "xl" | "fullscreen";
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
+type View = "desktop" | "mobile";
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps["size"]>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+};
+declare const Content: FC<ContentProps>;
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+declare const Modal: React.ForwardRefExoticComponent<BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ModalContext: import("react").Context<BaseModalContext>;
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+export { CalendarMobileProps, CalendarMobile, ModalMobile, ModalMobileProps, Content, ResponsiveContext, Modal, ModalContext, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
+export * from "./Component.mobile-755fbaa3";
+export type { SavedStyle };

package/date-time-input/modern/utils-e0a54580.d.ts

@@ -0,0 +1,8 @@
+import { PeriodType } from "./index-f034f741";
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: 'prev' | 'next') => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { formatPeriod, getYearSelectorValue, shiftValues };

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_mp0o9"};
+var styles = {"component":"divider__component_beijs"};
 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_mp0o9"};
+var styles = {"component":"divider__component_beijs"};
 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_mp0o9 {
+} .divider__component_beijs {
     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_mp0o9 {
+} .divider__component_beijs {
     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_mp0o9"};
+const styles = {"component":"divider__component_beijs"};
 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_mp0o9 {
+} .divider__component_beijs {
     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_1f4eb","customScrollbar":"drawer__customScrollbar_1f4eb","rightPlacement":"drawer__rightPlacement_1f4eb","leftPlacement":"drawer__leftPlacement_1f4eb","content":"drawer__content_1f4eb","enterRight":"drawer__enterRight_1f4eb","enterLeft":"drawer__enterLeft_1f4eb","contentEnter":"drawer__contentEnter_1f4eb","backdropEnter":"drawer__backdropEnter_1f4eb","enterActive":"drawer__enterActive_1f4eb","backdropEnterActive":"drawer__backdropEnterActive_1f4eb","backdropEnterDone":"drawer__backdropEnterDone_1f4eb","contentEnterActive":"drawer__contentEnterActive_1f4eb","exit":"drawer__exit_1f4eb","backdropExit":"drawer__backdropExit_1f4eb","contentExit":"drawer__contentExit_1f4eb","exitActiveRight":"drawer__exitActiveRight_1f4eb","exitActiveLeft":"drawer__exitActiveLeft_1f4eb","backdropExitActive":"drawer__backdropExitActive_1f4eb","backdropExitDone":"drawer__backdropExitDone_1f4eb","contentExitActive":"drawer__contentExitActive_1f4eb"};
+var styles = {"component":"drawer__component_jxzbn","customScrollbar":"drawer__customScrollbar_jxzbn","rightPlacement":"drawer__rightPlacement_jxzbn","leftPlacement":"drawer__leftPlacement_jxzbn","content":"drawer__content_jxzbn","enterRight":"drawer__enterRight_jxzbn","enterLeft":"drawer__enterLeft_jxzbn","contentEnter":"drawer__contentEnter_jxzbn","backdropEnter":"drawer__backdropEnter_jxzbn","enterActive":"drawer__enterActive_jxzbn","backdropEnterActive":"drawer__backdropEnterActive_jxzbn","backdropEnterDone":"drawer__backdropEnterDone_jxzbn","contentEnterActive":"drawer__contentEnterActive_jxzbn","exit":"drawer__exit_jxzbn","backdropExit":"drawer__backdropExit_jxzbn","contentExit":"drawer__contentExit_jxzbn","exitActiveRight":"drawer__exitActiveRight_jxzbn","exitActiveLeft":"drawer__exitActiveLeft_jxzbn","backdropExitActive":"drawer__backdropExitActive_jxzbn","backdropExitDone":"drawer__backdropExitDone_jxzbn","contentExitActive":"drawer__contentExitActive_jxzbn"};
 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_1f4eb","customScrollbar":"drawer__customScrollbar_1f4eb","rightPlacement":"drawer__rightPlacement_1f4eb","leftPlacement":"drawer__leftPlacement_1f4eb","content":"drawer__content_1f4eb","enterRight":"drawer__enterRight_1f4eb","enterLeft":"drawer__enterLeft_1f4eb","contentEnter":"drawer__contentEnter_1f4eb","backdropEnter":"drawer__backdropEnter_1f4eb","enterActive":"drawer__enterActive_1f4eb","backdropEnterActive":"drawer__backdropEnterActive_1f4eb","backdropEnterDone":"drawer__backdropEnterDone_1f4eb","contentEnterActive":"drawer__contentEnterActive_1f4eb","exit":"drawer__exit_1f4eb","backdropExit":"drawer__backdropExit_1f4eb","contentExit":"drawer__contentExit_1f4eb","exitActiveRight":"drawer__exitActiveRight_1f4eb","exitActiveLeft":"drawer__exitActiveLeft_1f4eb","backdropExitActive":"drawer__backdropExitActive_1f4eb","backdropExitDone":"drawer__backdropExitDone_1f4eb","contentExitActive":"drawer__contentExitActive_1f4eb"};
+var styles = {"component":"drawer__component_jxzbn","customScrollbar":"drawer__customScrollbar_jxzbn","rightPlacement":"drawer__rightPlacement_jxzbn","leftPlacement":"drawer__leftPlacement_jxzbn","content":"drawer__content_jxzbn","enterRight":"drawer__enterRight_jxzbn","enterLeft":"drawer__enterLeft_jxzbn","contentEnter":"drawer__contentEnter_jxzbn","backdropEnter":"drawer__backdropEnter_jxzbn","enterActive":"drawer__enterActive_jxzbn","backdropEnterActive":"drawer__backdropEnterActive_jxzbn","backdropEnterDone":"drawer__backdropEnterDone_jxzbn","contentEnterActive":"drawer__contentEnterActive_jxzbn","exit":"drawer__exit_jxzbn","backdropExit":"drawer__backdropExit_jxzbn","contentExit":"drawer__contentExit_jxzbn","exitActiveRight":"drawer__exitActiveRight_jxzbn","exitActiveLeft":"drawer__exitActiveLeft_jxzbn","backdropExitActive":"drawer__backdropExitActive_jxzbn","backdropExitDone":"drawer__backdropExitDone_jxzbn","contentExitActive":"drawer__contentExitActive_jxzbn"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: hm6mh */
+/* hash: wuytw */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
@@ -23,7 +23,7 @@
     --backdrop-hidden-background: transparent;
 } :root {
     --drawer-width: 500px;
-} .drawer__component_1f4eb {
+} .drawer__component_jxzbn {
     position: fixed;
     top: 0;
     height: 100%;
@@ -31,17 +31,17 @@
     flex: 1;
     overflow: auto;
     will-change: transform;
-} .drawer__customScrollbar_1f4eb {
+} .drawer__customScrollbar_jxzbn {
     overflow: auto;
     overflow: overlay;
     cursor: auto;
-} .drawer__customScrollbar_1f4eb::-webkit-scrollbar {
+} .drawer__customScrollbar_jxzbn::-webkit-scrollbar {
         width: 12px;
-    } .drawer__customScrollbar_1f4eb::-webkit-scrollbar-track {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-track {
         background-color: transparent;
-    } .drawer__customScrollbar_1f4eb::-webkit-scrollbar-track-piece {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .drawer__customScrollbar_1f4eb::-webkit-scrollbar-thumb {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -49,63 +49,63 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .drawer__customScrollbar_1f4eb::-webkit-scrollbar-thumb:hover {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .drawer__customScrollbar_1f4eb::-webkit-scrollbar-thumb:active {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .drawer__customScrollbar_1f4eb::-webkit-resizer {
+    } .drawer__customScrollbar_jxzbn::-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_1f4eb::-webkit-scrollbar-button,
-    .drawer__customScrollbar_1f4eb::-webkit-scrollbar-corner {
+    } .drawer__customScrollbar_jxzbn::-webkit-scrollbar-button,
+    .drawer__customScrollbar_jxzbn::-webkit-scrollbar-corner {
         display: none;
-    } .drawer__rightPlacement_1f4eb {
+    } .drawer__rightPlacement_jxzbn {
     right: 0;
     align-self: flex-end;
-} .drawer__leftPlacement_1f4eb {
+} .drawer__leftPlacement_jxzbn {
     left: 0;
     align-self: flex-start;
-} .drawer__content_1f4eb {
+} .drawer__content_jxzbn {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} /* enter */ .drawer__enterRight_1f4eb {
+} /* enter */ .drawer__enterRight_jxzbn {
     transform: translateX(100%);
-} .drawer__enterLeft_1f4eb {
+} .drawer__enterLeft_jxzbn {
     transform: translateX(-100%);
-} .drawer__contentEnter_1f4eb {
+} .drawer__contentEnter_jxzbn {
     opacity: 0;
-} .drawer__backdropEnter_1f4eb {
+} .drawer__backdropEnter_jxzbn {
     background-color: var(--backdrop-hidden-background);
-} .drawer__enterActive_1f4eb {
+} .drawer__enterActive_jxzbn {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
-} .drawer__backdropEnterActive_1f4eb,
-.drawer__backdropEnterDone_1f4eb {
+} .drawer__backdropEnterActive_jxzbn,
+.drawer__backdropEnterDone_jxzbn {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
-} .drawer__contentEnterActive_1f4eb {
+} .drawer__contentEnterActive_jxzbn {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
-} /* exit */ .drawer__exit_1f4eb {
+} /* exit */ .drawer__exit_jxzbn {
     transform: translateX(0);
-} .drawer__backdropExit_1f4eb {
+} .drawer__backdropExit_jxzbn {
     background-color: var(--backdrop-visible-background);
-} .drawer__contentExit_1f4eb {
+} .drawer__contentExit_jxzbn {
     opacity: 1;
-} .drawer__exitActiveRight_1f4eb {
+} .drawer__exitActiveRight_jxzbn {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
-} .drawer__exitActiveLeft_1f4eb {
+} .drawer__exitActiveLeft_jxzbn {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
-} .drawer__backdropExitActive_1f4eb,
-.drawer__backdropExitDone_1f4eb {
+} .drawer__backdropExitActive_jxzbn,
+.drawer__backdropExitDone_jxzbn {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
-} .drawer__contentExitActive_1f4eb {
+} .drawer__contentExitActive_jxzbn {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }