npm - @popsure/dirty-swan - Versions diffs - 0.57.8 → 0.58.0 - Mend

@popsure/dirty-swan 0.57.8 → 0.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/dist/esm/components/input/radio/index.js CHANGED Viewed

@@ -1,38 +1,40 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { g as generateId } from '../../../index-69a46657.js';
-var css_248z = ".styles-module_container__3M-sc {\n  max-width: 100%;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
+var css_248z = ".styles-module_container__3M-sc {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
 var styles = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
 styleInject(css_248z);
 var Radio = function (_a) {
     var _b;
-    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.fieldLegend, fieldLegend = _h === void 0 ? 'Select an option' : _h, groupName = _a.groupName;
     var entries = Object.entries(options);
-    return (jsx("div", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
+    var name = groupName !== null && groupName !== void 0 ? groupName : generateId();
+    return (jsxs("fieldset", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.wide] = wide,
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === currentValue;
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
-            var isRadioLabelObject = function (label) {
-                return label.title !== undefined;
-            };
-            return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-radio', {
-                            'p-radio--no-icon': customIcon || hideIcon,
-                            'p-radio--centered': !label,
-                        }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
-                            'jc-center': customIcon && !inlineIcon,
-                            'fd-column': customIcon && !inlineIcon,
-                            'p-label--bordered': bordered,
-                        }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === currentValue;
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
+                var isRadioLabelObject = function (label) {
+                    return label.title !== undefined;
+                };
+                return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-radio', {
+                                'p-radio--no-icon': customIcon || hideIcon,
+                                'p-radio--centered': !label,
+                            }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled, name: name }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
+                                'jc-center': customIcon && !inlineIcon,
+                                'fd-column': customIcon && !inlineIcon,
+                                'p-label--bordered': bordered,
+                            }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 export { Radio };

package/dist/esm/components/input/radio/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface RadioWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| RadioWithDescription>;\n value?: ValueType;\n onChange: (value: ValueType) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n inlineIcon?: boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n bordered?: boolean;\n disabled?: boolean;\n}\n\nexport const Radio = <ValueType extends string>({\n options,\n value,\n onChange,\n wide = false,\n inlineLayout = false,\n inlineIcon = false,\n classNames: classNamesObj,\n bordered = true,\n disabled = false,\n}: RadioProps<ValueType>) => {\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| RadioWithDescription\n ][];\n\n return (\n <~~div~~\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.wide]: wide,\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n {entries.map(([currentValue, label]) => {\n const checked = value === currentValue;\n const customIcon = (label as RadioWithDescription)?.icon;\n const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n const isRadioLabelObject = (\n label: ReactNode \| RadioWithDescription\n ): label is RadioWithDescription => {\n return (label as RadioWithDescription).title !== undefined;\n };\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-radio', {\n 'p-radio--no-icon': customIcon \|\| hideIcon,\n 'p-radio--centered': !label,\n })}\n id={currentValue}\n type=\"radio\"\n value={currentValue}\n onChange={() => onChange(currentValue)}\n checked={checked}\n data-testid={`radio-input-${currentValue}`}\n disabled={disabled}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label', {\n 'jc-center': customIcon && !inlineIcon,\n 'fd-column': customIcon && !inlineIcon,\n 'p-label--bordered': bordered,\n })}\n data-cy={`radio-${currentValue}`}\n data-testid={`radio-${currentValue}`}\n >\n {customIcon && (\n <div\n className={classNames(\n 'd-inline-flex ai-center jc-center',\n inlineIcon ? 'mr8' : 'mt8'\n )}\n >\n {customIcon?.(checked)}\n </div>\n )}\n\n {isRadioLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-grey-600\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </~~div~~>\n );\n};\n"],"names":["~~_jsx~~","~~_jsxs~~"],"mappings":"~~;;;;;;;;IA2Ba~~,KAAK,GAAG,UAA2B,~~EAUxB~~;;~~QATtB~~,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACN,aAAa,gBAAA,EACzB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;~~IAEhB~~,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAGnC,CAAC;IAEJ,QACEA,~~aACE~~,SAAS,EAAE,UAAU,CACnB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,EACxB,MAAM,CAAC,SAAS,EAChB,aAAa;YAEX,GAAC,MAAM,CAAC,IAAI,IAAG,IAAI;YACnB,GAAC,MAAM,CAAC,MAAM,IAAG,CAAC,IAAI;YACtB,YAAQ,GAAE,YAAY;YACtB,YAAQ,GAAE,YAAY;YACtB,eAAW,GAAE,CAAC,YAAY;gBAE7B,~~YAEA~~,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqB;~~gBAApB~~,YAAY,QAAA,EAAE,KAAK,QAAA;~~YAChC~~,IAAM,OAAO,GAAG,KAAK,KAAK,YAAY,CAAC;~~YACvC~~,IAAM,UAAU,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,IAAI,CAAC;~~YACzD~~,IAAM,QAAQ,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,OAAO,CAAC;~~YAE1D~~,IAAM,kBAAkB,GAAG,UACzB,KAAuC;~~gBAEvC~~,OAAQ,KAA8B,CAAC,KAAK,KAAK,SAAS,CAAC;~~aAC5D~~,CAAC;~~YAEF~~,~~QACEC~~,cAAK,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,~~aACnCD~~,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;~~4BAC~~/B,kBAAkB,EAAE,UAAU,IAAI,QAAQ;~~4BAC1C~~,mBAAmB,EAAE,CAAC,KAAK;~~yBAC5B~~,CAAC,EACF,EAAE,EAAE,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,YAAY,CAAC,GAAA,EACtC,OAAO,EAAE,OAAO,iBACH,sBAAe,YAAY,CAAE,EAC1C,QAAQ,EAAE,QAAQ,~~GAClB~~,~~EAEFC~~,gBACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,SAAS,EAAE;~~4BACrD~~,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;~~4BACtC~~,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;~~4BACtC~~,mBAAmB,EAAE,QAAQ;~~yBAC9B~~,CAAC,aACO,gBAAS,YAAY,CAAE,iBACnB,gBAAS,YAAY,CAAE,aAEnC,UAAU,~~KACTD~~,aACE,SAAS,EAAE,UAAU,CACnB,mCAAmC,EACnC,UAAU,GAAG,KAAK,GAAG,KAAK,CAC3B,YAEA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,GAClB,CACP,EAEA,kBAAkB,CAAC,KAAK,CAAC,~~IACxBC~~,~~yBACED~~,WAAG,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAK,EACpCA,cAAM,SAAS,EAAC,oCAAoC,YACjD,KAAK,CAAC,WAAW,GACb,IACH,KAEN,KAAK,CACN,IACK,~~KA9CkC~~,YAAY,~~CA+ClD~~,EACN;~~SACH~~,CAAC,~~GACE~~,~~EACN~~;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nimport generateId from '../../../util/generateId';\nexport interface RadioWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| RadioWithDescription>;\n value?: ValueType;\n onChange: (value: ValueType) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n inlineIcon?: boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n bordered?: boolean;\n disabled?: boolean;\n fieldLegend?: string;\n groupName?: string;\n}\n\nexport const Radio = <ValueType extends string>({\n options,\n value,\n onChange,\n wide = false,\n inlineLayout = false,\n inlineIcon = false,\n classNames: classNamesObj,\n bordered = true,\n disabled = false,\n fieldLegend = 'Select an option',\n groupName,\n}: RadioProps<ValueType>) => {\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| RadioWithDescription\n ][];\n\n const name = groupName ?? generateId();\n\n return (\n <fieldset\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.wide]: wide,\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n <legend className=\"sr-only\">{fieldLegend}</legend>\n {entries.map(([currentValue, label]) => {\n const checked = value === currentValue;\n const customIcon = (label as RadioWithDescription)?.icon;\n const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n const isRadioLabelObject = (\n label: ReactNode \| RadioWithDescription\n ): label is RadioWithDescription => {\n return (label as RadioWithDescription).title !== undefined;\n };\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-radio', {\n 'p-radio--no-icon': customIcon \|\| hideIcon,\n 'p-radio--centered': !label,\n })}\n id={currentValue}\n type=\"radio\"\n value={currentValue}\n onChange={() => onChange(currentValue)}\n checked={checked}\n data-testid={`radio-input-${currentValue}`}\n disabled={disabled}\n name={name}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label', {\n 'jc-center': customIcon && !inlineIcon,\n 'fd-column': customIcon && !inlineIcon,\n 'p-label--bordered': bordered,\n })}\n data-cy={`radio-${currentValue}`}\n data-testid={`radio-${currentValue}`}\n >\n {customIcon && (\n <div\n className={classNames(\n 'd-inline-flex ai-center jc-center',\n inlineIcon ? 'mr8' : 'mt8'\n )}\n >\n {customIcon?.(checked)}\n </div>\n )}\n\n {isRadioLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-grey-600\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </fieldset>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import { Radio } from './index.js';
 import { a as images } from '../../../index-29e6f39e.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
+import '../../../index-69a46657.js';
 var story = {
     title: 'JSX/Inputs/Radio',
@@ -15,6 +16,12 @@ var story = {
         value: {
             description: 'Current checked values.',
         },
+        fieldLegend: {
+            description: 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',
+        },
+        groupName: {
+            description: 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',
+        },
         onChange: {
             description: 'Function called everytime a value changes.',
             action: true,
@@ -56,6 +63,8 @@ var story = {
                 description: 'No pets',
             },
         },
+        fieldLegend: 'Owned pets',
+        groupName: 'Pets',
         value: '',
         wide: false,
         classNames: {
@@ -67,16 +76,16 @@ var story = {
         inlineLayout: false,
         inlineIcon: false,
         disabled: false,
-    }
+    },
 };
 var RadioStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, classNames = _a.classNames, inlineLayout = _a.inlineLayout, bordered = _a.bordered, disabled = _a.disabled;
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, classNames = _a.classNames, inlineLayout = _a.inlineLayout, bordered = _a.bordered, disabled = _a.disabled, fieldLegend = _a.fieldLegend, groupName = _a.groupName;
     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, disabled: disabled }));
+    return (jsx(Radio, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, classNames: classNames, inlineLayout: inlineLayout, bordered: bordered, disabled: disabled, fieldLegend: fieldLegend, groupName: groupName }));
 };
 var RadioWithCustomWrapperStyles = function (_a) {
     var onChange = _a.onChange;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { 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:\n 'Object that contains the possible options for rendering in the input.',\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:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description: 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\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 value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n }\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\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 disabled={disabled}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\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 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 = ({\n onChange,\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 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 = ({\n onChange,\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 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 = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\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 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\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\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 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 inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ 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 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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"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { 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:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',\n },\n groupName: {\n description:\n 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',\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:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description:\n 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\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 fieldLegend: 'Owned pets',\n groupName: 'Pets',\n value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n },\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\n fieldLegend,\n groupName,\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 disabled={disabled}\n fieldLegend={fieldLegend}\n groupName={groupName}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\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 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 = ({\n onChange,\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 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 = ({\n onChange,\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 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 = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\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 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\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\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 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 inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ 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 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 CHANGED Viewed

@@ -8,6 +8,7 @@ import '../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
+import '../../../index-69a46657.js';
 var mockOnChange = jest.fn();
 var setup = function (onChange, value) {

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

	@@ -1 +1 @@
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 it('Should render label text passed in HTML format', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: <p>Cat</p>,\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat')).toBeInTheDocument();\n });\n\n it('Should disable the input', async () => {\n const { getByTestId } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n disabled\n />\n );\n\n const radioInput = getByTestId('radio-input-CAT');\n\n expect(radioInput).toBeDisabled();\n });\n});\n"],"names":["render","_jsx"],"mappings":"~~;;;;;;;;;;;~~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"}
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 it('Should render label text passed in HTML format', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: <p>Cat</p>,\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat')).toBeInTheDocument();\n });\n\n it('Should disable the input', async () => {\n const { getByTestId } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n disabled\n />\n );\n\n const radioInput = getByTestId('radio-input-CAT');\n\n expect(radioInput).toBeDisabled();\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,GACZ,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;QAC7B,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,GACtB,CACH,UAVgB,CAUf;QAEF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE;QACtB,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,GACtB,CACH,UAVgB,CAUf;QAEF,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE;QACpC,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,KAAK,IACJ,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,UAAC,QAAQ,IAAK,QAAC,QAAQ,GAAG,eAAe,GAAG,MAAM,IAAC;iBAC1D;aACF,EACD,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,GACZ,CACH,UAXgB,CAWf;QAEF,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACxD,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE;QAC3C,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,KAAK,IACJ,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAEA,6BAAU;oBACjB,WAAW,EAAE,iBAAiB;iBAC/B;aACF,EACD,QAAQ,EAAE,YAAY,GACtB,CACH,UAVgB,CAUf;QAEF,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC9C,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE;;;YACrB,WAAW,GAAKD,YAAM,CAC5BC,IAAC,KAAK,IACJ,OAAO,EAAE;oBACP,GAAG,EAAE;wBACH,KAAK,EAAE,KAAK;wBACZ,WAAW,EAAE,iBAAiB;qBAC/B;iBACF,EACD,QAAQ,EAAE,YAAY,EACtB,QAAQ,SACR,CACH,YAXkB,CAWjB;YAEI,UAAU,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;YAElD,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAE,CAAC;;;SACnC,CAAC,CAAC;AACL,CAAC,CAAC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\n\ninterface Props {\n uploadStatus: UploadStatus;\n file: UploadedFile;\n onRemoveFile?: (id: string) => void;\n uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n uploadStatus,\n file,\n onRemoveFile,\n uploading,\n}) => {\n const {\n id,\n error,\n name,\n progress,\n previewUrl,\n showLoadingSpinner = false,\n showProgressBar = true,\n } = file;\n\n const isComplete = uploadStatus === 'COMPLETE';\n const isUploading = uploadStatus === 'UPLOADING';\n const hasError = uploadStatus === 'ERROR';\n\n const mapFileIconColor: { [k in UploadStatus]: Color } = {\n UPLOADING: 'purple-500',\n COMPLETE: 'grey-500',\n ERROR: 'red-500',\n };\n\n const displayText = {\n UPLOADING: 'Uploading...',\n COMPLETE: name,\n ERROR: error ?? 'Something went wrong. Try uploading again.',\n }[uploadStatus];\n\n return (\n <div\n className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n [styles['upload-file-cell-error']]: hasError,\n })}\n >\n <div className={`w100 ${styles['cell-left-section']}`}>\n <FileIcon\n className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n color={mapFileIconColor[uploadStatus]}\n size={24}\n />\n <div className=\"w100\">\n <div\n className={`p-p ${styles['upload-display-text']}`}\n title={displayText}\n >\n {displayText}\n </div>\n\n {isUploading && showProgressBar && (\n <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n <div className={`${styles['progress-bar']}`} />\n <div\n data-testid=\"ds-filecell-progressbar\"\n className={`${styles['progress-bar-filler']}`}\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n </div>\n <div\n className={classnames(styles['cell-right-section'], {\n [styles['cell-right-section-complete']]: isComplete,\n })}\n >\n {isUploading ? (\n <div className={styles.spinner}>\n {showLoadingSpinner && (\n <div\n className=\"ds-spinner ds-spinner__m\"\n data-testid=\"ds-filecell-spinner\"\n />\n )}\n </div>\n ) : (\n <>\n {isComplete && (\n <a\n ~~className={styles['view-icon']}~~\n href={previewUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n ~~<EyeVisionIcon~~\n color={'grey-500'}\n size={24}\n ~~className={styles.icon~~}\n ~~/>\~~n </a>\n )}\n\n {onRemoveFile && (\n <~~button~~\n ~~type=\"button\"\n~~ onClick={() => onRemoveFile(id)}\n ~~className~~={~~classnames(styles['remove-icon'], {\n [styles.disabled]:~~ uploading~~,\n~~ })}\n data-testid=\"remove-button\"\n >\n <Trash2Icon\n color={hasError ? 'red-500' : 'grey-500'}\n size={24}\n ~~className={styles.icon~~}\n ~~/>\~~n </~~button~~>\n )}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"~~;;;;;;;;;;;;;;IAeM~~,cAAc,GAAoB,UAAC,EAKxC;;QAJC,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,YAAY,kBAAA,EACZ,SAAS,eAAA;IAGP,IAAA,EAAE,GAOA,IAAI,GAPJ,EACF,KAAK,GAMH,IAAI,MAND,EACL,IAAI,GAKF,IAAI,KALF,EACJ,QAAQ,GAIN,IAAI,SAJE,EACR,UAAU,GAGR,IAAI,WAHI,EACV,KAEE,IAAI,mBAFoB,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,KACE,IAAI,gBADgB,EAAtB,eAAe,mBAAG,IAAI,KAAA,CACf;IAET,IAAM,UAAU,GAAG,YAAY,KAAK,UAAU,CAAC;IAC/C,IAAM,WAAW,GAAG,YAAY,KAAK,WAAW,CAAC;IACjD,IAAM,QAAQ,GAAG,YAAY,KAAK,OAAO,CAAC;IAE1C,IAAM,gBAAgB,GAAmC;QACvD,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,SAAS;KACjB,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,SAAS,EAAE,cAAc;QACzB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,4CAA4C;KAC7D,CAAC,YAAY,CAAC,CAAC;IAEhB,QACEA,cACE,SAAS,EAAEC,UAAU,CAAC,cAAO,MAAM,CAAC,kBAAkB,CAAC,CAAE;YACvD,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ;gBAC5C,aAEFD,cAAK,SAAS,EAAE,eAAQ,MAAM,CAAC,mBAAmB,CAAC,CAAE,aACnDE,IAAC,QAAQ,IACP,SAAS,EAAED,UAAU,CAAC,UAAG,MAAM,CAAC,WAAW,CAAC,cAAI,MAAM,CAAC,IAAI,CAAE,CAAC,EAC9D,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC,EACrC,IAAI,EAAE,EAAE,GACR,EACFD,cAAK,SAAS,EAAC,MAAM,aACnBE,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,qBAAqB,CAAC,CAAE,EACjD,KAAK,EAAE,WAAW,YAEjB,WAAW,GACR,EAEL,WAAW,IAAI,eAAe,KAC7BF,cAAK,SAAS,EAAE,mBAAY,MAAM,CAAC,wBAAwB,CAAC,CAAE,aAC5DE,aAAK,SAAS,EAAE,UAAG,MAAM,CAAC,cAAc,CAAC,CAAE,GAAI,EAC/CA,4BACc,yBAAyB,EACrC,SAAS,EAAE,UAAG,MAAM,CAAC,qBAAqB,CAAC,CAAE,EAC7C,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,QAAQ,MAAG,EAAE,GAChC,IACE,CACP,IACG,IACF,EACNA,aACE,SAAS,EAAED,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC;oBAChD,GAAC,MAAM,CAAC,6BAA6B,CAAC,IAAG,UAAU;wBACnD,YAED,WAAW,IACVC,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC3B,kBAAkB,KACjBA,aACE,SAAS,EAAC,0BAA0B,iBACxB,qBAAqB,GACjC,CACH,GACG,KAENF,4BACG,UAAU,KACTE,~~WACE~~,~~SAAS~~,EAAE,~~MAAM~~,~~CAAC~~,~~WAAW~~,~~CAAC,EAC9B,~~IAAI,EAAE,UAAU,EAChB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,~~YAEzBA~~,~~IAAC~~,aAAa,~~IACZ~~,~~KAAK~~,~~EAAE~~,UAAU,~~EACjB~~,~~IAAI~~,EAAE,~~EAAE~~,~~EACR~~,~~SAAS~~,EAAE,~~MAAM~~,~~CAAC~~,IAAI,~~GACtB~~,~~GACA~~,~~CACL~~,EAEA,YAAY,KACXA,~~gBACE~~,~~IAAI~~,~~EAAC~~,~~QAAQ,EACb,~~OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,EAAE,CAAC,GAAA,EAC/B,SAAS,~~EAAED~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~aAAa~~,CAAC~~;gCACzC~~,~~GAAC,~~MAAM,~~CAAC~~,QAAQ,~~IAAG~~,~~SAAS;oCAC5B,iBACU,eAAe,YAE3BC,~~IAAC,UAAU,IACT,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,EACxC,IAAI,EAAE,EAAE,EACR,SAAS,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~IAAI~~,~~GACtB~~,~~GACK,~~CACV,IACA,CACJ,GACG,IACF,EACN;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\nimport { Button } from '../../button';\n\ninterface Props {\n uploadStatus: UploadStatus;\n file: UploadedFile;\n onRemoveFile?: (id: string) => void;\n uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n uploadStatus,\n file,\n onRemoveFile,\n uploading,\n}) => {\n const {\n id,\n error,\n name,\n progress,\n previewUrl,\n showLoadingSpinner = false,\n showProgressBar = true,\n } = file;\n\n const isComplete = uploadStatus === 'COMPLETE';\n const isUploading = uploadStatus === 'UPLOADING';\n const hasError = uploadStatus === 'ERROR';\n\n const mapFileIconColor: { [k in UploadStatus]: Color } = {\n UPLOADING: 'purple-500',\n COMPLETE: 'grey-500',\n ERROR: 'red-500',\n };\n\n const displayText = {\n UPLOADING: 'Uploading...',\n COMPLETE: name,\n ERROR: error ?? 'Something went wrong. Try uploading again.',\n }[uploadStatus];\n\n return (\n <div\n className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n [styles['upload-file-cell-error']]: hasError,\n })}\n >\n <div className={`w100 ${styles['cell-left-section']}`}>\n <FileIcon\n className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n color={mapFileIconColor[uploadStatus]}\n size={24}\n />\n <div className=\"w100\">\n <div\n className={`p-p ${styles['upload-display-text']}`}\n title={displayText}\n >\n {displayText}\n </div>\n\n {isUploading && showProgressBar && (\n <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n <div className={`${styles['progress-bar']}`} />\n <div\n data-testid=\"ds-filecell-progressbar\"\n className={`${styles['progress-bar-filler']}`}\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n </div>\n <div\n className={classnames(styles['cell-right-section'], {\n [styles['cell-right-section-complete']]: isComplete,\n })}\n >\n {isUploading ? (\n <div className={styles.spinner}>\n {showLoadingSpinner && (\n <div\n className=\"ds-spinner ds-spinner__m\"\n data-testid=\"ds-filecell-spinner\"\n />\n )}\n </div>\n ) : (\n <>\n {isComplete && (\n <Button\n as=\"a\"\n href={previewUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n hideLabel\n variant=\"filledWhite\"\n className={classnames('mr16', styles.button)}\n leftIcon={\n <EyeVisionIcon noMargin color={'grey-500'} size={24} />\n }\n >\n Preview file\n </Button>\n )}\n\n {onRemoveFile && (\n <Button\n onClick={() => onRemoveFile(id)}\n disabled={uploading}\n data-testid=\"remove-button\"\n className={styles.button}\n leftIcon={\n <Trash2Icon\n color={hasError ? 'red-500' : 'grey-500'}\n size={24}\n noMargin\n />\n }\n hideLabel\n variant=\"filledWhite\"\n >\n Delete file\n </Button>\n )}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ import '../icon/IconWrapper/IconWrapper.js';
 import '../icon/icons/EyeVision.js';
 import '../icon/icons/File.js';
 import '../icon/icons/Trash2.js';
+import '../button/index.js';
 var propTypes = {exports: {}};
@@ -2731,7 +2732,7 @@ function reducer(state, action) {
 function noop() {}
-var css_248z = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainer__yZoGP:focus {\n  outline: none;\n}\n\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
+var css_248z = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n.style-module_dropzoneContainer__yZoGP:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
 var styles = {"container":"style-module_container__Uyltc","dropzoneContainer":"style-module_dropzoneContainer__yZoGP","img":"style-module_img__11JI8","textInline":"style-module_textInline__2F21z","dropzoneContainerDisabled":"style-module_dropzoneContainerDisabled__1X3gP"};
 styleInject(css_248z);
@@ -2799,13 +2800,13 @@ var IMAGE_FILES_ACCEPT = formatMimeType(IMAGE_FILES);
 var VIDEO_FILES_ACCEPT = formatMimeType(VIDEO_FILES);
 var getFormattedAcceptObject = function (accept) {
     if (accept === void 0) { accept = {}; }
-    if (accept === "document") {
+    if (accept === 'document') {
         return DOCUMENT_FILES_ACCEPT;
     }
-    if (accept === "image") {
+    if (accept === 'image') {
         return IMAGE_FILES_ACCEPT;
     }
-    if (accept === "video") {
+    if (accept === 'video') {
         return VIDEO_FILES_ACCEPT;
     }
     if (accept) {
@@ -2813,11 +2814,13 @@ var getFormattedAcceptObject = function (accept) {
     }
     return __assign(__assign(__assign({}, DOCUMENT_FILES_ACCEPT), IMAGE_FILES_ACCEPT), VIDEO_FILES_ACCEPT);
 };
-var formatAcceptFileList = function (accept) { return (Object.values(accept)
-    .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
-    .join(", ")
-    .replace(/\./g, '')
-    .toUpperCase()); };
+var formatAcceptFileList = function (accept) {
+    return Object.values(accept)
+        .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
+        .join(', ')
+        .replace(/\./g, '')
+        .toUpperCase();
+};
 var getPlaceholder = function (textOverrides, accept, maxSize) {
     var maxSizePlaceholder = maxSize && maxSize > 0
         ? "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.sizeUpToText) || 'up to', " ").concat(formatBytes(maxSize))
@@ -2825,26 +2828,48 @@ var getPlaceholder = function (textOverrides, accept, maxSize) {
     var isAcceptString = typeof accept === 'string' &&
         ['video', 'image', 'document'].includes(accept);
     var defaultPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || 'Supports images, videos and documents', " ").concat(maxSizePlaceholder);
-    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
+    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) ||
+        "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
     return isAcceptString ? acceptPlaceholder : defaultPlaceholder;
 };
 var getErrorMessage = function (_a, _b, textOverrides) {
     var code = _a.code, message = _a.message;
-    var _c = _b.fileList, fileList = _c === void 0 ? "" : _c, maxSize = _b.maxSize;
+    var _c = _b.fileList, fileList = _c === void 0 ? '' : _c, maxSize = _b.maxSize;
     switch (code) {
         case ErrorCode.FileInvalidType:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || "File type must be", " ").concat(fileList);
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || 'File type must be', " ").concat(fileList);
         case ErrorCode.FileTooLarge:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) || "File is too large. It must be less than", " ").concat(formatBytes(maxSize || 0), ".");
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) ||
+                'File is too large. It must be less than', " ").concat(formatBytes(maxSize || 0), ".");
         default:
             return message;
     }
 };
+var getStatusMessage = function (_a) {
+    var acceptedFiles = _a.acceptedFiles, filesRejected = _a.filesRejected, fileList = _a.fileList, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
+    var message = '';
+    if (acceptedFiles.length > 0) {
+        var fileNames = acceptedFiles.map(function (file) { return file.name; }).join(', ');
+        message += "File".concat(acceptedFiles.length > 1 ? 's' : '', " uploaded: ").concat(fileNames, ". ");
+    }
+    if (filesRejected.length > 0) {
+        var rejectionMessages = filesRejected.map(function (rejection) {
+            var firstError = rejection.errors[0];
+            var rejectionMessage = getErrorMessage(firstError, { fileList: fileList, maxSize: maxSize }, textOverrides);
+            return "Could not upload ".concat(rejection.file.name, ": ").concat(rejectionMessage.endsWith('.')
+                ? rejectionMessage
+                : "".concat(rejectionMessage, "."));
+        });
+        message += rejectionMessages.join('');
+    }
+    return message.trim();
+};
 var MultiDropzone = function (_a) {
     var _b;
     var uploadedFiles = _a.uploadedFiles, onFileSelect = _a.onFileSelect, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading, _c = _a.isCondensed, isCondensed = _c === void 0 ? false : _c, accept = _a.accept, _d = _a.maxFiles, maxFiles = _d === void 0 ? 0 : _d, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
     var _e = useState([]), errors = _e[0], setErrors = _e[1];
+    var _f = useState(''), statusMessage = _f[0], setStatusMessage = _f[1];
     var formattedAccept = getFormattedAcceptObject(accept);
     var fileList = formatAcceptFileList(formattedAccept);
     var placeholder = getPlaceholder(textOverrides, accept, maxSize);
@@ -2857,6 +2882,14 @@ var MultiDropzone = function (_a) {
     };
     var onDrop = useCallback(function (acceptedFiles, filesRejected) {
         onFileSelect(acceptedFiles);
+        var messageForScreenReader = getStatusMessage({
+            acceptedFiles: acceptedFiles,
+            filesRejected: filesRejected,
+            fileList: fileList,
+            maxSize: maxSize,
+            textOverrides: textOverrides,
+        });
+        setStatusMessage(messageForScreenReader);
         setErrors(function (previousErrors) { return __spreadArray$1(__spreadArray$1([], previousErrors, true), filesRejected.map(function (_a) {
             var errors = _a.errors;
             return ({
@@ -2865,15 +2898,15 @@ var MultiDropzone = function (_a) {
             });
         }), true); });
     }, [fileList, maxSize, onFileSelect, textOverrides]);
-    var _f = useDropzone({
+    var _g = useDropzone({
         accept: formattedAccept,
         disabled: uploading,
         maxSize: maxSize,
         onDrop: onDrop,
-    }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
+    }), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps;
     return (jsxs("div", { className: styles.container, children: [jsxs("div", __assign({ className: classNames("w100 ta-center br8 c-pointer ".concat(styles.dropzoneContainer), (_b = {},
                     _b[styles['dropzoneContainerDisabled']] = uploading,
-                    _b)) }, getRootProps(), { children: [jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps())), jsx(UploadCloudIcon, { className: isCondensed ? styles.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }), jsx("div", { className: "p-h4 mt8 d-block c-pointer ".concat(isCondensed ? styles.textInline : ''), children: uploading
+                    _b)) }, getRootProps(), { children: [jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: statusMessage }), jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps())), jsx(UploadCloudIcon, { className: isCondensed ? styles.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }), jsx("div", { className: "p-h4 mt8 d-block c-pointer ".concat(isCondensed ? styles.textInline : ''), children: uploading
                             ? (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.currentlyUploadingText) ||
                                 'Please wait while uploading file...'
                             : (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsText) || 'Choose file or drag & drop' }), jsx("div", { className: "p-p--small tc-grey-500", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsText) || placeholder })] })), errors.map(function (_a) {
@@ -2884,7 +2917,8 @@ var MultiDropzone = function (_a) {
                         name: message,
                         progress: 0,
                     }, onRemoveFile: function () { return removeError(id); }, uploading: false }, id));
-            }), uploadedFiles.length > 0 && (jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) || "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
+            }), uploadedFiles.length > 0 && (jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) ||
+                        "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
 };
 export { MultiDropzone };