@dss-kit/ui-kit 1.0.2 → 1.0.3

package/dist/components/builders/Dialog/Dialog.const.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Части диалога. Каждая помечает свой корневой элемент атрибутом
+ * `data-dialog-part`, чтобы контейнер мог найти её в DOM, не зная её устройства.
+ * Например, `Sheet` делает `header` зоной перетаскивания, а `main` растягивает
+ * на свободную высоту.
+ */
+export type DialogPart = "header" | "main" | "footer";
+/** CSS-селектор части диалога: `[data-dialog-part="header"]` и т.п. */
+export declare const getDialogPartSelector: (part: DialogPart) => string;

package/dist/components/builders/Dialog/Dialog.const.js

@@ -0,0 +1,4 @@
+const a = (t) => `[data-dialog-part="${t}"]`;
+export {
+  a as getDialogPartSelector
+};

package/dist/components/builders/Dialog/Dialog.context.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Контекст диалога. Его задаёт контейнер (`Modal`, `Sheet`), а части берут
+ * отсюда `onClose` для кнопки закрытия и `showBorders` для своих границ.
+ */
+export interface DialogContextValue {
+    /** Callback закрытия диалога */
+    onClose: () => void;
+    /** Показывать ли границы под Header и над Footer */
+    showBorders: boolean;
+}
+export declare const DialogContext: import('react').Context<DialogContextValue>;
+export declare const useDialogContext: () => DialogContextValue;

package/dist/components/builders/{Modal/context.js → Dialog/Dialog.context.js}

@@ -1,10 +1,10 @@
 import { createContext as o, useContext as t } from "react";
 const e = o({
-  isOpen: !1,
   onClose: () => {
-  }
-}), s = () => t(e);
+  },
+  showBorders: !0
+}), r = () => t(e);
 export {
-  e as ModalContext,
-  s as useModalContext
+  e as DialogContext,
+  r as useDialogContext
 };

package/dist/components/builders/Dialog/Dialog.parts.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Части диалога для составных компонентов: `Modal.Header`, `Sheet.Header`
+ * и т.д. Обе обёртки получают один и тот же набор, поэтому
+ * `Modal.Header === Sheet.Header`.
+ */
+export declare const dialogParts: {
+    Header: import('react').ForwardRefExoticComponent<import('./DialogHeader').DialogHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Main: import('react').ForwardRefExoticComponent<import('./DialogMain').DialogMainProps & import('react').RefAttributes<import('./DialogMain').DialogMainRef>>;
+    Footer: import('react').ForwardRefExoticComponent<Omit<import('./DialogFooter').DialogFooterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export type DialogParts = typeof dialogParts;

package/dist/components/builders/Dialog/Dialog.parts.js

@@ -0,0 +1,11 @@
+import { DialogFooter as o } from "./DialogFooter/DialogFooter.js";
+import { DialogMain as r } from "./DialogMain/DialogMain.js";
+import { DialogHeader as a } from "./DialogHeader/DialogHeader.js";
+const m = {
+  Header: a,
+  Main: r,
+  Footer: o
+};
+export {
+  m as dialogParts
+};

package/dist/components/builders/Dialog/Dialog.types.d.ts

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Общие пропсы диалогов. `ModalProps` и `SheetProps` расширяют их своими.
+ */
+export interface DialogProps extends PropsWithChildren {
+    /** Показывать ли диалог */
+    isOpen: boolean;
+    /** Callback закрытия диалога */
+    onClose: () => void;
+    /**
+     * Цвет фона: любой CSS-цвет или токен,
+     * например `theme.color.fill.bg_secondary`
+     * @default theme.color.fill.bg_primary */
+    backgroundColor?: string;
+    /**
+     * Закрывать ли при клике на backdrop
+     * @default true */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Закрывать ли при нажатии ESC
+     * @default true */
+    closeOnEsc?: boolean;
+    /**
+     * Отключать прокрутку body, пока диалог открыт
+     * @default true */
+    disableBodyScroll?: boolean;
+    /**
+     * Показывать ли кнопку закрытия c абсолютным позиционированием внутри
+     * диалога (когда не нужен Header)
+     * @default undefined */
+    showAbsoluteCloseButton?: boolean;
+    /**
+     * Показывать ли границы под Header и над Footer.
+     * По умолчанию у `Modal` включены, у `Sheet` выключены */
+    showBorders?: boolean;
+    /**
+     * Кастомный класс для overlay (backdrop)
+     * @default undefined */
+    overlayClassName?: string;
+    /**
+     * Кастомный класс для абсолютной кнопки закрытия (когда `showAbsoluteCloseButton`)
+     * @default undefined */
+    absoluteCloseButtonClassName?: string;
+}

package/dist/components/builders/Dialog/DialogCloseButton/DialogCloseButton.d.ts

@@ -0,0 +1,10 @@
+export interface DialogCloseButtonProps {
+    /**
+     * В правом верхнем углу диалога поверх содержимого — когда нет Header
+     * @default false */
+    absolute?: boolean;
+    /** Класс для `IconButton` */
+    className?: string;
+}
+/** Кнопка закрытия диалога: вызывает `onClose` из `DialogContext` */
+export declare function DialogCloseButton({ absolute, className, }: DialogCloseButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/builders/Dialog/DialogCloseButton/DialogCloseButton.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import l from "../../../../assets/svg/modal/close.svg.js";
+import { useDialogContext as s } from "../Dialog.context.js";
+import { IconButton as m } from "../../../controls/IconButton/IconButton.js";
+import { Box as p } from "../../Box/Box.js";
+import { theme as r } from "../../../../utils/theme/index.js";
+function C({
+  absolute: n = !1,
+  className: i
+}) {
+  const { onClose: e } = s(), t = /* @__PURE__ */ o(
+    m,
+    {
+      onClick: e,
+      color: "neutral",
+      className: i,
+      size: "xs",
+      children: /* @__PURE__ */ o(l, {})
+    }
+  );
+  return n ? /* @__PURE__ */ o(
+    p,
+    {
+      position: "absolute",
+      top: r.spacing.lg,
+      right: r.spacing.lg,
+      zIndex: 1,
+      children: t
+    }
+  ) : t;
+}
+export {
+  C as DialogCloseButton
+};

package/dist/components/builders/Dialog/DialogCloseButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { DialogCloseButtonProps } from './DialogCloseButton';
+export { DialogCloseButton } from './DialogCloseButton';

package/dist/components/builders/{Modal/ModalFooter/ModalFooter.d.ts → Dialog/DialogFooter/DialogFooter.d.ts}

@@ -1,11 +1,11 @@
 import { BoxProps } from '../../Box';
 /**
- * Пропсы компонента `ModalFooter`.
+ * Пропсы компонента `DialogFooter`.
  *
  * Наследует все пропсы `Box` (см. {@link BoxProps}); ниже переопределены
  * футер-специфичные пропсы с их значениями по умолчанию.
  */
-export interface ModalFooterProps extends BoxProps {
+export interface DialogFooterProps extends BoxProps {
     /**
      * Дочерние элементы футера (обычно кнопки действий).
      * @default undefined */
@@ -32,42 +32,33 @@ export interface ModalFooterProps extends BoxProps {
     className?: string;
 }
 /**
- * Компонент футера модального окна.
+ * Компонент футера диалога. Общий для `Modal` и `Sheet`: доступен как
+ * `Modal.Footer` и `Sheet.Footer`.
  *
- * `ModalFooter` представляет собой нижнюю часть модального окна, предназначенную
+ * `DialogFooter` представляет собой нижнюю часть диалога, предназначенную
  * для размещения кнопок действий и другого контента управления. Компонент является
  * оберткой над `Box` с предустановленными стилями и настройками.
  *
  * @example
  * ```tsx
  * // Базовое использование с кнопками
- * <ModalFooter>
+ * <Modal.Footer>
  *   <Button variant="secondary">Отмена</Button>
  *   <Button variant="primary">Сохранить</Button>
- * </ModalFooter>
+ * </Modal.Footer>
  *
  * // С настройкой отступов
- * <ModalFooter gap="var(--spacing-md)" p="var(--spacing-xl)">
+ * <Modal.Footer gap="var(--spacing-md)" p="var(--spacing-xl)">
  *   <Button variant="ghost">Назад</Button>
  *   <Button variant="primary">Далее</Button>
- * </ModalFooter>
+ * </Modal.Footer>
  *
  * // Вертикальное расположение
- * <ModalFooter row={false}>
+ * <Modal.Footer row={false}>
  *   <Button variant="primary" fullWidth>Основное действие</Button>
  *   <Button variant="secondary" fullWidth>Дополнительное действие</Button>
- * </ModalFooter>
+ * </Modal.Footer>
  * ```
  */
-declare const ModalFooter: import('react').ForwardRefExoticComponent<Omit<ModalFooterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Экспорт компонента ModalFooter.
- *
- * Компонент автоматически применяет следующие стили:
- * - Верхняя граница для визуального разделения с основным контентом
- * - Flexbox layout с горизонтальным расположением по умолчанию
- * - Стандартные отступы и промежутки между элементами
- *
- * Поддерживает все пропсы компонента Box для максимальной гибкости настройки.
- */
-export { ModalFooter };
+declare const DialogFooter: import('react').ForwardRefExoticComponent<Omit<DialogFooterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { DialogFooter };

package/dist/components/builders/Dialog/DialogFooter/DialogFooter.js

@@ -0,0 +1,48 @@
+import { jsx as y } from "react/jsx-runtime";
+import { cx as D, css as s } from "@emotion/css";
+import { forwardRef as w } from "react";
+import { bp as B } from "../../../../styles/utils/breakpoints.js";
+import { useDialogContext as C } from "../Dialog.context.js";
+import { Box as F } from "../../Box/Box.js";
+import { theme as o } from "../../../../utils/theme/index.js";
+const N = s({
+  borderTop: `1px solid ${o.color.border.neutral_alpha_basic}`
+}), P = s({
+  [B.sm()]: { padding: o.spacing.lg }
+}), S = w(
+  ({
+    children: a,
+    row: e = !0,
+    flex: i = !0,
+    gap: p = o.spacing.lg,
+    p: r,
+    className: m,
+    ...t
+  }, l) => {
+    const { showBorders: d } = C(), { px: n, py: c, pt: g, pr: f, pb: x, pl: b } = t, u = [r, n, c, g, f, x, b].some(
+      (h) => h !== void 0
+    );
+    return /* @__PURE__ */ y(
+      F,
+      {
+        "data-dialog-part": "footer",
+        flex: i,
+        row: e,
+        gap: p,
+        p: r ?? o.spacing["2xl"],
+        className: D(
+          d && N,
+          !u && P,
+          m
+        ),
+        ref: l,
+        ...t,
+        children: a
+      }
+    );
+  }
+);
+S.displayName = "DialogFooter";
+export {
+  S as DialogFooter
+};

package/dist/components/builders/Dialog/DialogFooter/index.d.ts

@@ -0,0 +1,2 @@
+export type { DialogFooterProps } from './DialogFooter';
+export { DialogFooter } from './DialogFooter';

package/dist/components/builders/{Modal/ModalHeader/ModalHeader.d.ts → Dialog/DialogHeader/DialogHeader.d.ts}

@@ -1,7 +1,7 @@
 import { BoxProps } from '../../Box';
-export interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb" | "row" | "justifyContent" | "w"> {
+export interface DialogHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb" | "row" | "justifyContent" | "w"> {
     /**
-     * Основной заголовок, отображаемый в шапке модального окна.
+     * Основной заголовок, отображаемый в шапке диалога.
      * Стилизуется как title-3 с полужирным начертанием.
      *
      * @default undefined */
@@ -14,8 +14,8 @@ export interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt
      * @default undefined */
     subtitle?: string;
     /**
-     * Флаг отображения кнопки закрытия модального окна в правой части шапки.
-     * При нажатии вызывает колбэк onClose из ModalContext.
+     * Флаг отображения кнопки закрытия диалога в правой части шапки.
+     * При нажатии вызывает колбэк onClose из DialogContext.
      *
      * @default false */
     showCloseButton?: boolean;
@@ -28,5 +28,9 @@ export interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt
     /** Класс для `IconButton` кнопки закрытия. */
     closeButtonClassName?: string;
 }
-declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
-export { ModalHeader };
+/**
+ * Шапка диалога. Общая для `Modal` и `Sheet`: доступна как `Modal.Header`
+ * и `Sheet.Header`.
+ */
+declare const DialogHeader: import('react').ForwardRefExoticComponent<DialogHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DialogHeader };

package/dist/components/builders/Dialog/DialogHeader/DialogHeader.js

@@ -0,0 +1,97 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { cx as W, css as a } from "@emotion/css";
+import { forwardRef as w } from "react";
+import { bp as i } from "../../../../styles/utils/breakpoints.js";
+import { useDialogContext as C } from "../Dialog.context.js";
+import { Text as m } from "../../Text/Text.js";
+import { DialogCloseButton as j } from "../DialogCloseButton/DialogCloseButton.js";
+import { Box as l } from "../../Box/Box.js";
+import { theme as o } from "../../../../utils/theme/index.js";
+const e = {
+  root: a({
+    [i.sm()]: { columnGap: o.spacing.md }
+  }),
+  paddingTop: a({
+    [i.sm()]: { paddingTop: o.spacing.xl }
+  }),
+  paddingX: a({
+    [i.sm()]: {
+      paddingLeft: o.spacing.lg,
+      paddingRight: o.spacing.lg
+    }
+  })
+}, H = w(
+  ({
+    title: p,
+    subtitle: n,
+    w: c = "full",
+    p: g,
+    py: f,
+    px: t,
+    pt: d,
+    pb: h = o.spacing.lg,
+    row: b = !0,
+    justifyContent: x = "space-between",
+    showCloseButton: u = !1,
+    className: N,
+    titleClassName: y,
+    subtitleClassName: v,
+    closeButtonClassName: B
+  }, D) => {
+    const { showBorders: T } = C();
+    return /* @__PURE__ */ s(
+      l,
+      {
+        "data-dialog-part": "header",
+        w: c,
+        p: g,
+        py: f,
+        px: t ?? o.spacing["2xl"],
+        pt: d ?? o.spacing["2xl"],
+        pb: h,
+        row: b,
+        justifyContent: x,
+        ref: D,
+        borderColor: o.color.border.neutral_alpha_basic,
+        borderWidth: 0,
+        borderBottomWidth: T ? 1 : 0,
+        borderStyle: "solid",
+        className: W(
+          e.root,
+          d === void 0 && e.paddingTop,
+          t === void 0 && e.paddingX,
+          N
+        ),
+        children: [
+          /* @__PURE__ */ s(l, { gap: o.spacing.sm, children: [
+            /* @__PURE__ */ r(
+              m,
+              {
+                variant: "title-3",
+                colorName: "primary",
+                fontWeight: "semibold",
+                className: y,
+                children: p
+              }
+            ),
+            /* @__PURE__ */ r(
+              m,
+              {
+                variant: "body-1",
+                colorName: "tertiary",
+                fontWeight: "medium",
+                className: v,
+                children: n
+              }
+            )
+          ] }),
+          u && /* @__PURE__ */ r(j, { className: B })
+        ]
+      }
+    );
+  }
+);
+H.displayName = "DialogHeader";
+export {
+  H as DialogHeader
+};

package/dist/components/builders/Dialog/DialogHeader/index.d.ts

@@ -0,0 +1,2 @@
+export type { DialogHeaderProps } from './DialogHeader';
+export { DialogHeader } from './DialogHeader';

package/dist/components/builders/{Modal/ModalMain/ModalMain.d.ts → Dialog/DialogMain/DialogMain.d.ts}

@@ -1,6 +1,6 @@
 import { ScrollToOptions } from '@tanstack/react-virtual';
 import { PropsWithChildren } from 'react';
-interface ModalMainRef {
+interface DialogMainRef {
     /** Скролл к началу списка */
     scrollToTop: () => void;
     /** Скролл к концу списка */
@@ -19,12 +19,12 @@ interface ModalMainRef {
     getTotalSize: () => number;
 }
 /**
- * Пропсы компонента ModalMain
+ * Пропсы компонента DialogMain
  *
- * @interface ModalMainProps
+ * @interface DialogMainProps
  * @extends {PropsWithChildren}
  */
-export interface ModalMainProps extends PropsWithChildren {
+export interface DialogMainProps extends PropsWithChildren {
     /**
      * Направление расположения элементов
      * Если true, flex-direction будет row, иначе column
@@ -55,7 +55,8 @@ export interface ModalMainProps extends PropsWithChildren {
     maxHeight?: React.CSSProperties["maxHeight"];
 }
 /**
- * Основной контейнер для содержимого модального окна с поддержкой виртуализации.
+ * Основной контейнер для содержимого диалога с поддержкой виртуализации.
+ * Общий для `Modal` и `Sheet`: доступен как `Modal.Main` и `Sheet.Main`.
  *
  * Компонент автоматически включает виртуализацию для списков более 50 элементов,
  * что значительно улучшает производительность при работе с большими объемами данных.
@@ -63,35 +64,35 @@ export interface ModalMainProps extends PropsWithChildren {
  *
  * @example
  * // Простое использование
- * <ModalMain>
+ * <Modal.Main>
  *   <div>Элемент 1</div>
  *   <div>Элемент 2</div>
- * </ModalMain>
+ * </Modal.Main>
  *
  * @example
  * // С виртуализацией и управлением скроллом
- * const modalRef = useRef<ModalMainRef>(null);
+ * const mainRef = useRef<ComponentRef<typeof Modal.Main>>(null);
  *
  * const handleScrollToTop = () => {
- *   modalRef.current?.scrollToTop();
+ *   mainRef.current?.scrollToTop();
  * };
  *
- * <ModalMain
- *   ref={modalRef}
+ * <Modal.Main
+ *   ref={mainRef}
  *   virtualize
  *   estimatedItemHeight={120}
  *   maxHeight={600}
  * >
  *   {items.map(item => <Item key={item.id} data={item} />)}
- * </ModalMain>
+ * </Modal.Main>
  *
  * @example
  * // Горизонтальное расположение
- * <ModalMain row>
+ * <Modal.Main row>
  *   <Column>Левая колонка</Column>
  *   <Column>Правая колонка</Column>
- * </ModalMain>
+ * </Modal.Main>
  */
-declare const ModalMain: import('react').ForwardRefExoticComponent<ModalMainProps & import('react').RefAttributes<ModalMainRef>>;
-export { ModalMain };
-export type { ModalMainRef };
+declare const DialogMain: import('react').ForwardRefExoticComponent<DialogMainProps & import('react').RefAttributes<DialogMainRef>>;
+export { DialogMain };
+export type { DialogMainRef };

package/dist/components/builders/{Modal/ModalMain/ModalMain.js → Dialog/DialogMain/DialogMain.js}

@@ -1,26 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
-import { cx as p } from "@emotion/css";
+import { cx as g } from "@emotion/css";
 import { useVirtualizer as T } from "@tanstack/react-virtual";
-import { forwardRef as O, useRef as y, useMemo as h, Children as z, useImperativeHandle as S } from "react";
-import { styles as u } from "./styles.js";
-import { Box as s } from "../../Box/Box.js";
+import { forwardRef as b, useRef as O, useMemo as p, Children as y, useImperativeHandle as z } from "react";
+import { styles as s } from "./styles.js";
+import { Box as a } from "../../Box/Box.js";
 import { theme as i } from "../../../../utils/theme/index.js";
-const b = O(
+const S = b(
   ({
-    children: n,
+    children: m,
     className: f,
     row: c = !1,
-    estimatedItemHeight: g = 100,
-    virtualize: m = !1,
-    maxHeight: d = 448
+    estimatedItemHeight: u = 100,
+    virtualize: d = !1,
+    maxHeight: h = 448
   }, x) => {
-    const a = y(null), t = h(() => z.toArray(n), [n]), e = T({
+    const n = O(null), t = p(() => y.toArray(m), [m]), e = T({
       count: t.length,
-      getScrollElement: () => a.current,
-      estimateSize: () => g,
+      getScrollElement: () => n.current,
+      estimateSize: () => u,
       measureElement: (o) => o.getBoundingClientRect().height
     });
-    return S(
+    return z(
       x,
       () => ({
         scrollToTop: () => e.scrollToOffset(0, { behavior: "smooth" }),
@@ -38,25 +38,26 @@ const b = O(
             behavior: "smooth"
           });
         },
-        getElement: () => a.current,
+        getElement: () => n.current,
         getScrollOffset: () => e.scrollOffset || 0,
         getTotalSize: () => e.getTotalSize()
       }),
       [e]
-    ), h(
-      () => m || t.length > 50,
-      [m, t]
+    ), p(
+      () => d || t.length > 50,
+      [d, t]
     ) && t.length > 0 ? /* @__PURE__ */ r(
-      s,
+      a,
       {
-        ref: a,
+        "data-dialog-part": "main",
+        ref: n,
         row: c,
-        maxHeight: d,
-        className: p(u.main, f),
+        maxHeight: h,
+        className: g(s.main, s.mobileVirtualPadding, f),
         w: "full",
         p: i.spacing["2xl"],
-        children: /* @__PURE__ */ r(s, { relative: !0, h: e.getTotalSize(), children: e.getVirtualItems().map((o) => /* @__PURE__ */ r(
-          s,
+        children: /* @__PURE__ */ r(a, { relative: !0, h: e.getTotalSize(), children: e.getVirtualItems().map((o) => /* @__PURE__ */ r(
+          a,
           {
             "data-index": o.index,
             ref: e.measureElement,
@@ -73,20 +74,29 @@ const b = O(
         )) })
       }
     ) : /* @__PURE__ */ r(
-      s,
+      a,
       {
-        ref: a,
-        className: p(u.main, f),
+        "data-dialog-part": "main",
+        ref: n,
+        className: g(s.main, s.mobilePadding, f),
         w: "full",
         row: c,
         pl: i.spacing["2xl"],
         pr: i.spacing.xs,
-        children: /* @__PURE__ */ r(s, { py: i.spacing["2xl"], pr: i.spacing.xl, children: n })
+        children: /* @__PURE__ */ r(
+          a,
+          {
+            py: i.spacing["2xl"],
+            pr: i.spacing.xl,
+            className: s.mobileContentPadding,
+            children: m
+          }
+        )
       }
     );
   }
 );
-b.displayName = "ModalMain";
+S.displayName = "DialogMain";
 export {
-  b as ModalMain
+  S as DialogMain
 };

package/dist/components/builders/Dialog/DialogMain/index.d.ts

@@ -0,0 +1,2 @@
+export type { DialogMainProps, DialogMainRef } from './DialogMain';
+export { DialogMain } from './DialogMain';

package/dist/components/builders/Dialog/DialogMain/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const styles: {
+    mobilePadding: string;
+    mobileContentPadding: string;
+    mobileVirtualPadding: string;
+    main: string;
+};

package/dist/components/builders/{Modal/ModalMain → Dialog/DialogMain}/styles.js

@@ -1,6 +1,22 @@
 import { css as o } from "@emotion/css";
+import { bp as a } from "../../../../styles/utils/breakpoints.js";
 import { theme as r } from "../../../../utils/theme/index.js";
 const c = {
+  // На узких экранах — отступы как у Sheet. Справа часть отступа отдана
+  // под полосу прокрутки: внешние 4px + внутренние 12px
+  mobilePadding: o({
+    [a.sm()]: { paddingLeft: r.spacing.lg }
+  }),
+  mobileContentPadding: o({
+    [a.sm()]: {
+      paddingTop: r.spacing.md,
+      paddingRight: r.spacing.md,
+      paddingBottom: r.spacing.md
+    }
+  }),
+  mobileVirtualPadding: o({
+    [a.sm()]: { padding: `${r.spacing.md} ${r.spacing.lg}` }
+  }),
   main: o({
     flex: 0,
     overflowY: "auto",

package/dist/components/builders/Dialog/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useBackdropClose } from './useBackdropClose';
+export { useBodyScrollLock } from './useBodyScrollLock';
+export { useCloseOnEsc } from './useCloseOnEsc';