@popsure/dirty-swan 0.62.3 → 0.63.0

package/dist/esm/components/modal/index.stories.js

@@ -3,178 +3,121 @@ import { useState } from 'react';
 import { BottomModal } from './bottomModal/index.js';
 import { RegularModal } from './regularModal/index.js';
 import { BottomOrRegularModal } from './bottomOrRegularModal/index.js';
-import { FullScreenModal } from './fullScreenModal/index.js';
 import { Button } from '../button/index.js';
-import '../../tslib.es6-CVlKGIvp.js';
-import '../../style-inject.es-tgCJW-Cu.js';
-import '../../index-DLQEsiym.js';
-import '../../_commonjsHelpers-BFTU3MAI.js';
+import '../../tslib.es6-a39f91fc.js';
+import '../../style-inject.es-1f59c1d0.js';
+import '../../index-6ea95111.js';
 import './genericModal/index.js';
 import '../icon/icons/X.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../index-DuaJiEiT.js';
-import '../../index-hWqCLhoS.js';
 
 var story = {
     title: 'JSX/Modals',
     component: BottomOrRegularModal,
     argTypes: {
         title: {
-            description: 'The title that needs to be displayed on the modal',
+            description: "The title that needs to be displayed on the modal",
         },
         isOpen: {
-            description: 'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',
+            description: "When set to `true`, the modal is displayed. When set to `false` the modal gets removed",
         },
         dismissible: {
-            description: 'The content that gets displayed on the modal',
+            description: "The content that gets displayed on the modal",
         },
         className: {
             description: 'Any additional className',
         },
-        classNames: {
-            description: 'Class names for the Modal component and its children elements',
-        },
-        size: {
-            description: 'The size of the modal, either large or default.',
-            control: 'radio',
-            options: {
-                default: 'default',
-                large: 'large',
-            },
-        },
         children: {
             description: 'The content that gets displayed on the modal',
             type: 'text',
             table: {
                 type: {
-                    summary: 'ReactNode',
-                },
-            },
+                    summary: 'ReactNode'
+                }
+            }
         },
         onClose: {
             description: 'Callback when the user close the modal',
             action: true,
             table: {
-                category: 'Callbacks',
-            },
-        },
-        onModalScroll: {
-            description: 'Callback when the user scroll the modal',
-            action: true,
-            table: {
-                category: 'Callbacks',
+                category: "Callbacks",
             },
         },
     },
     args: {
-        title: 'Modal title',
+        title: "Modal title",
         isOpen: false,
         dismissible: true,
         className: '',
-        classNames: {
-            wrapper: '',
-            container: '',
-            overlay: '',
-            header: '',
-            closeButton: '',
-            closeButtonIcon: '',
-            title: '',
-            body: '',
-            footer: '',
-        },
         children: 'Modal content to be displayed',
-        size: 'default',
     },
     parameters: {
         componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
         docs: {
             description: {
                 component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',
-            },
+            }
         },
     },
 };
-var BottomOrRegularModalStory = {
-    render: function (_a) {
-        var children = _a.children, className = _a.className, classNames = _a.classNames, dismissible = _a.dismissible, isOpen = _a.isOpen, onClose = _a.onClose, onModalScroll = _a.onModalScroll, size = _a.size, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, classNames: classNames, title: title, isOpen: display, size: size, onModalScroll: onModalScroll, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx(Button, { className: "mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
-    },
-    name: 'BottomOrRegularModal',
+var BottomOrRegularModalStory = function (_a) {
+    var children = _a.children, className = _a.className, dismissible = _a.dismissible, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: [jsx("button", { className: "p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
-var RegularModalStory = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx(Button, { className: "mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
-    },
-    name: 'RegularModal',
+BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
+var RegularModalStory = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
-var BottomModalStory = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx(Button, { className: "mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
-    },
-    name: 'BottomModal',
+RegularModalStory.storyName = 'RegularModal';
+var BottomModalStory = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
-var FullScreenModalStory = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: ["Full screen modals are primary meant to be used as blocker screens. The modal will cover the entire screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(FullScreenModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx(Button, { className: "mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
-    },
-    name: 'FullScreenModal',
+BottomModalStory.storyName = 'BottomModal';
+var NonDismissibleModal = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx("button", { className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
-var NonDismissibleModal = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx(Button, { className: "mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
-    },
-};
-var ModalWithFooter = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsx("div", { children: children }) }) })] }));
-    },
+var ModalWithFooter = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: [jsx("button", { className: "p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: (jsxs("div", { className: 'd-flex fd-row gap8', children: [jsx(Button, { variant: 'textColor', className: 'w100', onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: 'w100', onClick: handleOnClose, children: "Continue" })] })), children: jsx("div", { className: 'p24', children: jsx("div", { children: children }) }) })] }));
 };
-var ModalWithFooterAndScroll = {
-    render: function (_a) {
-        var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-        var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
-        var handleOnClose = function () {
-            onClose();
-            setDisplay(false);
-        };
-        return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
-    },
+var ModalWithFooterAndScroll = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+    var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
+    var handleOnClose = function () {
+        onClose();
+        setDisplay(false);
+    };
+    return (jsxs(Fragment, { children: [jsx("button", { className: "p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: (jsxs("div", { className: 'd-flex fd-row gap8', children: [jsx(Button, { variant: 'textColor', className: 'w100', onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: 'w100', onClick: handleOnClose, children: "Continue" })] })), children: jsx("div", { className: 'p24', children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
 };
 
-export { BottomModalStory, BottomOrRegularModalStory, FullScreenModalStory, ModalWithFooter, ModalWithFooterAndScroll, NonDismissibleModal, RegularModalStory, story as default };
+export default story;
+export { BottomModalStory, BottomOrRegularModalStory, ModalWithFooter, ModalWithFooterAndScroll, NonDismissibleModal, RegularModalStory };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/modal/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\nimport { FullScreenModal } from './fullScreenModal';\n\nconst story = {\n  title: 'JSX/Modals',\n  component: BottomOrRegularModal,\n  argTypes: {\n    title: {\n      description: 'The title that needs to be displayed on the modal',\n    },\n    isOpen: {\n      description:\n        'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',\n    },\n    dismissible: {\n      description: 'The content that gets displayed on the modal',\n    },\n    className: {\n      description: 'Any additional className',\n    },\n    classNames: {\n      description:\n        'Class names for the Modal component and its children elements',\n    },\n    size: {\n      description: 'The size of the modal, either large or default.',\n      control: 'radio',\n      options: {\n        default: 'default',\n        large: 'large',\n      },\n    },\n    children: {\n      description: 'The content that gets displayed on the modal',\n      type: 'text',\n      table: {\n        type: {\n          summary: 'ReactNode',\n        },\n      },\n    },\n    onClose: {\n      description: 'Callback when the user close the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onModalScroll: {\n      description: 'Callback when the user scroll the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    title: 'Modal title',\n    isOpen: false,\n    dismissible: true,\n    className: '',\n    classNames: {\n      wrapper: '',\n      container: '',\n      overlay: '',\n      header: '',\n      closeButton: '',\n      closeButtonIcon: '',\n      title: '',\n      body: '',\n      footer: '',\n    },\n    children: 'Modal content to be displayed',\n    size: 'default',\n  },\n  parameters: {\n    componentSubtitle:\n      'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n    docs: {\n      description: {\n        component:\n          'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n      },\n    },\n  },\n};\n\nexport const BottomOrRegularModalStory = {\n  render: ({\n    children,\n    className,\n    classNames,\n    dismissible,\n    isOpen,\n    onClose,\n    onModalScroll,\n    size,\n    title,\n  }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        <Button className=\"wmn2\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n\n        <BottomOrRegularModal\n          dismissible={dismissible}\n          className={className}\n          classNames={classNames}\n          title={title}\n          isOpen={display}\n          size={size}\n          onModalScroll={onModalScroll}\n          onClose={handleOnClose}\n        >\n          <div style={{ padding: '0 24px 24px 24px' }}>\n            <div>{children}</div>\n            <Button className=\"mt24 wmn3\" onClick={() => setDisplay(false)}>\n              Continue\n            </Button>\n          </div>\n        </BottomOrRegularModal>\n      </>\n    );\n  },\n\n  name: 'BottomOrRegularModal',\n};\n\nexport const RegularModalStory = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        Regular modals are primary meant to be used on Desktop or Tablet\n        environment. The modal will appear in the middle of the screen and the\n        user will be able to dismiss them using the top left \"X\" icon. If you\n        want to use it for Mobile only, you should check BottomModal instead.\n        Want to use either Regular Modal or Bottom Modal based on the screen\n        width? You can use Bottom or Regular modal.\n        <Button className=\"wmn2 mt24\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n        <RegularModal title={title} isOpen={display} onClose={handleOnClose}>\n          <div style={{ padding: '0 24px 24px 24px' }}>\n            <div>{children}</div>\n            <Button className=\"mt24 wmn3\" onClick={() => setDisplay(false)}>\n              Continue\n            </Button>\n          </div>\n        </RegularModal>\n      </>\n    );\n  },\n\n  name: 'RegularModal',\n};\n\nexport const BottomModalStory = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        Bottom modals are primary meant to be used on Mobile environment. The\n        modal will appear from the bottom of the screen and the user will be\n        able to dismiss them using the top left \"X\" icon. If you want to use it\n        for Desktop only, you should check Regular modal instead. Want to use\n        either Regular Modal or Bottom Modal based on the screen width? You can\n        use Bottom or Regular modal.\n        <Button className=\"wmn2 mt24\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n        <BottomModal title={title} isOpen={display} onClose={handleOnClose}>\n          <div style={{ padding: '0 24px 24px 24px' }}>\n            <div>{children}</div>\n            <Button className=\"mt24 wmn3\" onClick={() => setDisplay(false)}>\n              Continue\n            </Button>\n          </div>\n        </BottomModal>\n      </>\n    );\n  },\n\n  name: 'BottomModal',\n};\n\nexport const FullScreenModalStory = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        Full screen modals are primary meant to be used as blocker screens. The\n        modal will cover the entire screen and the user will be able to dismiss\n        them using the top left \"X\" icon.\n        <Button className=\"wmn2 mt24\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n        <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>\n          <div style={{ padding: '0 24px 24px 24px' }}>\n            <div>{children}</div>\n\n            <Button className=\"mt24 wmn3\" onClick={() => setDisplay(false)}>\n              Continue\n            </Button>\n          </div>\n        </FullScreenModal>\n      </>\n    );\n  },\n\n  name: 'FullScreenModal',\n};\n\nexport const NonDismissibleModal = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        Setting the dismissible prop to false will hide the close button and\n        prevent the user from closing it using the escape key or clicking\n        outside. This prop can be useful if we want the user to explicitly\n        interact with the modal options.\n        <strong>Warning:</strong> a modal with the dismissible prop can only be\n        closed by changing the isOpen prop to false.\n        <Button className=\"wmn2 mt24\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n        <BottomOrRegularModal\n          dismissible={false}\n          title={title}\n          isOpen={display}\n          onClose={handleOnClose}\n        >\n          <div style={{ padding: '0 24px 24px 24px' }}>\n            <div>{children}</div>\n            <Button className=\"mt24 wmn3\" onClick={() => setDisplay(false)}>\n              Continue\n            </Button>\n          </div>\n        </BottomOrRegularModal>\n      </>\n    );\n  },\n};\n\nexport const ModalWithFooter = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        <Button className=\"wmn2\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n\n        <BottomOrRegularModal\n          title={title}\n          isOpen={display}\n          onClose={handleOnClose}\n          footer={\n            <div className=\"d-flex fd-row gap8\">\n              <Button\n                variant=\"textBlack\"\n                className=\"w100\"\n                onClick={handleOnClose}\n              >\n                Skip\n              </Button>\n              <Button className=\"w100\" onClick={handleOnClose}>\n                Continue\n              </Button>\n            </div>\n          }\n        >\n          <div className=\"p24\">\n            <div>{children}</div>\n          </div>\n        </BottomOrRegularModal>\n      </>\n    );\n  },\n};\n\nexport const ModalWithFooterAndScroll = {\n  render: ({ children, isOpen, onClose, title }: Props) => {\n    const [display, setDisplay] = useState(isOpen);\n    const handleOnClose = () => {\n      onClose();\n      setDisplay(false);\n    };\n\n    return (\n      <>\n        <Button className=\"wmn2\" onClick={() => setDisplay(true)}>\n          Click to open modal\n        </Button>\n\n        <BottomOrRegularModal\n          title={title}\n          isOpen={display}\n          onClose={handleOnClose}\n          footer={\n            <div className=\"d-flex fd-row gap8\">\n              <Button\n                variant=\"textBlack\"\n                className=\"w100\"\n                onClick={handleOnClose}\n              >\n                Skip\n              </Button>\n              <Button className=\"w100\" onClick={handleOnClose}>\n                Continue\n              </Button>\n            </div>\n          }\n        >\n          <div className=\"p24\">\n            <div>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n              <div style={{ height: '840px' }} />\n              {children}\n            </div>\n          </div>\n        </BottomOrRegularModal>\n      </>\n    );\n  },\n};\n\nexport default story;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\n\nconst story = {\n  title: 'JSX/Modals',\n  component: BottomOrRegularModal,\n  argTypes: {\n    title: {\n      description: \"The title that needs to be displayed on the modal\",\n    },\n    isOpen: {\n      description: \"When set to `true`, the modal is displayed. When set to `false` the modal gets removed\",\n    },\n    dismissible: {\n      description: \"The content that gets displayed on the modal\",\n    },\n    className: {\n      description: 'Any additional className',\n    },\n    children: {\n      description: 'The content that gets displayed on the modal',\n      type: 'text',\n      table: {\n        type: {\n            summary: 'ReactNode'\n        }\n      }\n    },\n    onClose: {\n      description: 'Callback when the user close the modal',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n  },\n  args: {\n    title: \"Modal title\",\n    isOpen: false,\n    dismissible: true,\n    className: '',\n    children: 'Modal content to be displayed',\n  },\n  parameters: {\n    componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n    docs: {\n      description: {\n        component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n      }\n    },\n  },\n};\n\nexport const BottomOrRegularModalStory = ({\n  children,\n  className,\n  dismissible,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        dismissible={dismissible}\n        className={className}\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>\n            {children}\n          </div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n}\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon.  \n      If you want to use it for Mobile only, you should check BottomModal instead.\n      Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.\n\n      <button\n        className=\"p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <RegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>\n            {children}\n          </div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </RegularModal>\n    </>\n  );\n}\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon.\n      If you want to use it for Desktop only, you should check Regular modal instead.\n      Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.\n\n      <button\n        className=\"p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>\n            {children}\n          </div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomModal>\n    </>\n  );\n}\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const NonDismissibleModal = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.\n      This prop can be useful if we want the user to explicitly interact with the modal options.\n\n      <strong>Warning:</strong> a modal with the dismissible prop can only be closed by changing the isOpen prop to false.\n\n      <button\n        className=\"p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        dismissible={false}\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>\n            {children}\n          </div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n}\n\nexport const ModalWithFooter = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={(\n          <div className='d-flex fd-row gap8'>\n            <Button variant='textColor' className='w100' onClick={handleOnClose}>\n              Skip\n            </Button>\n            <Button className='w100' onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        )}\n      >\n        <div className='p24'>\n          <div>\n            {children}\n          </div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n}\n\nexport const ModalWithFooterAndScroll = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={(\n          <div className='d-flex fd-row gap8'>\n            <Button variant='textColor' className='w100' onClick={handleOnClose}>\n              Skip\n            </Button>\n            <Button className='w100' onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        )}\n      >\n        <div className='p24'>\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            <div style={{ height: '840px' }} />\n            {children}\n          </div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/modal/regularModal/index.js

@@ -1,29 +1,29 @@
-import { c as __rest, b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
+import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
-import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
-import { c as classNames } from '../../../index-DLQEsiym.js';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 import { GenericModal } from '../genericModal/index.js';
-import '../../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
 import '../../button/index.js';
 import '../../icon/icons/X.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-DuaJiEiT.js';
-import '../../../index-hWqCLhoS.js';
 
-var css_248z = "@keyframes style-module_appear-in__2ZMqz {\n  0% {\n    transform: translateY(24px);\n    opacity: 0;\n    visibility: hidden;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n    visibility: visible;\n  }\n}\n@keyframes style-module_disappear-out__38TSV {\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n    visibility: visible;\n  }\n  100% {\n    transform: translateY(24px);\n    opacity: 0;\n    visibility: hidden;\n  }\n}\n.style-module_wrapper__qQirD {\n  position: relative;\n  min-height: 100%;\n  animation-name: style-module_appear-in__2ZMqz;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n.style-module_wrapperClose__2aXSB {\n  animation-name: style-module_disappear-out__38TSV;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_container__1XZj_ {\n  max-height: 90vh;\n  overflow: hidden;\n}";
-var styles = {"wrapper":"style-module_wrapper__qQirD","wrapperClose":"style-module_wrapperClose__2aXSB","container":"style-module_container__1XZj_"};
+var css_248z = "@keyframes style-module_appear-in__2ZMqz {\n  0% {\n    transform: translateY(24px);\n    opacity: 0;\n    visibility: hidden;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n    visibility: visible;\n  }\n}\n@keyframes style-module_disappear-out__38TSV {\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n    visibility: visible;\n  }\n  100% {\n    transform: translateY(24px);\n    opacity: 0;\n    visibility: hidden;\n  }\n}\n.style-module_wrapper__qQirD {\n  position: relative;\n  min-height: 100%;\n  animation-name: style-module_appear-in__2ZMqz;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n.style-module_wrapperClose__2aXSB {\n  animation-name: style-module_disappear-out__38TSV;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_container__1XZj_ {\n  max-height: 96vh;\n  overflow: hidden;\n}";
+var styles = {"wrapper":"style-module_wrapper__qQirD","appear-in":"style-module_appear-in__2ZMqz","wrapperClose":"style-module_wrapperClose__2aXSB","disappear-out":"style-module_disappear-out__38TSV","container":"style-module_container__1XZj_"};
 styleInject(css_248z);
 
 var RegularModal = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, classNames$1 = _a.classNames, size = _a.size, rest = __rest(_a, ["className", "classNames", "size"]);
-    return (jsx(GenericModal, __assign({ classNames: __assign(__assign({}, classNames$1), { wrapper: function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, rest = __rest(_a, ["className"]);
+    return (jsx(GenericModal, __assign({ classNames: {
+            wrapper: function (_a) {
                 var _b;
                 var isClosing = _a.isClosing;
-                return classNames('d-flex ai-center w90 mx-auto my0', className, styles.wrapper, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper, (_b = {},
+                return classNames('d-flex ai-center w90 mx-auto my0', className, styles.wrapper, (_b = {},
                     _b[styles.wrapperClose] = isClosing,
                     _b));
-            }, container: classNames('bg-white br8 d-flex ai-center fd-column mx-auto my0', styles.container, size === 'large' ? 'wmx10' : 'wmx8', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) }) }, rest)));
+            },
+            container: classNames('bg-white br8 d-flex ai-center fd-column mx-auto my0 wmx8', styles.container)
+        } }, rest)));
 };
 
 export { RegularModal };

package/dist/esm/components/modal/regularModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["import { Props } from '..';\nimport styles from './style.module.scss';\nimport classNamesUtil from 'classnames';\nimport { GenericModal } from '../genericModal';\n\nconst RegularModal = ({ className = '', classNames, size, ...rest }: Props) => (\n  <GenericModal\n    classNames={{\n      ...classNames,\n      wrapper: ({ isClosing }) =>\n        classNamesUtil(\n          'd-flex ai-center w90 mx-auto my0',\n          className,\n          styles.wrapper,\n          classNames?.wrapper,\n          {\n            [styles.wrapperClose]: isClosing,\n          }\n        ),\n      container: classNamesUtil(\n        'bg-white br8 d-flex ai-center fd-column mx-auto my0',\n        styles.container,\n        size === 'large' ? 'wmx10' : 'wmx8',\n        classNames?.container\n      ),\n    }}\n    {...rest}\n  />\n);\n\nexport { RegularModal };\n"],"names":["classNames","_jsx","classNamesUtil"],"mappings":";;;;;;;;;;;;;;;;;AAKA,IAAM,YAAY,GAAG,UAAC,EAAoD,EAAA;AAAlD,IAAA,IAAA,iBAAc,EAAd,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,KAAA,EAAEA,YAAU,GAAA,EAAA,CAAA,UAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAK,IAAI,GAAA,MAAA,CAAA,EAAA,EAA3C,mCAA6C,CAAF;IAAc,QAC7EC,GAAA,CAAC,YAAY,EAAA,QAAA,CAAA,EACX,UAAU,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACLD,YAAU,CAAA,EAAA,EACb,OAAO,EAAE,UAAC,EAAa,EAAA;;AAAX,gBAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA;AACnB,gBAAA,OAAAE,UAAc,CACZ,kCAAkC,EAClC,SAAS,EACT,MAAM,CAAC,OAAO,EACdF,YAAU,KAAA,IAAA,IAAVA,YAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,YAAU,CAAE,OAAO,GAAA,EAAA,GAAA,EAAA;AAEjB,oBAAA,EAAA,CAAC,MAAM,CAAC,YAAY,CAAA,GAAG,SAAS;AAEnC,oBAAA,EAAA,EAAA;AARD,YAAA,CAQC,EACH,SAAS,EAAEE,UAAc,CACvB,qDAAqD,EACrD,MAAM,CAAC,SAAS,EAChB,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,EACnCF,YAAU,aAAVA,YAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,YAAU,CAAE,SAAS,CACtB,EAAA,CAAA,EAAA,EAEC,IAAI,CAAA,CACR;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["import { Props } from '..';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\nimport { GenericModal } from '../genericModal';\n\nconst RegularModal = ({ className = '', ...rest }: Props) => (\n  <GenericModal\n    classNames={{\n      wrapper: ({ isClosing }) => classNames(\n        'd-flex ai-center w90 mx-auto my0',\n        className,\n        styles.wrapper, {\n          [styles.wrapperClose]: isClosing,\n        }\n      ),\n      container: classNames(\n        'bg-white br8 d-flex ai-center fd-column mx-auto my0 wmx8',\n        styles.container\n      )\n    }}\n    {...rest}\n  />\n);\n\nexport { RegularModal };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;IAKM,YAAY,GAAG,UAAC,EAAkC;IAAhC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAzB,aAA2B,CAAF;IAAc,QAC3DA,IAAC,YAAY,aACX,UAAU,EAAE;YACV,OAAO,EAAE,UAAC,EAAa;;oBAAX,SAAS,eAAA;gBAAO,OAAA,UAAU,CACpC,kCAAkC,EAClC,SAAS,EACT,MAAM,CAAC,OAAO;oBACZ,GAAC,MAAM,CAAC,YAAY,IAAG,SAAS;wBAEnC;aAAA;YACD,SAAS,EAAE,UAAU,CACnB,0DAA0D,EAC1D,MAAM,CAAC,SAAS,CACjB;SACF,IACG,IAAI,EACR,EACH;;;;;"}

package/dist/esm/components/multiDropzone/UploadFileCell/index.js

@@ -1,29 +1,27 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { c as classNames } from '../../../index-DLQEsiym.js';
-import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
-import 'react';
+import { c as classNames } from '../../../index-6ea95111.js';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import EyeVisionIcon from '../../icon/icons/EyeVision.js';
 import FileIcon from '../../icon/icons/File.js';
 import Trash2Icon from '../../icon/icons/Trash2.js';
-import { Button } from '../../button/index.js';
-import '../../../_commonjsHelpers-BFTU3MAI.js';
+import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../tslib.es6-CVlKGIvp.js';
+import '../../../tslib.es6-a39f91fc.js';
 
-var css_248z = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d9;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #E55454;\n  background-color: #FED7D7;\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #e7e7ed;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #26262e;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_button__xo5tR {\n  width: 32px;\n}\n.style-module_button__xo5tR div span span {\n  min-width: 24px !important;\n  height: 24px !important;\n}\n.style-module_button__xo5tR:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
-var styles = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","button":"style-module_button__xo5tR"};
+var css_248z = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d8;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #e55454;\n  background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_icon__31Yuk {\n  margin: 0px;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #f5f6fb;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #8e8cee;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n  justify-content: flex-end;\n  min-width: 32px;\n  margin-left: 16px;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_view-icon__3UenG,\n.style-module_remove-icon__2FWBQ {\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.style-module_remove-icon__2FWBQ {\n  margin-left: 16px;\n}\n\n.style-module_disabled__s-DR1 {\n  pointer-events: none;\n  cursor: default;\n  opacity: 0.3;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+var styles = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","icon":"style-module_icon__31Yuk","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","view-icon":"style-module_view-icon__3UenG","remove-icon":"style-module_remove-icon__2FWBQ","disabled":"style-module_disabled__s-DR1"};
 styleInject(css_248z);
 
 var UploadFileCell = function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var uploadStatus = _a.uploadStatus, file = _a.file, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading;
-    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _d = file.showLoadingSpinner, showLoadingSpinner = _d === void 0 ? false : _d, _e = file.showProgressBar, showProgressBar = _e === void 0 ? true : _e;
+    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _e = file.showLoadingSpinner, showLoadingSpinner = _e === void 0 ? false : _e, _f = file.showProgressBar, showProgressBar = _f === void 0 ? true : _f;
     var isComplete = uploadStatus === 'COMPLETE';
     var isUploading = uploadStatus === 'UPLOADING';
     var hasError = uploadStatus === 'ERROR';
     var mapFileIconColor = {
-        UPLOADING: 'purple-600',
-        COMPLETE: 'neutral-900',
+        UPLOADING: 'purple-500',
+        COMPLETE: 'grey-500',
         ERROR: 'red-500',
     };
     var displayText = {
@@ -35,8 +33,10 @@ var UploadFileCell = function (_a) {
             _b[styles['upload-file-cell-error']] = hasError,
             _b)), children: [jsxs("div", { className: "w100 ".concat(styles['cell-left-section']), children: [jsx(FileIcon, { className: classNames("".concat(styles['main-icon'], " ").concat(styles.icon)), color: mapFileIconColor[uploadStatus], size: 24 }), jsxs("div", { className: "w100", children: [jsx("div", { className: "p-p ".concat(styles['upload-display-text']), title: displayText, children: displayText }), isUploading && showProgressBar && (jsxs("div", { className: "mt8 w100 ".concat(styles['progress-bar-container']), children: [jsx("div", { className: "".concat(styles['progress-bar']) }), jsx("div", { "data-testid": "ds-filecell-progressbar", className: "".concat(styles['progress-bar-filler']), style: { width: "".concat(progress, "%") } })] }))] })] }), jsx("div", { className: classNames(styles['cell-right-section'], (_c = {},
                     _c[styles['cell-right-section-complete']] = isComplete,
-                    _c)), children: isUploading ? (jsx("div", { className: styles.spinner, children: showLoadingSpinner && (jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxs(Fragment, { children: [isComplete && (jsx(Button, { as: "a", href: previewUrl, target: "_blank", rel: "noopener noreferrer", hideLabel: true, variant: "textBlack", className: classNames('mr16', styles.button), leftIcon: jsx(EyeVisionIcon, { noMargin: true, color: 'neutral-600', size: 24 }), children: "Preview file" })), onRemoveFile && (jsx(Button, { onClick: function () { return onRemoveFile(id); }, disabled: uploading, "data-testid": "remove-button", className: styles.button, leftIcon: jsx(Trash2Icon, { color: hasError ? 'red-500' : 'neutral-600', size: 24, noMargin: true }), hideLabel: true, variant: "textBlack", children: "Delete file" }))] })) })] }));
+                    _c)), children: isUploading ? (jsx("div", { className: styles.spinner, children: showLoadingSpinner && (jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxs(Fragment, { children: [isComplete && (jsx("a", { className: styles['view-icon'], href: previewUrl, target: "_blank", rel: "noopener noreferrer", children: jsx(EyeVisionIcon, { color: 'grey-500', size: 24, className: styles.icon }) })), onRemoveFile && (jsx("button", { type: "button", onClick: function () { return onRemoveFile(id); }, className: classNames(styles['remove-icon'], (_d = {},
+                                _d[styles.disabled] = uploading,
+                                _d)), "data-testid": "remove-button", children: jsx(Trash2Icon, { color: hasError ? 'red-500' : 'grey-500', size: 24, className: styles.icon }) }))] })) })] }));
 };
 
-export { UploadFileCell as default };
+export default UploadFileCell;
 //# sourceMappingURL=index.js.map

package/dist/esm/components/multiDropzone/UploadFileCell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\nimport { Button } from '../../button';\n\ninterface Props {\n  uploadStatus: UploadStatus;\n  file: UploadedFile;\n  onRemoveFile?: (id: string) => void;\n  uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n  uploadStatus,\n  file,\n  onRemoveFile,\n  uploading,\n}) => {\n  const {\n    id,\n    error,\n    name,\n    progress,\n    previewUrl,\n    showLoadingSpinner = false,\n    showProgressBar = true,\n  } = file;\n\n  const isComplete = uploadStatus === 'COMPLETE';\n  const isUploading = uploadStatus === 'UPLOADING';\n  const hasError = uploadStatus === 'ERROR';\n\n  const mapFileIconColor: { [k in UploadStatus]: Color } = {\n    UPLOADING: 'purple-600',\n    COMPLETE: 'neutral-900',\n    ERROR: 'red-500',\n  };\n\n  const displayText = {\n    UPLOADING: 'Uploading...',\n    COMPLETE: name,\n    ERROR: error ?? 'Something went wrong. Try uploading again.',\n  }[uploadStatus];\n\n  return (\n    <div\n      className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n        [styles['upload-file-cell-error']]: hasError,\n      })}\n    >\n      <div className={`w100 ${styles['cell-left-section']}`}>\n        <FileIcon\n          className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n          color={mapFileIconColor[uploadStatus]}\n          size={24}\n        />\n        <div className=\"w100\">\n          <div\n            className={`p-p ${styles['upload-display-text']}`}\n            title={displayText}\n          >\n            {displayText}\n          </div>\n\n          {isUploading && showProgressBar && (\n            <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n              <div className={`${styles['progress-bar']}`} />\n              <div\n                data-testid=\"ds-filecell-progressbar\"\n                className={`${styles['progress-bar-filler']}`}\n                style={{ width: `${progress}%` }}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        className={classnames(styles['cell-right-section'], {\n          [styles['cell-right-section-complete']]: isComplete,\n        })}\n      >\n        {isUploading ? (\n          <div className={styles.spinner}>\n            {showLoadingSpinner && (\n              <div\n                className=\"ds-spinner ds-spinner__m\"\n                data-testid=\"ds-filecell-spinner\"\n              />\n            )}\n          </div>\n        ) : (\n          <>\n            {isComplete && (\n              <Button\n                as=\"a\"\n                href={previewUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                hideLabel\n                variant=\"textBlack\"\n                className={classnames('mr16', styles.button)}\n                leftIcon={\n                  <EyeVisionIcon noMargin color={'neutral-600'} size={24} />\n                }\n              >\n                Preview file\n              </Button>\n            )}\n\n            {onRemoveFile && (\n              <Button\n                onClick={() => onRemoveFile(id)}\n                disabled={uploading}\n                data-testid=\"remove-button\"\n                className={styles.button}\n                leftIcon={\n                  <Trash2Icon\n                    color={hasError ? 'red-500' : 'neutral-600'}\n                    size={24}\n                    noMargin\n                  />\n                }\n                hideLabel\n                variant=\"textBlack\"\n              >\n                Delete file\n              </Button>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\n\ninterface Props {\n  uploadStatus: UploadStatus;\n  file: UploadedFile;\n  onRemoveFile?: (id: string) => void;\n  uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n  uploadStatus,\n  file,\n  onRemoveFile,\n  uploading,\n}) => {\n  const {\n    id,\n    error,\n    name,\n    progress,\n    previewUrl,\n    showLoadingSpinner = false,\n    showProgressBar = true,\n  } = file;\n\n  const isComplete = uploadStatus === 'COMPLETE';\n  const isUploading = uploadStatus === 'UPLOADING';\n  const hasError = uploadStatus === 'ERROR';\n\n  const mapFileIconColor: { [k in UploadStatus]: Color } = {\n    UPLOADING: 'purple-500',\n    COMPLETE: 'grey-500',\n    ERROR: 'red-500',\n  };\n\n  const displayText = {\n    UPLOADING: 'Uploading...',\n    COMPLETE: name,\n    ERROR: error ?? 'Something went wrong. Try uploading again.',\n  }[uploadStatus];\n\n  return (\n    <div\n      className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n        [styles['upload-file-cell-error']]: hasError,\n      })}\n    >\n      <div className={`w100 ${styles['cell-left-section']}`}>\n        <FileIcon\n          className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n          color={mapFileIconColor[uploadStatus]}\n          size={24}\n        />\n        <div className=\"w100\">\n          <div\n            className={`p-p ${styles['upload-display-text']}`}\n            title={displayText}\n          >\n            {displayText}\n          </div>\n\n          {isUploading && showProgressBar && (\n            <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n              <div className={`${styles['progress-bar']}`} />\n              <div\n                data-testid=\"ds-filecell-progressbar\"\n                className={`${styles['progress-bar-filler']}`}\n                style={{ width: `${progress}%` }}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        className={classnames(styles['cell-right-section'], {\n          [styles['cell-right-section-complete']]: isComplete,\n        })}\n      >\n        {isUploading ? (\n          <div className={styles.spinner}>\n            {showLoadingSpinner && (\n              <div\n                className=\"ds-spinner ds-spinner__m\"\n                data-testid=\"ds-filecell-spinner\"\n              />\n            )}\n          </div>\n        ) : (\n          <>\n            {isComplete && (\n              <a\n                className={styles['view-icon']}\n                href={previewUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <EyeVisionIcon\n                  color={'grey-500'}\n                  size={24}\n                  className={styles.icon}\n                />\n              </a>\n            )}\n\n            {onRemoveFile && (\n              <button\n                type=\"button\"\n                onClick={() => onRemoveFile(id)}\n                className={classnames(styles['remove-icon'], {\n                  [styles.disabled]: uploading,\n                })}\n                data-testid=\"remove-button\"\n              >\n                <Trash2Icon\n                  color={hasError ? 'red-500' : 'grey-500'}\n                  size={24}\n                  className={styles.icon}\n                />\n              </button>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}