@popsure/dirty-swan 0.32.0 → 0.33.1

package/dist/cjs/lib/components/downloadButton/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { DownloadStatus } from '../../models/download';
-interface Props {
+export interface DownloadButtonProps {
     downloadStatus: DownloadStatus;
     onDownload: () => void;
     className?: string;
     customFail?: React.ReactNode;
 }
-declare const DownloadButton: ({ downloadStatus, onDownload, className, customFail, }: Props) => JSX.Element;
-export default DownloadButton;
+declare const DownloadButton: ({ downloadStatus, onDownload, className, customFail, }: DownloadButtonProps) => JSX.Element;
+export { DownloadButton };

package/dist/cjs/lib/components/downloadButton/index.stories.d.ts

@@ -0,0 +1,36 @@
+import { DownloadButtonProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ downloadStatus, onDownload, className, customFail, }: DownloadButtonProps) => JSX.Element;
+    argTypes: {
+        downloadStatus: {
+            description: string;
+            defaultValue: string;
+        };
+        customFail: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        onDownload: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        className: {
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const DownloadButtonStory: {
+    ({ downloadStatus, onDownload, className, customFail }: DownloadButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const CustomErrorMessage: ({ onDownload, }: DownloadButtonProps) => JSX.Element;
+export default story;

package/dist/cjs/lib/components/input/checkbox/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+export interface CheckboxWithDescription {
+    title: string;
+    description?: string;
+    icon?: (selected: boolean) => ReactNode;
+}
+export interface CheckboxProps<ValueType extends string> {
+    options: Record<ValueType, string | CheckboxWithDescription>;
+    value?: ValueType[];
+    onChange: (value: ValueType[]) => void;
+    wide?: boolean;
+    inlineLayout?: boolean;
+    className?: string;
+    labelClassName?: string;
+    optionClassName?: string;
+}
+export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, className, labelClassName, optionClassName, }: CheckboxProps<ValueType>) => JSX.Element;

package/dist/cjs/lib/components/input/checkbox/index.stories.d.ts

@@ -0,0 +1,64 @@
+import { CheckboxProps } from '.';
+declare const story: {
+    title: string;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, className, labelClassName, optionClassName, }: CheckboxProps<ValueType>) => JSX.Element;
+    argTypes: {
+        options: {
+            description: string;
+            defaultValue: {
+                CAT: {
+                    title: string;
+                    description: string;
+                };
+                DOG: {
+                    title: string;
+                    description: string;
+                };
+                NONE: {
+                    title: string;
+                    description: string;
+                };
+            };
+        };
+        value: {
+            description: string;
+        };
+        onChange: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        wide: {
+            description: string;
+            defaultValue: boolean;
+        };
+        inlineLayout: {
+            description: string;
+            defaultValue: boolean;
+        };
+        className: {
+            description: string;
+            defaultValue: string;
+        };
+        optionClassName: {
+            description: string;
+            defaultValue: string;
+        };
+        labelClassName: {
+            description: string;
+            defaultValue: string;
+        };
+    };
+};
+export declare const CheckboxStory: {
+    ({ onChange, options, wide, className, optionClassName, labelClassName, inlineLayout, }: CheckboxProps<string>): JSX.Element;
+    storyName: string;
+};
+export declare const CheckboxWithCustomWrapperStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomOptionStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabelStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithInlineLayout: ({ onChange }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabel: ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => JSX.Element;
+export default story;

package/dist/cjs/lib/components/input/checkbox/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/lib/components/markdown/index.d.ts

@@ -1,9 +1,10 @@
-import React, { FunctionComponent } from 'react';
-declare const Markdown: ({ children, customMDComponents, className, openLinksInNewTab, paragraphClassName, }: {
+import { FunctionComponent } from 'react';
+export interface MarkdownProps {
     children: string;
-    customMDComponents?: Record<string, React.FunctionComponent<any>> | undefined;
-    className?: string | undefined;
-    openLinksInNewTab?: boolean | undefined;
-    paragraphClassName?: string | undefined;
-}) => JSX.Element;
-export default Markdown;
+    customMDComponents?: Record<string, FunctionComponent<any>>;
+    className?: string;
+    openLinksInNewTab?: boolean;
+    paragraphClassName?: string;
+}
+declare const Markdown: ({ children, customMDComponents, className, openLinksInNewTab, paragraphClassName, }: MarkdownProps) => JSX.Element;
+export { Markdown };

package/dist/cjs/lib/components/markdown/index.stories.d.ts

@@ -0,0 +1,44 @@
+import { MarkdownProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ children, customMDComponents, className, openLinksInNewTab, paragraphClassName, }: MarkdownProps) => JSX.Element;
+    argTypes: {
+        children: {
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            description: string;
+        };
+        customMDComponents: {
+            defaultValue: {};
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        paragraphClassName: {
+            defaultValue: string;
+            description: string;
+        };
+        openLinksInNewTab: {
+            defaultValue: boolean;
+            description: string;
+        };
+    };
+    args: {
+        children: string;
+    };
+    parameters: {
+        componentSubtitle: JSX.Element;
+    };
+};
+export declare const MarkdownStory: {
+    ({ children, className }: MarkdownProps): JSX.Element;
+    storyName: string;
+};
+export declare const AvailableMDComponents: ({ className }: MarkdownProps) => JSX.Element;
+export declare const AddingCustomComponents: ({ className }: MarkdownProps) => JSX.Element;
+export default story;

package/dist/cjs/lib/components/signaturePad/index.d.ts

@@ -1,19 +1,19 @@
 import { Component } from 'react';
-interface Props {
+export interface SignaturePadProps {
     onChange: (base64signature: string) => void;
 }
 interface State {
     hasContent: boolean;
 }
-declare class Signature extends Component<Props, State> {
+declare class SignaturePad extends Component<SignaturePadProps, State> {
     private canvasRef;
     private canvas;
     private signaturePad;
-    constructor(props: Props);
+    constructor(props: SignaturePadProps);
     componentDidMount(): void;
     render(): JSX.Element;
     private notifyOnChange;
     private resizeCanvas;
     private clear;
 }
-export default Signature;
+export { SignaturePad };

package/dist/cjs/lib/components/signaturePad/index.stories.d.ts

@@ -0,0 +1,21 @@
+import { SignaturePad, SignaturePadProps } from '.';
+declare const story: {
+    title: string;
+    component: typeof SignaturePad;
+    argTypes: {
+        onChange: {
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const SignaturePadStory: {
+    ({ onChange, }: SignaturePadProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/cjs/lib/index.d.ts

@@ -1,11 +1,12 @@
 import DateSelector from './components/dateSelector';
-import SignaturePad from './components/signaturePad';
+import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
 import MultiDropzone, { FileType, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
-import DownloadButton from './components/downloadButton';
+import { DownloadButton } from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
+import { Checkbox } from './components/input/checkbox';
 import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
 import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
 import Button from './components/button';
@@ -14,8 +15,8 @@ import Chip from './components/chip';
 import AutoSuggestInput from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import Markdown from './components/markdown';
+import { Markdown } from './components/markdown';
 import { images } from './util/images';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, images, };
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, images, };
 export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };
 export type { DownloadStatus } from './models/download';

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

@@ -32,5 +32,5 @@ var DownloadButton = function (_a) {
             downloadStatus === 'FAILED' && (jsx("div", __assign({ className: "p-notice p-notice--danger p-p mt40 wmx5" }, { children: customFail !== null && customFail !== void 0 ? customFail : 'An error occured when generating documents. Please try again or contact us.' }), void 0))] }), void 0));
 };
 
-export default DownloadButton;
+export { DownloadButton };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/lib/components/downloadButton/icons/check.svg","../../../../src/lib/components/downloadButton/icons/download.svg","../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.6666%205.83203L7.49992%2014.9987L3.33325%2010.832%22%20stroke%3D%22%23B4B4BA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%2012.5V15.8333C18%2016.2754%2017.8244%2016.6993%2017.5118%2017.0118C17.1993%2017.3244%2016.7754%2017.5%2016.3333%2017.5H4.66667C4.22464%2017.5%203.80072%2017.3244%203.48816%2017.0118C3.17559%2016.6993%203%2016.2754%203%2015.8333V12.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.33325%208.33301L10.4999%2012.4997L14.6666%208.33301%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.5%2012.5V2.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import Button from '../button';\nimport { DownloadStatus } from '../../models/download';\n\nimport checkIcon from './icons/check.svg';\nimport downloadIcon from './icons/download.svg';\nimport styles from './style.module.scss';\n\ninterface Props {\n  downloadStatus: DownloadStatus;\n  onDownload: () => void;\n  className?: string;\n  customFail?: React.ReactNode;\n}\n\nconst InitialButton = ({ onDownload }: { onDownload: () => void }) => (\n  <Button\n    className={`w100 ${styles.button}`}\n    buttonTitle=\"Download\"\n    leftIcon={{ src: downloadIcon, alt: 'download arrow icon' }}\n    onClick={onDownload}\n    data-cy=\"download-documents-button\"\n  />\n);\n\n// TODO: Allow setting loading to true to display text\nconst GeneratingButton = () => (\n  <Button\n    className={`w100 ${styles.button}`}\n    buttonTitle=\"Generating\"\n    loading={true}\n  />\n);\n\nconst CompletedChip = () => (\n  <div className={styles['chip-complete']}>\n    <img src={checkIcon} alt=\"grey check\" />\n    <div className=\"p-h4 tc-grey-500 ml8\">Download complete</div>\n  </div>\n);\n\nconst DownloadButton = ({\n  downloadStatus,\n  onDownload,\n  className = '',\n  customFail,\n}: Props) => {\n  const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {\n    INITIAL: <InitialButton onDownload={onDownload} />,\n    GENERATING: <GeneratingButton />,\n    COMPLETED: <CompletedChip />,\n    FAILED: <InitialButton onDownload={onDownload} />,\n  };\n\n  return (\n    <div className={`d-flex fd-column ai-center ${className}`}>\n      <div className=\"ws4\">{mapDownloadButton[downloadStatus]}</div>\n      {downloadStatus === 'FAILED' && (\n        <div className=\"p-notice p-notice--danger p-p mt40 wmx5\">\n          {customFail ??\n            'An error occured when generating documents. Please try again or contact us.'}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default DownloadButton;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAAA,gBAAe;;ACAf,mBAAe;;;;;;ACcf,IAAM,aAAa,GAAG,UAAC,EAA0C;QAAxC,UAAU,gBAAA;IAAmC,QACpEA,IAAC,MAAM,IACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,WAAW,EAAC,UAAU,EACtB,QAAQ,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,EAAE,EAC3D,OAAO,EAAE,UAAU,aACX,2BAA2B,WACnC;AAPkE,CAQrE,CAAC;AAEF;AACA,IAAM,gBAAgB,GAAG,cAAM,QAC7BA,IAAC,MAAM,IACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,WAAW,EAAC,YAAY,EACxB,OAAO,EAAE,IAAI,WACb,IACH,CAAC;AAEF,IAAM,aAAa,GAAG,cAAM,QAC1BC,uBAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,iBACrCD,aAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,YAAY,WAAG;QACxCA,sBAAK,SAAS,EAAC,sBAAsB,+CAAwB,aACzD,IACP,CAAC;IAEI,cAAc,GAAG,UAAC,EAKhB;QAJN,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,UAAU,gBAAA;IAEV,IAAM,iBAAiB,GAA+C;QACpE,OAAO,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,WAAI;QAClD,UAAU,EAAEA,IAAC,gBAAgB,aAAG;QAChC,SAAS,EAAEA,IAAC,aAAa,aAAG;QAC5B,MAAM,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,WAAI;KAClD,CAAC;IAEF,QACEC,uBAAK,SAAS,EAAE,gCAA8B,SAAW,iBACvDD,sBAAK,SAAS,EAAC,KAAK,gBAAE,iBAAiB,CAAC,cAAc,CAAC,YAAO;YAC7D,cAAc,KAAK,QAAQ,KAC1BA,sBAAK,SAAS,EAAC,yCAAyC,gBACrD,UAAU,aAAV,UAAU,cAAV,UAAU,GACT,6EAA6E,YAC3E,CACP,aACG,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/lib/components/downloadButton/icons/check.svg","../../../../src/lib/components/downloadButton/icons/download.svg","../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.6666%205.83203L7.49992%2014.9987L3.33325%2010.832%22%20stroke%3D%22%23B4B4BA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%2012.5V15.8333C18%2016.2754%2017.8244%2016.6993%2017.5118%2017.0118C17.1993%2017.3244%2016.7754%2017.5%2016.3333%2017.5H4.66667C4.22464%2017.5%203.80072%2017.3244%203.48816%2017.0118C3.17559%2016.6993%203%2016.2754%203%2015.8333V12.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.33325%208.33301L10.4999%2012.4997L14.6666%208.33301%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.5%2012.5V2.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import Button from '../button';\nimport { DownloadStatus } from '../../models/download';\n\nimport checkIcon from './icons/check.svg';\nimport downloadIcon from './icons/download.svg';\nimport styles from './style.module.scss';\n\nexport interface DownloadButtonProps {\n  downloadStatus: DownloadStatus;\n  onDownload: () => void;\n  className?: string;\n  customFail?: React.ReactNode;\n}\n\nconst InitialButton = ({ onDownload }: { onDownload: () => void }) => (\n  <Button\n    className={`w100 ${styles.button}`}\n    buttonTitle=\"Download\"\n    leftIcon={{ src: downloadIcon, alt: 'download arrow icon' }}\n    onClick={onDownload}\n    data-cy=\"download-documents-button\"\n  />\n);\n\n// TODO: Allow setting loading to true to display text\nconst GeneratingButton = () => (\n  <Button\n    className={`w100 ${styles.button}`}\n    buttonTitle=\"Generating\"\n    loading={true}\n  />\n);\n\nconst CompletedChip = () => (\n  <div className={styles['chip-complete']}>\n    <img src={checkIcon} alt=\"grey check\" />\n    <div className=\"p-h4 tc-grey-500 ml8\">Download complete</div>\n  </div>\n);\n\nconst DownloadButton = ({\n  downloadStatus,\n  onDownload,\n  className = '',\n  customFail,\n}: DownloadButtonProps) => {\n  const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {\n    INITIAL: <InitialButton onDownload={onDownload} />,\n    GENERATING: <GeneratingButton />,\n    COMPLETED: <CompletedChip />,\n    FAILED: <InitialButton onDownload={onDownload} />,\n  };\n\n  return (\n    <div className={`d-flex fd-column ai-center ${className}`}>\n      <div className=\"ws4\">{mapDownloadButton[downloadStatus]}</div>\n      {downloadStatus === 'FAILED' && (\n        <div className=\"p-notice p-notice--danger p-p mt40 wmx5\">\n          {customFail ??\n            'An error occured when generating documents. Please try again or contact us.'}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { DownloadButton };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAAA,gBAAe;;ACAf,mBAAe;;;;;;ACcf,IAAM,aAAa,GAAG,UAAC,EAA0C;QAAxC,UAAU,gBAAA;IAAmC,QACpEA,IAAC,MAAM,IACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,WAAW,EAAC,UAAU,EACtB,QAAQ,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,EAAE,EAC3D,OAAO,EAAE,UAAU,aACX,2BAA2B,WACnC;AAPkE,CAQrE,CAAC;AAEF;AACA,IAAM,gBAAgB,GAAG,cAAM,QAC7BA,IAAC,MAAM,IACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,WAAW,EAAC,YAAY,EACxB,OAAO,EAAE,IAAI,WACb,IACH,CAAC;AAEF,IAAM,aAAa,GAAG,cAAM,QAC1BC,uBAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,iBACrCD,aAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,YAAY,WAAG;QACxCA,sBAAK,SAAS,EAAC,sBAAsB,+CAAwB,aACzD,IACP,CAAC;IAEI,cAAc,GAAG,UAAC,EAKF;QAJpB,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,UAAU,gBAAA;IAEV,IAAM,iBAAiB,GAA+C;QACpE,OAAO,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,WAAI;QAClD,UAAU,EAAEA,IAAC,gBAAgB,aAAG;QAChC,SAAS,EAAEA,IAAC,aAAa,aAAG;QAC5B,MAAM,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,WAAI;KAClD,CAAC;IAEF,QACEC,uBAAK,SAAS,EAAE,gCAA8B,SAAW,iBACvDD,sBAAK,SAAS,EAAC,KAAK,gBAAE,iBAAiB,CAAC,cAAc,CAAC,YAAO;YAC7D,cAAc,KAAK,QAAQ,KAC1BA,sBAAK,SAAS,EAAC,yCAAyC,gBACrD,UAAU,aAAV,UAAU,cAAV,UAAU,GACT,6EAA6E,YAC3E,CACP,aACG,EACN;AACJ;;;;"}

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

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { DownloadButton } from './index.js';
+import '../../tslib.es6-5bc94358.js';
+import '../button/index.js';
+import 'react';
+import '../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/DownloadButton',
+    component: DownloadButton,
+    argTypes: {
+        downloadStatus: {
+            description: 'Status of the button',
+            defaultValue: 'INITIAL',
+        },
+        customFail: {
+            description: 'Customised error message. Only visible when button is on `FAILED` state.',
+            control: { type: 'text' },
+        },
+        onDownload: {
+            description: 'Called when download button has been clicked.',
+            action: true,
+            table: {
+                category: 'Callbacks',
+            },
+        },
+        className: {
+            description: 'This property allows to add custom styles to the component.',
+        }
+    },
+    parameters: {
+        componentSubtitle: 'DownloadButton component displays progress and status of downloading files.',
+    },
+};
+var DownloadButtonStory = function (_a) {
+    var downloadStatus = _a.downloadStatus, onDownload = _a.onDownload, className = _a.className, customFail = _a.customFail;
+    return (jsx(DownloadButton, { className: className, customFail: customFail, downloadStatus: downloadStatus, onDownload: onDownload }, void 0));
+};
+DownloadButtonStory.storyName = "DownloadButton";
+var CustomErrorMessage = function (_a) {
+    var onDownload = _a.onDownload;
+    return (jsx(DownloadButton, { customFail: "Custom error message", downloadStatus: "FAILED", onDownload: onDownload }, void 0));
+};
+
+export default story;
+export { CustomErrorMessage, DownloadButtonStory };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/downloadButton/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/downloadButton/index.stories.tsx"],"sourcesContent":["import { DownloadButton, DownloadButtonProps } from '.';\n\nconst story = {\n  title: 'JSX/DownloadButton',\n  component: DownloadButton,\n  argTypes: {\n    downloadStatus: {\n      description: 'Status of the button',\n      defaultValue: 'INITIAL',\n    },\n    customFail: {\n      description: 'Customised error message. Only visible when button is on `FAILED` state.',\n      control: { type: 'text' },\n    },\n    onDownload: {\n      description: 'Called when download button has been clicked.',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    className: {\n      description: 'This property allows to add custom styles to the component.',\n    }\n  },\n  parameters: {\n    componentSubtitle: 'DownloadButton component displays progress and status of downloading files.',\n  },\n};\n\nexport const DownloadButtonStory = ({\n  downloadStatus,\n  onDownload,\n  className,\n  customFail\n}: DownloadButtonProps) => (\n  <DownloadButton\n    className={className}\n    customFail={customFail}\n    downloadStatus={downloadStatus}\n    onDownload={onDownload}\n  />\n);\n\nDownloadButtonStory.storyName = \"DownloadButton\";\n\nexport const CustomErrorMessage = ({\n    onDownload,\n}: DownloadButtonProps) => (\n  <DownloadButton\n    customFail=\"Custom error message\"\n    downloadStatus=\"FAILED\"\n    onDownload={onDownload}\n  />\n);\n\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,WAAW,EAAE,sBAAsB;YACnC,YAAY,EAAE,SAAS;SACxB;QACD,UAAU,EAAE;YACV,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,WAAW,EAAE,+CAA+C;YAC5D,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,6DAA6D;SAC3E;KACF;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,6EAA6E;KACjG;EACD;IAEW,mBAAmB,GAAG,UAAC,EAKd;QAJpB,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA;IACe,QACzBA,IAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,WACtB;AANuB,EAOzB;AAEF,mBAAmB,CAAC,SAAS,GAAG,gBAAgB,CAAC;IAEpC,kBAAkB,GAAG,UAAC,EAEb;QADlB,UAAU,gBAAA;IACa,QACzBA,IAAC,cAAc,IACb,UAAU,EAAC,sBAAsB,EACjC,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAE,UAAU,WACtB;AALuB;;;;;"}

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

@@ -0,0 +1,53 @@
+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';
+
+var Checkbox = function (_a) {
+    var options = _a.options, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.labelClassName, labelClassName = _f === void 0 ? '' : _f, _g = _a.optionClassName, optionClassName = _g === void 0 ? '' : _g;
+    var hasNoneValue = Object.keys(options).includes('NONE');
+    var handleOnChange = function (newValue) {
+        if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
+            var filteredCheckboxValues = value.filter(function (selectedValue) { return selectedValue !== newValue; });
+            onChange(filteredCheckboxValues);
+            return;
+        }
+        if (hasNoneValue && newValue === 'NONE') {
+            onChange([newValue]);
+            return;
+        }
+        if (hasNoneValue && newValue !== 'NONE') {
+            var newValues_1 = value
+                ? __spreadArray(__spreadArray([], value.filter(function (v) { return v !== 'NONE'; })), [newValue]) : [newValue];
+            onChange(newValues_1);
+            return;
+        }
+        var newValues = value
+            ? __spreadArray(__spreadArray([], value), [newValue]) : [newValue];
+        onChange(newValues);
+    };
+    var entries = Object.entries(options);
+    return (jsx("div", __assign({ className: classnames(className, 'd-flex gap8', {
+            ws10: wide,
+            ws6: !wide,
+            'fd-row': inlineLayout,
+            'f-wrap': inlineLayout,
+            'fd-column': !inlineLayout,
+        }) }, { children: entries.map(function (_a) {
+            var _b;
+            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", {
+                            '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', {
+                            '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)),
+                            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 { Checkbox };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\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, 'd-flex gap8', {\n        ws10: wide,\n        ws6: !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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"}

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":"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"}