@popsure/dirty-swan 0.37.2 → 0.38.0

package/dist/esm/components/input/radio/index.stories.js

@@ -0,0 +1,159 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Radio } from './index.js';
+import { i as images } from '../../../index-31224f74.js';
+import '../../../tslib.es6-5bc94358.js';
+import '../../../index-6ea95111.js';
+import '../../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/Inputs/Radio',
+    component: Radio,
+    argTypes: {
+        options: {
+            description: 'Object that contains the possible options for rendering in the input.',
+            defaultValue: {
+                CAT: {
+                    title: 'Cat',
+                    description: 'At least 1'
+                },
+                DOG: {
+                    title: 'Dog',
+                    description: 'At least 2'
+                },
+                NONE: {
+                    title: 'None',
+                    description: 'No pets'
+                }
+            }
+        },
+        value: {
+            description: 'Current checked values.',
+        },
+        onChange: {
+            description: 'Function called everytime a value changes.',
+            action: true,
+            table: {
+                category: "Callbacks",
+            },
+        },
+        wide: {
+            description: 'Property that defines if options should fill 100% of available horizontal space',
+            defaultValue: false
+        },
+        inlineLayout: {
+            description: 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',
+            defaultValue: false
+        },
+        classNames: {
+            description: 'ClassNames for custom styling',
+            defaultValue: {
+                container: '',
+                label: '',
+                option: ''
+            }
+        },
+        bordered: {
+            description: 'Property that defines if option should show with border',
+            defaultValue: true
+        },
+    }
+};
+var RadioStory = function (_a) {
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, classNames = _a.classNames, inlineLayout = _a.inlineLayout, bordered = _a.bordered;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, classNames: classNames, inlineLayout: inlineLayout, bordered: bordered }, void 0));
+};
+var RadioWithCustomWrapperStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT1: 'Cat',
+            DOG1: 'Dog',
+        }, classNames: { container: "p32 bg-primary-300 br24 bs-lg" } }, void 0));
+};
+var RadioWithCustomOptionStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT2: 'Cat',
+            DOG2: 'Dog',
+        }, classNames: { option: "mb32 p24 bg-green-100 br12 bs-lg" } }, void 0));
+};
+var RadioWithCustomLabelStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT3: 'Cat',
+            DOG3: 'Dog',
+        }, classNames: { label: "bg-grey-900 tc-white" } }, void 0));
+};
+var RadioWithInlineLayout = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT4: 'Cat',
+            DOG4: 'Dog',
+            FISHER: 'Fish',
+            RABBIT: 'Rabbit',
+            RAT: 'Rat',
+            ANOTHER: 'Other',
+        }, classNames: { option: "w30" }, inlineLayout: true, wide: true }, void 0));
+};
+var RadioWithCustomLabel = function (_a) {
+    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { options: {
+            BIGDOG: {
+                icon: function () { return jsx("img", { src: images.bigDog, alt: '' }, void 0); },
+                title: 'Dog',
+            },
+            FISH: {
+                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: '' }, void 0); },
+                title: 'Fish',
+            },
+            OTHER: {
+                icon: function () { return jsx("img", { src: images.brokenGlass, alt: '' }, void 0); },
+                title: 'Other',
+            }
+        }, onChange: handleOnChange, value: checkedValues, classNames: { option: "w30" }, inlineLayout: true }, void 0));
+};
+RadioStory.storyName = 'Radio';
+var RadioIconOnly = function (_a) {
+    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
+    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Radio, { options: { NOTHING: '' }, onChange: handleOnChange, classNames: { label: 'jc-start' }, value: checkedValues, bordered: false }, void 0));
+};
+RadioStory.storyName = 'Radio';
+
+export default story;
+export { RadioIconOnly, RadioStory, RadioWithCustomLabel, RadioWithCustomLabelStyles, RadioWithCustomOptionStyles, RadioWithCustomWrapperStyles, RadioWithInlineLayout };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/input/radio/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Radio, RadioProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Inputs/Radio',\n  component: Radio,\n  argTypes: {\n    options: {\n      description: 'Object that contains the possible options for rendering in the input.',\n      defaultValue: {\n        CAT:{\n          title: 'Cat',\n          description: 'At least 1'\n        },\n        DOG:{\n          title: 'Dog',\n          description: 'At least 2'\n        },\n        NONE:{\n          title: 'None',\n          description: 'No pets'\n        }\n      }\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n    wide: {\n      description: 'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n      defaultValue: false\n    },\n    classNames: {\n      description: 'ClassNames for custom styling',\n      defaultValue: {\n        container: '',\n        label: '',\n        option: ''\n      }\n    },\n    bordered: {\n      description: 'Property that defines if option should show with border',\n      defaultValue: true\n    },\n  }\n};\n\nexport const RadioStory = ({ \n  onChange,\n  options,\n  wide,\n  classNames,\n  inlineLayout,\n  bordered,\n}: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n      bordered={bordered}\n    />\n  );\n}\n\nexport const RadioWithCustomWrapperStyles = ({ onChange }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      classNames={{ container: \"p32 bg-primary-300 br24 bs-lg\" }}\n    />\n  );\n}\n\nexport const RadioWithCustomOptionStyles = ({ onChange }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      classNames={{ option: \"mb32 p24 bg-green-100 br12 bs-lg\" }}\n    />\n  );\n}\n\nexport const RadioWithCustomLabelStyles = ({ onChange }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string  ) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      classNames={{ label: \"bg-grey-900 tc-white\" }}\n    />\n  );\n}\n\nexport const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }} \n      classNames={{ option: \"w30\" }}\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const RadioWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt='' />,\n          title: 'Dog',\n        },\n        FISH:{\n          icon: () => <img src={images.brokenAquarium} alt='' />,\n          title: 'Fish',\n        },\n        OTHER:{\n          icon: () => <img src={images.brokenGlass} alt='' />,\n          title: 'Other',\n        }\n      }} \n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: \"w30\" }}\n      inlineLayout\n    />\n  );\n}\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string>();\n\n  const handleOnChange = (newValue: string) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Radio \n      options={{ NOTHING: '' }} \n      onChange={handleOnChange}\n      classNames={{ label: 'jc-start' }}\n      value={checkedValues}\n      bordered={false}\n    />\n  );\n}\n\nRadioStory.storyName = 'Radio';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/radio/index.test.js

@@ -0,0 +1,78 @@
+import { b as __awaiter, c as __generator } from '../../../tslib.es6-5bc94358.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender } from '../../../customRender-20b5f7ec.js';
+import { Radio } from './index.js';
+import 'react';
+import 'react-dom';
+import '../../../_commonjsHelpers-e7f67fd8.js';
+import 'react-dom/test-utils';
+import '../../../index-6ea95111.js';
+import '../../../style-inject.es-1f59c1d0.js';
+
+var mockOnChange = jest.fn();
+var setup = function (onChange, value) {
+    var utils = customRender(jsx(Radio, { options: {
+            CAT: 'Cat',
+            DOG: 'Dog',
+            NONE: 'None',
+        }, onChange: onChange, value: value }, void 0));
+    return utils;
+};
+describe('Radio component', function () {
+    it('Should render options', function () {
+        var getByText = setup(mockOnChange).getByText;
+        expect(getByText('Cat')).toBeInTheDocument();
+        expect(getByText('Dog')).toBeInTheDocument();
+        expect(getByText('None')).toBeInTheDocument();
+    });
+    it('Should call onchange on selecting an option', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByTestId, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(mockOnChange), getByTestId = _a.getByTestId, user = _a.user;
+                    return [4 /*yield*/, user.click(getByTestId('radio-DOG'))];
+                case 1:
+                    _b.sent();
+                    expect(mockOnChange).toBeCalledWith("DOG");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should render checked items when value is passed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByTestId;
+        return __generator(this, function (_a) {
+            getByTestId = setup(mockOnChange, 'CAT').getByTestId;
+            expect(getByTestId('radio-input-CAT')).toBeChecked();
+            return [2 /*return*/];
+        });
+    }); });
+    it('Should render custom description', function () {
+        var getByText = customRender(jsx(Radio, { options: {
+                CAT: {
+                    title: 'Cat',
+                    description: 'Cat description'
+                },
+            }, onChange: mockOnChange }, void 0)).getByText;
+        expect(getByText('Cat description')).toBeInTheDocument();
+    });
+    it('Should render custom icon', function () {
+        var getByText = customRender(jsx(Radio, { options: {
+                CAT: {
+                    title: 'Cat',
+                    icon: function () { return 'ICON'; }
+                },
+            }, onChange: mockOnChange }, void 0)).getByText;
+        expect(getByText('ICON')).toBeInTheDocument();
+    });
+    it('Should render custom icon with selected', function () {
+        var getByText = customRender(jsx(Radio, { options: {
+                CAT: {
+                    title: 'Cat',
+                    icon: function (selected) { return selected ? 'SELECTED-ICON' : 'ICON'; }
+                },
+            }, onChange: mockOnChange, value: 'CAT' }, void 0)).getByText;
+        expect(getByText('SELECTED-ICON')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=index.test.js.map

package/dist/esm/components/input/radio/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/radio/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Radio, RadioProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: RadioProps<string>['onChange'], value?: string) => {\n  const utils = render(\n    <Radio\n      options={{\n        CAT: 'Cat',\n        DOG: 'Dog',\n        NONE: 'None',\n      }}\n      onChange={onChange}\n      value={value}\n    />\n  );\n\n  return utils;\n};\n\ndescribe('Radio component', () => {\n  it('Should render options', () => {\n    const { getByText } = setup(mockOnChange);\n\n    expect(getByText('Cat')).toBeInTheDocument();\n    expect(getByText('Dog')).toBeInTheDocument();\n    expect(getByText('None')).toBeInTheDocument();\n  });\n\n  it('Should call onchange on selecting an option', async () => {\n    const { getByTestId, user } = setup(mockOnChange);\n\n    await user.click(getByTestId('radio-DOG'));\n\n    expect(mockOnChange).toBeCalledWith(\"DOG\");\n  });\n\n  it('Should render checked items when value is passed', async () => {\n    const { getByTestId } = setup(mockOnChange, 'CAT');\n\n    expect(getByTestId('radio-input-CAT')).toBeChecked();\n  });\n\n  it('Should render custom description', () => {\n      const { getByText } = render(\n        <Radio\n          options={{\n            CAT: {\n              title: 'Cat',\n              description: 'Cat description'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('Cat description')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon', () => {\n      const { getByText } = render(\n        <Radio\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: () => 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('ICON')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon with selected', () => {\n      const { getByText } = render(\n        <Radio\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n          value={'CAT'}\n        />\n      );\n\n    expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;AAIA,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE/B,IAAM,KAAK,GAAG,UAAC,QAAwC,EAAE,KAAc;IACrE,IAAM,KAAK,GAAGA,YAAM,CAClBC,IAAC,KAAK,IACJ,OAAO,EAAE;YACP,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,MAAM;SACb,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,WACZ,CACH,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,EAAE,CAAC,uBAAuB,EAAE;QAClB,IAAA,SAAS,GAAK,KAAK,CAAC,YAAY,CAAC,UAAxB,CAAyB;QAE1C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE;;;;;oBAC1C,KAAwB,KAAK,CAAC,YAAY,CAAC,EAAzC,WAAW,iBAAA,EAAE,IAAI,UAAA,CAAyB;oBAElD,qBAAM,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAA;;oBAA1C,SAA0C,CAAC;oBAE3C,MAAM,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;;;;SAC5C,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE;;;YAC7C,WAAW,GAAK,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,YAA/B,CAAgC;YAEnD,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;SACtD,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE;QAC3B,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,KAAK,IACJ,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,iBAAiB;iBAC/B;aACF,EACD,QAAQ,EAAE,YAAY,WACtB,CACH,UAVgB,CAUf;QAEJ,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE;QACpB,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,KAAK,IACJ,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,cAAM,OAAA,MAAM,GAAA;iBACnB;aACF,EACD,QAAQ,EAAE,YAAY,WACtB,CACH,UAVgB,CAUf;QAEJ,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE;QAClC,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,KAAK,IACJ,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,UAAC,QAAQ,IAAK,OAAA,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAA;iBACxD;aACF,EACD,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,WACZ,CACH,UAXgB,CAWf;QAEJ,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACxD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/link/index.js

@@ -1,10 +1,10 @@
 import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
-import { c as classnames } from '../../index-e9e37a34.js';
+import { c as classNames } from '../../index-6ea95111.js';
 
 var Link = function (_a) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (jsx("a", __assign({ className: classnames(className, 'p-a c-pointer') }, rest, { children: children }), void 0));
+    return (jsx("a", __assign({ className: classNames(className, 'p-a c-pointer') }, rest, { children: children }), void 0));
 };
 
 export { Link };

package/dist/esm/components/link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/link/index.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nexport type LinkProps = JSX.IntrinsicElements['a'];\n\nexport const Link = ({ children, className, ...rest }: LinkProps) => (\n  <a className={classnames(className, 'p-a c-pointer')} {...rest}>\n    {children}\n  </a>\n);"],"names":["_jsx"],"mappings":";;;;IAIa,IAAI,GAAG,UAAC,EAA2C;IAAzC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA9B,yBAAgC,CAAF;IAAkB,QACnEA,oBAAG,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,IAAM,IAAI,cAC3D,QAAQ,YACP,EACL;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/link/index.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nexport type LinkProps = JSX.IntrinsicElements['a'];\n\nexport const Link = ({ children, className, ...rest }: LinkProps) => (\n  <a className={classnames(className, 'p-a c-pointer')} {...rest}>\n    {children}\n  </a>\n);"],"names":["_jsx","classnames"],"mappings":";;;;IAIa,IAAI,GAAG,UAAC,EAA2C;IAAzC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA9B,yBAAgC,CAAF;IAAkB,QACnEA,oBAAG,SAAS,EAAEC,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,IAAM,IAAI,cAC3D,QAAQ,YACP,EACL;;;;;"}

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

@@ -1,7 +1,7 @@
 import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { Link } from './index.js';
-import '../../index-e9e37a34.js';
+import '../../index-6ea95111.js';
 
 var story = {
     title: 'JSX/Link',

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

@@ -3,7 +3,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import { u as useOnClose } from '../../../useOnClose-d818a54f.js';
-import { c as classnames } from '../../../index-e9e37a34.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 
 var css_248z = "@keyframes style-module_fade-in__1GZgs {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n}\n@keyframes style-module_fade-out__30Bns {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\n@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_close__1GERU {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n  position: relative;\n  background-color: white;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: 100%;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  top: 0;\n}\n.style-module_container--close__K506c {\n  animation-name: style-module_disappear-out__6pOVr;\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_header__10iiH {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n}\n\n@media (max-width: 34rem) {\n  .style-module_content__mq_IJ {\n    padding-bottom: 48px;\n  }\n}";
 var styles = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH","content":"style-module_content__mq_IJ"};
@@ -23,7 +23,7 @@ var BottomModal = function (_a) {
     if (!isOpen) {
         return jsx(Fragment, {}, void 0);
     }
-    return (jsx("div", __assign({ className: isClosing ? styles['overlay--close'] : styles.overlay, onClick: handleOnOverlayClick }, { children: jsxs("div", __assign({ className: (isClosing ? styles['container--close'] : styles.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxs("div", __assign({ className: classnames(styles.header, {
+    return (jsx("div", __assign({ className: isClosing ? styles['overlay--close'] : styles.overlay, onClick: handleOnOverlayClick }, { children: jsxs("div", __assign({ className: (isClosing ? styles['container--close'] : styles.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxs("div", __assign({ className: classNames(styles.header, {
                         'jc-between': !!title,
                         'jc-end': !title
                     }) }, { children: [jsx("div", __assign({ className: "p-h4 " + styles.title }, { children: title }), void 0),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/bottomModal/img/close.svg","../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React, { useState, useCallback } from 'react';\n\nimport { Props } from '..';\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport useOnClose from '../hooks/useOnClose';\nimport classNames from 'classnames';\n\nexport const BottomModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  className = '',\n  dismissible = true,\n}: Props) => {\n  const [containerXOffset, setContainerXOffset] = useState(0);\n  const {\n    isClosing,\n    handleContainerClick,\n    handleOnClose,\n    handleOnOverlayClick\n   } = useOnClose(\n    onClose,\n    isOpen,\n    dismissible\n  );\n\n  const containerRef = useCallback((node: HTMLDivElement) => {\n    if (node !== null) {\n      setContainerXOffset(\n        Math.max(\n          window.innerHeight * 0.1,\n          window.innerHeight - node.getBoundingClientRect().height\n        )\n      );\n    }\n  }, []);\n\n  if (!isOpen) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={isClosing ? styles['overlay--close'] : styles.overlay}\n      onClick={handleOnOverlayClick}\n    >\n      <div\n        className={`${\n          isClosing ? styles['container--close'] : styles.container\n        } ${className}`}\n        ref={containerRef}\n        style={{ top: `${containerXOffset}px` }}\n        onClick={handleContainerClick}\n      >\n        <div className={classNames(styles.header, {\n          'jc-between': !!title,\n          'jc-end': !title\n        })}>\n          <div className={`p-h4 ${styles.title}`}>{title}</div>\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.close}\n              onClick={handleOnClose}\n            >\n              <img src={imageClose} alt=\"Close\" />\n            </button>\n          )}\n        </div>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICSF,WAAW,GAAG,UAAC,EAOpB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAA0C,QAAQ,CAAC,CAAC,CAAC,EAApD,gBAAgB,QAAA,EAAE,mBAAmB,QAAe,CAAC;IACtD,IAAA,KAKD,UAAU,CACb,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAAC,UAAC,IAAoB;QACpD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,mBAAmB,CACjB,IAAI,CAAC,GAAG,CACN,MAAM,CAAC,WAAW,GAAG,GAAG,EACxB,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CACzD,CACF,CAAC;SACH;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BC,uBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,EACf,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,GAAG,EAAK,gBAAgB,OAAI,EAAE,EACvC,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;wBACxC,YAAY,EAAE,CAAC,CAAC,KAAK;wBACrB,QAAQ,EAAE,CAAC,KAAK;qBACjB,CAAC,iBACAF,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;wBACpD,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG;gBACNA,sBAAK,SAAS,EAAE,MAAM,CAAC,OAAO,gBAAG,QAAQ,YAAO,aAC5C,YACF,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/bottomModal/img/close.svg","../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React, { useState, useCallback } from 'react';\n\nimport { Props } from '..';\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport useOnClose from '../hooks/useOnClose';\nimport classNames from 'classnames';\n\nexport const BottomModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  className = '',\n  dismissible = true,\n}: Props) => {\n  const [containerXOffset, setContainerXOffset] = useState(0);\n  const {\n    isClosing,\n    handleContainerClick,\n    handleOnClose,\n    handleOnOverlayClick\n   } = useOnClose(\n    onClose,\n    isOpen,\n    dismissible\n  );\n\n  const containerRef = useCallback((node: HTMLDivElement) => {\n    if (node !== null) {\n      setContainerXOffset(\n        Math.max(\n          window.innerHeight * 0.1,\n          window.innerHeight - node.getBoundingClientRect().height\n        )\n      );\n    }\n  }, []);\n\n  if (!isOpen) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={isClosing ? styles['overlay--close'] : styles.overlay}\n      onClick={handleOnOverlayClick}\n    >\n      <div\n        className={`${\n          isClosing ? styles['container--close'] : styles.container\n        } ${className}`}\n        ref={containerRef}\n        style={{ top: `${containerXOffset}px` }}\n        onClick={handleContainerClick}\n      >\n        <div className={classNames(styles.header, {\n          'jc-between': !!title,\n          'jc-end': !title\n        })}>\n          <div className={`p-h4 ${styles.title}`}>{title}</div>\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.close}\n              onClick={handleOnClose}\n            >\n              <img src={imageClose} alt=\"Close\" />\n            </button>\n          )}\n        </div>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICSF,WAAW,GAAG,UAAC,EAOpB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAA0C,QAAQ,CAAC,CAAC,CAAC,EAApD,gBAAgB,QAAA,EAAE,mBAAmB,QAAe,CAAC;IACtD,IAAA,KAKD,UAAU,CACb,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAAC,UAAC,IAAoB;QACpD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,mBAAmB,CACjB,IAAI,CAAC,GAAG,CACN,MAAM,CAAC,WAAW,GAAG,GAAG,EACxB,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CACzD,CACF,CAAC;SACH;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BC,uBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,EACf,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,GAAG,EAAK,gBAAgB,OAAI,EAAE,EACvC,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;wBACxC,YAAY,EAAE,CAAC,CAAC,KAAK;wBACrB,QAAQ,EAAE,CAAC,KAAK;qBACjB,CAAC,iBACAD,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;wBACpD,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG;gBACNA,sBAAK,SAAS,EAAE,MAAM,CAAC,OAAO,gBAAG,QAAQ,YAAO,aAC5C,YACF,EACN;AACJ;;;;"}

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

@@ -5,7 +5,7 @@ import { BottomModal } from '../bottomModal/index.js';
 import { RegularModal } from '../regularModal/index.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import '../../../useOnClose-d818a54f.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 
 var css_248z = "@media (min-width: 34rem) {\n  .style-module_mobile__3k175 {\n    display: none;\n  }\n}\n@media (max-width: 34rem) {\n  .style-module_mobile__3k175 {\n    display: block !important;\n  }\n}\n\n@media (max-width: 34rem) {\n  .style-module_desktop__2lclr {\n    display: none;\n  }\n}";
 var styles = {"mobile":"style-module_mobile__3k175","desktop":"style-module_desktop__2lclr"};

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

@@ -7,7 +7,7 @@ import { BottomOrRegularModal } from './bottomOrRegularModal/index.js';
 import { Markdown } from '../markdown/index.js';
 import '../../style-inject.es-1f59c1d0.js';
 import '../../useOnClose-d818a54f.js';
-import '../../index-e9e37a34.js';
+import '../../index-6ea95111.js';
 import '../../index-171a0108.js';
 import '../../index-dd80248b.js';
 import '../../_commonjsHelpers-e7f67fd8.js';

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

@@ -2,7 +2,7 @@ import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { u as useOnClose } from '../../../useOnClose-d818a54f.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
-import { c as classnames } from '../../../index-e9e37a34.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 import 'react';
 
 var css_248z = "@keyframes style-module_fade-in__nLzzO {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n}\n@keyframes style-module_fade-out__IuSV7 {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n}\n@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_overlay__1Zbce, .style-module_overlay--close__2dytn {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 592px;\n  width: 100%;\n  min-height: 100%;\n  margin: 0 auto;\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_container--close__3UYsJ {\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_body__lbUih {\n  background-color: white;\n  border-radius: 8px;\n  margin: 80px auto;\n}\n\n.style-module_header__2oEKp {\n  display: flex;\n  align-items: center;\n  padding: 24px 24px 0 24px;\n}\n\n.style-module_close__p3Axi {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}";
@@ -17,7 +17,7 @@ var RegularModal = function (_a) {
     if (!isOpen) {
         return jsx(Fragment, {}, void 0);
     }
-    return (jsx("div", __assign({ className: isClosing ? styles['overlay--close'] : styles.overlay, onClick: handleOnOverlayClick }, { children: jsx("div", __assign({ className: (isClosing ? styles['container--close'] : styles.container) + " " + className }, { children: jsxs("div", __assign({ className: styles.body, onClick: handleContainerClick }, { children: [jsxs("div", __assign({ className: classnames(styles.header, {
+    return (jsx("div", __assign({ className: isClosing ? styles['overlay--close'] : styles.overlay, onClick: handleOnOverlayClick }, { children: jsx("div", __assign({ className: (isClosing ? styles['container--close'] : styles.container) + " " + className }, { children: jsxs("div", __assign({ className: styles.body, onClick: handleContainerClick }, { children: [jsxs("div", __assign({ className: classNames(styles.header, {
                             'jc-between': !!title,
                             'jc-end': !title
                         }) }, { children: [title && jsx("div", __assign({ className: "p-h2 " + styles.title }, { children: title }), void 0),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/regularModal/img/close.svg","../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React from 'react';\n\nimport { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport classNames from 'classnames';\n\nexport const RegularModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  className = '',\n  dismissible = true,\n}: Props) => {\n  const {\n    isClosing,\n    handleContainerClick,\n    handleOnClose,\n    handleOnOverlayClick\n  } = useOnClose(\n    onClose,\n    isOpen,\n    dismissible\n  );\n\n  if (!isOpen) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={isClosing ? styles['overlay--close'] : styles.overlay}\n      onClick={handleOnOverlayClick}\n    >\n      <div\n        className={`${\n          isClosing ? styles['container--close'] : styles.container\n        } ${className}`}\n      >\n        <div\n          className={styles.body}\n          onClick={handleContainerClick}\n        >\n          <div className={classNames(styles.header, {\n            'jc-between': !!title,\n            'jc-end': !title\n          })}>\n            {title && <div className={`p-h2 ${styles.title}`}>{title}</div>}\n            {dismissible && (\n              <button\n                type=\"button\"\n                className={styles.close}\n                onClick={handleOnClose}\n              >\n                <img src={imageClose} alt=\"Close\" />\n              </button>\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICUF,YAAY,GAAG,UAAC,EAOrB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAKF,UAAU,CACZ,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BA,sBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,gBAEfC,uBACE,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;4BACxC,YAAY,EAAE,CAAC,CAAC,KAAK;4BACrB,QAAQ,EAAE,CAAC,KAAK;yBACjB,CAAC,iBACC,KAAK,IAAIF,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;4BAC9D,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG,EACL,QAAQ,aACL,YACF,YACF,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/regularModal/img/close.svg","../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React from 'react';\n\nimport { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport classNames from 'classnames';\n\nexport const RegularModal = ({\n  title,\n  isOpen,\n  children,\n  onClose,\n  className = '',\n  dismissible = true,\n}: Props) => {\n  const {\n    isClosing,\n    handleContainerClick,\n    handleOnClose,\n    handleOnOverlayClick\n  } = useOnClose(\n    onClose,\n    isOpen,\n    dismissible\n  );\n\n  if (!isOpen) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={isClosing ? styles['overlay--close'] : styles.overlay}\n      onClick={handleOnOverlayClick}\n    >\n      <div\n        className={`${\n          isClosing ? styles['container--close'] : styles.container\n        } ${className}`}\n      >\n        <div\n          className={styles.body}\n          onClick={handleContainerClick}\n        >\n          <div className={classNames(styles.header, {\n            'jc-between': !!title,\n            'jc-end': !title\n          })}>\n            {title && <div className={`p-h2 ${styles.title}`}>{title}</div>}\n            {dismissible && (\n              <button\n                type=\"button\"\n                className={styles.close}\n                onClick={handleOnClose}\n              >\n                <img src={imageClose} alt=\"Close\" />\n              </button>\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICUF,YAAY,GAAG,UAAC,EAOrB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAKF,UAAU,CACZ,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BA,sBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,gBAEfC,uBACE,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;4BACxC,YAAY,EAAE,CAAC,CAAC,KAAK;4BACrB,QAAQ,EAAE,CAAC,KAAK;yBACjB,CAAC,iBACC,KAAK,IAAID,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;4BAC9D,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG,EACL,QAAQ,aACL,YACF,YACF,EACN;AACJ;;;;"}

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

@@ -1,6 +1,6 @@
 import '../../../tslib.es6-5bc94358.js';
 import 'react/jsx-runtime';
-import '../../../index-e9e37a34.js';
-export { U as default } from '../../../index-6ced5532.js';
+import '../../../index-6ea95111.js';
+export { U as default } from '../../../index-da10b7ad.js';
 import '../../../style-inject.es-1f59c1d0.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,12 +1,12 @@
 import { d as __spreadArray$1, _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
-import { c as classnames } from '../../index-e9e37a34.js';
+import { c as classNames } from '../../index-6ea95111.js';
 import { o as objectAssign } from '../../index-dd80248b.js';
-import { A as AnimateHeight } from '../../index-21239ab0.js';
+import { A as AnimateHeight } from '../../index-e27b50cf.js';
 import { g as generateId } from '../../index-fb46adf9.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { i as icons, U as UploadFileCell } from '../../index-6ced5532.js';
+import { i as icons, U as UploadFileCell } from '../../index-da10b7ad.js';
 
 var propTypes = {exports: {}};
 
@@ -2836,7 +2836,7 @@ var MultiDropzone = function (_a) {
         maxSize: maxSize,
         onDrop: onDrop,
     }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
-    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: classnames("w100 ta-center br8 c-pointer " + styles.dropzoneContainer, (_b = {},
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: classNames("w100 ta-center br8 c-pointer " + styles.dropzoneContainer, (_b = {},
                     _b[styles['dropzoneContainerDisabled']] = uploading,
                     _b)) }, getRootProps(), { children: [jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps()), void 0),
                     jsx("img", { className: isCondensed ? styles.img : '', src: isCondensed ? icons.uploadSmallIcon : icons.uploadIcon, alt: "purple cloud with an arrow" }, void 0),