@alfalab/core-components 41.9.0 → 41.11.0-beta.0

package/day-of-month-picker/modern/desktop.css

@@ -0,0 +1,84 @@
+/* hash: 1mked */
+: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 */
+} :root { /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-l: 12px;
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} :root {
+    --calendar-height: 290px;
+    --calendar-width: 312px;
+
+    /* День */
+
+    /* highlighted */
+
+    /* selected */
+
+    /* marker */
+} .day-of-month-picker__component_189mh {
+    width: var(--calendar-width);
+    height: var(--calendar-height);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    outline: none
+} @media (max-width: 374px) { .day-of-month-picker__component_189mh {
+        align-items: center;
+        width: 100%;
+        height: 321px
+}
+    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh {
+        width: 100%
+    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh .day-of-month-picker__container_189mh {
+            width: 100%;
+        } .day-of-month-picker__container_189mh {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--gap-m);
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow: hidden
+} @media (max-width: 374px) { .day-of-month-picker__container_189mh {
+        width: 288px
+}
+    } .day-of-month-picker__calendarContainer_189mh {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-input-popover-border-radius);
+    border: 1px solid var(--color-light-border-secondary)
+} @media (max-width: 374px) { .day-of-month-picker__calendarContainer_189mh {
+        width: 100%;
+        min-width: 288px
+}
+    } .day-of-month-picker__calendarResponsive_189mh {
+    width: var(--calendar-width);
+} .day-of-month-picker__lastDay_189mh {
+    border-radius: var(--border-radius-l);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
+    grid-gap: 10px;
+    grid-gap: 10px;
+    gap: 10px;
+    width: 280px;
+    height: 40px;
+    cursor: pointer;
+} .day-of-month-picker__lastDaySelected_189mh {
+    background: #121212;
+}

package/day-of-month-picker/modern/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/day-of-month-picker/modern/desktop.js

@@ -0,0 +1,13 @@
+export { DayOfMonthPickerDesktop } from './Component.desktop.js';
+import 'react';
+import 'classnames';
+import '../../icon-button/modern';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import '../../button/modern';
+import 'react-merge-refs';
+import './useCalendar.js';

package/day-of-month-picker/modern/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./responsive";
+export { useCalendar } from "./useCalendar";
+export * from "./components/day-of-month-picker-mobile/index";
+export { DayOfMonthPickerDesktop as DayOfMonthPicker } from "./desktop";
+export type { DayOfMontPickerDesktopProps as DayOfMonthPickerProps } from "./desktop";

package/day-of-month-picker/modern/index.js

@@ -0,0 +1,17 @@
+export { DayOfMonthPickerResponsive } from './Component.responsive.js';
+export { useCalendar } from './useCalendar.js';
+export { DayOfMonthPickerMobile } from './components/day-of-month-picker-mobile/Component.js';
+export { DayOfMonthPickerDesktop as DayOfMonthPicker } from './Component.desktop.js';
+import 'react';
+import '@alfalab/hooks';
+import 'react-merge-refs';
+import 'classnames';
+import '../../modal/modern/mobile';
+import '../../icon-button/modern';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import '../../button/modern';

package/day-of-month-picker/modern/mobile.d.ts

@@ -0,0 +1 @@
+export * from "./components/day-of-month-picker-mobile/index";

package/day-of-month-picker/modern/mobile.js

@@ -0,0 +1,15 @@
+export { DayOfMonthPickerMobile } from './components/day-of-month-picker-mobile/Component.js';
+import 'react';
+import 'classnames';
+import '../../modal/modern/mobile';
+import './Component.desktop.js';
+import '../../icon-button/modern';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import '../../button/modern';
+import 'react-merge-refs';
+import './useCalendar.js';

package/day-of-month-picker/modern/responsive.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.responsive";
+export {};

package/day-of-month-picker/modern/responsive.js

@@ -0,0 +1,17 @@
+export { DayOfMonthPickerResponsive } from './Component.responsive.js';
+import 'react';
+import '@alfalab/hooks';
+import './components/day-of-month-picker-mobile/Component.js';
+import 'classnames';
+import '../../modal/modern/mobile';
+import './Component.desktop.js';
+import '../../icon-button/modern';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import '../../button/modern';
+import 'react-merge-refs';
+import './useCalendar.js';

package/day-of-month-picker/modern/useCalendar.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { MouseEvent, Ref } from 'react';
+type UseCalendarProps = {
+    /**
+     * Выбранный день
+     */
+    selected?: number;
+    /**
+     * Обработчик выбора дня
+     */
+    onChange: (day: number) => void;
+};
+declare function useCalendar({ selected, onChange }: UseCalendarProps): {
+    getDayProps: (day: number) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        tabIndex: number;
+        onClick: (event: number) => void;
+        selected: boolean;
+        onMouseEnter: (event: MouseEvent<HTMLTableCellElement>) => void;
+        onMouseLeave: () => void;
+        ref: (node: HTMLTableCellElement) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+    highlighted: number | undefined;
+};
+export { UseCalendarProps, useCalendar };

package/day-of-month-picker/modern/useCalendar.js

@@ -0,0 +1,54 @@
+import { useState, useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
+
+function useCalendar({ selected, onChange }) {
+    const [highlighted, setHighlighted] = useState();
+    const dateRefs = useRef([]);
+    const rootRef = useRef(null);
+    const handleDayClick = (event) => {
+        onChange(event);
+    };
+    const handleDayMouseEnter = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        setHighlighted(date ? +date : undefined);
+    }, []);
+    const handleDayMouseLeave = useCallback(() => {
+        setHighlighted(undefined);
+    }, []);
+    const handleDateRef = useCallback((node, index) => {
+        dateRefs.current[index] = node;
+    }, []);
+    let focusableDayIsSet = false;
+    const getDayProps = (day) => {
+        const daySelected = selected === day;
+        let canFocus = daySelected;
+        // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
+        if (!selected && !focusableDayIsSet) {
+            focusableDayIsSet = true;
+            canFocus = true;
+        }
+        return {
+            'data-date': day,
+            'aria-selected': daySelected,
+            tabIndex: canFocus ? 0 : -1,
+            onClick: handleDayClick,
+            selected: daySelected,
+            onMouseEnter: handleDayMouseEnter,
+            onMouseLeave: handleDayMouseLeave,
+            ref: (node) => {
+                handleDateRef(node, day - 1);
+            },
+        };
+    };
+    const getRootProps = ({ ref = null }) => ({
+        ref: mergeRefs([ref, rootRef]),
+        tabIndex: -1,
+    });
+    return {
+        getDayProps,
+        getRootProps,
+        highlighted,
+    };
+}
+
+export { useCalendar };

package/day-of-month-picker/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/day-of-month-picker/responsive.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.responsive";
+export {};

package/day-of-month-picker/responsive.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+require('tslib');
+require('react');
+require('@alfalab/hooks');
+require('./components/day-of-month-picker-mobile/Component.js');
+require('classnames');
+require('../modal/mobile');
+require('./Component.desktop.js');
+require('../icon-button');
+require('../input');
+require('../popover');
+require('../typography');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('./components/days-table/Component.js');
+require('react-transition-group');
+require('../button');
+require('./useCalendar.js');
+require('react-merge-refs');
+
+
+
+exports.DayOfMonthPickerResponsive = Component_responsive.DayOfMonthPickerResponsive;

package/day-of-month-picker/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, (res) => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/day-of-month-picker/useCalendar.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { MouseEvent, Ref } from 'react';
+type UseCalendarProps = {
+    /**
+     * Выбранный день
+     */
+    selected?: number;
+    /**
+     * Обработчик выбора дня
+     */
+    onChange: (day: number) => void;
+};
+declare function useCalendar({ selected, onChange }: UseCalendarProps): {
+    getDayProps: (day: number) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        tabIndex: number;
+        onClick: (event: number) => void;
+        selected: boolean;
+        onMouseEnter: (event: MouseEvent<HTMLTableCellElement>) => void;
+        onMouseLeave: () => void;
+        ref: (node: HTMLTableCellElement) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+    highlighted: number | undefined;
+};
+export { UseCalendarProps, useCalendar };

package/day-of-month-picker/useCalendar.js

@@ -0,0 +1,64 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+function useCalendar(_a) {
+    var selected = _a.selected, onChange = _a.onChange;
+    var _b = React.useState(), highlighted = _b[0], setHighlighted = _b[1];
+    var dateRefs = React.useRef([]);
+    var rootRef = React.useRef(null);
+    var handleDayClick = function (event) {
+        onChange(event);
+    };
+    var handleDayMouseEnter = React.useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        setHighlighted(date ? +date : undefined);
+    }, []);
+    var handleDayMouseLeave = React.useCallback(function () {
+        setHighlighted(undefined);
+    }, []);
+    var handleDateRef = React.useCallback(function (node, index) {
+        dateRefs.current[index] = node;
+    }, []);
+    var focusableDayIsSet = false;
+    var getDayProps = function (day) {
+        var daySelected = selected === day;
+        var canFocus = daySelected;
+        // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
+        if (!selected && !focusableDayIsSet) {
+            focusableDayIsSet = true;
+            canFocus = true;
+        }
+        return {
+            'data-date': day,
+            'aria-selected': daySelected,
+            tabIndex: canFocus ? 0 : -1,
+            onClick: handleDayClick,
+            selected: daySelected,
+            onMouseEnter: handleDayMouseEnter,
+            onMouseLeave: handleDayMouseLeave,
+            ref: function (node) {
+                handleDateRef(node, day - 1);
+            },
+        };
+    };
+    var getRootProps = function (_a) {
+        var _b = _a.ref, ref = _b === void 0 ? null : _b;
+        return ({
+            ref: mergeRefs__default.default([ref, rootRef]),
+            tabIndex: -1,
+        });
+    };
+    return {
+        getDayProps: getDayProps,
+        getRootProps: getRootProps,
+        highlighted: highlighted,
+    };
+}
+
+exports.useCalendar = useCalendar;

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_96ei6"};
+var styles = {"component":"divider__component_4lp9g"};
 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_96ei6"};
+var styles = {"component":"divider__component_4lp9g"};
 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_96ei6 {
+} .divider__component_4lp9g {
     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_96ei6 {
+} .divider__component_4lp9g {
     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_96ei6"};
+const styles = {"component":"divider__component_4lp9g"};
 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_96ei6 {
+} .divider__component_4lp9g {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/drawer/Component.js

@@ -12,7 +12,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_1bjcs","rightPlacement":"drawer__rightPlacement_1bjcs","leftPlacement":"drawer__leftPlacement_1bjcs","content":"drawer__content_1bjcs","simplebar":"drawer__simplebar_1bjcs","enterRight":"drawer__enterRight_1bjcs","enterLeft":"drawer__enterLeft_1bjcs","contentEnter":"drawer__contentEnter_1bjcs","backdropEnter":"drawer__backdropEnter_1bjcs","enterActive":"drawer__enterActive_1bjcs","backdropEnterActive":"drawer__backdropEnterActive_1bjcs","backdropEnterDone":"drawer__backdropEnterDone_1bjcs","contentEnterActive":"drawer__contentEnterActive_1bjcs","exit":"drawer__exit_1bjcs","backdropExit":"drawer__backdropExit_1bjcs","contentExit":"drawer__contentExit_1bjcs","exitActiveRight":"drawer__exitActiveRight_1bjcs","exitActiveLeft":"drawer__exitActiveLeft_1bjcs","backdropExitActive":"drawer__backdropExitActive_1bjcs","backdropExitDone":"drawer__backdropExitDone_1bjcs","contentExitActive":"drawer__contentExitActive_1bjcs"};
+var styles = {"component":"drawer__component_azqft","rightPlacement":"drawer__rightPlacement_azqft","leftPlacement":"drawer__leftPlacement_azqft","content":"drawer__content_azqft","simplebar":"drawer__simplebar_azqft","enterRight":"drawer__enterRight_azqft","enterLeft":"drawer__enterLeft_azqft","contentEnter":"drawer__contentEnter_azqft","backdropEnter":"drawer__backdropEnter_azqft","enterActive":"drawer__enterActive_azqft","backdropEnterActive":"drawer__backdropEnterActive_azqft","backdropEnterDone":"drawer__backdropEnterDone_azqft","contentEnterActive":"drawer__contentEnterActive_azqft","exit":"drawer__exit_azqft","backdropExit":"drawer__backdropExit_azqft","contentExit":"drawer__contentExit_azqft","exitActiveRight":"drawer__exitActiveRight_azqft","exitActiveLeft":"drawer__exitActiveLeft_azqft","backdropExitActive":"drawer__backdropExitActive_azqft","backdropExitDone":"drawer__backdropExitDone_azqft","contentExitActive":"drawer__contentExitActive_azqft"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { BaseModal, BaseModalContext } from '../../base-modal/esm';
 import { Scrollbar } from '../../scrollbar/esm';
 
-var styles = {"component":"drawer__component_1bjcs","rightPlacement":"drawer__rightPlacement_1bjcs","leftPlacement":"drawer__leftPlacement_1bjcs","content":"drawer__content_1bjcs","simplebar":"drawer__simplebar_1bjcs","enterRight":"drawer__enterRight_1bjcs","enterLeft":"drawer__enterLeft_1bjcs","contentEnter":"drawer__contentEnter_1bjcs","backdropEnter":"drawer__backdropEnter_1bjcs","enterActive":"drawer__enterActive_1bjcs","backdropEnterActive":"drawer__backdropEnterActive_1bjcs","backdropEnterDone":"drawer__backdropEnterDone_1bjcs","contentEnterActive":"drawer__contentEnterActive_1bjcs","exit":"drawer__exit_1bjcs","backdropExit":"drawer__backdropExit_1bjcs","contentExit":"drawer__contentExit_1bjcs","exitActiveRight":"drawer__exitActiveRight_1bjcs","exitActiveLeft":"drawer__exitActiveLeft_1bjcs","backdropExitActive":"drawer__backdropExitActive_1bjcs","backdropExitDone":"drawer__backdropExitDone_1bjcs","contentExitActive":"drawer__contentExitActive_1bjcs"};
+var styles = {"component":"drawer__component_azqft","rightPlacement":"drawer__rightPlacement_azqft","leftPlacement":"drawer__leftPlacement_azqft","content":"drawer__content_azqft","simplebar":"drawer__simplebar_azqft","enterRight":"drawer__enterRight_azqft","enterLeft":"drawer__enterLeft_azqft","contentEnter":"drawer__contentEnter_azqft","backdropEnter":"drawer__backdropEnter_azqft","enterActive":"drawer__enterActive_azqft","backdropEnterActive":"drawer__backdropEnterActive_azqft","backdropEnterDone":"drawer__backdropEnterDone_azqft","contentEnterActive":"drawer__contentEnterActive_azqft","exit":"drawer__exit_azqft","backdropExit":"drawer__backdropExit_azqft","contentExit":"drawer__contentExit_azqft","exitActiveRight":"drawer__exitActiveRight_azqft","exitActiveLeft":"drawer__exitActiveLeft_azqft","backdropExitActive":"drawer__backdropExitActive_azqft","backdropExitDone":"drawer__backdropExitDone_azqft","contentExitActive":"drawer__contentExitActive_azqft"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/index.css

@@ -20,7 +20,7 @@
     --backdrop-hidden-background: transparent;
 } :root {
     --drawer-width: 500px;
-} .drawer__component_1bjcs {
+} .drawer__component_azqft {
     position: fixed;
     top: 0;
     height: 100%;
@@ -28,54 +28,54 @@
     flex: 1;
     overflow: auto;
     will-change: transform;
-} .drawer__rightPlacement_1bjcs {
+} .drawer__rightPlacement_azqft {
     right: 0;
     align-self: flex-end;
-} .drawer__leftPlacement_1bjcs {
+} .drawer__leftPlacement_azqft {
     left: 0;
     align-self: flex-start;
-} .drawer__content_1bjcs {
+} .drawer__content_azqft {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .drawer__simplebar_1bjcs {
+} .drawer__simplebar_azqft {
     height: 100vh;
-} /* enter */ .drawer__enterRight_1bjcs {
+} /* enter */ .drawer__enterRight_azqft {
     transform: translateX(100%);
-} .drawer__enterLeft_1bjcs {
+} .drawer__enterLeft_azqft {
     transform: translateX(-100%);
-} .drawer__contentEnter_1bjcs {
+} .drawer__contentEnter_azqft {
     opacity: 0;
-} .drawer__backdropEnter_1bjcs {
+} .drawer__backdropEnter_azqft {
     background-color: var(--backdrop-hidden-background);
-} .drawer__enterActive_1bjcs {
+} .drawer__enterActive_azqft {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
-} .drawer__backdropEnterActive_1bjcs,
-.drawer__backdropEnterDone_1bjcs {
+} .drawer__backdropEnterActive_azqft,
+.drawer__backdropEnterDone_azqft {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
-} .drawer__contentEnterActive_1bjcs {
+} .drawer__contentEnterActive_azqft {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
-} /* exit */ .drawer__exit_1bjcs {
+} /* exit */ .drawer__exit_azqft {
     transform: translateX(0);
-} .drawer__backdropExit_1bjcs {
+} .drawer__backdropExit_azqft {
     background-color: var(--backdrop-visible-background);
-} .drawer__contentExit_1bjcs {
+} .drawer__contentExit_azqft {
     opacity: 1;
-} .drawer__exitActiveRight_1bjcs {
+} .drawer__exitActiveRight_azqft {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
-} .drawer__exitActiveLeft_1bjcs {
+} .drawer__exitActiveLeft_azqft {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
-} .drawer__backdropExitActive_1bjcs,
-.drawer__backdropExitDone_1bjcs {
+} .drawer__backdropExitActive_azqft,
+.drawer__backdropExitDone_azqft {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
-} .drawer__contentExitActive_1bjcs {
+} .drawer__contentExitActive_azqft {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }