@popsure/dirty-swan 0.37.2 → 0.38.0

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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { AutoSuggestInput } from './index.js';
 import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../index-171a0108.js';
 import '../../../index-dd80248b.js';
 import '../../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/input/autoSuggestMultiSelect/index.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Chip from '../../chip/index.js';
 import { AutoSuggestInput } from '../autoSuggestInput/index.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 '../../../index-171a0108.js';
 import '../../../index-dd80248b.js';
 import '../index.js';
@@ -20,7 +20,7 @@ var AutoSuggestMultiSelect = function (_a) {
     var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
     var _d = useState(''), currentOption = _d[0], setCurrentOption = _d[1];
     var hasChips = Boolean(selectedValues && selectedValues.length > 0);
-    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: classnames(styles['chip-container'], chipsListClassName, (_b = {},
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: classNames(styles['chip-container'], chipsListClassName, (_b = {},
                     _b[styles.appearIn] = hasChips,
                     _b)) }, { children: selectedValues && hasChips && (jsx(Fragment, { children: selectedValues.map(function (value, index) { return (jsx(Chip, { className: "mb16", value: value, onRemove: function (value) {
                             var newValues = __spreadArray([], selectedValues).filter(function (selectedValue) { return selectedValue.value !== value.value; });

package/dist/esm/components/input/autoSuggestMultiSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport { AutoSuggestInput } from '../autoSuggestInput';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface AutoSuggestMultiSelectProps {\n  options: Option[];\n  selectedValues?: Option[];\n  setValues: (values: Option[]) => void;\n  placeholder: string;\n  chipsListClassName?: string;\n  multiSelectClassName?: string;\n  wrapText?: boolean;\n}\n\nexport const AutoSuggestMultiSelect = ({\n  options,\n  selectedValues,\n  setValues,\n  placeholder,\n  chipsListClassName,\n  multiSelectClassName,\n  wrapText,\n}: AutoSuggestMultiSelectProps) => {\n  const [suggestions, setSuggestions] = useState<Option[]>([]);\n  const [currentOption, setCurrentOption] = useState('');\n  const hasChips = Boolean(selectedValues && selectedValues.length > 0);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles['chip-container'],\n          chipsListClassName,\n          {\n            [styles.appearIn]: hasChips\n          },\n        )}\n      >\n        {selectedValues && hasChips && (\n          <>\n            {selectedValues.map((value, index) => (\n              <Chip\n                key={`${value.value}-${index}`}\n                className=\"mb16\"\n                value={value}\n                onRemove={(value: Option) => {\n                  const newValues = [...selectedValues].filter(\n                    (selectedValue) => selectedValue.value !== value.value\n                  );\n                  setValues(newValues);\n                }}\n              />\n            ))}\n          </>\n        )}\n      </div>\n      <AutoSuggestInput\n        className={multiSelectClassName}\n        placeholder={placeholder}\n        onChange={setCurrentOption}\n        handleSuggestionSelected={(value) => {\n          const newSelectedOptions = selectedValues ?? [];\n          newSelectedOptions?.push(value);\n          setValues(newSelectedOptions);\n          setCurrentOption('');\n        }}\n        handleSuggestionFetchRequest={({ value }) => {\n          const filteredOptions = options.filter(\n            (option) =>\n              option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n              selectedValues?.find(\n                (selectedValue) => selectedValue.value === option.value\n              ) === undefined\n          );\n          setSuggestions(filteredOptions);\n        }}\n        currentOption={currentOption}\n        suggestions={suggestions}\n        handleSuggestionClearRequest={() => setSuggestions([])}\n        wrapText={wrapText}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx","classNames"],"mappings":";;;;;;;;;;;;;;;;IAkBa,sBAAsB,GAAG,UAAC,EAQT;;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAAgC,QAAQ,CAAW,EAAE,CAAC,EAArD,WAAW,QAAA,EAAE,cAAc,QAA0B,CAAC;IACvD,IAAA,KAAoC,QAAQ,CAAC,EAAE,CAAC,EAA/C,aAAa,QAAA,EAAE,gBAAgB,QAAgB,CAAC;IACvD,IAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEtE,QACEA,4BACEC,sBACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB;oBAEhB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;wBAE9B,gBAEA,cAAc,IAAI,QAAQ,KACzBD,0BACG,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QACpCA,IAAC,IAAI,IAEH,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAa;4BACtB,IAAM,SAAS,GAAG,kBAAI,cAAc,EAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;4BACF,SAAS,CAAC,SAAS,CAAC,CAAC;yBACtB,IARO,KAAK,CAAC,KAAK,SAAI,KAAO,CAS9B,IACH,CAAC,WACD,CACJ,YACG;YACNA,IAAC,gBAAgB,IACf,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,wBAAwB,EAAE,UAAC,KAAK;oBAC9B,IAAM,kBAAkB,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;oBAChD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAChC,SAAS,CAAC,kBAAkB,CAAC,CAAC;oBAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB,EACD,4BAA4B,EAAE,UAAC,EAAS;wBAAP,KAAK,WAAA;oBACpC,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CACpC,UAAC,MAAM;wBACL,OAAA,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;4BAC1D,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAA,CACxD,MAAK,SAAS;qBAAA,CAClB,CAAC;oBACF,cAAc,CAAC,eAAe,CAAC,CAAC;iBACjC,EACD,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,4BAA4B,EAAE,cAAM,OAAA,cAAc,CAAC,EAAE,CAAC,GAAA,EACtD,QAAQ,EAAE,QAAQ,WAClB,YACD,EACH;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport { AutoSuggestInput } from '../autoSuggestInput';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface AutoSuggestMultiSelectProps {\n  options: Option[];\n  selectedValues?: Option[];\n  setValues: (values: Option[]) => void;\n  placeholder: string;\n  chipsListClassName?: string;\n  multiSelectClassName?: string;\n  wrapText?: boolean;\n}\n\nexport const AutoSuggestMultiSelect = ({\n  options,\n  selectedValues,\n  setValues,\n  placeholder,\n  chipsListClassName,\n  multiSelectClassName,\n  wrapText,\n}: AutoSuggestMultiSelectProps) => {\n  const [suggestions, setSuggestions] = useState<Option[]>([]);\n  const [currentOption, setCurrentOption] = useState('');\n  const hasChips = Boolean(selectedValues && selectedValues.length > 0);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles['chip-container'],\n          chipsListClassName,\n          {\n            [styles.appearIn]: hasChips\n          },\n        )}\n      >\n        {selectedValues && hasChips && (\n          <>\n            {selectedValues.map((value, index) => (\n              <Chip\n                key={`${value.value}-${index}`}\n                className=\"mb16\"\n                value={value}\n                onRemove={(value: Option) => {\n                  const newValues = [...selectedValues].filter(\n                    (selectedValue) => selectedValue.value !== value.value\n                  );\n                  setValues(newValues);\n                }}\n              />\n            ))}\n          </>\n        )}\n      </div>\n      <AutoSuggestInput\n        className={multiSelectClassName}\n        placeholder={placeholder}\n        onChange={setCurrentOption}\n        handleSuggestionSelected={(value) => {\n          const newSelectedOptions = selectedValues ?? [];\n          newSelectedOptions?.push(value);\n          setValues(newSelectedOptions);\n          setCurrentOption('');\n        }}\n        handleSuggestionFetchRequest={({ value }) => {\n          const filteredOptions = options.filter(\n            (option) =>\n              option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n              selectedValues?.find(\n                (selectedValue) => selectedValue.value === option.value\n              ) === undefined\n          );\n          setSuggestions(filteredOptions);\n        }}\n        currentOption={currentOption}\n        suggestions={suggestions}\n        handleSuggestionClearRequest={() => setSuggestions([])}\n        wrapText={wrapText}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;IAkBa,sBAAsB,GAAG,UAAC,EAQT;;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAAgC,QAAQ,CAAW,EAAE,CAAC,EAArD,WAAW,QAAA,EAAE,cAAc,QAA0B,CAAC;IACvD,IAAA,KAAoC,QAAQ,CAAC,EAAE,CAAC,EAA/C,aAAa,QAAA,EAAE,gBAAgB,QAAgB,CAAC;IACvD,IAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEtE,QACEA,4BACEC,sBACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB;oBAEhB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;wBAE9B,gBAEA,cAAc,IAAI,QAAQ,KACzBA,0BACG,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QACpCA,IAAC,IAAI,IAEH,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAa;4BACtB,IAAM,SAAS,GAAG,kBAAI,cAAc,EAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;4BACF,SAAS,CAAC,SAAS,CAAC,CAAC;yBACtB,IARO,KAAK,CAAC,KAAK,SAAI,KAAO,CAS9B,IACH,CAAC,WACD,CACJ,YACG;YACNA,IAAC,gBAAgB,IACf,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,wBAAwB,EAAE,UAAC,KAAK;oBAC9B,IAAM,kBAAkB,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;oBAChD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAChC,SAAS,CAAC,kBAAkB,CAAC,CAAC;oBAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB,EACD,4BAA4B,EAAE,UAAC,EAAS;wBAAP,KAAK,WAAA;oBACpC,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CACpC,UAAC,MAAM;wBACL,OAAA,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;4BAC1D,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAA,CACxD,MAAK,SAAS;qBAAA,CAClB,CAAC;oBACF,cAAc,CAAC,eAAe,CAAC,CAAC;iBACjC,EACD,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,4BAA4B,EAAE,cAAM,OAAA,cAAc,CAAC,EAAE,CAAC,GAAA,EACtD,QAAQ,EAAE,QAAQ,WAClB,YACD,EACH;AACJ;;;;"}

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

@@ -6,7 +6,7 @@ import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
 import '../../chip/index.js';
 import '../../../style-inject.es-1f59c1d0.js';
 import '../autoSuggestInput/index.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../index-171a0108.js';
 import '../../../index-dd80248b.js';
 import '../index.js';

package/dist/esm/components/input/checkbox/index.js

@@ -1,15 +1,15 @@
 import { _ as __assign, d as __spreadArray } from '../../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as classnames } from '../../../index-e9e37a34.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}\n\n.styles-module_wide__VxDGe {\n  max-width: 736px;\n}";
-var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b","wide":"styles-module_wide__VxDGe"};
+var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
+var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
 styleInject(css_248z);
 
 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.className, className = _f === void 0 ? '' : _f, _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.optionClassName, optionClassName = _h === void 0 ? '' : _h;
+    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 hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -32,8 +32,7 @@ var Checkbox = function (_a) {
         onChange(newValues);
     };
     var entries = Object.entries(options);
-    return (jsx("div", __assign({ className: classnames(className, styles.container, 'd-flex gap8', (_b = {},
-            _b[styles.wide] = wide,
+    return (jsx("div", __assign({ className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
@@ -43,10 +42,11 @@ var Checkbox = function (_a) {
             var currentValue = _a[0], label = _a[1];
             var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
             var customIcon = (_b = label) === null || _b === void 0 ? void 0 : _b.icon;
-            return (jsxs("div", __assign({ className: optionClassName }, { children: [jsx("input", { className: classnames("p-checkbox", {
+            return (jsxs("div", __assign({ className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option }, { children: [jsx("input", { className: classNames("p-checkbox", {
                             'p-checkbox--no-icon': customIcon
                         }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-" + currentValue }, void 0),
-                    jsxs("label", __assign({ htmlFor: currentValue, className: classnames(labelClassName, 'p-label p-label--bordered pr16', {
+                    jsxs("label", __assign({ htmlFor: currentValue, className: classNames(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-" + currentValue, "data-testid": "checkbox-" + currentValue }, { children: [customIcon && (jsx("div", __assign({ className: "mt8" }, { children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), void 0)),

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: string;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, string | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  className?: string;\n  labelClassName?: string;\n  optionClassName?: string\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  className = '',\n  labelClassName = '',\n  optionClassName = '',\n}: CheckboxProps<ValueType> & {  }) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value\n      ? [...value, newValue]\n      : [newValue];\n    onChange(newValues);\n  };\n\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    string | CheckboxWithDescription\n  ][];\n\n  return (\n    <div\n      className={classNames(className, styles.container, 'd-flex gap8', {\n        [styles.wide]: wide,\n        [styles.narrow]: !wide,\n        'fd-row': inlineLayout,\n        'f-wrap': inlineLayout,\n        'fd-column': !inlineLayout,\n      })}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={optionClassName} key={currentValue}>\n            <input\n              className={classNames(\n                \"p-checkbox\", {\n                  'p-checkbox--no-icon': customIcon\n                }\n              )}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(\n                labelClassName,\n                'p-label p-label--bordered pr16',\n                {\n                  'jc-center': customIcon,\n                  'fd-column': customIcon\n                }\n              )}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && (\n                <div className=\"mt8\">{customIcon?.(checked)}</div>\n              )}\n\n              {typeof label === 'string' ? 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          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","classNames","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: string;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, string | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean,\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  }\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n}: CheckboxProps<ValueType> & {  }) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value\n      ? [...value, newValue]\n      : [newValue];\n    onChange(newValues);\n  };\n\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    string | CheckboxWithDescription\n  ][];\n\n  return (\n    <div\n      className={classNames(classNamesObj?.container, styles.container, 'd-flex gap8', {\n        [styles.narrow]: !wide,\n        'fd-row': inlineLayout,\n        'f-wrap': inlineLayout,\n        'fd-column': !inlineLayout,\n      })}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames(\n                \"p-checkbox\", {\n                  'p-checkbox--no-icon': customIcon\n                }\n              )}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(\n                classNamesObj?.label,\n                'p-label pr16',\n                {\n                  'p-label--bordered': bordered,\n                  'jc-center': customIcon,\n                  'fd-column': customIcon\n                }\n              )}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && (\n                <div className=\"mt8\">{customIcon?.(checked)}</div>\n              )}\n\n              {typeof label === 'string' ? 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          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Checkbox } from './index.js';
 import { i as images } from '../../../index-31224f74.js';
 import '../../../tslib.es6-5bc94358.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
 var story = {
@@ -41,32 +41,33 @@ var story = {
             description: 'Property that defines if options should fill 100% of available horizontal space',
             defaultValue: false
         },
+        bordered: {
+            control: { type: 'boolean' },
+            description: 'Property that defines if checkbox should show the border around each label',
+            defaultValue: true
+        },
         inlineLayout: {
             description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
             defaultValue: false
         },
         className: {
-            description: 'Wrapper classNames for custom styling',
-            defaultValue: ''
-        },
-        optionClassName: {
-            description: 'Option classNames for custom styling',
-            defaultValue: ''
-        },
-        labelClassName: {
-            description: 'Label classNames for custom styling',
-            defaultValue: ''
+            description: 'ClassNames for custom styling',
+            defaultValue: {
+                container: '',
+                label: '',
+                option: ''
+            }
         },
     }
 };
 var CheckboxStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, className = _a.className, optionClassName = _a.optionClassName, labelClassName = _a.labelClassName, inlineLayout = _a.inlineLayout;
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout;
     var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
     var handleOnChange = function (newValue) {
         setCheckedValues(newValue);
         onChange(newValue);
     };
-    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, className: className, labelClassName: labelClassName, optionClassName: optionClassName, inlineLayout: inlineLayout }, void 0));
+    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout }, void 0));
 };
 var CheckboxWithCustomWrapperStyles = function (_a) {
     var onChange = _a.onChange;
@@ -79,7 +80,7 @@ var CheckboxWithCustomWrapperStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, className: "p32 bg-primary-300 br24 bs-lg" }, void 0));
+        }, classNames: { container: "p32 bg-primary-300 br24 bs-lg" } }, void 0));
 };
 var CheckboxWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -92,7 +93,7 @@ var CheckboxWithCustomOptionStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT2: 'Cat',
             DOG2: 'Dog',
-        }, optionClassName: "mb32 p24 bg-green-100 br12 bs-lg" }, void 0));
+        }, classNames: { option: "mb32 p24 bg-green-100 br12 bs-lg" } }, void 0));
 };
 var CheckboxWithCustomLabelStyles = function (_a) {
     var onChange = _a.onChange;
@@ -105,7 +106,7 @@ var CheckboxWithCustomLabelStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, labelClassName: "bg-grey-900 tc-white" }, void 0));
+        }, classNames: { label: "bg-grey-900 tc-white" } }, void 0));
 };
 var CheckboxWithInlineLayout = function (_a) {
     var onChange = _a.onChange;
@@ -122,10 +123,10 @@ var CheckboxWithInlineLayout = function (_a) {
             RABBIT: 'Rabbit',
             RAT: 'Rat',
             ANOTHER: 'Other',
-        }, optionClassName: "w30", inlineLayout: true, wide: true }, void 0));
+        }, classNames: { option: "w30" }, inlineLayout: true, wide: true }, void 0));
 };
 var CheckboxWithCustomLabel = function (_a) {
-    var onChange = _a.onChange; _a.wide; _a.className; _a.optionClassName; _a.inlineLayout;
+    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
     var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
     var handleOnChange = function (newValue) {
         if (newValue === void 0) { newValue = []; }
@@ -145,7 +146,7 @@ var CheckboxWithCustomLabel = function (_a) {
                 icon: function () { return jsx("img", { src: images.brokenGlass, alt: '' }, void 0); },
                 title: 'Other',
             }
-        }, onChange: handleOnChange, value: checkedValues, optionClassName: "w30", inlineLayout: true }, void 0));
+        }, onChange: handleOnChange, value: checkedValues, classNames: { option: "w30" }, inlineLayout: true }, void 0));
 };
 CheckboxStory.storyName = 'Checkbox';
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\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 checkbox options story for examples.',\n      defaultValue: false\n    },\n    className: {\n      description: 'Wrapper classNames for custom styling',\n      defaultValue: ''\n    },\n    optionClassName: {\n      description: 'Option classNames for custom styling',\n      defaultValue: ''\n    },\n    labelClassName: {\n      description: 'Label classNames for custom styling',\n      defaultValue: ''\n    },\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  className,\n  optionClassName,\n  labelClassName,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      className={className}\n      labelClassName={labelClassName}\n      optionClassName={optionClassName}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      className=\"p32 bg-primary-300 br24 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      optionClassName=\"mb32 p24 bg-green-100 br12 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      labelClassName=\"bg-grey-900 tc-white\"\n    />\n  );\n}\n\nexport const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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      optionClassName=\"w30\"\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabel = ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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      optionClassName=\"w30\"\n      inlineLayout\n    />\n  );\n}\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\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    bordered: {\n      control: { type: 'boolean' },\n      description: 'Property that defines if checkbox should show the border around each label',\n      defaultValue: true\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n      defaultValue: false\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n      defaultValue: {\n        container: '',\n        label: '',\n        option: ''\n      }\n    },\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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 CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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 CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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 CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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 CheckboxWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \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\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../_commonjsHelpers-e7f67fd8.js';
 import 'react-dom/test-utils';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
 var mockOnChange = jest.fn();

package/dist/esm/components/input/currency/index.js

@@ -2,7 +2,7 @@ import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { Input } from '../index.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../index-fb46adf9.js';
 import '../../../style-inject.es-1f59c1d0.js';
 

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

@@ -7,7 +7,7 @@ import 'react-dom';
 import '../../../_commonjsHelpers-e7f67fd8.js';
 import 'react-dom/test-utils';
 import '../index.js';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../index-fb46adf9.js';
 import '../../../style-inject.es-1f59c1d0.js';
 

package/dist/esm/components/input/iban/index.js

@@ -2,7 +2,7 @@ import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { Input } from '../index.js';
 import 'react';
-import '../../../index-e9e37a34.js';
+import '../../../index-6ea95111.js';
 import '../../../index-fb46adf9.js';
 import '../../../style-inject.es-1f59c1d0.js';
 

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

@@ -1,7 +1,7 @@
 import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
-import { c as classnames } from '../../index-e9e37a34.js';
+import { c as classNames } from '../../index-6ea95111.js';
 import { g as generateId } from '../../index-fb46adf9.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 
@@ -13,15 +13,15 @@ var Input = React__default.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f, _g;
     var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel"]);
     var uniqueId = useState(id !== null && id !== void 0 ? id : generateId())[0];
-    return (jsxs("div", __assign({ className: styles.container + " " + (className !== null && className !== void 0 ? className : '') }, { children: [label && (jsx("label", __assign({ htmlFor: uniqueId, className: classnames('p-p', styles.label, (_b = {},
+    return (jsxs("div", __assign({ className: styles.container + " " + (className !== null && className !== void 0 ? className : '') }, { children: [label && (jsx("label", __assign({ htmlFor: uniqueId, className: classNames('p-p', styles.label, (_b = {},
                     _b[styles['label--with-error']] = error,
                     _b['sr-only'] = hideLabel,
                     _b)) }, { children: label }), void 0)),
-            jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classnames(error ? 'p-input--error' : 'p-input', !label && placeholder && placeholder.length > 0
+            jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', !label && placeholder && placeholder.length > 0
                             ? styles.input
                             : styles['input--no-placeholder'], (_c = {}, _c[styles['input--with-prefix']] = prefix, _c)), placeholder: label ? placeholder : ' ', disabled: disabled }, props), void 0),
-                    prefix && (jsx("span", __assign({ className: classnames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)) }, { children: prefix }), void 0)),
-                    !label && (jsx("label", __assign({ htmlFor: uniqueId, className: classnames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)) }, { children: placeholder }), void 0))] }), void 0),
+                    prefix && (jsx("span", __assign({ className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)) }, { children: prefix }), void 0)),
+                    !label && (jsx("label", __assign({ htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)) }, { children: placeholder }), void 0))] }), void 0),
             error && (jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles.error }, { children: error }), void 0))] }), void 0));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              !label && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              { [styles['input--with-prefix']]: prefix }\n            )}\n            placeholder={label ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {!label && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;IAgBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAUa,EACb,GAA0C;;IAVxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACd,KAAK,cATV,uFAUC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAChD,QACEC,uBAAK,SAAS,EAAK,MAAM,CAAC,SAAS,UAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,iBACrD,KAAK,KACJC,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,gBAED,KAAK,YACA,CACT;YACDD,uBAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,iBAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,KAAK,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BAC3C,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC,YACjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM,MACzC,EACD,WAAW,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EACtC,QAAQ,EAAE,QAAQ,IACd,KAAK,UACT;oBACD,MAAM,KACLA,uBACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,gBAEA,MAAM,YACF,CACR;oBACA,CAAC,KAAK,KACLA,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,gBAEA,WAAW,YACN,CACT,aACG;YACL,KAAK,KACJA,oBAAG,SAAS,EAAE,gCAA8B,MAAM,CAAC,KAAO,gBACvD,KAAK,YACJ,CACL,aACG,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              !label && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              { [styles['input--with-prefix']]: prefix }\n            )}\n            placeholder={label ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {!label && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAgBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAUa,EACb,GAA0C;;IAVxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACd,KAAK,cATV,uFAUC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAChD,QACEC,uBAAK,SAAS,EAAK,MAAM,CAAC,SAAS,UAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,iBACrD,KAAK,KACJC,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,gBAED,KAAK,YACA,CACT;YACDF,uBAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,iBAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,KAAK,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BAC3C,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC,YACjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM,MACzC,EACD,WAAW,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EACtC,QAAQ,EAAE,QAAQ,IACd,KAAK,UACT;oBACD,MAAM,KACLD,uBACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,gBAEA,MAAM,YACF,CACR;oBACA,CAAC,KAAK,KACLD,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,gBAEA,WAAW,YACN,CACT,aACG;YACL,KAAK,KACJD,oBAAG,SAAS,EAAE,gCAA8B,MAAM,CAAC,KAAO,gBACvD,KAAK,YACJ,CACL,aACG,EACN;AACJ,CAAC;;;;"}

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from './index.js';
 import '../../tslib.es6-5bc94358.js';
-import '../../index-e9e37a34.js';
+import '../../index-6ea95111.js';
 import '../../index-fb46adf9.js';
 import '../../style-inject.es-1f59c1d0.js';
 

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

@@ -0,0 +1,41 @@
+import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as classNames } from '../../../index-6ea95111.js';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.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 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, classNamesObj = _a.classNames, _e = _a.bordered, bordered = _e === void 0 ? true : _e;
+    var entries = Object.entries(options);
+    return (jsx("div", __assign({ 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 _b, _c;
+            var currentValue = _a[0], label = _a[1];
+            var checked = value === currentValue;
+            var customIcon = (_b = label) === null || _b === void 0 ? void 0 : _b.icon;
+            var hideIcon = (_c = label) === null || _c === void 0 ? void 0 : _c.hideBox;
+            return (jsxs("div", __assign({ 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-" + currentValue }, void 0),
+                    jsxs("label", __assign({ htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
+                            'jc-center': customIcon,
+                            'fd-column': customIcon,
+                            'p-label--bordered': bordered
+                        }), "data-cy": "radio-" + currentValue, "data-testid": "radio-" + currentValue }, { children: [customIcon && (jsx("div", __assign({ className: "mt8" }, { children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), void 0)),
+                            typeof label === 'string' ? label : (jsxs("div", { children: [jsx("p", __assign({ className: "p-p" }, { children: label.title }), void 0),
+                                    jsx("span", __assign({ className: "d-block p-p p-p--small tc-grey-600" }, { children: label.description }), void 0)] }, void 0))] }), void 0)] }), currentValue));
+        }) }), void 0));
+};
+
+export { Radio };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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: string;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n  hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n  options: Record<ValueType, string | RadioWithDescription>;\n  value?: ValueType;\n  onChange: (value: ValueType) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  bordered?: boolean;\n}\n\nexport const Radio = <ValueType extends string>({\n  options,\n  value,\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  classNames: classNamesObj,\n  bordered = true\n}: RadioProps<ValueType>) => {\n  const entries = Object.entries(options) as [\n    ValueType,\n    string | RadioWithDescription\n  ][];\n\n\n  return (\n    <div\n      className={classNames(classNamesObj?.container, styles.container, 'd-flex gap8', {\n        [styles.wide]: wide,\n        [styles.narrow]: !wide,\n        'fd-row': inlineLayout,\n        'f-wrap': inlineLayout,\n        'fd-column': !inlineLayout,\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        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames(\n                \"p-radio\", {\n                  'p-radio--no-icon': customIcon || hideIcon,\n                  'p-radio--centered': !label,\n                }\n              )}\n              id={currentValue}\n              type=\"radio\"\n              value={currentValue}\n              onChange={() => onChange(currentValue)}\n              checked={checked}\n              data-testid={`radio-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(\n                classNamesObj?.label,\n                'p-label',\n                {\n                  'jc-center': customIcon,\n                  'fd-column': customIcon,\n                  'p-label--bordered': bordered\n                }\n              )}\n              data-cy={`radio-${currentValue}`}\n              data-testid={`radio-${currentValue}`}\n            >\n              {customIcon && (\n                <div className=\"mt8\">{customIcon?.(checked)}</div>\n              )}\n\n              {typeof label === 'string' ? 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          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAyBa,KAAK,GAAG,UAA2B,EAQxB;;QAPtB,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACR,aAAa,gBAAA,EACzB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA;IAEf,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAGnC,CAAC;IAGJ,QACEA,sBACE,SAAS,EAAE,UAAU,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa;YAC7E,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;gBAC1B,gBAED,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqB;;gBAApB,YAAY,QAAA,EAAE,KAAK,QAAA;YAChC,IAAM,OAAO,GAAG,KAAK,KAAK,YAAY,CAAC;YACvC,IAAM,UAAU,GAAG,MAAC,KAA8B,0CAAE,IAAI,CAAC;YACzD,IAAM,QAAQ,GAAG,MAAC,KAA8B,0CAAE,OAAO,CAAC;YAE1D,QACEC,uBAAK,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,iBACnCD,eACE,SAAS,EAAE,UAAU,CACnB,SAAS,EAAE;4BACT,kBAAkB,EAAE,UAAU,IAAI,QAAQ;4BAC1C,mBAAmB,EAAE,CAAC,KAAK;yBAC5B,CACF,EACD,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,iBAAe,YAAc,WAC1C;oBAEFC,yBACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CACnB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EACpB,SAAS,EACT;4BACE,WAAW,EAAE,UAAU;4BACvB,WAAW,EAAE,UAAU;4BACvB,mBAAmB,EAAE,QAAQ;yBAC9B,CACF,aACQ,WAAS,YAAc,iBACnB,WAAS,YAAc,iBAEnC,UAAU,KACTD,sBAAK,SAAS,EAAC,KAAK,gBAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,YAAO,CACnD;4BAEA,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,IAChCC,yBACED,oBAAG,SAAS,EAAC,KAAK,gBAAE,KAAK,CAAC,KAAK,YAAK;oCACpCA,uBAAM,SAAS,EAAC,oCAAoC,gBACjD,KAAK,CAAC,WAAW,YACb,YACH,CACP,aACK,MA1CkC,YAAY,CA2ClD,EACN;SACH,CAAC,YACE,EACN;AACJ;;;;"}