@snack-uikit/modal 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.9.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/link@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/tooltip/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.9.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.8.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -22,8 +22,8 @@
 | children* | `ReactNode` | - | Контент |
 | onClose* | `() => void` | - | Колбек закрытия компонента. |
 | open* | `boolean` | - | Управляет состоянием показан/не показан. |
-| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | Mode.Regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер модального окна |
+| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
+| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер модального окна |
 | className | `string` | - | CSS-класс |
 ## ModalCustom.Header
 ### Props
@@ -48,7 +48,7 @@
 |------|------|---------------|-------------|
 | actions* | `ReactNode` | - | Параметр для передачи кнопок |
 | disclaimer | `ReactNode` | - | Параметр для небольшого текста под кнопками |
-| align | enum Align: `"default"`, `"center"`, `"vertical"` | - | Выравнивание контента |
+| align | enum Align: `"vertical"`, `"default"`, `"center"` | - | Выравнивание контента |
 | className | `string` | - | CSS-класс |
 ## Modal
 ### Props
@@ -58,7 +58,7 @@
 | title* | `string` | - | Заголовок модального окна |
 | onClose* | `() => void` | - | Колбек закрытия компонента. |
 | open* | `boolean` | - | Управляет состоянием показан/не показан. |
-| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | Mode.Regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
+| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
 | className | `string` | - | CSS-класс |
 | titleTooltip | `ReactNode` | - | Всплывающая подсказка для заголовка |
 | subtitle | `string` | - | Подзаголовок |
@@ -66,8 +66,8 @@
 | cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size">` | - | Кнопка отмены |
 | additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size">` | - | Вторая кнопка действия |
 | disclaimer | `{ text: string; link?: Pick<LinkProps, "text" \| "href" \| "target">; }` | - | Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| align | enum Align: `"default"`, `"center"`, `"vertical"` | Align.Default | Выравнивание, для разных размеров доступны разные значения <br> для `Size.S` - все <br> для `Size.M` - `Align.Default \| Align.Center` <br> для `Size.L` - `Align.Default` |
+| size | "s" \| "m" \| "l" | s | Размер |
+| align | enum Align: `"vertical"`, `"default"`, `"center"` | default | Выравнивание, для разных размеров доступны разные значения <br> для size=`s` - все <br> для size=`m` - align=`default \| center` <br> для size=`l` - align=`default` |
 | picture | `JSXElementConstructor<{ size?: number; className?: string; }> \| ModalHeaderImage` | - | Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` |
 
 

package/dist/components/Modal/Modal.d.ts

@@ -1,9 +1,3 @@
-import { Align, Mode, Size } from '../../constants';
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
 export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
 export declare function Modal({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Modal {
-    var aligns: typeof Align;
-    var modes: typeof Mode;
-    var sizes: typeof Size;
-}

package/dist/components/Modal/Modal.js

@@ -14,17 +14,14 @@ import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
 import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
-import { Align, Mode, Size, TEST_IDS } from '../../constants';
-import { getAlignProps, getButtonsSizes, getPicture } from '../../utils';
+import { ALIGN, MODE, SIZE, TEST_IDS } from '../../constants';
+import { getAlignProps, getButtonsSize, getPicture } from '../../utils';
 import { ModalCustom } from '../ModalCustom';
 import styles from './styles.module.css';
 export function Modal(_a) {
-    var { open, onClose, size = Size.S, mode = Mode.Regular, align = Align.Default, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "align", "title", "titleTooltip", "subtitle", "picture", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "className"]);
+    var { open, onClose, size = SIZE.S, mode = MODE.Regular, align = ALIGN.Default, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "align", "title", "titleTooltip", "subtitle", "picture", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "className"]);
     const aligns = getAlignProps({ align, size });
-    const buttonsSizes = getButtonsSizes({ align, size });
+    const buttonsSize = getButtonsSize({ align, size });
     const picture = getPicture({ size, picture: pictureProp });
-    return (_jsxs(ModalCustom, Object.assign({ open: open, onClose: onClose, size: size, mode: mode, className: className }, rest, { children: [_jsx(ModalCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, picture: picture, align: aligns.header }), Boolean(content) && _jsx(ModalCustom.Body, { content: content, align: aligns.body }), _jsx(ModalCustom.Footer, { actions: _jsxs(_Fragment, { children: [_jsx(ButtonFilled, Object.assign({}, approveButton, { size: buttonsSizes.filled, className: styles.footerButton, "data-test-id": TEST_IDS.approveButton })), cancelButton && (_jsx(ButtonOutline, Object.assign({}, cancelButton, { size: buttonsSizes.outline, className: styles.footerButton, "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: buttonsSizes.light, className: styles.footerButton, "data-test-id": TEST_IDS.additionalButton })))] }), disclaimer: disclaimer && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.S, "data-test-id": TEST_IDS.disclaimerText }, { children: disclaimer.text })), disclaimer.link && (_jsx(Link, Object.assign({}, disclaimer.link, { size: Link.sizes.S, external: true, "data-test-id": TEST_IDS.disclaimerLink })))] })), align: aligns.footer, className: styles.modalFooter })] })));
+    return (_jsxs(ModalCustom, Object.assign({ open: open, onClose: onClose, size: size, mode: mode, className: className }, rest, { children: [_jsx(ModalCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, picture: picture, align: aligns.header }), Boolean(content) && _jsx(ModalCustom.Body, { content: content, align: aligns.body }), _jsx(ModalCustom.Footer, { actions: _jsxs(_Fragment, { children: [_jsx(ButtonFilled, Object.assign({}, approveButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.approveButton })), cancelButton && (_jsx(ButtonOutline, Object.assign({}, cancelButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.additionalButton })))] }), disclaimer: disclaimer && (_jsxs(_Fragment, { children: [_jsx(Typography.SansBodyS, { "data-test-id": TEST_IDS.disclaimerText, children: disclaimer.text }), disclaimer.link && (_jsx(Link, Object.assign({}, disclaimer.link, { size: 's', external: true, "data-test-id": TEST_IDS.disclaimerLink })))] })), align: aligns.footer, className: styles.modalFooter })] })));
 }
-Modal.aligns = Align;
-Modal.modes = Mode;
-Modal.sizes = Size;

package/dist/components/Modal/types.d.ts

@@ -1,7 +1,8 @@
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
 import { LinkProps } from '@snack-uikit/link';
-import { Align, Size } from '../../constants';
+import { ALIGN, SIZE } from '../../constants';
 import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
+import { Align } from '../../types';
 import { ModalCustomProps } from '../ModalCustom';
 type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
     /** Заголовок модального окна */
@@ -26,25 +27,25 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
 };
 export type ModalSProps = BaseModalProps & {
     /** Размер */
-    size?: Size.S;
+    size?: typeof SIZE.S;
     /**
      * Выравнивание, для разных размеров доступны разные значения
-     * <br> для `Size.S` - все
+     * <br> для size=`s` - все
      */
     align?: Align;
     /** Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` */
     picture?: ModalHeaderProps['picture'];
 };
 export type ModalMProps = BaseModalProps & {
-    size?: Size.M;
-    /** <br> для `Size.M` - `Align.Default | Align.Center` */
-    align?: Align.Default | Align.Center;
+    size?: typeof SIZE.M;
+    /** <br> для size=`m` - align=`default | center` */
+    align?: typeof ALIGN.Default | typeof ALIGN.Center;
     picture?: ModalHeaderImage;
 };
 export type ModalLProps = BaseModalProps & {
-    size?: Size.L;
-    /** <br> для `Size.L` - `Align.Default` */
-    align?: Align.Default;
+    size?: typeof SIZE.L;
+    /** <br> для size=`l` - align=`default` */
+    align?: typeof ALIGN.Default;
     picture?: ModalHeaderImage;
 };
 export {};

package/dist/components/ModalCustom/ModalCustom.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Mode, Size } from '../../constants';
 import { ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps } from '../../helperComponents';
+import { Mode, Size } from '../../types';
 export type ModalCustomProps = WithSupportProps<{
     /** Управляет состоянием показан/не показан. */
     open: boolean;
@@ -26,10 +26,6 @@ export type ModalCustomProps = WithSupportProps<{
     children: ReactNode;
 }>;
 export declare function ModalCustom({ open, onClose, size, mode, children, className, ...rest }: ModalCustomProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ModalCustom {
-    var modes: typeof Mode;
-    var sizes: typeof Size;
-}
 export declare namespace ModalCustom {
     type HeaderProps = ModalHeaderProps;
     type BodyProps = ModalBodyProps;

package/dist/components/ModalCustom/ModalCustom.js

@@ -12,24 +12,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import RCModal from 'react-modal';
-import { Mode, Size } from '../../constants';
+import { MODE, SIZE } from '../../constants';
 import { ButtonClose, ModalBody, ModalFooter, ModalHeader, OverlayElement, } from '../../helperComponents';
 import styles from './styles.module.css';
 import { getDataTestAttributes } from './utils';
 export function ModalCustom(_a) {
-    var { open, onClose, size = Size.S, mode = Mode.Regular, children, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className"]);
+    var { open, onClose, size = SIZE.S, mode = MODE.Regular, children, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className"]);
     const handleCloseButtonClick = () => {
         onClose();
     };
     const handleClose = () => {
-        if (mode === Mode.Regular) {
+        if (mode === MODE.Regular) {
             onClose();
         }
     };
-    return (_jsxs(RCModal, Object.assign({ data: Object.assign(Object.assign({}, getDataTestAttributes(rest)), { size }), isOpen: open, onRequestClose: handleClose, appElement: document.body, overlayElement: (_, content) => (_jsx(OverlayElement, { blur: [Mode.Forced, Mode.Aggressive].includes(mode), content: content, onClose: handleClose })), className: cn(styles.modal, className) }, { children: [mode !== Mode.Forced && (_jsx("div", Object.assign({ className: styles.headerElements }, { children: _jsx(ButtonClose, { onClick: handleCloseButtonClick }) }))), children] })));
+    return (_jsxs(RCModal, { data: Object.assign(Object.assign({}, getDataTestAttributes(rest)), { size }), isOpen: open, onRequestClose: handleClose, appElement: document.body, overlayElement: (_, content) => (_jsx(OverlayElement, { blur: [MODE.Forced, MODE.Aggressive].includes(mode), content: content, onClose: handleClose })), className: cn(styles.modal, className), children: [mode !== MODE.Forced && (_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: handleCloseButtonClick }) })), children] }));
 }
-ModalCustom.modes = Mode;
-ModalCustom.sizes = Size;
 (function (ModalCustom) {
     ModalCustom.Header = ModalHeader;
     ModalCustom.Body = ModalBody;

package/dist/constants.d.ts

@@ -1,22 +1,22 @@
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
-export declare enum Mode {
-    Regular = "regular",
-    Aggressive = "aggressive",
-    Forced = "forced"
-}
-export declare enum Align {
-    Default = "default",
-    Center = "center",
-    Vertical = "vertical"
-}
-export declare enum ContentAlign {
-    Default = "default",
-    Center = "center"
-}
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const MODE: {
+    readonly Regular: "regular";
+    readonly Aggressive: "aggressive";
+    readonly Forced: "forced";
+};
+export declare const ALIGN: {
+    readonly Default: "default";
+    readonly Center: "center";
+    readonly Vertical: "vertical";
+};
+export declare const CONTENT_ALIGN: {
+    readonly Default: "default";
+    readonly Center: "center";
+};
 export declare const TEST_IDS: {
     overlay: string;
     closeButton: string;

package/dist/constants.js

@@ -1,26 +1,22 @@
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
-export var Mode;
-(function (Mode) {
-    Mode["Regular"] = "regular";
-    Mode["Aggressive"] = "aggressive";
-    Mode["Forced"] = "forced";
-})(Mode || (Mode = {}));
-export var Align;
-(function (Align) {
-    Align["Default"] = "default";
-    Align["Center"] = "center";
-    Align["Vertical"] = "vertical";
-})(Align || (Align = {}));
-export var ContentAlign;
-(function (ContentAlign) {
-    ContentAlign["Default"] = "default";
-    ContentAlign["Center"] = "center";
-})(ContentAlign || (ContentAlign = {}));
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const MODE = {
+    Regular: 'regular',
+    Aggressive: 'aggressive',
+    Forced: 'forced',
+};
+export const ALIGN = {
+    Default: 'default',
+    Center: 'center',
+    Vertical: 'vertical',
+};
+export const CONTENT_ALIGN = {
+    Default: 'default',
+    Center: 'center',
+};
 export const TEST_IDS = {
     overlay: 'modal__overlay',
     closeButton: 'modal__close-button',

package/dist/helperComponents/Body/Body.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ContentAlign } from '../../constants';
+import { ContentAlign } from '../../types';
 export type ModalBodyProps = WithSupportProps<{
     /** Содержимое модального окна */
     content: ReactNode;
@@ -9,6 +9,3 @@ export type ModalBodyProps = WithSupportProps<{
     className?: string;
 }>;
 export declare function ModalBody({ content, align, className, ...rest }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ModalBody {
-    var aligns: typeof ContentAlign;
-}

package/dist/helperComponents/Body/Body.js

@@ -13,10 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ContentAlign, TEST_IDS } from '../../constants';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function ModalBody(_a) {
-    var { content, align = ContentAlign.Default, className } = _a, rest = __rest(_a, ["content", "align", "className"]);
-    return (_jsx(Scroll, Object.assign({ size: Scroll.sizes.M, className: cn(styles.modalBody, className) }, extractSupportProps(rest), { "data-align": align, "data-test-id": TEST_IDS.content }, { children: content })));
+    var { content, align = CONTENT_ALIGN.Default, className } = _a, rest = __rest(_a, ["content", "align", "className"]);
+    return (_jsx(Scroll, Object.assign({ size: 'm', className: cn(styles.modalBody, className) }, extractSupportProps(rest), { "data-align": align, "data-test-id": TEST_IDS.content, children: content })));
 }
-ModalBody.aligns = ContentAlign;

package/dist/helperComponents/ButtonClose/ButtonClose.js

@@ -3,5 +3,5 @@ import { CrossSVG } from '@snack-uikit/icons';
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function ButtonClose({ onClick }) {
-    return (_jsx("button", Object.assign({ className: styles.buttonClose, onClick: onClick, "aria-label": 'close modal', "data-test-id": TEST_IDS.closeButton }, { children: _jsx(CrossSVG, {}) })));
+    return (_jsx("button", { className: styles.buttonClose, onClick: onClick, "aria-label": 'close modal', "data-test-id": TEST_IDS.closeButton, children: _jsx(CrossSVG, {}) }));
 }

package/dist/helperComponents/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Align } from '../../constants';
+import { Align } from '../../types';
 export type ModalFooterProps = WithSupportProps<{
     /** Параметр для передачи кнопок */
     actions: ReactNode;
@@ -11,6 +11,3 @@ export type ModalFooterProps = WithSupportProps<{
     className?: string;
 }>;
 export declare function ModalFooter({ actions, disclaimer, align, className, ...rest }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ModalFooter {
-    var aligns: typeof Align;
-}

package/dist/helperComponents/Footer/Footer.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Align, TEST_IDS } from '../../constants';
+import { ALIGN, TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function ModalFooter(_a) {
-    var { actions, disclaimer, align = Align.Default, className } = _a, rest = __rest(_a, ["actions", "disclaimer", "align", "className"]);
-    return (_jsxs("div", Object.assign({ "data-align": align, className: cn(styles.footer, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.footer }, { children: [_jsx("div", Object.assign({ className: styles.footerActions }, { children: actions })), disclaimer && (_jsx("div", Object.assign({ className: styles.footerDisclaimer, "data-test-id": TEST_IDS.disclaimer }, { children: disclaimer })))] })));
+    var { actions, disclaimer, align = ALIGN.Default, className } = _a, rest = __rest(_a, ["actions", "disclaimer", "align", "className"]);
+    return (_jsxs("div", Object.assign({ "data-align": align, className: cn(styles.footer, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.footer, children: [_jsx("div", { className: styles.footerActions, children: actions }), disclaimer && (_jsx("div", { className: styles.footerDisclaimer, "data-test-id": TEST_IDS.disclaimer, children: disclaimer }))] })));
 }
-ModalFooter.aligns = Align;

package/dist/helperComponents/Header/Header.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
 import { QuestionTooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ContentAlign } from '../../constants';
+import { ContentAlign } from '../../types';
 import { ModalHeaderImage } from './types';
 export type ModalHeaderProps = WithSupportProps<{
     /** Заголовок модального окна */
@@ -18,6 +18,3 @@ export type ModalHeaderProps = WithSupportProps<{
     className?: string;
 }>;
 export declare function ModalHeader({ title, titleTooltip, subtitle, align, picture, className, ...rest }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ModalHeader {
-    var aligns: typeof ContentAlign;
-}

package/dist/helperComponents/Header/Header.js

@@ -15,12 +15,11 @@ import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { QuestionTooltip } from '@snack-uikit/tooltip';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ContentAlign, TEST_IDS } from '../../constants';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
 import { isPictureImage } from '../../utils';
 import styles from './styles.module.css';
 export function ModalHeader(_a) {
-    var { title, titleTooltip, subtitle, align = ContentAlign.Default, picture, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "align", "picture", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.header, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.header }, { children: [picture &&
-                (isPictureImage(picture) ? (_jsx("img", { src: picture.src, alt: picture.alt, className: styles.image, "data-test-id": TEST_IDS.image })) : (_jsx("div", Object.assign({ className: styles.icon, "data-test-id": TEST_IDS.icon }, { children: _jsx(IconPredefined, { icon: picture, size: IconPredefined.sizes.L }) })))), _jsxs("div", Object.assign({ className: styles.headlineLayout, "data-align": align }, { children: [_jsxs("div", Object.assign({ className: styles.headline }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Headline, size: Typography.sizes.S, className: styles.title, "data-test-id": TEST_IDS.title }, { children: title })), titleTooltip && (_jsx(QuestionTooltip, { tip: titleTooltip, size: QuestionTooltip.sizes.S, "data-test-id": TEST_IDS.tooltip }))] })), subtitle && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.M, className: styles.subtitle, "data-test-id": TEST_IDS.subtitle }, { children: subtitle })))] }))] })));
+    var { title, titleTooltip, subtitle, align = CONTENT_ALIGN.Default, picture, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "align", "picture", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.header, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.header, children: [picture &&
+                (isPictureImage(picture) ? (_jsx("img", { src: picture.src, alt: picture.alt, className: styles.image, "data-test-id": TEST_IDS.image })) : (_jsx("div", { className: styles.icon, "data-test-id": TEST_IDS.icon, children: _jsx(IconPredefined, { icon: picture, size: 'l' }) }))), _jsxs("div", { className: styles.headlineLayout, "data-align": align, children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansHeadlineS, { className: styles.title, "data-test-id": TEST_IDS.title, children: title }), titleTooltip && _jsx(QuestionTooltip, { tip: titleTooltip, size: 's', "data-test-id": TEST_IDS.tooltip })] }), subtitle && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.subtitle, children: subtitle }))] })] })));
 }
-ModalHeader.aligns = ContentAlign;

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type Align = ValueOf<typeof ALIGN>;
+export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -1,28 +1,26 @@
 /// <reference types="react" />
-import { Align, ContentAlign, Size } from './constants';
 import { ModalHeaderImage, ModalHeaderProps } from './helperComponents';
+import { Align, Size } from './types';
 export declare function getAlignProps({ align, size }: {
     align: Align;
     size: Size;
 }): {
-    header: ContentAlign;
-    body: ContentAlign;
-    footer: Align;
+    header: "default";
+    body: "default";
+    footer: "default";
+} | {
+    header: "center";
+    body: "center";
+    footer: "center";
+} | {
+    header: "center";
+    body: "center";
+    footer: "vertical";
 };
-export declare function getButtonsSizes({ align, size }: {
+export declare function getButtonsSize({ align, size }: {
     align: Align;
     size: Size;
-}): {
-    filled: import("@snack-uikit/button/dist/constants").SizeSL;
-    outline: import("@snack-uikit/button/dist/constants").SizeSL;
-    simple: import("@snack-uikit/button/dist/constants").SizeSL;
-    light?: undefined;
-} | {
-    filled: import("@snack-uikit/button/dist/constants").SizeSL;
-    outline: import("@snack-uikit/button/dist/constants").SizeSL;
-    light: import("@snack-uikit/button/dist/constants").SizeSL;
-    simple?: undefined;
-};
+}): "m" | "l";
 export declare function isPictureImage(picture: ModalHeaderProps['picture']): picture is ModalHeaderImage;
 export declare function getPicture({ size, picture }: {
     size: Size;

package/dist/utils.js

@@ -1,46 +1,37 @@
-import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
-import { Align, ContentAlign, Size } from './constants';
+import { ALIGN, CONTENT_ALIGN, SIZE } from './constants';
 const MAP_ALIGNS = {
-    [Align.Default]: {
-        header: ContentAlign.Default,
-        body: ContentAlign.Default,
-        footer: Align.Default,
+    [ALIGN.Default]: {
+        header: CONTENT_ALIGN.Default,
+        body: CONTENT_ALIGN.Default,
+        footer: ALIGN.Default,
     },
-    [Align.Center]: {
-        header: ContentAlign.Center,
-        body: ContentAlign.Center,
-        footer: Align.Center,
+    [ALIGN.Center]: {
+        header: CONTENT_ALIGN.Center,
+        body: CONTENT_ALIGN.Center,
+        footer: ALIGN.Center,
     },
-    [Align.Vertical]: {
-        header: ContentAlign.Center,
-        body: ContentAlign.Center,
-        footer: Align.Vertical,
+    [ALIGN.Vertical]: {
+        header: CONTENT_ALIGN.Center,
+        body: CONTENT_ALIGN.Center,
+        footer: ALIGN.Vertical,
     },
 };
 export function getAlignProps({ align, size }) {
-    if (size === Size.L) {
-        return MAP_ALIGNS[Align.Default];
+    if (size === SIZE.L) {
+        return MAP_ALIGNS[ALIGN.Default];
     }
-    if (size === Size.M && align === Align.Vertical) {
-        return MAP_ALIGNS[Align.Default];
+    if (size === SIZE.M && align === ALIGN.Vertical) {
+        return MAP_ALIGNS[ALIGN.Default];
     }
     return MAP_ALIGNS[align];
 }
-export function getButtonsSizes({ align, size }) {
+export function getButtonsSize({ align, size }) {
     switch (true) {
-        case align === Align.Vertical && size === Size.S:
-            return {
-                filled: ButtonFilled.sizes.L,
-                outline: ButtonOutline.sizes.L,
-                simple: ButtonSimple.sizes.L,
-            };
-        case [Align.Default, Align.Center].includes(align):
+        case align === ALIGN.Vertical && size === SIZE.S:
+            return 'l';
+        case [ALIGN.Default, ALIGN.Center].includes(align):
         default:
-            return {
-                filled: ButtonFilled.sizes.M,
-                outline: ButtonOutline.sizes.M,
-                light: ButtonSimple.sizes.M,
-            };
+            return 'm';
     }
 }
 export function isPictureImage(picture) {
@@ -50,10 +41,10 @@ export function isPictureImage(picture) {
 }
 export function getPicture({ size, picture }) {
     switch (size) {
-        case Size.S:
+        case SIZE.S:
             return picture;
-        case Size.M:
-        case Size.L:
+        case SIZE.M:
+        case SIZE.L:
         default:
             return isPictureImage(picture) ? picture : undefined;
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Modal",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,20 +32,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/icon-predefined": "0.3.1",
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/link": "0.8.1",
-    "@snack-uikit/scroll": "0.4.1",
-    "@snack-uikit/tooltip": "0.9.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/icon-predefined": "0.4.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/link": "0.9.1",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/tooltip": "0.10.1",
+    "@snack-uikit/truncate-string": "0.4.1",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "react-modal": "3.16.1"
   },
   "devDependencies": {
     "@types/react-modal": "3.16.0"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Modal/Modal.tsx

@@ -3,8 +3,8 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 
-import { Align, Mode, Size, TEST_IDS } from '../../constants';
-import { getAlignProps, getButtonsSizes, getPicture } from '../../utils';
+import { ALIGN, MODE, SIZE, TEST_IDS } from '../../constants';
+import { getAlignProps, getButtonsSize, getPicture } from '../../utils';
 import { ModalCustom } from '../ModalCustom';
 import styles from './styles.module.scss';
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
@@ -14,9 +14,9 @@ export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
 export function Modal({
   open,
   onClose,
-  size = Size.S,
-  mode = Mode.Regular,
-  align = Align.Default,
+  size = SIZE.S,
+  mode = MODE.Regular,
+  align = ALIGN.Default,
   title,
   titleTooltip,
   subtitle,
@@ -30,7 +30,7 @@ export function Modal({
   ...rest
 }: ModalProps) {
   const aligns = getAlignProps({ align, size });
-  const buttonsSizes = getButtonsSizes({ align, size });
+  const buttonsSize = getButtonsSize({ align, size });
   const picture = getPicture({ size, picture: pictureProp });
 
   return (
@@ -50,7 +50,7 @@ export function Modal({
           <>
             <ButtonFilled
               {...approveButton}
-              size={buttonsSizes.filled}
+              size={buttonsSize}
               className={styles.footerButton}
               data-test-id={TEST_IDS.approveButton}
             />
@@ -58,7 +58,7 @@ export function Modal({
             {cancelButton && (
               <ButtonOutline
                 {...cancelButton}
-                size={buttonsSizes.outline}
+                size={buttonsSize}
                 className={styles.footerButton}
                 data-test-id={TEST_IDS.cancelButton}
               />
@@ -67,7 +67,7 @@ export function Modal({
             {additionalButton && (
               <ButtonSimple
                 {...additionalButton}
-                size={buttonsSizes.light}
+                size={buttonsSize}
                 className={styles.footerButton}
                 data-test-id={TEST_IDS.additionalButton}
               />
@@ -77,17 +77,10 @@ export function Modal({
         disclaimer={
           disclaimer && (
             <>
-              <Typography
-                family={Typography.families.Sans}
-                role={Typography.roles.Body}
-                size={Typography.sizes.S}
-                data-test-id={TEST_IDS.disclaimerText}
-              >
-                {disclaimer.text}
-              </Typography>
+              <Typography.SansBodyS data-test-id={TEST_IDS.disclaimerText}>{disclaimer.text}</Typography.SansBodyS>
 
               {disclaimer.link && (
-                <Link {...disclaimer.link} size={Link.sizes.S} external data-test-id={TEST_IDS.disclaimerLink} />
+                <Link {...disclaimer.link} size='s' external data-test-id={TEST_IDS.disclaimerLink} />
               )}
             </>
           )
@@ -98,7 +91,3 @@ export function Modal({
     </ModalCustom>
   );
 }
-
-Modal.aligns = Align;
-Modal.modes = Mode;
-Modal.sizes = Size;

package/src/components/Modal/types.ts

@@ -1,8 +1,9 @@
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
 import { LinkProps } from '@snack-uikit/link';
 
-import { Align, Size } from '../../constants';
+import { ALIGN, SIZE } from '../../constants';
 import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
+import { Align } from '../../types';
 import { ModalCustomProps } from '../ModalCustom';
 
 type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
@@ -29,10 +30,10 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
 
 export type ModalSProps = BaseModalProps & {
   /** Размер */
-  size?: Size.S;
+  size?: typeof SIZE.S;
   /**
    * Выравнивание, для разных размеров доступны разные значения
-   * <br> для `Size.S` - все
+   * <br> для size=`s` - все
    */
   align?: Align;
   /** Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` */
@@ -40,15 +41,15 @@ export type ModalSProps = BaseModalProps & {
 };
 
 export type ModalMProps = BaseModalProps & {
-  size?: Size.M;
-  /** <br> для `Size.M` - `Align.Default | Align.Center` */
-  align?: Align.Default | Align.Center;
+  size?: typeof SIZE.M;
+  /** <br> для size=`m` - align=`default | center` */
+  align?: typeof ALIGN.Default | typeof ALIGN.Center;
   picture?: ModalHeaderImage;
 };
 
 export type ModalLProps = BaseModalProps & {
-  size?: Size.L;
-  /** <br> для `Size.L` - `Align.Default` */
-  align?: Align.Default;
+  size?: typeof SIZE.L;
+  /** <br> для size=`l` - align=`default` */
+  align?: typeof ALIGN.Default;
   picture?: ModalHeaderImage;
 };

package/src/components/ModalCustom/ModalCustom.tsx

@@ -4,7 +4,7 @@ import RCModal from 'react-modal';
 
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { Mode, Size } from '../../constants';
+import { MODE, SIZE } from '../../constants';
 import {
   ButtonClose,
   ModalBody,
@@ -15,6 +15,7 @@ import {
   ModalHeaderProps,
   OverlayElement,
 } from '../../helperComponents';
+import { Mode, Size } from '../../types';
 import styles from './styles.module.scss';
 import { getDataTestAttributes } from './utils';
 
@@ -45,8 +46,8 @@ export type ModalCustomProps = WithSupportProps<{
 export function ModalCustom({
   open,
   onClose,
-  size = Size.S,
-  mode = Mode.Regular,
+  size = SIZE.S,
+  mode = MODE.Regular,
   children,
   className,
   ...rest
@@ -56,7 +57,7 @@ export function ModalCustom({
   };
 
   const handleClose = () => {
-    if (mode === Mode.Regular) {
+    if (mode === MODE.Regular) {
       onClose();
     }
   };
@@ -68,11 +69,15 @@ export function ModalCustom({
       onRequestClose={handleClose}
       appElement={document.body}
       overlayElement={(_, content) => (
-        <OverlayElement blur={[Mode.Forced, Mode.Aggressive].includes(mode)} content={content} onClose={handleClose} />
+        <OverlayElement
+          blur={([MODE.Forced, MODE.Aggressive] as Mode[]).includes(mode)}
+          content={content}
+          onClose={handleClose}
+        />
       )}
       className={cn(styles.modal, className)}
     >
-      {mode !== Mode.Forced && (
+      {mode !== MODE.Forced && (
         <div className={styles.headerElements}>
           <ButtonClose onClick={handleCloseButtonClick} />
         </div>
@@ -83,9 +88,6 @@ export function ModalCustom({
   );
 }
 
-ModalCustom.modes = Mode;
-ModalCustom.sizes = Size;
-
 export namespace ModalCustom {
   export type HeaderProps = ModalHeaderProps;
   export type BodyProps = ModalBodyProps;

package/src/constants.ts

@@ -1,25 +1,25 @@
-export enum Size {
-  S = 's',
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
 
-export enum Mode {
-  Regular = 'regular',
-  Aggressive = 'aggressive',
-  Forced = 'forced',
-}
+export const MODE = {
+  Regular: 'regular',
+  Aggressive: 'aggressive',
+  Forced: 'forced',
+} as const;
 
-export enum Align {
-  Default = 'default',
-  Center = 'center',
-  Vertical = 'vertical',
-}
+export const ALIGN = {
+  Default: 'default',
+  Center: 'center',
+  Vertical: 'vertical',
+} as const;
 
-export enum ContentAlign {
-  Default = 'default',
-  Center = 'center',
-}
+export const CONTENT_ALIGN = {
+  Default: 'default',
+  Center: 'center',
+} as const;
 
 export const TEST_IDS = {
   overlay: 'modal__overlay',

package/src/helperComponents/Body/Body.tsx

@@ -4,7 +4,8 @@ import { ReactNode } from 'react';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContentAlign, TEST_IDS } from '../../constants';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
+import { ContentAlign } from '../../types';
 import styles from './styles.module.scss';
 
 export type ModalBodyProps = WithSupportProps<{
@@ -15,10 +16,10 @@ export type ModalBodyProps = WithSupportProps<{
   className?: string;
 }>;
 
-export function ModalBody({ content, align = ContentAlign.Default, className, ...rest }: ModalBodyProps) {
+export function ModalBody({ content, align = CONTENT_ALIGN.Default, className, ...rest }: ModalBodyProps) {
   return (
     <Scroll
-      size={Scroll.sizes.M}
+      size='m'
       className={cn(styles.modalBody, className)}
       {...extractSupportProps(rest)}
       data-align={align}
@@ -28,5 +29,3 @@ export function ModalBody({ content, align = ContentAlign.Default, className, ..
     </Scroll>
   );
 }
-
-ModalBody.aligns = ContentAlign;

package/src/helperComponents/Footer/Footer.tsx

@@ -3,7 +3,8 @@ import { ReactNode } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Align, TEST_IDS } from '../../constants';
+import { ALIGN, TEST_IDS } from '../../constants';
+import { Align } from '../../types';
 import styles from './styles.module.scss';
 
 export type ModalFooterProps = WithSupportProps<{
@@ -16,7 +17,7 @@ export type ModalFooterProps = WithSupportProps<{
   className?: string;
 }>;
 
-export function ModalFooter({ actions, disclaimer, align = Align.Default, className, ...rest }: ModalFooterProps) {
+export function ModalFooter({ actions, disclaimer, align = ALIGN.Default, className, ...rest }: ModalFooterProps) {
   return (
     <div
       data-align={align}
@@ -34,5 +35,3 @@ export function ModalFooter({ actions, disclaimer, align = Align.Default, classN
     </div>
   );
 }
-
-ModalFooter.aligns = Align;

package/src/helperComponents/Header/Header.tsx

@@ -6,7 +6,8 @@ import { QuestionTooltip, QuestionTooltipProps } from '@snack-uikit/tooltip';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ContentAlign, TEST_IDS } from '../../constants';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
+import { ContentAlign } from '../../types';
 import { isPictureImage } from '../../utils';
 import styles from './styles.module.scss';
 import { ModalHeaderImage } from './types';
@@ -29,7 +30,7 @@ export function ModalHeader({
   title,
   titleTooltip,
   subtitle,
-  align = ContentAlign.Default,
+  align = CONTENT_ALIGN.Default,
   picture,
   className,
   ...rest
@@ -41,41 +42,25 @@ export function ModalHeader({
           <img src={picture.src} alt={picture.alt} className={styles.image} data-test-id={TEST_IDS.image} />
         ) : (
           <div className={styles.icon} data-test-id={TEST_IDS.icon}>
-            <IconPredefined icon={picture} size={IconPredefined.sizes.L} />
+            <IconPredefined icon={picture} size='l' />
           </div>
         ))}
 
       <div className={styles.headlineLayout} data-align={align}>
         <div className={styles.headline}>
-          <Typography
-            family={Typography.families.Sans}
-            role={Typography.roles.Headline}
-            size={Typography.sizes.S}
-            className={styles.title}
-            data-test-id={TEST_IDS.title}
-          >
+          <Typography.SansHeadlineS className={styles.title} data-test-id={TEST_IDS.title}>
             {title}
-          </Typography>
+          </Typography.SansHeadlineS>
 
-          {titleTooltip && (
-            <QuestionTooltip tip={titleTooltip} size={QuestionTooltip.sizes.S} data-test-id={TEST_IDS.tooltip} />
-          )}
+          {titleTooltip && <QuestionTooltip tip={titleTooltip} size='s' data-test-id={TEST_IDS.tooltip} />}
         </div>
 
         {subtitle && (
-          <Typography
-            family={Typography.families.Sans}
-            role={Typography.roles.Body}
-            size={Typography.sizes.M}
-            className={styles.subtitle}
-            data-test-id={TEST_IDS.subtitle}
-          >
+          <Typography.SansBodyM className={styles.subtitle} data-test-id={TEST_IDS.subtitle}>
             {subtitle}
-          </Typography>
+          </Typography.SansBodyM>
         )}
       </div>
     </div>
   );
 }
-
-ModalHeader.aligns = ContentAlign;

package/src/types.ts

@@ -0,0 +1,11 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type Mode = ValueOf<typeof MODE>;
+
+export type Align = ValueOf<typeof ALIGN>;
+
+export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;

package/src/utils.ts

@@ -1,53 +1,44 @@
-import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
-
-import { Align, ContentAlign, Size } from './constants';
+import { ALIGN, CONTENT_ALIGN, SIZE } from './constants';
 import { ModalHeaderImage, ModalHeaderProps } from './helperComponents';
+import { Align, Size } from './types';
 
 const MAP_ALIGNS = {
-  [Align.Default]: {
-    header: ContentAlign.Default,
-    body: ContentAlign.Default,
-    footer: Align.Default,
+  [ALIGN.Default]: {
+    header: CONTENT_ALIGN.Default,
+    body: CONTENT_ALIGN.Default,
+    footer: ALIGN.Default,
   },
-  [Align.Center]: {
-    header: ContentAlign.Center,
-    body: ContentAlign.Center,
-    footer: Align.Center,
+  [ALIGN.Center]: {
+    header: CONTENT_ALIGN.Center,
+    body: CONTENT_ALIGN.Center,
+    footer: ALIGN.Center,
   },
-  [Align.Vertical]: {
-    header: ContentAlign.Center,
-    body: ContentAlign.Center,
-    footer: Align.Vertical,
+  [ALIGN.Vertical]: {
+    header: CONTENT_ALIGN.Center,
+    body: CONTENT_ALIGN.Center,
+    footer: ALIGN.Vertical,
   },
 };
 
 export function getAlignProps({ align, size }: { align: Align; size: Size }) {
-  if (size === Size.L) {
-    return MAP_ALIGNS[Align.Default];
+  if (size === SIZE.L) {
+    return MAP_ALIGNS[ALIGN.Default];
   }
 
-  if (size === Size.M && align === Align.Vertical) {
-    return MAP_ALIGNS[Align.Default];
+  if (size === SIZE.M && align === ALIGN.Vertical) {
+    return MAP_ALIGNS[ALIGN.Default];
   }
 
   return MAP_ALIGNS[align];
 }
 
-export function getButtonsSizes({ align, size }: { align: Align; size: Size }) {
+export function getButtonsSize({ align, size }: { align: Align; size: Size }) {
   switch (true) {
-    case align === Align.Vertical && size === Size.S:
-      return {
-        filled: ButtonFilled.sizes.L,
-        outline: ButtonOutline.sizes.L,
-        simple: ButtonSimple.sizes.L,
-      };
-    case [Align.Default, Align.Center].includes(align):
+    case align === ALIGN.Vertical && size === SIZE.S:
+      return 'l';
+    case ([ALIGN.Default, ALIGN.Center] as Align[]).includes(align):
     default:
-      return {
-        filled: ButtonFilled.sizes.M,
-        outline: ButtonOutline.sizes.M,
-        light: ButtonSimple.sizes.M,
-      };
+      return 'm';
   }
 }
 
@@ -59,10 +50,10 @@ export function isPictureImage(picture: ModalHeaderProps['picture']): picture is
 
 export function getPicture({ size, picture }: { size: Size; picture: ModalHeaderProps['picture'] }) {
   switch (size) {
-    case Size.S:
+    case SIZE.S:
       return picture;
-    case Size.M:
-    case Size.L:
+    case SIZE.M:
+    case SIZE.L:
     default:
       return isPictureImage(picture) ? picture : undefined;
   }