@alfalab/core-components 45.9.0-beta.3 → 45.10.0

package/picker-button/modern/{typings-57569e57.d.ts → typings-1fe708ea.d.ts}

@@ -1,16 +1,17 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { HTMLAttributes, ReactElement, ReactNode, RefObject, FC, AriaAttributes, FocusEvent, MouseEvent, RefAttributes, SVGProps } from "react";
+import { HTMLAttributes, ReactElement, ReactNode, RefObject, FC, AriaAttributes, ComponentType, FocusEvent, MouseEvent, RefAttributes, SVGProps } from "react";
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./types-667e33fd";
+import { NavigationBarPrivateProps } from "./types-a870d1f8";
+import { NavigationBarPrivateProps as NavigationBarProps } from "./types-a870d1f8";
 import { BackgroundColorType } from "./index-064acd29";
 import { BaseInputProps, BackdropProps } from "./index-ebda875c";
 import { SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { FormControlProps } from "./index-c44170fe";
-import { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
+import { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
 import { PopoverProps } from "../../popover";
 import { UseSelectWithApplyProps } from "./field/Component";
 type BottomSheetTitleAlign = "center" | "left";
@@ -304,7 +305,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormC
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
-type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+type HeaderProps = Omit<NavigationBarPrivateProps, "size" | "view" | "parentRef">;
 type FooterProps = {
     /**
      * Контент футера
@@ -332,12 +333,13 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-b
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
+    iOSLock?: boolean | undefined;
 } & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<HeaderProps>;
-    Content: React.FC<import("./typings-88b743b5").ContentProps>;
+    Content: React.FC<import("./typings-d6bfd5b7").ContentProps>;
     Footer: React.FC<FooterProps>;
     Controls: React.FC<ControlsProps>;
 };
@@ -370,7 +372,7 @@ type FooterProps$0 = {
     dataTestId?: string;
 };
 declare const Footer$0: FC<FooterProps$0>;
-type HeaderProps$0 = Omit<NavigationBarProps, "view" | "size"> & {
+type HeaderProps$0 = Omit<NavigationBarPrivateProps, "view" | "size"> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };
@@ -591,11 +593,11 @@ type BaseSelectProps = {
     /**
      * Компонент стрелки
      */
-    Arrow?: FC<ArrowProps> | null | false;
+    Arrow?: ComponentType<ArrowProps> | null | false;
     /**
      * Компонент поля
      */
-    Field?: FC<FieldProps>;
+    Field?: ComponentType<FieldProps>;
     /**
      * Пропсы, которые будут прокинуты в компонент поля
      */
@@ -611,15 +613,15 @@ type BaseSelectProps = {
     /**
      * Компонент выпадающего меню
      */
-    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
+    OptionsList?: ComponentType<OptionsListProps & RefAttributes<HTMLDivElement>>;
     /**
      * Компонент группы
      */
-    Optgroup?: FC<OptgroupProps>;
+    Optgroup?: ComponentType<OptgroupProps>;
     /**
      * Компонент пункта меню
      */
-    Option?: FC<OptionProps>;
+    Option?: ComponentType<OptionProps>;
     /**
      * Включает отображение поиска
      */
@@ -627,7 +629,7 @@ type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps>;
+    Search?: ComponentType<SearchProps>;
     /**
      * Настройки поиска
      */
@@ -789,7 +791,7 @@ type OptionsListProps = {
     /**
      * Компонент пункта меню
      */
-    Option: FC<OptionProps>;
+    Option: ComponentType<OptionProps>;
     /**
      * Функция для получения пропсов для ячейки
      */
@@ -1066,8 +1068,8 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
 };
 export { BottomSheet, CLOSE_OFFSET, HEADER_OFFSET, InputProps, Input, ModalResponsive as Modal, getModalTestIds, FooterProps$0 as FooterProps, Footer$0 as Footer, HeaderProps$0 as HeaderProps, Header$0 as Header, SwipeableBackdropProps, SwipeableBackdrop, horizontalDirections, ShouldSkipSwipingParams, SwipeDirection, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };
 export type { BottomSheetProps, BottomSheetTitleAlign, HeaderProps as ModalHeaderProps, FooterProps as ModalFooterProps };
-export { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
+export { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
 export { ModalContext } from "./Context-c2e6f1b2";
-export type { ContentProps as ModalContentProps } from "./typings-88b743b5";
+export type { ContentProps as ModalContentProps } from "./typings-d6bfd5b7";
 export * from "./Component.desktop-63dec22f";
 export * from "./Component.mobile-96988a65";

package/picker-button/modern/typings-d6bfd5b7.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "./index-bdb4c6b9";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+    dataTestId?: string;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/picker-button/modern/utils/index.d.ts

@@ -1,4 +1,6 @@
-import { FC, SVGProps } from 'react';
+/// <reference types="react" />
+import { ComponentType, SVGProps } from 'react';
 import { PickerButtonVariant } from "../types";
-declare const getIcon: (variant: PickerButtonVariant, size: string) => FC<SVGProps<SVGSVGElement>>;
-export { getIcon };
+declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => import("react").FC<SVGProps<SVGSVGElement>> | import("react").ComponentClass<SVGProps<SVGSVGElement>, any>;
+declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
+export { getCompactIcon, getIcon };

package/picker-button/modern/utils/index.js

@@ -3,11 +3,17 @@ import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { MoreMIcon } from '@alfalab/icons-glyph/MoreMIcon';
 import { MoreSIcon } from '@alfalab/icons-glyph/MoreSIcon';
 
-const getIcon = (variant, size) => {
+const getCompactIcon = (size, Icon) => {
+    if (Icon) {
+        return Icon;
+    }
+    return size === 'size-32' ? MoreSIcon : MoreMIcon;
+};
+const getIcon = (variant, size, Icon) => {
     if (variant === 'compact') {
-        return size === 'size-32' ? MoreSIcon : MoreMIcon;
+        return getCompactIcon(size, Icon);
     }
     return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;
 };
 
-export { getIcon };
+export { getCompactIcon, getIcon };

package/picker-button/modern/utils-89376c31.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-57569e57";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-1fe708ea";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/picker-button/{types-667e33fd.d.ts → types-a870d1f8.d.ts}

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ReactNode } from "react";
 import { BackArrowAddonProps, CloserProps } from "./index-ebda875c";
-type NavigationBarProps = {
+type NavigationBarPrivateProps = {
     /**
      * Контент шапки
      */
@@ -114,4 +114,4 @@ type ContentParams = {
     style?: React.CSSProperties;
     hidden?: boolean;
 };
-export { NavigationBarProps, ContentParams };
+export { NavigationBarPrivateProps, ContentParams };

package/picker-button/{typings-57569e57.d.ts → typings-1fe708ea.d.ts}

@@ -1,16 +1,17 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { HTMLAttributes, ReactElement, ReactNode, RefObject, FC, AriaAttributes, FocusEvent, MouseEvent, RefAttributes, SVGProps } from "react";
+import { HTMLAttributes, ReactElement, ReactNode, RefObject, FC, AriaAttributes, ComponentType, FocusEvent, MouseEvent, RefAttributes, SVGProps } from "react";
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./types-667e33fd";
+import { NavigationBarPrivateProps } from "./types-a870d1f8";
+import { NavigationBarPrivateProps as NavigationBarProps } from "./types-a870d1f8";
 import { BackgroundColorType } from "./index-064acd29";
 import { BaseInputProps, BackdropProps } from "./index-ebda875c";
 import { SwipeableHandlers, SwipeDirections } from "react-swipeable";
 import { FormControlProps } from "./index-c44170fe";
-import { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
+import { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
 import { PopoverProps } from "../popover";
 import { UseSelectWithApplyProps } from "./field/Component";
 type BottomSheetTitleAlign = "center" | "left";
@@ -304,7 +305,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormC
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
-type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+type HeaderProps = Omit<NavigationBarPrivateProps, "size" | "view" | "parentRef">;
 type FooterProps = {
     /**
      * Контент футера
@@ -332,12 +333,13 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("./index-b
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
+    iOSLock?: boolean | undefined;
 } & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<HeaderProps>;
-    Content: React.FC<import("./typings-88b743b5").ContentProps>;
+    Content: React.FC<import("./typings-d6bfd5b7").ContentProps>;
     Footer: React.FC<FooterProps>;
     Controls: React.FC<ControlsProps>;
 };
@@ -370,7 +372,7 @@ type FooterProps$0 = {
     dataTestId?: string;
 };
 declare const Footer$0: FC<FooterProps$0>;
-type HeaderProps$0 = Omit<NavigationBarProps, "view" | "size"> & {
+type HeaderProps$0 = Omit<NavigationBarPrivateProps, "view" | "size"> & {
     headerRef: RefObject<HTMLDivElement>;
     headerOffset: number;
 };
@@ -591,11 +593,11 @@ type BaseSelectProps = {
     /**
      * Компонент стрелки
      */
-    Arrow?: FC<ArrowProps> | null | false;
+    Arrow?: ComponentType<ArrowProps> | null | false;
     /**
      * Компонент поля
      */
-    Field?: FC<FieldProps>;
+    Field?: ComponentType<FieldProps>;
     /**
      * Пропсы, которые будут прокинуты в компонент поля
      */
@@ -611,15 +613,15 @@ type BaseSelectProps = {
     /**
      * Компонент выпадающего меню
      */
-    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
+    OptionsList?: ComponentType<OptionsListProps & RefAttributes<HTMLDivElement>>;
     /**
      * Компонент группы
      */
-    Optgroup?: FC<OptgroupProps>;
+    Optgroup?: ComponentType<OptgroupProps>;
     /**
      * Компонент пункта меню
      */
-    Option?: FC<OptionProps>;
+    Option?: ComponentType<OptionProps>;
     /**
      * Включает отображение поиска
      */
@@ -627,7 +629,7 @@ type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps>;
+    Search?: ComponentType<SearchProps>;
     /**
      * Настройки поиска
      */
@@ -789,7 +791,7 @@ type OptionsListProps = {
     /**
      * Компонент пункта меню
      */
-    Option: FC<OptionProps>;
+    Option: ComponentType<OptionProps>;
     /**
      * Функция для получения пропсов для ячейки
      */
@@ -1066,8 +1068,8 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
 };
 export { BottomSheet, CLOSE_OFFSET, HEADER_OFFSET, InputProps, Input, ModalResponsive as Modal, getModalTestIds, FooterProps$0 as FooterProps, Footer$0 as Footer, HeaderProps$0 as HeaderProps, Header$0 as Header, SwipeableBackdropProps, SwipeableBackdrop, horizontalDirections, ShouldSkipSwipingParams, SwipeDirection, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };
 export type { BottomSheetProps, BottomSheetTitleAlign, HeaderProps as ModalHeaderProps, FooterProps as ModalFooterProps };
-export { ModalResponsiveProps as ModalProps } from "./typings-88b743b5";
+export { ModalResponsiveProps as ModalProps } from "./typings-d6bfd5b7";
 export { ModalContext } from "./Context-c2e6f1b2";
-export type { ContentProps as ModalContentProps } from "./typings-88b743b5";
+export type { ContentProps as ModalContentProps } from "./typings-d6bfd5b7";
 export * from "./Component.desktop-63dec22f";
 export * from "./Component.mobile-96988a65";

package/picker-button/typings-d6bfd5b7.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "./index-bdb4c6b9";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen' | 500 | 600 | 800 | 1140;
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+    dataTestId?: string;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/picker-button/utils/index.d.ts

@@ -1,4 +1,6 @@
-import { FC, SVGProps } from 'react';
+/// <reference types="react" />
+import { ComponentType, SVGProps } from 'react';
 import { PickerButtonVariant } from "../types";
-declare const getIcon: (variant: PickerButtonVariant, size: string) => FC<SVGProps<SVGSVGElement>>;
-export { getIcon };
+declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => import("react").FC<SVGProps<SVGSVGElement>> | import("react").ComponentClass<SVGProps<SVGSVGElement>, any>;
+declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
+export { getCompactIcon, getIcon };

package/picker-button/utils/index.js

@@ -5,11 +5,18 @@ var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var MoreMIcon = require('@alfalab/icons-glyph/MoreMIcon');
 var MoreSIcon = require('@alfalab/icons-glyph/MoreSIcon');
 
-var getIcon = function (variant, size) {
+var getCompactIcon = function (size, Icon) {
+    if (Icon) {
+        return Icon;
+    }
+    return size === 'size-32' ? MoreSIcon.MoreSIcon : MoreMIcon.MoreMIcon;
+};
+var getIcon = function (variant, size, Icon) {
     if (variant === 'compact') {
-        return size === 'size-32' ? MoreSIcon.MoreSIcon : MoreMIcon.MoreMIcon;
+        return getCompactIcon(size, Icon);
     }
     return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon.ChevronDownCompactSIcon : ChevronDownMIcon.ChevronDownMIcon;
 };
 
+exports.getCompactIcon = getCompactIcon;
 exports.getIcon = getIcon;

package/picker-button/utils-89376c31.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-57569e57";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-1fe708ea";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/plate/cssm/desktop/desktop.module.css

@@ -12,8 +12,8 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-l: 20px;
 } :root {
 } :root {
 } .bold {
@@ -22,7 +22,7 @@
     font-weight: 700;
     padding: 5px var(--gap-s) 5px var(--gap-2xs);
 } .description {
-    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+    padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .footer {
-    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/cssm/mobile/mobile.module.css

@@ -12,6 +12,7 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
 } :root {
 } :root {
@@ -23,5 +24,5 @@
 } .description {
     padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .footer {
-    padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/desktop/desktop.css

@@ -13,8 +13,8 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-l: 20px;
 } :root {
 } :root {
 } .plate__bold_1a0py {
@@ -23,7 +23,7 @@
     font-weight: 700;
     padding: 5px var(--gap-s) 5px var(--gap-2xs);
 } .plate__description_1a0py {
-    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+    padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_1a0py {
-    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/esm/desktop/desktop.css

@@ -13,8 +13,8 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-l: 20px;
 } :root {
 } :root {
 } .plate__bold_1a0py {
@@ -23,7 +23,7 @@
     font-weight: 700;
     padding: 5px var(--gap-s) 5px var(--gap-2xs);
 } .plate__description_1a0py {
-    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+    padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_1a0py {
-    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/esm/mobile/mobile.css

@@ -13,6 +13,7 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
 } :root {
 } :root {
@@ -24,5 +25,5 @@
 } .plate__description_171js {
     padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_171js {
-    padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/mobile/mobile.css

@@ -13,6 +13,7 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
 } :root {
 } :root {
@@ -24,5 +25,5 @@
 } .plate__description_171js {
     padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_171js {
-    padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/modern/desktop/desktop.css

@@ -13,8 +13,8 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-l: 20px;
 } :root {
 } :root {
 } .plate__bold_1a0py {
@@ -23,7 +23,7 @@
     font-weight: 700;
     padding: 5px var(--gap-s) 5px var(--gap-2xs);
 } .plate__description_1a0py {
-    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+    padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_1a0py {
-    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/plate/modern/mobile/mobile.css

@@ -13,6 +13,7 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-s: 12px;
 } :root {
 } :root {
@@ -24,5 +25,5 @@
 } .plate__description_171js {
     padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 } .plate__footer_171js {
-    padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs);
+    padding: var(--gap-xs) 0 var(--gap-2xs) var(--gap-2xs);
 }

package/popup-sheet/Component.js

@@ -5,7 +5,7 @@ var React = require('react');
 var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../base-modal');
-var shared = require('../navigation-bar/shared');
+var shared = require('../navigation-bar-private/shared');
 var coreComponentsShared = require('../shared');
 var components_backdrop_Component = require('./components/backdrop/Component.js');
 

package/popup-sheet/cssm/Component.js

@@ -5,7 +5,7 @@ var React = require('react');
 var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../base-modal/cssm');
-var shared = require('../../navigation-bar/cssm/shared');
+var shared = require('../../navigation-bar-private/cssm/shared');
 var coreComponentsShared = require('../../shared/cssm');
 var components_backdrop_Component = require('./components/backdrop/Component.js');
 var styles = require('./index.module.css');

package/popup-sheet/esm/Component.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useState, useRef } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModal } from '../../base-modal/esm';
-import { Closer } from '../../navigation-bar/esm/shared';
+import { Closer } from '../../navigation-bar-private/esm/shared';
 import { createPaddingStyle, getDataTestId, easingFns } from '../../shared/esm';
 import { PopupBackdrop } from './components/backdrop/Component.js';
 import '../../backdrop/esm';

package/popup-sheet/esm/index.js

@@ -4,7 +4,7 @@ import 'react';
 import 'react-swipeable';
 import 'classnames';
 import '../../base-modal/esm';
-import '../../navigation-bar/esm/shared';
+import '../../navigation-bar-private/esm/shared';
 import '../../shared/esm';
 import './components/backdrop/Component.js';
 import '../../backdrop/esm';

package/popup-sheet/modern/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useRef } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModal } from '../../base-modal/modern';
-import { Closer } from '../../navigation-bar/modern/shared';
+import { Closer } from '../../navigation-bar-private/modern/shared';
 import { createPaddingStyle, getDataTestId, easingFns } from '../../shared/modern';
 import { PopupBackdrop } from './components/backdrop/Component.js';
 import '../../backdrop/modern';