@popsure/dirty-swan 0.51.3 → 0.52.0

package/dist/cjs/lib/index.d.ts

@@ -19,7 +19,6 @@ import Chip from './components/chip';
 import { AutoSuggestInput } from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -27,6 +26,6 @@ import { Toggle } from './components/input/toggle';
 import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 export * from './components/icon';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
 export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps };
 export type { DownloadStatus } from './models/download';

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

@@ -84,7 +84,7 @@ var GenericModal = function (_a) {
                     : (_d = classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) === null || _d === void 0 ? void 0 : _d.call(classNames$1, { isClosing: isClosing }), onClick: handleContainerClick, children: [jsxs("div", { className: classNames('bg-white d-flex ai-center w100 px24 pt24 pb16', styles.header, {
                             'jc-between': !!title,
                             'jc-end': !title,
-                        }), children: [title && (jsx("div", { className: classNames(styles.title, titleSize === 'small' ? 'p-h4' : 'p-h2'), children: title })), dismissible && (jsx(Button, { hideLabel: true, leftIcon: jsx(XIcon, { color: "grey-700" }), onClick: handleOnClose, type: "button", variant: "textColor", className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.closeButton, 'p0', styles.closeButton), children: "Close modal" }))] }), jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.body, styles.body), children: children }), footer && (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.footer, 'w100 bg-white', styles.footer), children: jsx("div", { className: "px24 py16", children: footer }) }))] }) }) }));
+                        }), children: [title && (jsx("div", { className: classNames(styles.title, titleSize === 'small' ? 'p-h4' : 'p-h2'), children: title })), dismissible && (jsx(Button, { hideLabel: true, leftIcon: jsx(XIcon, { color: "grey-700" }), onClick: handleOnClose, type: "button", variant: "textColor", className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.closeButton, 'p0', styles.closeButton), children: "Close modal" }))] }), jsx("div", { className: classNames('w100', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.body, styles.body), children: children }), footer && (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.footer, 'w100 bg-white', styles.footer), children: jsx("div", { className: "px24 py16", children: footer }) }))] }) }) }));
 };
 
 export { GenericModal };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/hooks/useOnClose.ts","../../../../../../src/lib/components/modal/genericModal/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\n\ninterface OnCloseReturn {\n  isClosing: boolean;\n  isVisible: boolean;\n  handleOnCloseAnimationEnded: () => void;\n  handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handleOnClose: () => void;\n  handleOnOverlayClick: () => void;\n}\n\nconst useOnClose = (\n  onClose: () => void,\n  isOpen: boolean,\n  dismissable: boolean\n): OnCloseReturn => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n\n  const handleOnClose = useCallback(() => {\n    setIsClosing(true);\n  }, []);\n\n  const handleOnCloseAnimationEnded = useCallback(() => {\n    if (isVisible && isClosing) {\n      onClose();\n      setIsVisible(false);\n      setIsClosing(false);\n    }\n  }, [isClosing, isVisible, onClose]);\n\n  const handleOnOverlayClick = useCallback(() => {\n    if (!dismissable) {\n      return;\n    }\n\n    handleOnClose();\n  }, [dismissable, handleOnClose]);\n\n  const handleEscKey = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.code !== 'Escape') return;\n      if (!dismissable) return null;\n      if (!isOpen) return null;\n\n      handleOnClose();\n    },\n    [isOpen, dismissable, handleOnClose]\n  );\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleEscKey);\n\n    return () => {\n      window.removeEventListener('keydown', handleEscKey);\n    };\n  }, [handleEscKey]);\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true);\n    }\n    \n    if (!isOpen && isVisible){\n      handleOnClose();\n    }\n\n    document.body.style.overflow = isOpen ? 'hidden' : 'auto';\n\n    return () => {\n      document.body.style.overflow = 'auto';\n    };\n  }, [handleOnClose, isOpen, isVisible]);\n\n  const handleContainerClick = (\n    e: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    e.stopPropagation();\n  };\n\n  return {\n    isClosing,\n    isVisible,\n    handleContainerClick,\n    handleOnCloseAnimationEnded,\n    handleOnClose,\n    handleOnOverlayClick\n  };\n};\n\nexport default useOnClose;\n","import { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\nimport classNamesUtil from 'classnames';\nimport { Button } from '../../button';\nimport { XIcon } from '../../icon';\n\ninterface GenericModalProps extends Props {\n  classNames?: {\n    wrapper?: string | (({ isClosing }: { isClosing: boolean }) => string);\n    container?: string | (({ isClosing }: { isClosing: boolean }) => string);\n    overlay?: string;\n    header?: string;\n    closeButton?: string;\n    title?: string;\n    body?: string;\n    footer?: string;\n  };\n  titleSize?: 'small' | 'default';\n}\n\nexport const GenericModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  classNames,\n  dismissible = true,\n  footer,\n  titleSize = 'default',\n}: GenericModalProps) => {\n  const {\n    isClosing,\n    isVisible,\n    handleContainerClick,\n    handleOnCloseAnimationEnded,\n    handleOnClose,\n    handleOnOverlayClick,\n  } = useOnClose(onClose, isOpen, dismissible);\n\n  return !isVisible ? null : (\n    <div\n      className={classNamesUtil(\n        classNames?.overlay,\n        styles.overlay, {\n          [styles.overlayClose]: isClosing,\n        }\n      )}\n      onAnimationEnd={handleOnCloseAnimationEnded}\n      onClick={handleOnOverlayClick}\n    >\n      <div \n        className={\n          typeof classNames?.wrapper === 'string' \n            ? classNames?.wrapper \n            : classNames?.wrapper?.({ isClosing })\n        }\n      >\n        <div\n          className={\n            typeof classNames?.container === 'string' \n            ? classNames?.container \n            : classNames?.container?.({ isClosing })\n          }\n          onClick={handleContainerClick}\n        >\n\n          <div\n            className={classNamesUtil(\n              'bg-white d-flex ai-center w100 px24 pt24 pb16',\n              styles.header, {\n                'jc-between': !!title,\n                'jc-end': !title,\n              }\n            )}\n          >\n            {title && (\n              <div\n                className={classNamesUtil(\n                  styles.title,\n                  titleSize === 'small' ? 'p-h4' : 'p-h2'\n                )}\n              >\n                {title}\n              </div>\n            )}\n          \n            {dismissible && (\n              <Button\n                hideLabel\n                leftIcon={<XIcon color=\"grey-700\" />}\n                onClick={handleOnClose}\n                type=\"button\"\n                variant=\"textColor\"\n                className={classNamesUtil(\n                  classNames?.closeButton,\n                  'p0',\n                  styles.closeButton\n                )}\n              >\n                Close modal\n              </Button>\n            )}\n          </div>\n\n          <div\n            className={classNamesUtil(\n              classNames?.body,\n              styles.body\n            )}\n          >\n            {children}\n          </div>\n\n          {footer && (\n            <div\n              className={classNamesUtil(\n                classNames?.footer,\n                'w100 bg-white',\n                styles.footer\n              )}\n            >\n              <div className=\"px24 py16\">\n                {footer}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/hooks/useOnClose.ts","../../../../../../src/lib/components/modal/genericModal/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\n\ninterface OnCloseReturn {\n  isClosing: boolean;\n  isVisible: boolean;\n  handleOnCloseAnimationEnded: () => void;\n  handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handleOnClose: () => void;\n  handleOnOverlayClick: () => void;\n}\n\nconst useOnClose = (\n  onClose: () => void,\n  isOpen: boolean,\n  dismissable: boolean\n): OnCloseReturn => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n\n  const handleOnClose = useCallback(() => {\n    setIsClosing(true);\n  }, []);\n\n  const handleOnCloseAnimationEnded = useCallback(() => {\n    if (isVisible && isClosing) {\n      onClose();\n      setIsVisible(false);\n      setIsClosing(false);\n    }\n  }, [isClosing, isVisible, onClose]);\n\n  const handleOnOverlayClick = useCallback(() => {\n    if (!dismissable) {\n      return;\n    }\n\n    handleOnClose();\n  }, [dismissable, handleOnClose]);\n\n  const handleEscKey = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.code !== 'Escape') return;\n      if (!dismissable) return null;\n      if (!isOpen) return null;\n\n      handleOnClose();\n    },\n    [isOpen, dismissable, handleOnClose]\n  );\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleEscKey);\n\n    return () => {\n      window.removeEventListener('keydown', handleEscKey);\n    };\n  }, [handleEscKey]);\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true);\n    }\n    \n    if (!isOpen && isVisible){\n      handleOnClose();\n    }\n\n    document.body.style.overflow = isOpen ? 'hidden' : 'auto';\n\n    return () => {\n      document.body.style.overflow = 'auto';\n    };\n  }, [handleOnClose, isOpen, isVisible]);\n\n  const handleContainerClick = (\n    e: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    e.stopPropagation();\n  };\n\n  return {\n    isClosing,\n    isVisible,\n    handleContainerClick,\n    handleOnCloseAnimationEnded,\n    handleOnClose,\n    handleOnOverlayClick\n  };\n};\n\nexport default useOnClose;\n","import { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\nimport classNamesUtil from 'classnames';\nimport { Button } from '../../button';\nimport { XIcon } from '../../icon';\n\ninterface GenericModalProps extends Props {\n  classNames?: {\n    wrapper?: string | (({ isClosing }: { isClosing: boolean }) => string);\n    container?: string | (({ isClosing }: { isClosing: boolean }) => string);\n    overlay?: string;\n    header?: string;\n    closeButton?: string;\n    title?: string;\n    body?: string;\n    footer?: string;\n  };\n  titleSize?: 'small' | 'default';\n}\n\nexport const GenericModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  classNames,\n  dismissible = true,\n  footer,\n  titleSize = 'default',\n}: GenericModalProps) => {\n  const {\n    isClosing,\n    isVisible,\n    handleContainerClick,\n    handleOnCloseAnimationEnded,\n    handleOnClose,\n    handleOnOverlayClick,\n  } = useOnClose(onClose, isOpen, dismissible);\n\n  return !isVisible ? null : (\n    <div\n      className={classNamesUtil(\n        classNames?.overlay,\n        styles.overlay, {\n          [styles.overlayClose]: isClosing,\n        }\n      )}\n      onAnimationEnd={handleOnCloseAnimationEnded}\n      onClick={handleOnOverlayClick}\n    >\n      <div \n        className={\n          typeof classNames?.wrapper === 'string' \n            ? classNames?.wrapper \n            : classNames?.wrapper?.({ isClosing })\n        }\n      >\n        <div\n          className={\n            typeof classNames?.container === 'string' \n            ? classNames?.container \n            : classNames?.container?.({ isClosing })\n          }\n          onClick={handleContainerClick}\n        >\n\n          <div\n            className={classNamesUtil(\n              'bg-white d-flex ai-center w100 px24 pt24 pb16',\n              styles.header, {\n                'jc-between': !!title,\n                'jc-end': !title,\n              }\n            )}\n          >\n            {title && (\n              <div\n                className={classNamesUtil(\n                  styles.title,\n                  titleSize === 'small' ? 'p-h4' : 'p-h2'\n                )}\n              >\n                {title}\n              </div>\n            )}\n          \n            {dismissible && (\n              <Button\n                hideLabel\n                leftIcon={<XIcon color=\"grey-700\" />}\n                onClick={handleOnClose}\n                type=\"button\"\n                variant=\"textColor\"\n                className={classNamesUtil(\n                  classNames?.closeButton,\n                  'p0',\n                  styles.closeButton\n                )}\n              >\n                Close modal\n              </Button>\n            )}\n          </div>\n\n          <div\n            className={classNamesUtil(\n              'w100',\n              classNames?.body,\n              styles.body\n            )}\n          >\n            {children}\n          </div>\n\n          {footer && (\n            <div\n              className={classNamesUtil(\n                classNames?.footer,\n                'w100 bg-white',\n                styles.footer\n              )}\n            >\n              <div className=\"px24 py16\">\n                {footer}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}

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

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { BottomModal } from './bottomModal/index.js';
 import { RegularModal } from './regularModal/index.js';
 import { BottomOrRegularModal } from './bottomOrRegularModal/index.js';
-import { Markdown } from '../markdown/index.js';
 import { Button } from '../button/index.js';
 import '../../tslib.es6-5bc94358.js';
 import '../../style-inject.es-1f59c1d0.js';
@@ -11,12 +10,6 @@ import '../../index-6ea95111.js';
 import './genericModal/index.js';
 import '../icon/icons/X.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import 'devlop';
-import 'vfile/do-not-use-conditional-minpath';
-import 'vfile/do-not-use-conditional-minproc';
-import 'vfile/do-not-use-conditional-minurl';
-import 'unist-util-visit-parents/do-not-use-color';
-import '../../_commonjsHelpers-e7f67fd8.js';
 
 var story = {
     title: 'JSX/Modals',
@@ -84,7 +77,7 @@ var RegularModalStory = function (_a) {
         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.", jsx(Markdown, { children: "If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal)." }), 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" })] }) })] }));
+    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" })] }) })] }));
 };
 RegularModalStory.storyName = 'RegularModal';
 var BottomModalStory = function (_a) {
@@ -94,7 +87,7 @@ var BottomModalStory = function (_a) {
         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.", jsx(Markdown, { children: "If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal)." }), 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" })] }) })] }));
+    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" })] }) })] }));
 };
 BottomModalStory.storyName = 'BottomModal';
 var NonDismissibleModal = function (_a) {
@@ -104,7 +97,7 @@ var NonDismissibleModal = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx(Markdown, { 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(Markdown, { 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" })] }) })] }));
+    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 ModalWithFooter = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;

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":["\nimport { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Markdown } from '../markdown';\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      <Markdown>\n        If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead.\n        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).\n      </Markdown>\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      <Markdown>\n        If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead.\n        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).\n      </Markdown>\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      <Markdown>\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      </Markdown>\n\n      <Markdown>\n        **Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false.\n       </Markdown>\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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"}
+{"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":";;;;;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,mDAAmD;SACjE;QACD,MAAM,EAAE;YACN,WAAW,EAAE,wFAAwF;SACtG;QACD,WAAW,EAAE;YACX,WAAW,EAAE,8CAA8C;SAC5D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,0BAA0B;SACxC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACF,OAAO,EAAE,WAAW;iBACvB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wCAAwC;YACrD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,+BAA+B;KAC1C;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,2GAA2G;QAC9H,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,uOAAuO;aACnP;SACF;KACF;EACD;IAEW,yBAAyB,GAAG,UAAC,EAOlC;QANN,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACEA,4BACEC,gBACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBACG,QAAQ,GACL,EACNA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACe,IACtB,EACH;AACJ,EAAC;AAED,yBAAyB,CAAC,SAAS,GAAG,sBAAsB,CAAC;IAEhD,iBAAiB,GAAG,UAAC,EAK1B;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,saAKEC,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBACG,QAAQ,GACL,EACNA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACO,IACd,EACH;AACJ,EAAC;AAED,iBAAiB,CAAC,SAAS,GAAG,cAAc,CAAC;IAEhC,gBAAgB,GAAG,UAAC,EAKzB;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,+ZAKEC,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBACG,QAAQ,GACL,EACNA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACM,IACb,EACH;AACJ,EAAC;AAED,gBAAgB,CAAC,SAAS,GAAG,aAAa,CAAC;IAE9B,mBAAmB,GAAG,UAAC,EAK5B;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,0QAIEC,uCAAyB,iGAEzBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBACG,QAAQ,GACL,EACNA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACe,IACtB,EACH;AACJ,EAAC;IAEY,eAAe,GAAG,UAAC,EAKxB;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,4BACEC,gBACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,EACtB,MAAM,GACJD,cAAK,SAAS,EAAC,oBAAoB,aACjCC,IAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,qBAE1D,EACTA,IAAC,MAAM,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,yBAEtC,IACL,CACP,YAEDA,aAAK,SAAS,EAAC,KAAK,YAClBA,uBACG,QAAQ,GACL,GACF,GACe,IACtB,EACH;AACJ,EAAC;IAEY,wBAAwB,GAAG,UAAC,EAKjC;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,4BACEC,gBACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,EACtB,MAAM,GACJD,cAAK,SAAS,EAAC,oBAAoB,aACjCC,IAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,qBAE1D,EACTA,IAAC,MAAM,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,yBAEtC,IACL,CACP,YAEDA,aAAK,SAAS,EAAC,KAAK,YAClBD,qFAEEC,aAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,EAClC,QAAQ,IACL,GACF,GACe,IACtB,EACH;AACJ;;;;;"}

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, } from './lib';
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, } from './lib';
 export * from './lib/components/icon';
 export type { DownloadStatus, InformationBoxProps, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps } from './lib';

package/dist/esm/index.js

@@ -22,7 +22,6 @@ export { default as Chip } from './components/chip/index.js';
 export { AutoSuggestInput } from './components/input/autoSuggestInput/index.js';
 export { ComparisonTable } from './components/comparisonTable/index.js';
 export { SegmentedControl } from './components/segmentedControl/index.js';
-export { Markdown } from './components/markdown/index.js';
 export { Link } from './components/link/index.js';
 export { i as illustrations, a as images } from './index-29e6f39e.js';
 export { Spinner } from './components/spinner/index.js';
@@ -418,9 +417,4 @@ import './components/comparisonTable/components/TableArrows/Arrow.js';
 import './components/comparisonTable/components/AccordionItem/AccordionItem.js';
 import './components/comparisonTable/components/TableRating/StarIcon.js';
 import './components/comparisonTable/components/TableRating/ZapIcon.js';
-import 'devlop';
-import 'vfile/do-not-use-conditional-minpath';
-import 'vfile/do-not-use-conditional-minproc';
-import 'vfile/do-not-use-conditional-minurl';
-import 'unist-util-visit-parents/do-not-use-color';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/lib/index.d.ts

@@ -19,7 +19,6 @@ import Chip from './components/chip';
 import { AutoSuggestInput } from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -27,6 +26,6 @@ import { Toggle } from './components/input/toggle';
 import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 export * from './components/icon';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
 export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps };
 export type { DownloadStatus } from './models/download';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.51.3",
+  "version": "0.52.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -34,11 +34,7 @@
     "react-day-picker": "^7.4.10",
     "react-dropzone": "^14.2.2",
     "react-hot-toast": "^2.4.1",
-    "react-markdown": "^9.0.1",
     "react-scroll-sync": "^0.11.2",
-    "rehype-raw": "^7.0.0",
-    "remark-directive": "^3.0.0",
-    "remark-gfm": "^4.0.0",
     "sass": "^1.35.1",
     "signature_pad": "^3.0.0-beta.3"
   },

package/src/index.tsx

@@ -27,7 +27,6 @@ export {
   TableInfoButton,
   SegmentedControl,
   DownloadButton,
-  Markdown,
   Checkbox,
   Radio,
   Link,

package/src/lib/components/modal/genericModal/index.tsx

@@ -106,6 +106,7 @@ export const GenericModal = ({
 
           <div
             className={classNamesUtil(
+              'w100',
               classNames?.body,
               styles.body
             )}

package/src/lib/components/modal/index.stories.tsx

@@ -1,7 +1,6 @@
 
 import { useState } from 'react';
 import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
-import { Markdown } from '../markdown';
 import { Button } from '../button';
 
 const story = {
@@ -117,10 +116,8 @@ export const RegularModalStory = ({
   return (
     <>
       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.  
-      <Markdown>
-        If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead.
-        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
-      </Markdown>
+      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.
 
       <button
         className="p-btn--primary wmn2 mt24"
@@ -167,10 +164,8 @@ export const BottomModalStory = ({
   return (
     <>
       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.
-      <Markdown>
-        If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead.
-        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
-      </Markdown>
+      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.
 
       <button
         className="p-btn--primary wmn2 mt24"
@@ -216,14 +211,10 @@ export const NonDismissibleModal = ({
 
   return (
     <>
-      <Markdown>
-        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.
-      </Markdown>
+      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.
 
-      <Markdown>
-        **Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
-       </Markdown>
+      <strong>Warning:</strong> a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
 
       <button
         className="p-btn--primary wmn2 mt24"

package/src/lib/index.tsx

@@ -37,7 +37,6 @@ import {
   TableHeader,
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -73,7 +72,6 @@ export {
   TableButton,
   TableInfoButton,
   SegmentedControl,
-  Markdown,
   Checkbox,
   Radio,
   Link,

package/dist/cjs/lib/components/markdown/config.d.ts

@@ -1,22 +0,0 @@
-export interface MarkdownStyling {
-    a: string;
-    p: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    ol: string;
-    ul: string;
-    strong: string;
-    em: string;
-    table: string;
-    th: string;
-    tr: string;
-    td: string;
-    blockquote: string;
-    code: string;
-    pre: string;
-}
-export declare const defaultStyling: MarkdownStyling;

package/dist/cjs/lib/components/markdown/index.d.ts

@@ -1,10 +0,0 @@
-import { MarkdownStyling } from './config';
-export interface MarkdownProps {
-    children: string;
-    className?: string;
-    openLinksInNewTab?: boolean;
-    styling?: Partial<MarkdownStyling>;
-    renderRawMarkdownChild?: boolean;
-}
-declare const Markdown: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export { Markdown };

package/dist/cjs/lib/components/markdown/index.stories.d.ts

@@ -1,39 +0,0 @@
-import { MarkdownProps } from '.';
-declare const story: {
-    title: string;
-    component: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-    argTypes: {
-        children: {
-            description: string;
-        };
-        className: {
-            description: string;
-        };
-        renderRawMarkdownChild: {
-            description: string;
-        };
-        openLinksInNewTab: {
-            description: string;
-        };
-        styling: {
-            desription: string;
-        };
-    };
-    args: {
-        children: string;
-        className: string;
-        renderRawMarkdownChild: boolean;
-        openLinksInNewTab: boolean;
-        styling: {};
-    };
-    parameters: {
-        componentSubtitle: JSX.Element;
-    };
-};
-export declare const MarkdownStory: {
-    ({ children, className }: MarkdownProps): JSX.Element;
-    storyName: string;
-};
-export declare const AvailableMDComponents: ({ className }: MarkdownProps) => JSX.Element;
-export declare const AddingCustomComponents: ({ className, openLinksInNewTab, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export default story;