@popsure/dirty-swan 0.41.0-alpha → 0.41.0-alpha.2

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

@@ -1,13 +1,12 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Button from '../button/index.js';
+import { Button } from '../button/index.js';
 import CheckIcon from '../icon/icons/Check.js';
+import DownloadIcon from '../icon/icons/Download.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+import '../../index-6ea95111.js';
 import 'react';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../index-6ea95111.js';
-
-var downloadIcon = "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";
 
 var css_248z = ".style-module_button__mw9kQ {\n  height: 48px;\n}\n\n.style-module_chip-complete__3YkB9 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  border-radius: 8px;\n  padding: 8px 16px;\n  height: 48px;\n}";
 var styles = {"button":"style-module_button__mw9kQ","chip-complete":"style-module_chip-complete__3YkB9"};
@@ -15,10 +14,10 @@ styleInject(css_248z);
 
 var InitialButton = function (_a) {
     var onDownload = _a.onDownload;
-    return (jsx(Button, { className: "w100 " + styles.button, buttonTitle: "Download", leftIcon: { src: downloadIcon, alt: 'download arrow icon' }, onClick: onDownload, "data-cy": "download-documents-button" }, void 0));
+    return (jsx(Button, __assign({ className: "w100 " + styles.button, leftIcon: jsx(DownloadIcon, {}, void 0), onClick: onDownload, "data-cy": "download-documents-button" }, { children: "Download" }), void 0));
 };
 // TODO: Allow setting loading to true to display text
-var GeneratingButton = function () { return (jsx(Button, { className: "w100 " + styles.button, buttonTitle: "Generating", loading: true }, void 0)); };
+var GeneratingButton = function () { return (jsx(Button, __assign({ className: "w100 " + styles.button, loading: true }, { children: "Generating" }), void 0)); };
 var CompletedChip = function () { return (jsxs("div", __assign({ className: styles['chip-complete'] }, { children: [jsx(CheckIcon, { color: 'grey-500', size: 16 }, void 0),
         jsx("div", __assign({ className: "p-h4 tc-grey-500 ml8" }, { children: "Download complete" }), void 0)] }), void 0)); };
 var DownloadButton = function (_a) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/lib/components/downloadButton/icons/download.svg","../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["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';\nimport downloadIcon from './icons/download.svg';\nimport { CheckIcon } from '../icon/icons';\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    <CheckIcon color={'grey-500'} size={16} />\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,mBAAe;;;;;;ACaf,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,IAAC,SAAS,IAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,WAAI;QAC1CA,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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["import { Button } from '../button';\nimport { DownloadStatus } from '../../models/download';\nimport { CheckIcon, DownloadIcon } from '../icon/icons';\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    leftIcon={<DownloadIcon />}\n    onClick={onDownload}\n    data-cy=\"download-documents-button\"\n  >\n    Download\n  </Button>\n);\n\n// TODO: Allow setting loading to true to display text\nconst GeneratingButton = () => (\n  <Button\n    className={`w100 ${styles.button}`}\n    loading={true}\n  >\n    Generating\n  </Button>\n);\n\nconst CompletedChip = () => (\n  <div className={styles['chip-complete']}>\n    <CheckIcon color={'grey-500'} size={16} />\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":";;;;;;;;;;;;;;AAYA,IAAM,aAAa,GAAG,UAAC,EAA0C;QAAxC,UAAU,gBAAA;IAAmC,QACpEA,IAAC,MAAM,aACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,QAAQ,EAAEA,IAAC,YAAY,aAAG,EAC1B,OAAO,EAAE,UAAU,aACX,2BAA2B,sCAG5B;AAR2D,CASrE,CAAC;AAEF;AACA,IAAM,gBAAgB,GAAG,cAAM,QAC7BA,IAAC,MAAM,aACL,SAAS,EAAE,UAAQ,MAAM,CAAC,MAAQ,EAClC,OAAO,EAAE,IAAI,wCAGN,IACV,CAAC;AAEF,IAAM,aAAa,GAAG,cAAM,QAC1BC,uBAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,iBACrCD,IAAC,SAAS,IAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,WAAI;QAC1CA,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

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import { DownloadButton } from './index.js';
 import '../../tslib.es6-5bc94358.js';
 import '../button/index.js';
+import '../../index-6ea95111.js';
 import 'react';
-import '../../style-inject.es-1f59c1d0.js';
 import '../icon/icons/Check.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../index-6ea95111.js';
+import '../../style-inject.es-1f59c1d0.js';
+import '../icon/icons/Download.js';
 
 var story = {
     title: 'JSX/DownloadButton',

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

@@ -1 +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;;;;;"}
+{"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/icon/icons/Download.js

@@ -5,9 +5,9 @@ import '../../../tslib.es6-5bc94358.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
-var Download = (function (props) {
+var DownloadIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M3 14v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5" }, void 0), jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 2, d: "m7 10 4.823 4.823a.25.25 0 0 0 .354 0L17 10M12 3v12" }, void 0));
 });
 
-export default Download;
+export default DownloadIcon;
 //# sourceMappingURL=Download.js.map

package/dist/esm/components/icon/icons/Download.js.map

@@ -1 +1 @@
-{"version":3,"file":"Download.js","sources":["../../../../../../src/lib/components/icon/icons/Download.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeMiterlimit={10}\n      strokeWidth={2}\n      d=\"M3 14v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5\"\n    />,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeWidth={2}\n      d=\"m7 10 4.823 4.823a.25.25 0 0 0 .354 0L17 10M12 3v12\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,gBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,EAAE,EACpB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,2CAA2C,WAC7C,EACFA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,qDAAqD,WACvD,CACH;AAhBD,CAgBC;;;;"}
+{"version":3,"file":"Download.js","sources":["../../../../../../src/lib/components/icon/icons/Download.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeMiterlimit={10}\n      strokeWidth={2}\n      d=\"M3 14v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5\"\n    />,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeWidth={2}\n      d=\"m7 10 4.823 4.823a.25.25 0 0 0 .354 0L17 10M12 3v12\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,oBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,EAAE,EACpB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,2CAA2C,WAC7C,EACFA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,qDAAqD,WACvD,CACH;AAhBD,CAgBC;;;;"}

package/dist/esm/components/icon/icons.stories.js

@@ -2,8 +2,8 @@ import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from '../input/index.js';
-import { i as icons } from '../../index-b4cd59e9.js';
-import Button from '../button/index.js';
+import { i as icons } from '../../index-39fa3631.js';
+import { Button } from '../button/index.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import '../../index-fb46adf9.js';
@@ -399,7 +399,7 @@ var IconsList = function () {
         }));
     };
     return (jsxs("div", { children: [jsx("div", __assign({ className: classNames(styles.searchBar, 'bg-white') }, { children: jsxs("div", __assign({ className: 'd-flex gap8 wmx12 m-auto' }, { children: [jsx(Input, { className: 'w70', onChange: handleOnSearch, placeholder: 'Search icon', value: value }, void 0),
-                        jsx(Button, { className: 'w30', disabled: !value, buttonTitle: 'Clear search', onClick: clearSearch }, void 0)] }), void 0) }), void 0),
+                        jsx(Button, __assign({ className: 'w30', disabled: !value, onClick: clearSearch }, { children: "Clear search" }), void 0)] }), void 0) }), void 0),
             jsx("div", __assign({ className: 'd-flex f-wrap' }, { children: options.map(function (_a) {
                     var iconKey = _a[0], Icon = _a[1];
                     return (jsx("div", __assign({ className: "w20 p8" }, { children: jsxs("div", __assign({ className: 'br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center' }, { children: [jsx(Icon, { size: 32 }, void 0),

package/dist/esm/components/icon/icons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport Button from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(iconsList);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(iconsList);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(iconsList);\n      return;\n    }\n\n    setOptions(iconsList.filter(([key]) => \n      key.toLowerCase()\n        .includes(searchValue.toLowerCase())\n    ));\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className='d-flex gap8 wmx12 m-auto'>\n        <Input\n          className='w70'\n          onChange={handleOnSearch}\n          placeholder='Search icon'\n          value={value} \n        />\n        <Button className='w30' disabled={!value} buttonTitle='Clear search' onClick={clearSearch} />\n        </div>\n      </div>\n\n      <div className='d-flex f-wrap'>\n        {options.map(([iconKey, Icon]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className='br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center'>\n              <Icon size={32} />\n              <span className='p-p--small'>{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;EAC3B;AAEF,IAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3B,SAAS,GAAG;IACjB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,SAAS,CAAC,EAA1C,OAAO,QAAA,EAAE,UAAU,QAAuB,CAAC;IAElD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,SAAS,CAAC,CAAC;KACvB,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;SACR;QAED,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YAC/B,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,sBAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,gBACtDD,uBAAK,SAAS,EAAC,0BAA0B,iBACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,WACZ;wBACFA,IAAC,MAAM,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAC,cAAc,EAAC,OAAO,EAAE,WAAW,WAAI,aACvF,YACF;YAENA,sBAAK,SAAS,EAAC,eAAe,gBAC3B,OAAO,CAAC,GAAG,CAAC,UAAC,EAAe;wBAAd,OAAO,QAAA,EAAE,IAAI,QAAA;oBAAM,QAChCA,sBAAmB,SAAS,EAAC,QAAQ,gBACnCD,uBAAK,SAAS,EAAC,+DAA+D,iBAC5EC,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAI;gCAClBA,uBAAM,SAAS,EAAC,YAAY,gBAAE,OAAO,YAAQ,aACzC,KAJE,OAAO,CAKX;iBACP,CAAC,YACE,YACF,EACN;AACJ;;;;;"}
+{"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport { Button } from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(iconsList);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(iconsList);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(iconsList);\n      return;\n    }\n\n    setOptions(iconsList.filter(([key]) => \n      key.toLowerCase()\n        .includes(searchValue.toLowerCase())\n    ));\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className='d-flex gap8 wmx12 m-auto'>\n        <Input\n          className='w70'\n          onChange={handleOnSearch}\n          placeholder='Search icon'\n          value={value} \n        />\n        <Button className='w30' disabled={!value} onClick={clearSearch}>\n          Clear search\n        </Button>\n        </div>\n      </div>\n\n      <div className='d-flex f-wrap'>\n        {options.map(([iconKey, Icon]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className='br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center'>\n              <Icon size={32} />\n              <span className='p-p--small'>{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;EAC3B;AAEF,IAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3B,SAAS,GAAG;IACjB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,SAAS,CAAC,EAA1C,OAAO,QAAA,EAAE,UAAU,QAAuB,CAAC;IAElD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,SAAS,CAAC,CAAC;KACvB,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;SACR;QAED,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YAC/B,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,sBAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,gBACtDD,uBAAK,SAAS,EAAC,0BAA0B,iBACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,WACZ;wBACFA,IAAC,MAAM,aAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,0CAErD,aACH,YACF;YAENA,sBAAK,SAAS,EAAC,eAAe,gBAC3B,OAAO,CAAC,GAAG,CAAC,UAAC,EAAe;wBAAd,OAAO,QAAA,EAAE,IAAI,QAAA;oBAAM,QAChCA,sBAAmB,SAAS,EAAC,QAAQ,gBACnCD,uBAAK,SAAS,EAAC,+DAA+D,iBAC5EC,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAI;gCAClBA,uBAAM,SAAS,EAAC,YAAY,gBAAE,OAAO,YAAQ,aACzC,KAJE,OAAO,CAKX;iBACP,CAAC,YACE,YACF,EACN;AACJ;;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconWrapper } from './IconWrapper/IconWrapper.js';
-import { i as icons } from '../../index-b4cd59e9.js';
+import { i as icons } from '../../index-39fa3631.js';
 import '../../tslib.es6-5bc94358.js';
 import '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';

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

@@ -2,7 +2,7 @@ import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../index-6ea95111.js';
 import { T as Toast, a as Toaster, s as styles, t as toast } from '../../index-de7886d3.js';
-import Button from '../button/index.js';
+import { Button } from '../button/index.js';
 import '../../style-inject.es-1f59c1d0.js';
 import 'react';
 import '../../_commonjsHelpers-e7f67fd8.js';
@@ -64,7 +64,7 @@ var ToastStory = function (_a) {
     return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: 'mb16' }, { children: [jsx("div", { children: "Show a toast using the following code:" }, void 0),
                     jsx("pre", __assign({ className: 'bg-grey-300 br4 d-inline-flex p8 mt8' }, { children: "() => toast(title, { description, type, action })" }), void 0)] }), void 0),
             jsx(Toaster, {}, void 0),
-            jsx(Button, { buttonTitle: 'Click here to trigger toast', onClick: showToast }, void 0)] }, void 0));
+            jsx(Button, __assign({ onClick: showToast }, { children: "Click here to trigger toast" }), void 0)] }, void 0));
 };
 ToastStory.storyName = "Toast";
 var ToastTypes = function (props) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/toast/index.stories.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { Toast, ToastProps, ToastType, Toaster, toast } from '.';\nimport Button from '../button';\nimport styles from './style.module.scss';\n\nconst toastTypes: ToastType[] = ['success', 'warning', 'error', 'information'];\n\nconst story = {\n  title: 'JSX/Toast',\n  component: Toast,\n  argTypes: {\n    title: {\n      description: 'Title of the toast.',\n    },\n    description: {\n      description: 'Additional description content to be displayed inside the toast.',\n    },\n    type: {\n      description: 'Type of toast to display. This changes the styles/colors of the toast.',\n    },\n    action: {\n      description: 'Object containing a possible action button inside the toast.',\n    },\n    duration: {\n      description: 'Duration in ms that the toast should be displayed.',\n      table: {\n        defaultValue: { summary: 3000 },\n      }\n    },\n    onDismiss: {\n      table: {\n        disable: true,\n      },\n    }\n  },\n  args: {\n    title: 'We couldn’t open the chat',\n    description: 'Description description description description description description description',\n    action: {\n      title: 'Send an email',\n      onClick: () => {}\n    },\n    type: 'success',\n    duration: 3000,\n  },\n};\n\nconst FakeInlineToast = ({ \n  title, \n  description, \n  action, \n  type\n}: Omit<ToastProps, 'onDismiss'>) => (\n  <div className='mb32'>\n    <div className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}>\n      <Toast \n        title={title}\n        onDismiss={() => {}}\n        description={description}\n        action={action}\n        type={type}\n      />\n    </div>\n  </div>\n);\n\nexport const ToastStory = ({ title, description, action, type, duration }: ToastProps) => {\n  const showToast = () => toast(\n    title, \n    {\n      description,\n      duration,\n      type,\n      action\n    }\n  );\n\n  return (\n    <>\n      <div className='mb16'>\n        <div>\n          Show a toast using the following code:\n        </div>\n        <pre className='bg-grey-300 br4 d-inline-flex p8 mt8'>\n          {\"() => toast(title, { description, type, action })\"}\n        </pre>\n      </div>\n      <Toaster />\n\n      <Button\n        buttonTitle='Click here to trigger toast'\n        onClick={showToast}\n      />\n    </>\n  );\n};\n\nToastStory.storyName = \"Toast\";\n\nexport const ToastTypes = (props: ToastProps) => {\n  return (\n    <>\n      {toastTypes.map((toastType) => (\n        <div key={toastType} className='d-flex fd-column'>\n          <h3 className='p-h3 mb16'>{toastType}</h3>\n          <FakeInlineToast {...props} type={toastType} />\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const ToastContent = ({ title, description, action }: ToastProps) => {\n  return (\n    <div className='d-flex fd-column'>\n      <FakeInlineToast title={title} />\n      <FakeInlineToast title={title} description={description} />\n      <FakeInlineToast title={title} description={description} action={action} />\n      <FakeInlineToast title={title} action={action} />\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/toast/index.stories.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { Toast, ToastProps, ToastType, Toaster, toast } from '.';\nimport { Button } from '../button';\nimport styles from './style.module.scss';\n\nconst toastTypes: ToastType[] = ['success', 'warning', 'error', 'information'];\n\nconst story = {\n  title: 'JSX/Toast',\n  component: Toast,\n  argTypes: {\n    title: {\n      description: 'Title of the toast.',\n    },\n    description: {\n      description: 'Additional description content to be displayed inside the toast.',\n    },\n    type: {\n      description: 'Type of toast to display. This changes the styles/colors of the toast.',\n    },\n    action: {\n      description: 'Object containing a possible action button inside the toast.',\n    },\n    duration: {\n      description: 'Duration in ms that the toast should be displayed.',\n      table: {\n        defaultValue: { summary: 3000 },\n      }\n    },\n    onDismiss: {\n      table: {\n        disable: true,\n      },\n    }\n  },\n  args: {\n    title: 'We couldn’t open the chat',\n    description: 'Description description description description description description description',\n    action: {\n      title: 'Send an email',\n      onClick: () => {}\n    },\n    type: 'success',\n    duration: 3000,\n  },\n};\n\nconst FakeInlineToast = ({ \n  title, \n  description, \n  action, \n  type\n}: Omit<ToastProps, 'onDismiss'>) => (\n  <div className='mb32'>\n    <div className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}>\n      <Toast \n        title={title}\n        onDismiss={() => {}}\n        description={description}\n        action={action}\n        type={type}\n      />\n    </div>\n  </div>\n);\n\nexport const ToastStory = ({ title, description, action, type, duration }: ToastProps) => {\n  const showToast = () => toast(\n    title, \n    {\n      description,\n      duration,\n      type,\n      action\n    }\n  );\n\n  return (\n    <>\n      <div className='mb16'>\n        <div>\n          Show a toast using the following code:\n        </div>\n        <pre className='bg-grey-300 br4 d-inline-flex p8 mt8'>\n          {\"() => toast(title, { description, type, action })\"}\n        </pre>\n      </div>\n      <Toaster />\n\n      <Button onClick={showToast}>Click here to trigger toast</Button>\n    </>\n  );\n};\n\nToastStory.storyName = \"Toast\";\n\nexport const ToastTypes = (props: ToastProps) => {\n  return (\n    <>\n      {toastTypes.map((toastType) => (\n        <div key={toastType} className='d-flex fd-column'>\n          <h3 className='p-h3 mb16'>{toastType}</h3>\n          <FakeInlineToast {...props} type={toastType} />\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const ToastContent = ({ title, description, action }: ToastProps) => {\n  return (\n    <div className='d-flex fd-column'>\n      <FakeInlineToast title={title} />\n      <FakeInlineToast title={title} description={description} />\n      <FakeInlineToast title={title} description={description} action={action} />\n      <FakeInlineToast title={title} action={action} />\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/{index-b4cd59e9.js → index-39fa3631.js}

@@ -125,7 +125,7 @@ import DoctorStethoscope from './components/icon/icons/DoctorStethoscope.js';
 import Doctor from './components/icon/icons/Doctor.js';
 import DollarSign from './components/icon/icons/DollarSign.js';
 import DownloadCloud from './components/icon/icons/DownloadCloud.js';
-import Download from './components/icon/icons/Download.js';
+import DownloadIcon from './components/icon/icons/Download.js';
 import DragCorner from './components/icon/icons/DragCorner.js';
 import Droplet from './components/icon/icons/Droplet.js';
 import Edit2 from './components/icon/icons/Edit2.js';
@@ -489,7 +489,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	DoctorIcon: Doctor,
 	DollarSignIcon: DollarSign,
 	DownloadCloudIcon: DownloadCloud,
-	DownloadIcon: Download,
+	DownloadIcon: DownloadIcon,
 	DragCornerIcon: DragCorner,
 	DropletIcon: Droplet,
 	Edit2Icon: Edit2,
@@ -726,4 +726,4 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 export { icons as i };
-//# sourceMappingURL=index-b4cd59e9.js.map
+//# sourceMappingURL=index-39fa3631.js.map

package/dist/esm/{index-b4cd59e9.js.map → index-39fa3631.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-b4cd59e9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index-39fa3631.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/index.js

@@ -15,7 +15,7 @@ export { RegularModal } from './components/modal/regularModal/index.js';
 export { BottomOrRegularModal } from './components/modal/bottomOrRegularModal/index.js';
 export { CardWithLeftIcon, CardWithTopIcon, CardWithTopLeftIcon, InfoCard } from './components/cards/index.js';
 export { CardButton } from './components/cards/cardButton/index.js';
-export { default as Button } from './components/button/index.js';
+export { Button } from './components/button/index.js';
 export { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { AutoSuggestInput } from './components/input/autoSuggestInput/index.js';

package/dist/esm/lib/components/button/index.d.ts

@@ -1,13 +1,20 @@
-import React from 'react';
-declare type ButtonType = 'primary' | 'secondary' | 'secondaryGrey' | 'outline' | 'outlineGrey';
-interface Icon {
-    src: string;
-    alt: string;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<{
-    buttonTitle: string;
-    buttonType?: ButtonType | undefined;
-    leftIcon?: Icon | undefined;
+import React, { ReactElement, ReactNode } from 'react';
+declare type ButtonVariant = 'filledColor' | 'filledGray' | 'filledWhite' | 'textColor' | 'textWhite' | 'outlineWhite' | 'filledSuccess' | 'filledError';
+declare type ButtonProps = {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    leftIcon?: ReactElement;
+    rightIcon?: ReactElement;
+    loading?: boolean;
+    hideLabel?: boolean;
+} & Omit<JSX.IntrinsicElements['button'], 'children'>;
+declare const Button: React.ForwardRefExoticComponent<Pick<{
+    children: ReactNode;
+    variant?: ButtonVariant | undefined;
+    leftIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    rightIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     loading?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "loading" | "buttonTitle" | "buttonType"> & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+    hideLabel?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps, ButtonVariant };

package/dist/esm/lib/components/button/index.stories.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { ButtonProps, ButtonVariant } from '.';
+declare const story: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<{
+        children: import("react").ReactNode;
+        variant?: ButtonVariant | undefined;
+        leftIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        rightIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        loading?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
+    argTypes: {
+        children: {
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+            description: string;
+        };
+        variant: {
+            defaultValue: string;
+            description: string;
+        };
+        leftIcon: {
+            description: string;
+        };
+        rightIcon: {
+            description: string;
+        };
+        loading: {
+            defaultValue: boolean;
+            description: string;
+        };
+        hideLabel: {
+            defaultValue: boolean;
+            description: string;
+        };
+    };
+    parameters: {
+        design: {
+            url: string;
+            type: string;
+        };
+    };
+};
+export declare const ButtonStory: {
+    ({ className, loading, children, variant, hideLabel }: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const ButtonVariants: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonOnBackgrounds: ({ onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonWithIcons: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonWithIconOnly: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonLoading: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonDisabled: ({ children, onClick }: ButtonProps) => JSX.Element;
+export default story;

package/dist/esm/lib/components/button/index.test.d.ts

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

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

@@ -12,7 +12,7 @@ import { Checkbox } from './components/input/checkbox';
 import { Radio } from './components/input/radio';
 import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
 import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
-import Button from './components/button';
+import { Button } from './components/button';
 import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';
 import { AutoSuggestInput } from './components/input/autoSuggestInput';

package/dist/index.css

@@ -2249,12 +2249,13 @@ body {
     transform: rotate(360deg);
   }
 }
-.p-btn, .p-btn--outline-grey, .p-btn--outline, .p-btn--danger, .p-btn--secondary, .p-btn--secondary-grey, .p-btn--primary {
-  display: inline-block;
+.p-btn, .p-btn--outline-grey, .p-btn--outline-white, .p-btn--outline, .p-btn--success, .p-btn--danger, .p-btn--secondary, .p-btn--secondary-inverted, .p-btn--secondary-white, .p-btn--secondary-grey, .p-btn--primary {
+  display: inline-flex;
+  align-items: center;
   position: relative;
   cursor: pointer;
   height: 48px;
-  padding: 12px 24px;
+  padding: 0 24px;
   line-height: 24px;
   font-size: 16px;
   font-family: inherit;
@@ -2266,9 +2267,14 @@ body {
   border: none;
   transition: 0.3s opacity, 0.3s background-color;
 }
-.p-btn[disabled], [disabled].p-btn--outline-grey, [disabled].p-btn--outline, [disabled].p-btn--danger, [disabled].p-btn--secondary, [disabled].p-btn--secondary-grey, [disabled].p-btn--primary {
+.p-btn[disabled], [disabled].p-btn--outline-grey, [disabled].p-btn--outline-white, [disabled].p-btn--outline, [disabled].p-btn--success, [disabled].p-btn--danger, [disabled].p-btn--secondary, [disabled].p-btn--secondary-inverted, [disabled].p-btn--secondary-white, [disabled].p-btn--secondary-grey, [disabled].p-btn--primary {
   cursor: default;
   opacity: 0.5;
+  cursor: not-allowed;
+}
+.p-btn--icon-only {
+  width: 48px;
+  padding: 0;
 }
 .p-btn--primary {
   background-color: #8e8cee;
@@ -2290,31 +2296,40 @@ body {
   outline: none;
   box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
 }
-.p-btn--secondary, .p-btn--secondary-grey {
+.p-btn--secondary, .p-btn--secondary-inverted, .p-btn--secondary-white, .p-btn--secondary-grey {
   background-color: transparent;
   color: #8e8cee;
 }
-.p-btn--secondary:hover, .p-btn--secondary-grey:hover {
+.p-btn--secondary:hover, .p-btn--secondary-inverted:hover, .p-btn--secondary-white:hover, .p-btn--secondary-grey:hover {
   background-color: #ebebff;
 }
 @media (max-width: 34rem) {
-  .p-btn--secondary:hover, .p-btn--secondary-grey:hover {
+  .p-btn--secondary:hover, .p-btn--secondary-inverted:hover, .p-btn--secondary-white:hover, .p-btn--secondary-grey:hover {
     background-color: transparent;
   }
 }
-.p-btn--secondary[disabled], [disabled].p-btn--secondary-grey {
+.p-btn--secondary[disabled], [disabled].p-btn--secondary-inverted, [disabled].p-btn--secondary-white, [disabled].p-btn--secondary-grey {
   color: #6160a2;
 }
-.p-btn--secondary[disabled]:hover, [disabled].p-btn--secondary-grey:hover {
+.p-btn--secondary[disabled]:hover, [disabled].p-btn--secondary-inverted:hover, [disabled].p-btn--secondary-white:hover, [disabled].p-btn--secondary-grey:hover {
   background-color: transparent;
 }
-.p-btn--secondary:focus, .p-btn--secondary-grey:focus {
+.p-btn--secondary:focus, .p-btn--secondary-inverted:focus, .p-btn--secondary-white:focus, .p-btn--secondary-grey:focus {
   outline: none;
   box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
 }
 .p-btn--secondary-grey {
   background-color: #f7f7ff;
 }
+.p-btn--secondary-white {
+  background-color: #fff;
+}
+.p-btn--secondary-inverted {
+  color: #fff;
+}
+.p-btn--secondary-inverted:hover, .p-btn--secondary-inverted:focus {
+  background-color: #6160a2;
+}
 .p-btn--danger {
   background-color: #e55454;
   color: white;
@@ -2335,27 +2350,30 @@ body {
   outline: none;
   box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
 }
-.p-btn--loading {
-  color: transparent;
-  cursor: default;
-  opacity: 1 !important;
+.p-btn--success {
+  background-color: #84de8a;
+  color: white;
 }
-.p-btn--loading::before {
-  content: "";
-  position: absolute;
-  width: 26px;
-  height: 26px;
-  left: calc(50% - 13px);
-  top: calc(50% - 13px);
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.5);
-  border-left-color: white;
-  animation: spinner-rotate 0.9s infinite;
+.p-btn--success:hover {
+  background-color: #5b985f;
+}
+@media (max-width: 34rem) {
+  .p-btn--success:hover {
+    background-color: #84de8a;
+  }
+}
+.p-btn--success[disabled] {
+  background-color: #c4f5c8;
+  opacity: 1;
+}
+.p-btn--success:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
 }
 .p-btn--outline {
   color: #8e8cee;
   background-color: transparent;
-  border: 1px dashed #b1b0f5;
+  border: 1px solid #b1b0f5;
 }
 .p-btn--outline:hover {
   color: #6160a2;
@@ -2368,12 +2386,30 @@ body {
 }
 .p-btn--outline:focus {
   color: #6160a2;
+  outline: none;
+  box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
+}
+.p-btn--outline-white {
+  color: #fff;
+  border: 1px solid #fff;
+  background-color: transparent;
+}
+.p-btn--outline-white:hover {
+  background-color: #6160a2;
   border-color: #6160a2;
 }
+.p-btn--outline-white[disabled] {
+  background-color: transparent;
+  opacity: 0.5;
+}
+.p-btn--outline-white:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(142, 140, 238, 0.5);
+}
 .p-btn--outline-grey {
   color: #91919c;
   background-color: transparent;
-  border: 1px dashed #d2d2d8;
+  border: 1px solid #d2d2d8;
 }
 .p-btn--outline-grey:hover {
   color: #696970;
@@ -2388,6 +2424,27 @@ body {
   color: #696970;
   border-color: #696970;
 }
+.p-btn--loading {
+  color: transparent;
+  cursor: default;
+  opacity: 1 !important;
+}
+.p-btn--loading::before {
+  content: "";
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  left: calc(50% - 13px);
+  top: calc(50% - 13px);
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-left-color: white;
+  animation: spinner-rotate 0.9s infinite;
+}
+.p-btn--loading.p-btn--secondary-grey::before, .p-btn--loading.p-btn--secondary-white::before {
+  border-color: rgba(142, 140, 238, 0.5);
+  border-left-color: #8e8cee;
+}
 
 .sr-only {
   border-width: 0;