@popsure/dirty-swan 0.33.0 → 0.33.1

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

@@ -0,0 +1,153 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Checkbox } from './index.js';
+import { i as images } from '../../../index-db2e797f.js';
+import '../../../tslib.es6-5bc94358.js';
+import '../../../index-e9e37a34.js';
+
+var story = {
+    title: 'JSX/Inputs/Checkbox',
+    component: Checkbox,
+    argTypes: {
+        options: {
+            description: 'Object that contains the possible options for rendering in the input.',
+            defaultValue: {
+                CAT: {
+                    title: 'Cat',
+                    description: 'At least 1'
+                },
+                DOG: {
+                    title: 'Dog',
+                    description: 'At least 2'
+                },
+                NONE: {
+                    title: 'None',
+                    description: 'No pets'
+                }
+            }
+        },
+        value: {
+            description: 'Current checked values.',
+        },
+        onChange: {
+            description: 'Function called everytime a value changes.',
+            action: true,
+            table: {
+                category: "Callbacks",
+            },
+        },
+        wide: {
+            description: 'Property that defines if options should fill 100% of available horizontal space',
+            defaultValue: false
+        },
+        inlineLayout: {
+            description: 'Property that defines if options should show inline instead of block. Check inline 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: ''
+        },
+    }
+};
+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 _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));
+};
+var CheckboxWithCustomWrapperStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        if (newValue === void 0) { newValue = []; }
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT1: 'Cat',
+            DOG1: 'Dog',
+        }, className: "p32 bg-primary-300 br24 bs-lg" }, void 0));
+};
+var CheckboxWithCustomOptionStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        if (newValue === void 0) { newValue = []; }
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT2: 'Cat',
+            DOG2: 'Dog',
+        }, optionClassName: "mb32 p24 bg-green-100 br12 bs-lg" }, void 0));
+};
+var CheckboxWithCustomLabelStyles = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        if (newValue === void 0) { newValue = []; }
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT3: 'Cat',
+            DOG3: 'Dog',
+        }, labelClassName: "bg-grey-900 tc-white" }, void 0));
+};
+var CheckboxWithInlineLayout = function (_a) {
+    var onChange = _a.onChange;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        if (newValue === void 0) { newValue = []; }
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+            CAT4: 'Cat',
+            DOG4: 'Dog',
+            FISHER: 'Fish',
+            RABBIT: 'Rabbit',
+            RAT: 'Rat',
+            ANOTHER: 'Other',
+        }, optionClassName: "w30", inlineLayout: true, wide: true }, void 0));
+};
+var CheckboxWithCustomLabel = function (_a) {
+    var onChange = _a.onChange; _a.wide; _a.className; _a.optionClassName; _a.inlineLayout;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    var handleOnChange = function (newValue) {
+        if (newValue === void 0) { newValue = []; }
+        setCheckedValues(newValue);
+        onChange(newValue);
+    };
+    return (jsx(Checkbox, { options: {
+            BIGDOG: {
+                icon: function () { return jsx("img", { src: images.bigDog, alt: '' }, void 0); },
+                title: 'Dog',
+            },
+            FISH: {
+                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: '' }, void 0); },
+                title: 'Fish',
+            },
+            OTHER: {
+                icon: function () { return jsx("img", { src: images.brokenGlass, alt: '' }, void 0); },
+                title: 'Other',
+            }
+        }, onChange: handleOnChange, value: checkedValues, optionClassName: "w30", inlineLayout: true }, void 0));
+};
+CheckboxStory.storyName = 'Checkbox';
+
+export default story;
+export { CheckboxStory, CheckboxWithCustomLabel, CheckboxWithCustomLabelStyles, CheckboxWithCustomOptionStyles, CheckboxWithCustomWrapperStyles, CheckboxWithInlineLayout };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +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":";;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,uEAAuE;YACpF,YAAY,EAAE;gBACZ,GAAG,EAAC;oBACF,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,YAAY;iBAC1B;gBACD,GAAG,EAAC;oBACF,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,YAAY;iBAC1B;gBACD,IAAI,EAAC;oBACH,KAAK,EAAE,MAAM;oBACb,WAAW,EAAE,SAAS;iBACvB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,yBAAyB;SACvC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iFAAiF;YAC9F,YAAY,EAAE,KAAK;SACpB;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,yHAAyH;YACtI,YAAY,EAAE,KAAK;SACpB;QACD,SAAS,EAAE;YACT,WAAW,EAAE,uCAAuC;YACpD,YAAY,EAAE,EAAE;SACjB;QACD,eAAe,EAAE;YACf,WAAW,EAAE,sCAAsC;YACnD,YAAY,EAAE,EAAE;SACjB;QACD,cAAc,EAAE;YACd,WAAW,EAAE,qCAAqC;YAClD,YAAY,EAAE,EAAE;SACjB;KACF;EACD;IAEW,aAAa,GAAG,UAAC,EAQN;QAPtB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,YAAY,kBAAA;IAEN,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAkB;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,WAC1B,EACF;AACJ,EAAC;IAEY,+BAA+B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAClD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,SAAS,EAAC,+BAA+B,WACzC,EACF;AACJ,EAAC;IAEY,8BAA8B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IACjD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,eAAe,EAAC,kCAAkC,WAClD,EACF;AACJ,EAAC;IAEY,6BAA6B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAChD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,cAAc,EAAC,sBAAsB,WACrC,EACF;AACJ,EAAC;IAEY,wBAAwB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAC3C,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,OAAO;SACjB,EACD,eAAe,EAAC,KAAK,EACrB,YAAY,QACZ,IAAI,iBACJ,EACF;AACJ,EAAC;IAEY,uBAAuB,GAAG,UAAC,EAAmF;QAAjF,QAAQ,cAAA,SAAM,cAAW,oBAAiB;IAC5E,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,OAAO,EAAE;YACP,MAAM,EAAE;gBACN,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBAC9C,KAAK,EAAE,KAAK;aACb;YACD,IAAI,EAAC;gBACH,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBACtD,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAC;gBACJ,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBACnD,KAAK,EAAE,OAAO;aACf;SACF,EACD,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,eAAe,EAAC,KAAK,EACrB,YAAY,iBACZ,EACF;AACJ,EAAC;AAED,aAAa,CAAC,SAAS,GAAG,UAAU;;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/checkbox/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Checkbox, CheckboxProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: CheckboxProps<string>['onChange'], value?: string[]) => {\n  const utils = render(\n    <Checkbox\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('Checkbox 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('checkbox-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('checkbox-input-CAT')).toBeChecked();\n  });\n\n  it('Should call onchange with NONE and removing other items on selecting NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['CAT', 'DOG']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([\"NONE\"]);\n  });\n\n  it('Should call onchange empty when removing NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['NONE']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([]);\n  });\n\n  it('Should render custom description', () => {\n      const { getByText } = render(\n        <Checkbox\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        <Checkbox\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        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n          value={['CAT']}\n        />\n      );\n\n    expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+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-fb46adf9.js';
+import '../../../style-inject.es-1f59c1d0.js';
+
+var formatInput = function (input) {
+    var decimalSeparator = input.includes(',') ? ',' : '.';
+    var parts = input.split(decimalSeparator);
+    var floor = parts[0];
+    var ceiling = parts[1];
+    parts[0] = floor.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    if (ceiling) {
+        parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));
+    }
+    return parts.join('.');
+};
+function reverseFormatInput(input) {
+    return Number(input.replace(/,/, '.').replace(/\s/g, ''));
+}
+
+var CurrencyInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange; _a.type; var props = __rest(_a, ["value", "onChange", "type"]);
+    var inputRef = useRef(null);
+    var _b = useState(null), cursor = _b[0], setCursor = _b[1];
+    var _c = useState(''), shadowValue = _c[0], setShadowValue = _c[1];
+    var formattedShadowValue = formatInput(shadowValue
+        .replace(/ /g, '') // remove all whitespace
+        .replace(',', '.') // change commas to dot for decimal separator
+        .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic  to remove all the but the first decimal separators 🤸
+        .replace(/\./g, '')
+        .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸
+        .replace(/[^\d\\.]/g, '') // remove all non decimal and dot
+    );
+    useEffect(function () {
+        if (value && value !== reverseFormatInput(shadowValue)) {
+            setShadowValue(formatInput(value.toString()));
+        }
+        // eslint-disable-next-line
+    }, [value]);
+    useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(reverseFormatInput(shadowValue));
+        // eslint-disable-next-line
+    }, [shadowValue]);
+    useEffect(function () {
+        if (!inputRef.current || !cursor) {
+            return;
+        }
+        var cursorDiff = String(formattedShadowValue).length - String(shadowValue).length;
+        var newCursor = cursorDiff + cursor;
+        inputRef.current.selectionStart = newCursor;
+        inputRef.current.selectionEnd = newCursor;
+    }, [cursor, formattedShadowValue, shadowValue]);
+    return (jsx(Input, __assign({ prefix: "\u20AC", ref: inputRef, type: "string", value: formattedShadowValue, onChange: function (e) {
+            setCursor(e.target.selectionStart);
+            setShadowValue(e.target.value);
+        } }, props), void 0));
+};
+
+export default CurrencyInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n  const decimalSeparator = input.includes(',') ? ',' : '.';\n  const parts = input.split(decimalSeparator);\n  const floor = parts[0];\n  const ceiling = parts[1];\n  parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n  if (ceiling) {\n    parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n  }\n  return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n  return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport Input, { InputProps } from '..';\n\nconst CurrencyInput = ({\n  value,\n  onChange,\n  type,\n  ...props\n}: {\n  value?: number;\n  placeholder?: string;\n  onChange?: (value: number) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [cursor, setCursor] = useState<number | null>(null);\n  const [shadowValue, setShadowValue] = useState('');\n\n  const formattedShadowValue = formatInput(\n    shadowValue\n      .replace(/ /g, '') // remove all whitespace\n      .replace(',', '.') // change commas to dot for decimal separator\n      .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic  to remove all the but the first decimal separators 🤸\n      .replace(/\\./g, '')\n      .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸\n      .replace(/[^\\d\\\\.]/g, '') // remove all non decimal and dot\n  );\n\n  useEffect(() => {\n    if (value && value !== reverseFormatInput(shadowValue)) {\n      setShadowValue(formatInput(value.toString()));\n    }\n    // eslint-disable-next-line\n  }, [value]);\n\n  useEffect(() => {\n    onChange?.(reverseFormatInput(shadowValue));\n    // eslint-disable-next-line\n  }, [shadowValue]);\n\n  useEffect(() => {\n    if (!inputRef.current || !cursor) {\n      return;\n    }\n\n    const cursorDiff =  String(formattedShadowValue).length - String(shadowValue).length;\n    const newCursor = cursorDiff + cursor;\n\n    inputRef.current.selectionStart = newCursor;\n    inputRef.current.selectionEnd = newCursor;\n  },[cursor, formattedShadowValue, shadowValue])\n\n  return (\n    <Input\n      prefix=\"€\"\n      ref={inputRef}\n      type=\"string\"\n      value={formattedShadowValue}\n      onChange={(e) => {\n        setCursor(e.target.selectionStart);\n        setShadowValue(e.target.value);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default CurrencyInput;\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,209 @@
+import { b as __awaiter, c as __generator, _ as __assign } from '../../../tslib.es6-5bc94358.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender } from '../../../customRender-4157fcff.js';
+import CurrencyInput from './index.js';
+import 'react';
+import 'react-dom';
+import '../../../_commonjsHelpers-e7f67fd8.js';
+import 'react-dom/test-utils';
+import '../index.js';
+import '../../../index-e9e37a34.js';
+import '../../../index-fb46adf9.js';
+import '../../../style-inject.es-1f59c1d0.js';
+
+var setup = function () {
+    var utils = customRender(jsx(CurrencyInput, {}, void 0));
+    var input = utils.getByTestId('ds-input-input');
+    return __assign({ input: input }, utils);
+};
+describe('Currency input component', function () {
+    it('Should correctly space thousands separators', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234567')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should remove non numerical values', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123asdf4567')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should remove non numerical values', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123asdf4567')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should allow decimal separator', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234567.34')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567.34');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should replace comma decimal seprator with a dot', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234567,34')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567.34');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should only allow one decimal separator', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234567..34')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567.34');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should only allow one decimal separator after a sequence of number', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234567..34.4')];
+                case 1:
+                    _b.sent();
+                    expect(input.value).toBe('1 234 567.34');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when no spaces are added', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123')];
+                case 1:
+                    _b.sent();
+                    // Should be: 123|
+                    expect(input.selectionStart).toBe(3);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when spaces are added', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '1234')];
+                case 1:
+                    _b.sent();
+                    // Should be: 123 4|
+                    expect(input.selectionStart).toBe(5);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when typing in middle of input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123{arrowleft}4')];
+                case 1:
+                    _b.sent();
+                    // Should be: 1 24|3
+                    expect(input.selectionStart).toBe(4);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when typing in beginning of input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123{arrowleft}{arrowleft}{arrowleft}4')];
+                case 1:
+                    _b.sent();
+                    // Should be: 4 |123
+                    expect(input.selectionStart).toBe(2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when typing in input and has currency values', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '123.2{arrowleft}{arrowleft}{arrowleft}24')];
+                case 1:
+                    _b.sent();
+                    // Should be: 12 24|3.2
+                    expect(input.selectionStart).toBe(5);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should have correct selection start when deleting', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, input, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup(), input = _a.input, user = _a.user;
+                    return [4 /*yield*/, user.type(input, '12345{arrowleft}{backspace}67')];
+                case 1:
+                    _b.sent();
+                    // Should be: 123 67|5
+                    expect(input.selectionStart).toBe(6);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=index.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/currency/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport CurrencyInput from '.';\n\nconst setup = () => {\n  const utils = render(<CurrencyInput />);\n  const input = utils.getByTestId('ds-input-input') as HTMLInputElement;\n  return {\n    input,\n    ...utils,\n  };\n};\n\ndescribe('Currency input component', () => {\n  it('Should correctly space thousands separators', async () => {\n    const { input, user } = setup();\n    await user.type(input, '1234567');\n    expect(input.value).toBe('1 234 567');\n  });\n\n  it('Should remove non numerical values', async () => {\n    const { input, user } = setup();\n    await user.type(input, '123asdf4567');\n    expect(input.value).toBe('1 234 567');\n  });\n\n  it('Should remove non numerical values', async () => {\n    const { input, user } = setup();\n    await user.type(input, '123asdf4567');\n    expect(input.value).toBe('1 234 567');\n  });\n\n  it('Should allow decimal separator', async () => {\n    const { input, user } = setup();\n    await user.type(input, '1234567.34');\n    expect(input.value).toBe('1 234 567.34');\n  });\n\n  it('Should replace comma decimal seprator with a dot', async () => {\n    const { input, user } = setup();\n    await user.type(input, '1234567,34');\n    expect(input.value).toBe('1 234 567.34');\n  });\n\n  it('Should only allow one decimal separator', async () => {\n    const { input, user } = setup();\n    await user.type(input, '1234567..34');\n    expect(input.value).toBe('1 234 567.34');\n  });\n\n  it('Should only allow one decimal separator after a sequence of number', async () => {\n    const { input, user } = setup();\n    await user.type(input, '1234567..34.4');\n    expect(input.value).toBe('1 234 567.34');\n  });\n\n  it('Should have correct selection start when no spaces are added', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '123');\n    // Should be: 123|\n    expect(input.selectionStart).toBe(3);\n  });\n\n  it('Should have correct selection start when spaces are added', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '1234');\n    // Should be: 123 4|\n    expect(input.selectionStart).toBe(5);\n  });\n\n  it('Should have correct selection start when typing in middle of input', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '123{arrowleft}4');\n\n    // Should be: 1 24|3\n    expect(input.selectionStart).toBe(4);\n  });\n\n  it('Should have correct selection start when typing in beginning of input', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '123{arrowleft}{arrowleft}{arrowleft}4');\n\n    // Should be: 4 |123\n    expect(input.selectionStart).toBe(2);\n  });\n\n  it('Should have correct selection start when typing in input and has currency values', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '123.2{arrowleft}{arrowleft}{arrowleft}24');\n\n    // Should be: 12 24|3.2\n    expect(input.selectionStart).toBe(5);\n  });\n\n  it('Should have correct selection start when deleting', async () => {\n    const { input, user } = setup();\n\n    await user.type(input, '12345{arrowleft}{backspace}67');\n\n    // Should be: 123 67|5\n    expect(input.selectionStart).toBe(6);\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+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-fb46adf9.js';
+import '../../../style-inject.es-1f59c1d0.js';
+
+var IBAN_CHAR_LIMIT = 4;
+var formatIban = function (iban) {
+    if (iban) {
+        var cleanIban_1 = iban
+            .replace(/\s\s+/g, ' ')
+            .replace(/[^0-9a-zA-Z]/gi, '')
+            .toUpperCase();
+        var values_1 = [];
+        cleanIban_1.split('').forEach(function (char, idx) {
+            if (idx % IBAN_CHAR_LIMIT === 0) {
+                values_1.push(cleanIban_1.substring(idx, idx + IBAN_CHAR_LIMIT));
+            }
+        });
+        return values_1.join(' ');
+    }
+    return '';
+};
+
+var IbanInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
+    return (jsx(Input, __assign({ value: formatIban(value), onChange: function (e) { return onChange(formatIban(e.target.value)); } }, props), void 0));
+};
+
+export default IbanInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/iban/formatIban/index.ts","../../../../../../src/lib/components/input/iban/index.tsx"],"sourcesContent":["const IBAN_CHAR_LIMIT = 4;\n\nexport const formatIban = (iban?: string): string => {\n  if (iban) {\n    const cleanIban = iban\n      .replace(/\\s\\s+/g, ' ')\n      .replace(/[^0-9a-zA-Z]/gi, '')\n      .toUpperCase();\n\n    const values: string[] = [];\n\n    cleanIban.split('').forEach((char, idx) => {\n      if (idx % IBAN_CHAR_LIMIT === 0) {\n        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));\n      }\n    });\n\n    return values.join(' ');\n  }\n\n  return '';\n};\n","import Input, { InputProps } from '..';\n\nimport { formatIban } from './formatIban';\n\nconst IbanInput = ({\n  value,\n  onChange,\n  ...props\n}: {\n  value?: string;\n  onChange: (value: string) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (\n  <Input\n    value={formatIban(value)}\n    onChange={(e) => onChange(formatIban(e.target.value))}\n    {...props}\n  />\n);\n\nexport default IbanInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,CAAC;AAEnB,IAAM,UAAU,GAAG,UAAC,IAAa;IACtC,IAAI,IAAI,EAAE;QACR,IAAM,WAAS,GAAG,IAAI;aACnB,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;aACtB,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;aAC7B,WAAW,EAAE,CAAC;QAEjB,IAAM,QAAM,GAAa,EAAE,CAAC;QAE5B,WAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,GAAG;YACpC,IAAI,GAAG,GAAG,eAAe,KAAK,CAAC,EAAE;gBAC/B,QAAM,CAAC,IAAI,CAAC,WAAS,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,eAAe,CAAC,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;QAEH,OAAO,QAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;;ICjBK,SAAS,GAAG,UAAC,EAO+B;IANhD,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,KAAK,cAHS,qBAIlB,CADS;IAI6C,QACrDA,IAAC,KAAK,aACJ,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,IACjD,KAAK,UACT,EACH;;;;;"}