@lazar-ui/kit 0.1.0

package/dist/config-provider.d.ts

@@ -0,0 +1,78 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Root provider that sets color scheme and locale for all UI Kit components.
+ *
+ * @example
+ * ```tsx
+ * import { ConfigProvider } from '@lazar-ui/kit';
+ * import '@lazar-ui/kit/css/palettes/indigo.css';
+ * import '@lazar-ui/kit/css/semantic.css';
+ *
+ * function App() {
+ *   return (
+ *     <ConfigProvider theme="light" locale="en">
+ *       <YourApp />
+ *     </ConfigProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom locale and theme target
+ * <ConfigProvider
+ *   theme="dark"
+ *   locale={{ dialog: { close: 'Закрыть' } }}
+ *   themeTarget={document.getElementById('root')}
+ * >
+ *   <YourApp />
+ * </ConfigProvider>
+ * ```
+ */
+export declare const ConfigProvider: default_2.FC<IProps>;
+
+export declare interface IConfigContext {
+    theme: TTheme;
+    locale: ILocaleMessages;
+}
+
+export declare interface ILocaleMessages {
+    dialog: {
+        close: string;
+    };
+    input: {
+        passwordHide: string;
+        passwordShow: string;
+    };
+    pagination: {
+        next: string;
+        page: string;
+        pagination: string;
+        prev: string;
+    };
+    select: {
+        clear: string;
+        noOptions: string;
+        placeholder: string;
+    };
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** Color scheme: 'light' | 'dark' | 'contrast'. Default: 'light'. */
+    theme?: TTheme;
+    /** DOM node to receive `data-theme` attribute. Default: `document.documentElement`. */
+    themeTarget?: HTMLElement | null;
+    /** Locale: built-in ('en' | 'ru') or custom `Partial<ILocaleMessages>`. Default: 'en'. */
+    locale?: TLocale;
+}
+
+export declare type TLocale = Partial<ILocaleMessages> | 'en' | 'ru';
+
+export declare type TTheme = 'light' | 'dark' | 'contrast';
+
+export declare const useConfigContext: () => IConfigContext;
+
+export declare const useLocale: () => ILocaleMessages;
+
+export { }

package/dist/config-provider.js

@@ -0,0 +1,14 @@
+import { C as t } from "./useLocale-D2Z0JH0l.mjs";
+import { a as f, u } from "./useLocale-D2Z0JH0l.mjs";
+import { useContext as e } from "react";
+const i = () => {
+  const o = e(t);
+  if (!o)
+    throw new Error("useConfigContext must be used within a ConfigProvider");
+  return o;
+};
+export {
+  f as ConfigProvider,
+  i as useConfigContext,
+  u as useLocale
+};

package/dist/css/palettes/indigo.css

@@ -0,0 +1,104 @@
+:root {
+  /* Brand */
+  --palette-brand: #6366f3;
+  --palette-brand-hover: #5558e6;
+  --palette-brand-secondary: #eef2ff;
+
+  /* Gray scale */
+  --palette-gray-25: #fcfcfd;
+  --palette-gray-50: #f9fafb;
+  --palette-gray-100: #f2f4f7;
+  --palette-gray-200: #e4e7ec;
+  --palette-gray-300: #d0d5dd;
+  --palette-gray-400: #98a2b3;
+  --palette-gray-500: #667085;
+  --palette-gray-600: #475467;
+  --palette-gray-700: #344054;
+  --palette-gray-800: #1d2939;
+  --palette-gray-900: #101828;
+
+  /* Colors */
+  --palette-red-500: #d92d20;
+  --palette-red-600: #b42318;
+  --palette-orange-500: #b54708;
+  --palette-orange-600: #93370d;
+  --palette-green-500: #079455;
+  --palette-green-600: #067647;
+  --palette-blue-500: #175cd3;
+  --palette-blue-600: #1250b3;
+
+  /* Neutral */
+  --palette-white: #fff;
+  --palette-black: #000;
+  --palette-overlay: rgb(0, 0, 0 / 0.4);
+}
+
+[data-theme="dark"] {
+  /* Brand */
+  --palette-brand: #818cf8;
+  --palette-brand-hover: #6366f3;
+  --palette-brand-secondary: #1e1b4b;
+
+  /* Gray scale */
+  --palette-gray-25: #0a0a0b;
+  --palette-gray-50: #141416;
+  --palette-gray-100: #1c1c1f;
+  --palette-gray-200: #26262b;
+  --palette-gray-300: #3a3a42;
+  --palette-gray-400: #5c5c66;
+  --palette-gray-500: #7a7a85;
+  --palette-gray-600: #9d9da8;
+  --palette-gray-700: #bebec9;
+  --palette-gray-800: #dedee6;
+  --palette-gray-900: #f2f2f7;
+
+  /* Colors */
+  --palette-red-500: #f97066;
+  --palette-red-600: #f04438;
+  --palette-orange-500: #fdb022;
+  --palette-orange-600: #f79009;
+  --palette-green-500: #47cd89;
+  --palette-green-600: #2ed477;
+  --palette-blue-500: #53b1fd;
+  --palette-blue-600: #2e90fa;
+
+  /* Neutral */
+  --palette-white: #141416;
+  --palette-black: #fff;
+  --palette-overlay: rgb(0, 0, 0 / 0.6);
+}
+
+[data-theme="contrast"] {
+  /* Brand */
+  --palette-brand: #00f;
+  --palette-brand-hover: #00c;
+  --palette-brand-secondary: #e6e6ff;
+
+  /* Gray scale */
+  --palette-gray-25: #fff;
+  --palette-gray-50: #f0f0f0;
+  --palette-gray-100: #e0e0e0;
+  --palette-gray-200: #c0c0c0;
+  --palette-gray-300: #808080;
+  --palette-gray-400: #606060;
+  --palette-gray-500: #404040;
+  --palette-gray-600: #202020;
+  --palette-gray-700: #101010;
+  --palette-gray-800: #080808;
+  --palette-gray-900: #000;
+
+  /* Colors */
+  --palette-red-500: #c00;
+  --palette-red-600: #900;
+  --palette-orange-500: #c60;
+  --palette-orange-600: #994d00;
+  --palette-green-500: #060;
+  --palette-green-600: #004d00;
+  --palette-blue-500: #04c;
+  --palette-blue-600: #039;
+
+  /* Neutral */
+  --palette-white: #fff;
+  --palette-black: #000;
+  --palette-overlay: rgb(0, 0, 0 / 0.7);
+}

package/dist/css/palettes/monochrome.css

@@ -0,0 +1,104 @@
+:root {
+  /* Brand */
+  --palette-brand: #44403c;
+  --palette-brand-hover: #292524;
+  --palette-brand-secondary: #f5f5f4;
+
+  /* Gray scale (warm) */
+  --palette-gray-25: #fcfcf9;
+  --palette-gray-50: #fafaf9;
+  --palette-gray-100: #f5f5f4;
+  --palette-gray-200: #e7e5e4;
+  --palette-gray-300: #d6d3d1;
+  --palette-gray-400: #a8a29e;
+  --palette-gray-500: #78716c;
+  --palette-gray-600: #57534e;
+  --palette-gray-700: #44403c;
+  --palette-gray-800: #292524;
+  --palette-gray-900: #1c1917;
+
+  /* Colors (same as indigo) */
+  --palette-red-500: #d92d20;
+  --palette-red-600: #b42318;
+  --palette-orange-500: #b54708;
+  --palette-orange-600: #93370d;
+  --palette-green-500: #079455;
+  --palette-green-600: #067647;
+  --palette-blue-500: #175cd3;
+  --palette-blue-600: #1250b3;
+
+  /* Neutral */
+  --palette-white: #fff;
+  --palette-black: #000;
+  --palette-overlay: rgb(0, 0, 0 / 0.4);
+}
+
+[data-theme="dark"] {
+  /* Brand */
+  --palette-brand: #d6d3d1;
+  --palette-brand-hover: #e7e5e4;
+  --palette-brand-secondary: #292524;
+
+  /* Gray scale (warm, inverted) */
+  --palette-gray-25: #0c0a09;
+  --palette-gray-50: #141211;
+  --palette-gray-100: #1c1917;
+  --palette-gray-200: #292524;
+  --palette-gray-300: #44403c;
+  --palette-gray-400: #57534e;
+  --palette-gray-500: #78716c;
+  --palette-gray-600: #a8a29e;
+  --palette-gray-700: #d6d3d1;
+  --palette-gray-800: #e7e5e4;
+  --palette-gray-900: #f5f5f4;
+
+  /* Colors (same as indigo) */
+  --palette-red-500: #f97066;
+  --palette-red-600: #f04438;
+  --palette-orange-500: #fdb022;
+  --palette-orange-600: #f79009;
+  --palette-green-500: #47cd89;
+  --palette-green-600: #2ed477;
+  --palette-blue-500: #53b1fd;
+  --palette-blue-600: #2e90fa;
+
+  /* Neutral */
+  --palette-white: #141211;
+  --palette-black: #fff;
+  --palette-overlay: rgb(0, 0, 0 / 0.6);
+}
+
+[data-theme="contrast"] {
+  /* Brand */
+  --palette-brand: #000;
+  --palette-brand-hover: #333;
+  --palette-brand-secondary: #fff;
+
+  /* Gray scale (pure b/w) */
+  --palette-gray-25: #fff;
+  --palette-gray-50: #f0f0f0;
+  --palette-gray-100: #e0e0e0;
+  --palette-gray-200: #c0c0c0;
+  --palette-gray-300: #808080;
+  --palette-gray-400: #606060;
+  --palette-gray-500: #404040;
+  --palette-gray-600: #202020;
+  --palette-gray-700: #101010;
+  --palette-gray-800: #080808;
+  --palette-gray-900: #000;
+
+  /* Colors (same as indigo) */
+  --palette-red-500: #c00;
+  --palette-red-600: #900;
+  --palette-orange-500: #c60;
+  --palette-orange-600: #994d00;
+  --palette-green-500: #060;
+  --palette-green-600: #004d00;
+  --palette-blue-500: #04c;
+  --palette-blue-600: #039;
+
+  /* Neutral */
+  --palette-white: #fff;
+  --palette-black: #000;
+  --palette-overlay: rgb(0, 0, 0 / 0.7);
+}

package/dist/css/semantic.css

@@ -0,0 +1,113 @@
+:root {
+  /* ═══════════════════════════════════════════════════
+     Color
+     ═══════════════════════════════════════════════════ */
+
+  /* Background */
+  --color-background-brand: var(--palette-brand);
+  --color-background-brand-hover: var(--palette-brand-hover);
+  --color-background-brand-secondary: var(--palette-brand-secondary);
+  --color-background-primary: var(--palette-white);
+  --color-background-secondary: var(--palette-gray-50);
+  --color-background-tertiary: var(--palette-gray-100);
+  --color-background-disabled: var(--palette-gray-100);
+  --color-background-error: var(--palette-red-500);
+  --color-background-error-hover: var(--palette-red-600);
+  --color-background-overlay: var(--palette-overlay);
+
+  /* Text */
+  --color-text-primary: var(--palette-gray-900);
+  --color-text-secondary: var(--palette-gray-600);
+  --color-text-tertiary: var(--palette-gray-500);
+  --color-text-quaternary: var(--palette-gray-300);
+  --color-text-disabled: var(--palette-gray-300);
+  --color-text-on-brand: var(--palette-white);
+  --color-text-on-dark: var(--palette-white);
+  --color-text-link: var(--palette-blue-500);
+  --color-text-link-hover: var(--palette-blue-600);
+  --color-text-error: var(--palette-red-500);
+  --color-text-error-hover: var(--palette-red-600);
+  --color-text-success: var(--palette-green-600);
+  --color-text-success-hover: var(--palette-green-600);
+  --color-text-warning: var(--palette-orange-500);
+  --color-text-warning-hover: var(--palette-orange-600);
+
+  /* Border */
+  --color-border-primary: var(--palette-gray-200);
+  --color-border-secondary: var(--palette-gray-100);
+  --color-border-disabled: var(--palette-gray-200);
+  --color-border-disabled-subtle: var(--palette-gray-200);
+  --color-border-focus: var(--palette-brand);
+  --color-border-focus-error: var(--palette-red-500);
+
+  /* ═══════════════════════════════════════════════════
+     Space (base: 4px)
+     ═══════════════════════════════════════════════════ */
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+
+  /* ═══════════════════════════════════════════════════
+     Radius
+     ═══════════════════════════════════════════════════ */
+
+  --radius-1: 4px;
+  --radius-2: 8px;
+  --radius-3: 12px;
+  --radius-4: 16px;
+  --radius-full: 9999px;
+
+  /* ═══════════════════════════════════════════════════
+     Font
+     ═══════════════════════════════════════════════════ */
+
+  --font-family-body: "Inter", "Arial", "Helvetica", sans-serif;
+
+  /* Font Sizes. */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+
+  /* Font Weights. */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line-height на сетке 4px */
+  --line-height-xs: 16px;
+  --line-height-sm: 20px;
+  --line-height-md: 20px;
+  --line-height-lg: 24px;
+  --line-height-xl: 28px;
+  --line-height-2xl: 32px;
+
+  /* ═══════════════════════════════════════════════════
+     Shadow
+     ═══════════════════════════════════════════════════ */
+
+  --shadow-xs: 0 1px 2px 0 rgb(0, 0, 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0, 0, 0 / 0.1), 0 1px 2px -1px rgb(0, 0, 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0, 0, 0 / 0.1), 0 2px 4px -2px rgb(0, 0, 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0, 0, 0 / 0.1), 0 4px 6px -4px rgb(0, 0, 0 / 0.1);
+}
+
+[data-theme="dark"] {
+  --color-border-primary: var(--palette-gray-700);
+  --color-border-secondary: var(--palette-gray-600);
+  --color-border-disabled: var(--palette-gray-600);
+  --color-border-disabled-subtle: var(--palette-gray-500);
+}

package/dist/dialog.css

@@ -0,0 +1 @@
+._root_1fxwu_1{display:flex;gap:var(--dialog-actions-gap)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--dialog-underlay: var(--color-background-overlay);--dialog-bg: var(--color-background-primary);--dialog-radius: var(--radius-3);--dialog-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--dialog-padding: var(--space-8);--dialog-gap: var(--space-6);--dialog-header-gap: var(--space-6);--dialog-header-min-height: calc(24px + var(--space-6));--dialog-close-color: var(--palette-gray-400);--dialog-close-padding: var(--space-3);--dialog-actions-padding-top: var(--space-10);--dialog-width-xs: 384px;--dialog-width-sm: 480px;--dialog-width-md: 560px;--dialog-width-lg: 640px;--dialog-title-font-size: var(--font-size-md);--dialog-title-weight: var(--font-weight-semibold);--dialog-title-color: var(--color-text-primary);--dialog-title-font-family: var(--font-family-body);--dialog-title-line-height: var(--line-height-md);--dialog-actions-gap: var(--space-4)}._underlay_8hbwf_25{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--dialog-underlay);inset:0;padding:var(--space-4);position:fixed;z-index:1000}._modal_8hbwf_34{align-items:center;display:flex;height:100%;justify-content:center}._dialog_8hbwf_41{background:var(--dialog-bg);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);display:flex;flex-direction:column;gap:var(--dialog-gap);padding:var(--dialog-padding);position:relative}._dialog_8hbwf_41._sizeXs_8hbwf_51{width:var(--dialog-width-xs)}._dialog_8hbwf_41._sizeSm_8hbwf_54{width:var(--dialog-width-sm)}._dialog_8hbwf_41._sizeMd_8hbwf_57{width:var(--dialog-width-md)}._dialog_8hbwf_41._sizeLg_8hbwf_60{width:var(--dialog-width-lg)}._header_8hbwf_64{align-items:center;display:flex;gap:var(--dialog-header-gap);min-height:var(--dialog-header-min-height)}._close_8hbwf_71{color:var(--dialog-close-color);padding:var(--dialog-close-padding);position:absolute;right:var(--space-4);top:var(--space-4)}._actions_8hbwf_79{padding-top:var(--dialog-actions-padding-top)}._root_1ae0y_1{color:var(--dialog-title-color);font-family:var(--dialog-title-font-family);font-size:var(--dialog-title-font-size);font-style:normal;font-weight:var(--dialog-title-weight);line-height:var(--dialog-title-line-height);max-height:100%}

package/dist/dialog.d.ts

@@ -0,0 +1,91 @@
+import { AriaDialogProps } from 'react-aria';
+import { default as default_2 } from 'react';
+
+/**
+ * Dialog Actions sub component.
+ *
+ * Used to render the actions of the dialog.
+ */
+declare const Actions: default_2.FC<IActionsProps>;
+
+declare const Content: default_2.FC<IContentProps>;
+
+/**
+ * Dialog component.
+ */
+declare const Dialog_2: default_2.FC<IDialogProps>;
+
+/**
+ * Dialog component.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <Dialog.Content>
+ *     <div>Content</div>
+ *   </Dialog.Content>
+ *   <Dialog.Actions>
+ *     <Button>Close dialog</Button>
+ *   </Dialog.Actions>
+ * </Dialog>
+ * ```
+ */
+declare const DialogCompoundComponent: TDialogCompoundComponent;
+export { DialogCompoundComponent as Dialog }
+export default DialogCompoundComponent;
+
+/**
+ * Enumerates sizes of elements.
+ */
+declare enum EElementSize {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+
+export declare interface IActionsProps extends default_2.PropsWithChildren {
+}
+
+export declare interface IContentProps extends default_2.PropsWithChildren {
+}
+
+export declare interface IDialogProps extends default_2.PropsWithChildren, AriaDialogProps {
+    /** Close the dialog when the escape key is pressed. */
+    closeOnEscape?: boolean;
+    /**
+     * The container element in which the overlay portal will be placed.
+     * @default document.body
+     */
+    container?: HTMLElement;
+    /** Callback that is called when the dialog is opened or closed. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether the dialog is modal.
+     * Modal dialog is not dismissable by clicking outside or pressing the Escape key.
+     */
+    modal?: boolean;
+    /** Whether the dialog is open. */
+    open?: boolean;
+    /** Size of the dialog. */
+    size?: TDialogSize;
+}
+
+export declare interface ITitleProps extends default_2.PropsWithChildren {
+}
+
+declare type TDialogCompoundComponent = typeof Dialog_2 & {
+    Actions: typeof Actions;
+    Content: typeof Content;
+    Title: typeof Title;
+};
+
+/**
+ * Dialog sizes.
+ */
+declare type TDialogSize = `${EElementSize.XS | EElementSize.SM | EElementSize.MD | EElementSize.LG}`;
+
+declare const Title: default_2.FC<ITitleProps>;
+
+export { }

package/dist/dialog.js

@@ -0,0 +1,75 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useRef as _, useMemo as I } from "react";
+import { c as S } from "./clsx-OuTLNxxd.mjs";
+import { $ as x, a as A } from "./useModalOverlay-D5Bs9FCB.mjs";
+import { r as E } from "./Overlay-RmiBtqDR.mjs";
+import { a as M } from "./useOverlayTriggerState-BIo1Jcba.mjs";
+import { u as P } from "./useLocale-D2Z0JH0l.mjs";
+import { g as X } from "./getComponentSlots-DwAYUFNk.mjs";
+import { g as j } from "./getVariantClassName-D7Nhpuec.mjs";
+import './dialog.css';var s = /* @__PURE__ */ ((o) => (o.ACTIONS = "Dialog.Actions", o.CONTENT = "Dialog.Content", o.TITLE = "Dialog.Title", o))(s || {});
+const R = "_root_1fxwu_1", k = {
+  root: R
+}, h = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ e("div", { className: k.root, children: t });
+};
+h.displayName = s.ACTIONS;
+const K = "_root_jagsa_1", V = {
+  root: K
+}, N = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ e("div", { className: V.root, children: t });
+};
+N.displayName = s.CONTENT;
+const Y = "Dialog", q = [s.ACTIONS, s.CONTENT, s.TITLE], B = "_underlay_8hbwf_25", F = "_modal_8hbwf_34", G = "_dialog_8hbwf_41", H = "_sizeXs_8hbwf_51", J = "_sizeSm_8hbwf_54", Q = "_sizeMd_8hbwf_57", U = "_sizeLg_8hbwf_60", W = "_header_8hbwf_64", Z = "_close_8hbwf_71", oo = "_actions_8hbwf_79", a = {
+  underlay: B,
+  modal: F,
+  dialog: G,
+  sizeXs: H,
+  sizeSm: J,
+  sizeMd: Q,
+  sizeLg: U,
+  header: W,
+  close: Z,
+  actions: oo
+}, b = (o) => {
+  const { children: t, container: T, open: l, modal: g = !0, onOpenChange: u, size: C = "md" } = o, $ = P(), i = _(null), c = _(null), { dialogProps: y } = x(o, i), r = M({ isOpen: l, onOpenChange: u }), { modalProps: z, underlayProps: D } = A(
+    { isDismissable: !g, isKeyboardDismissDisabled: !1 },
+    r,
+    c
+  ), {
+    [s.ACTIONS]: d,
+    [s.CONTENT]: m,
+    [s.TITLE]: v
+  } = I(() => X(t, q), [t]), w = (O) => {
+    O.preventDefault(), r.close();
+  };
+  if (!l)
+    return null;
+  const L = S(a.dialog, j("size", C, a));
+  return /* @__PURE__ */ e(E, { portalContainer: T, children: /* @__PURE__ */ e("div", { className: a.underlay, ...D, children: /* @__PURE__ */ e("div", { className: a.modal, ...z, ref: c, children: /* @__PURE__ */ f("div", { className: L, ...y, ref: i, children: [
+    /* @__PURE__ */ f("div", { className: a.header, children: [
+      v,
+      /* @__PURE__ */ e("button", { "aria-label": $.dialog.close, className: a.close, onClick: w, children: "X" })
+    ] }),
+    m && /* @__PURE__ */ e("div", { children: m }),
+    d && /* @__PURE__ */ e("div", { className: a.actions, children: d })
+  ] }) }) }) });
+};
+b.displayName = Y;
+const so = "_root_1ae0y_1", eo = {
+  root: so
+}, p = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ e("div", { className: eo.root, children: t });
+};
+p.displayName = s.TITLE;
+const n = b;
+n.Actions = h;
+n.Content = N;
+n.Title = p;
+export {
+  n as Dialog,
+  n as default
+};

package/dist/drawer.css

@@ -0,0 +1 @@
+._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--drawer-underlay: var(--color-background-overlay);--drawer-bg: var(--color-background-primary);--drawer-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--drawer-padding: var(--space-8);--drawer-gap: var(--space-6);--drawer-header-gap: var(--space-6);--drawer-header-min-height: calc(24px + var(--space-6));--drawer-close-color: var(--palette-gray-400);--drawer-close-padding: var(--space-3);--drawer-width-sm: 384px;--drawer-width-md: 480px;--drawer-width-lg: 640px;--drawer-height-sm: 320px;--drawer-height-md: 480px;--drawer-height-lg: 640px;--drawer-title-font-size: var(--font-size-md);--drawer-title-weight: var(--font-weight-semibold);--drawer-title-color: var(--color-text-primary);--drawer-title-font-family: var(--font-family-body);--drawer-title-line-height: var(--line-height-md)}._underlay_7b6q3_24{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--drawer-underlay);inset:0;position:fixed;z-index:1000}._modal_7b6q3_32{display:flex;height:100%}._drawer_7b6q3_37{background:var(--drawer-bg);box-shadow:var(--drawer-shadow);display:flex;flex-direction:column;gap:var(--drawer-gap);padding:var(--drawer-padding);position:fixed;transition:transform .3s ease}._drawer_7b6q3_37._placementLeft_7b6q3_47{bottom:0;left:0;top:0;transform:translate(-100%)}._drawer_7b6q3_37._placementLeft_7b6q3_47._entered_7b6q3_53{transform:translate(0)}._drawer_7b6q3_37._placementRight_7b6q3_56{bottom:0;right:0;top:0;transform:translate(100%)}._drawer_7b6q3_37._placementRight_7b6q3_56._entered_7b6q3_53{transform:translate(0)}._drawer_7b6q3_37._placementTop_7b6q3_65{left:0;right:0;top:0;transform:translateY(-100%)}._drawer_7b6q3_37._placementTop_7b6q3_65._entered_7b6q3_53{transform:translateY(0)}._drawer_7b6q3_37._placementBottom_7b6q3_74{bottom:0;left:0;right:0;transform:translateY(100%)}._drawer_7b6q3_37._placementBottom_7b6q3_74._entered_7b6q3_53{transform:translateY(0)}._drawer_7b6q3_37._sizeSm_7b6q3_83{width:var(--drawer-width-sm)}._drawer_7b6q3_37._sizeSm_7b6q3_83._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeSm_7b6q3_83._placementBottom_7b6q3_74{height:var(--drawer-height-sm);width:100%}._drawer_7b6q3_37._sizeMd_7b6q3_90{width:var(--drawer-width-md)}._drawer_7b6q3_37._sizeMd_7b6q3_90._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeMd_7b6q3_90._placementBottom_7b6q3_74{height:var(--drawer-height-md);width:100%}._drawer_7b6q3_37._sizeLg_7b6q3_97{width:var(--drawer-width-lg)}._drawer_7b6q3_37._sizeLg_7b6q3_97._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeLg_7b6q3_97._placementBottom_7b6q3_74{height:var(--drawer-height-lg);width:100%}._content_7b6q3_105{flex:1;overflow-y:auto}:root{--drawer-header-gap: var(--space-6);--drawer-header-min-height: calc(24px + var(--space-6));--drawer-close-color: var(--palette-gray-400);--drawer-close-padding: var(--space-3);--drawer-title-font-size: var(--font-size-md);--drawer-title-weight: var(--font-weight-semibold);--drawer-title-color: var(--color-text-primary);--drawer-title-font-family: var(--font-family-body);--drawer-title-line-height: var(--line-height-md)}._root_1fwv3_13{align-items:center;display:flex;gap:var(--drawer-header-gap);min-height:var(--drawer-header-min-height);position:relative}._title_1fwv3_21{color:var(--drawer-title-color);flex:1;font-family:var(--drawer-title-font-family);font-size:var(--drawer-title-font-size);font-style:normal;font-weight:var(--drawer-title-weight);line-height:var(--drawer-title-line-height)}._close_1fwv3_31{color:var(--drawer-close-color);padding:var(--drawer-close-padding);position:absolute;right:0;top:50%;transform:translateY(-50%)}