@itcase/ui-web 1.9.77 → 1.9.81

package/dist/types/components/Modal/Modal.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { startTransition, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import ReactDOM from 'react-dom';
+import { icons24 } from '@itcase/icons-default';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
+import { Icon } from 'src/components/Icon';
+import { Overlay } from 'src/components/Overlay';
+import { Title } from 'src/components/Title';
+import { modalAppearance } from './Modal.appearance';
+const modalConfig = {
+    appearance: modalAppearance,
+    setAppearance: (appearanceConfig) => {
+        modalConfig.appearance = appearanceConfig;
+    },
+};
+const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
+    // prettier-ignore
+    const classList = className && typeof className === 'string'
+        ? className.split(' ').filter(Boolean)
+        : [];
+    let modalElement = document.getElementById(modalIdQuerySelector);
+    if (!modalElement) {
+        // Add modal element into the DOM on mount.
+        modalElement = document.createElement('div');
+        modalElement.setAttribute('id', modalIdQuerySelector);
+        modalElement.classList.add('modal');
+        if (classList.length) {
+            modalElement.classList.add(...classList);
+        }
+        document.body.prepend(modalElement);
+    }
+    return modalElement;
+};
+// Modal component that is an abstraction around the portal API.
+const Modal = React.forwardRef(function Modal(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, before, after, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    // Query DOM element
+    const [modalElement, setModalElement] = useState(null);
+    const [isOpen, setIsOpen] = useState(initialIsOpen);
+    const modalContentRef = useRef(null);
+    const addModalProps = useCallback((element) => {
+        if (isOpen) {
+            element.classList.add('modal_state_visible');
+            if (isScrollOnOpen) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            if (isSetFocusOnOpen) {
+                setTimeout(() => {
+                    if (modalContentRef.current) {
+                        modalContentRef.current.focus();
+                    }
+                }, 0);
+            }
+        }
+        else if (!element.children.length) {
+            element.classList.remove('modal_state_visible');
+        }
+    }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
+    const openModal = useCallback(() => {
+        startTransition(() => {
+            setIsOpen(true);
+        });
+        if (typeof onOpenModal === 'function') {
+            onOpenModal();
+        }
+    }, [onOpenModal]);
+    const closeModal = useCallback((event) => {
+        if (event) {
+            const hasRelatedTarget = event.relatedTarget &&
+                modalElement &&
+                modalElement.contains(event.relatedTarget);
+            if (hasRelatedTarget) {
+                return event;
+            }
+        }
+        setIsOpen(false);
+        onCloseModal && onCloseModal();
+    }, [modalElement, onCloseModal]);
+    const handleClickOverlay = useCallback((event) => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay(event);
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
+    useEffect(() => {
+        if (!modalElement) {
+            return;
+        }
+        addModalProps(modalElement);
+    }, [isOpen]); // eslint-disable-line
+    useLayoutEffect(() => {
+        let classNameModal = className;
+        if (!print) {
+            classNameModal = clsx(className, 'no-print');
+        }
+        const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setModalElement(element);
+        if (element) {
+            addModalProps(element);
+        }
+    }, [addModalProps, className, modalIdQuerySelector, print]);
+    useEffect(() => {
+        if (!isCloseOnBlur || !isOpen) {
+            return;
+        }
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (!modalElement || !target || !target.isConnected) {
+                return;
+            }
+            const isOutside = !modalElement.contains(target);
+            if (isOutside) {
+                setIsOpen(false);
+                onCloseModal && onCloseModal();
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
+    useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
+    const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, overlayFill, overlayOpacity, shapeClass, shapeStrengthClass, sizeClass, closeIconAppearance, closeIconAppearanceSize, closeIconFillSize, closeIconImage, closeIconShape, closeIconSize, } = propsGenerator;
+    const { styles: modalStyles } = useStyles(props);
+    return (modalElement &&
+        ReactDOM.createPortal(isOpen ? (_jsxs(React.Fragment, { children: [_jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (title || closeIcon) && (_jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (_jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (_jsx("div", { className: "modal__close", onClick: closeModal, children: _jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), _jsx("div", { className: "modal__content-wrapper", children: children }), after] }), _jsx(Overlay, { className: "modal__overlay", 
+                    // ref={modalOverlayRef}
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
+        // A DOM element
+        modalElement));
+});
+export { Modal, modalConfig };

package/dist/types/components/Modal/ModalLoader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from 'src/components/Loader';
+function ModalLoader() {
+    return (_jsx("div", { className: "modal-loading", children: _jsx("div", { className: "modal-loading__inner", children: _jsx(Loader, {}) }) }));
+}
+export { ModalLoader };

package/dist/types/components/Modal/appearance/modalShape.js

@@ -0,0 +1,25 @@
+const modalAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { modalAppearanceShape };

package/dist/types/components/Modal/appearance/modalSize.js

@@ -0,0 +1,28 @@
+import { icons24, icons32, icons40 } from '@itcase/icons-default';
+const modalAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        titleTextSize: 'h2',
+        closeIconAppearanceSize: 'size48_40',
+        closeIconImage: icons40.Action.Close,
+    },
+    sizeL: {
+        size: 'l',
+        titleTextSize: 'h3',
+        closeIconAppearanceSize: 'size40_32',
+        closeIconImage: icons32.Action.Close,
+    },
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'h4',
+        closeIconAppearanceSize: 'size24_24',
+        closeIconImage: icons24.Action.Close,
+    },
+    sizeS: {
+        size: 's',
+        titleTextSize: 'h5',
+        closeIconAppearanceSize: 'size24_24',
+        closeIconImage: icons24.Action.Close,
+    },
+};
+export { modalAppearanceSize };

package/dist/types/components/Modal/appearance/modalStyle.js

@@ -0,0 +1,14 @@
+const modalAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { modalAppearanceStyle };

package/dist/types/components/Modal/appearance/modalSurface.js

@@ -0,0 +1,8 @@
+const modalAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        closeIconAppearance: 'surfacePrimary ghost circular',
+    },
+};
+export { modalAppearanceSurface };

package/dist/types/components/Modal/index.js

@@ -0,0 +1,4 @@
+import { Modal, modalConfig } from './Modal';
+import { modalAppearance } from './Modal.appearance';
+import { ModalLoader } from './ModalLoader';
+export { Modal, modalAppearance, modalConfig, ModalLoader };

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

@@ -0,0 +1,78 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        closeIcon?: boolean;
+        closeIconAppearance?: import("../../Icon").IconProps["appearance"];
+        closeIconAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
+        closeIconFillSize?: import("../../Icon").IconProps["fillSize"];
+        closeIconImage?: import("../../Icon").IconProps["SvgImage"];
+        closeIconShape?: import("../../Icon").IconProps["shape"];
+        closeIconSize?: import("../../Icon").IconProps["iconSize"];
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        isDisabled?: boolean;
+        isOpen?: boolean;
+        itemFill?: import("@itcase/types-ui").ItemFillProps;
+        overlayFill?: import("../../Overlay").OverlayProps["fill"];
+        overlayOpacity?: import("../../Overlay").OverlayProps["opacity"];
+        print?: boolean;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        textColor?: import("../../Text").TextProps["textColor"];
+        textSize?: import("../../Text").TextProps["size"];
+        titleTextColor?: import("../../Title").TitleProps["textColor"];
+        titleTextColorHover?: import("../../Title").TitleProps["textColorHover"];
+        titleTextSize?: import("../../Title").TitleProps["size"];
+        titleTextTruncate?: import("../../Title").TitleProps["textTruncate"];
+        titleTextWeight?: import("../../Title").TitleProps["textWeight"];
+        titleTextWidth?: import("@itcase/types-ui").WidthProps;
+        titleTextWrap?: import("../../Title").TitleProps["textWrap"];
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: string;
+        absoluteHeader?: boolean;
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKeys;
+        before?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string;
+        contentClassName?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isCloseOnBlur?: boolean;
+        isOverlay?: boolean;
+        isScrollOnOpen?: boolean;
+        isSetFocusOnOpen?: boolean;
+        isSkeleton?: boolean;
+        modalIdQuerySelector?: string;
+        modalQuerySelector?: string;
+        onClickOverlay: import("../../Overlay").OverlayProps["onClick"];
+        onCloseModal?: () => void;
+        onOpenModal?: () => void;
+        scroll?: boolean;
+        stickyHeader?: boolean;
+        style?: import("react").CSSProperties;
+        title?: string;
+    } & import("react").RefAttributes<import("..").ModalRef>>;
+    args: {
+        appearance: "surfacePrimary sizeL solid";
+        title: string;
+        absoluteHeader: true;
+        scroll: true;
+        closeIcon: true;
+        isCloseOnBlur: false;
+        isOpen: true;
+        onClickOverlay: () => void;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TitleAndIcon: Story;
+export declare const WithoutHeader: Story;
+export declare const Title: Story;
+export declare const Icon: Story;

package/dist/types/components/Modal/stories/ModalAbsoluteHeader.stories.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from 'src/components/Group';
+import { Modal } from '../Modal';
+const meta = {
+    title: 'Molecules / Modal / Absolute Header',
+    component: Modal,
+    args: {
+        appearance: 'surfacePrimary sizeL solid',
+        title: 'Title 123',
+        absoluteHeader: true,
+        scroll: true,
+        closeIcon: true,
+        isCloseOnBlur: false,
+        isOpen: true,
+        onClickOverlay: () => { },
+        children: _jsx(Group, { minHeight: "1000", fill: "surfaceSecondary" }),
+    },
+};
+export default meta;
+export const TitleAndIcon = {
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const WithoutHeader = {
+    args: {
+        title: '',
+        closeIcon: false,
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const Title = {
+    args: {
+        closeIcon: false,
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const Icon = {
+    args: {
+        title: '',
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};

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

@@ -0,0 +1,75 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { ModalRef } from '../Modal.interface';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        closeIcon?: boolean;
+        closeIconAppearance?: import("../../Icon").IconProps["appearance"];
+        closeIconAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
+        closeIconFillSize?: import("../../Icon").IconProps["fillSize"];
+        closeIconImage?: import("../../Icon").IconProps["SvgImage"];
+        closeIconShape?: import("../../Icon").IconProps["shape"];
+        closeIconSize?: import("../../Icon").IconProps["iconSize"];
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        isDisabled?: boolean;
+        isOpen?: boolean;
+        itemFill?: import("@itcase/types-ui").ItemFillProps;
+        overlayFill?: import("../../Overlay").OverlayProps["fill"];
+        overlayOpacity?: import("../../Overlay").OverlayProps["opacity"];
+        print?: boolean;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        textColor?: import("../../Text").TextProps["textColor"];
+        textSize?: import("../../Text").TextProps["size"];
+        titleTextColor?: import("../../Title").TitleProps["textColor"];
+        titleTextColorHover?: import("../../Title").TitleProps["textColorHover"];
+        titleTextSize?: import("../../Title").TitleProps["size"];
+        titleTextTruncate?: import("../../Title").TitleProps["textTruncate"];
+        titleTextWeight?: import("../../Title").TitleProps["textWeight"];
+        titleTextWidth?: import("@itcase/types-ui").WidthProps;
+        titleTextWrap?: import("../../Title").TitleProps["textWrap"];
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: string;
+        absoluteHeader?: boolean;
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKeys;
+        before?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string;
+        contentClassName?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isCloseOnBlur?: boolean;
+        isOverlay?: boolean;
+        isScrollOnOpen?: boolean;
+        isSetFocusOnOpen?: boolean;
+        isSkeleton?: boolean;
+        modalIdQuerySelector?: string;
+        modalQuerySelector?: string;
+        onClickOverlay: import("../../Overlay").OverlayProps["onClick"];
+        onCloseModal?: () => void;
+        onOpenModal?: () => void;
+        scroll?: boolean;
+        stickyHeader?: boolean;
+        style?: import("react").CSSProperties;
+        title?: string;
+    } & import("react").RefAttributes<ModalRef>>;
+    args: {
+        appearance: "surfacePrimary sizeXL solid";
+        title: string;
+        print: false;
+        closeIcon: true;
+        isCloseOnBlur: true;
+        isOpen: true;
+        onClickOverlay: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;
+export declare const Skeleton: Story;

package/dist/types/components/Modal/stories/ModalDemo.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Modal } from '../Modal';
+const meta = {
+    title: 'Molecules / Modal',
+    component: Modal,
+    args: {
+        appearance: 'surfacePrimary sizeXL solid',
+        title: 'Title 123',
+        print: false,
+        closeIcon: true,
+        isCloseOnBlur: true,
+        isOpen: true,
+        onClickOverlay: () => { },
+    },
+};
+export default meta;
+export const Demo = {
+    args: {},
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const modalRef = useRef(null);
+        const openModal = () => {
+            modalRef.current?.openModal();
+        };
+        return (_jsxs("div", { children: [_jsx("button", { onClick: openModal, children: "openModal" }), _jsx(Modal, { ...args, ref: modalRef })] }));
+    },
+};
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};

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

@@ -0,0 +1,77 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        closeIcon?: boolean;
+        closeIconAppearance?: import("../../Icon").IconProps["appearance"];
+        closeIconAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
+        closeIconFillSize?: import("../../Icon").IconProps["fillSize"];
+        closeIconImage?: import("../../Icon").IconProps["SvgImage"];
+        closeIconShape?: import("../../Icon").IconProps["shape"];
+        closeIconSize?: import("../../Icon").IconProps["iconSize"];
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        isDisabled?: boolean;
+        isOpen?: boolean;
+        itemFill?: import("@itcase/types-ui").ItemFillProps;
+        overlayFill?: import("../../Overlay").OverlayProps["fill"];
+        overlayOpacity?: import("../../Overlay").OverlayProps["opacity"];
+        print?: boolean;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        textColor?: import("../../Text").TextProps["textColor"];
+        textSize?: import("../../Text").TextProps["size"];
+        titleTextColor?: import("../../Title").TitleProps["textColor"];
+        titleTextColorHover?: import("../../Title").TitleProps["textColorHover"];
+        titleTextSize?: import("../../Title").TitleProps["size"];
+        titleTextTruncate?: import("../../Title").TitleProps["textTruncate"];
+        titleTextWeight?: import("../../Title").TitleProps["textWeight"];
+        titleTextWidth?: import("@itcase/types-ui").WidthProps;
+        titleTextWrap?: import("../../Title").TitleProps["textWrap"];
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: string;
+        absoluteHeader?: boolean;
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKeys;
+        before?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string;
+        contentClassName?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isCloseOnBlur?: boolean;
+        isOverlay?: boolean;
+        isScrollOnOpen?: boolean;
+        isSetFocusOnOpen?: boolean;
+        isSkeleton?: boolean;
+        modalIdQuerySelector?: string;
+        modalQuerySelector?: string;
+        onClickOverlay: import("../../Overlay").OverlayProps["onClick"];
+        onCloseModal?: () => void;
+        onOpenModal?: () => void;
+        scroll?: boolean;
+        stickyHeader?: boolean;
+        style?: import("react").CSSProperties;
+        title?: string;
+    } & import("react").RefAttributes<import("..").ModalRef>>;
+    args: {
+        appearance: "surfacePrimary sizeL solid";
+        title: string;
+        scroll: true;
+        closeIcon: true;
+        isCloseOnBlur: false;
+        isOpen: true;
+        onClickOverlay: () => void;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TitleAndIcon: Story;
+export declare const WithoutHeader: Story;
+export declare const Title: Story;
+export declare const Icon: Story;

package/dist/types/components/Modal/stories/ModalScroll.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from 'src/components/Group';
+import { Modal } from '../Modal';
+const meta = {
+    title: 'Molecules / Modal / Scroll',
+    component: Modal,
+    args: {
+        appearance: 'surfacePrimary sizeL solid',
+        title: 'Title 123',
+        scroll: true,
+        closeIcon: true,
+        isCloseOnBlur: false,
+        isOpen: true,
+        onClickOverlay: () => { },
+        children: _jsx(Group, { minHeight: "1000", fill: "surfaceSecondary" }),
+    },
+};
+export default meta;
+export const TitleAndIcon = {
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const WithoutHeader = {
+    args: {
+        title: '',
+        closeIcon: false,
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const Title = {
+    args: {
+        closeIcon: false,
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};
+export const Icon = {
+    args: {
+        title: '',
+    },
+    render: (args) => {
+        return _jsx(Modal, { ...args });
+    },
+};