@popsure/dirty-swan 0.57.7 → 0.57.9

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -8537,13 +8537,13 @@ var Badge = function (_a) {
     return (jsxRuntime.jsx("div", { role: "status", className: classNames$1(className, 'px16 br8 d-inline-block ai-center fw-bold p-p', { 'p-p--small': size === 'small' }, styles$y["badge--".concat(size)], getVariantClassNames(variant)), children: children }));
 };
 
-var css_248z$y = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
+var css_248z$y = ".styles-module_container__3zJJC {\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__2p34b {\n  max-width: 424px;\n}";
 var styles$x = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
 styleInject(css_248z$y);
 
 var Checkbox = function (_a) {
     var _b;
-    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, _g = _a.fieldLegend, fieldLegend = _g === void 0 ? 'Select one or more options' : _g;
     var hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -8568,56 +8568,57 @@ var Checkbox = function (_a) {
     var isCheckboxLabelObject = function (label) {
         return label.title !== undefined;
     };
-    return (jsxRuntime.jsx("div", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$x.container, 'd-flex gap8', (_b = {},
+    return (jsxRuntime.jsxs("fieldset", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$x.container, 'd-flex gap8', (_b = {},
             _b[styles$x.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 === null || value === void 0 ? void 0 : value.includes(currentValue);
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-checkbox', {
-                            'p-checkbox--no-icon': customIcon,
-                        }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
-                            'p-label--bordered': bordered,
-                            'jc-center': customIcon,
-                            'fd-column': customIcon,
-                        }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsxRuntime.jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsxRuntime.jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-checkbox', {
+                                'p-checkbox--no-icon': customIcon,
+                            }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
+                                'p-label--bordered': bordered,
+                                'jc-center': customIcon,
+                                'fd-column': customIcon,
+                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsxRuntime.jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
-var css_248z$x = ".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$x = ".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$w = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
 styleInject(css_248z$x);
 
 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 (jsxRuntime.jsx("div", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$w.container, 'd-flex gap8', (_b = {},
+    var name = groupName !== null && groupName !== void 0 ? groupName : generateId();
+    return (jsxRuntime.jsxs("fieldset", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$w.container, 'd-flex gap8', (_b = {},
             _b[styles$w.wide] = wide,
             _b[styles$w.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 (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('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 }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(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 && (jsxRuntime.jsx("div", { className: classNames$1('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsxRuntime.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 (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('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 }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(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 && (jsxRuntime.jsx("div", { className: classNames$1('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
 var css_248z$w = "@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_wrapper__200Xu {\n  position: relative;\n  top: 0;\n  overflow: hidden;\n}\n\n.style-module_container__aOENo {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  overflow: auto;\n  max-height: 90vh;\n  bottom: 0;\n  position: fixed;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-in;\n}\n.style-module_containerClose__3-nqc {\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@media (max-width: 34rem) {\n  .style-module_body__3yNly {\n    padding-bottom: 48px;\n  }\n}";
@@ -11604,13 +11605,13 @@ var associatedClassForCardState = function (state, dropshadow) {
     return baseClass;
 };
 
-var css_248z$o = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
+var css_248z$o = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-primary-500);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
 var styles$n = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z$o);
 
 var Chip = (function (_a) {
     var className = _a.className, value = _a.value, onRemove = _a.onRemove;
-    return (jsxRuntime.jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles$n['chip']), children: [value.leftIcon && (jsxRuntime.jsx("img", { className: "mr8 ".concat(styles$n['chip-image']), src: value.leftIcon, alt: value.value })), jsxRuntime.jsx("div", { className: "mr8", children: value.value }), jsxRuntime.jsx("button", { className: "c-pointer ".concat(styles$n['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, children: jsxRuntime.jsx(XIcon, { className: styles$n['chip-remove-button'] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles$n['chip']), children: [value.leftIcon && (jsxRuntime.jsx("img", { className: "mr8 ".concat(styles$n['chip-image']), src: value.leftIcon, alt: value.value })), jsxRuntime.jsx("div", { className: "mr8", children: value.value }), jsxRuntime.jsx("button", { className: "c-pointer ".concat(styles$n['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, "aria-label": "Remove ".concat(value.value, " option"), children: jsxRuntime.jsx(XIcon, { className: styles$n['chip-remove-button'] }) })] }));
 });
 
 var Autosuggest = {};
@@ -17036,4 +17037,5 @@ exports.toast = toast;
 exports.useEscapeKey = useEscapeKey;
 exports.useFocusWithin = useFocusWithin;
 exports.useMediaQuery = useMediaQuery;
+exports.useOnClickOutside = useOnClickOutside;
 //# sourceMappingURL=index.js.map