@popsure/dirty-swan 0.63.0 → 0.63.1

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

@@ -1,25 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
-import { c as classNames } from '../../index-6ea95111.js';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as classNames } from '../../index-DLQEsiym.js';
+import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 
-var css_248z = ".style-module_badge--small__cHO6v, .style-module_badge--medium__3CekE {\n  padding-bottom: 6px;\n  padding-top: 6px;\n}\n.style-module_badge--large__3_tWC {\n  padding-bottom: 8px;\n  padding-top: 8px;\n}";
-var styles = {"badge--small":"style-module_badge--small__cHO6v","badge--medium":"style-module_badge--medium__3CekE","badge--large":"style-module_badge--large__3_tWC"};
+var css_248z = ".style-module_badge__7H1Jt {\n  border: 1px solid #fff;\n  position: relative;\n  gap: 6px;\n}\n.style-module_badge--xsmall__2lIav {\n  padding: 4px 10px;\n}\n.style-module_badge--small__cHO6v {\n  padding: 6px 12px;\n}\n.style-module_badge--medium__3CekE {\n  padding: 6px 16px;\n}\n.style-module_badge--large__3_tWC {\n  gap: 8px;\n  padding: 8px 16px;\n}\n.style-module_badge--white__QtwA_ {\n  background-color: #fff;\n  border-color: #f7f7fd;\n}\n.style-module_badge--neutral__7yAYx {\n  background-color: #f7f7fd;\n  border-color: #f2f2f8;\n}\n.style-module_badge--neutralStrong__1JHph {\n  background-color: #e7e7ed;\n  border-color: #e7e7ed;\n}\n.style-module_badge--information__1tegJ {\n  background-color: #E5F0FF;\n  border-color: #DAE8FC;\n}\n.style-module_badge--warning__2UCOz, .style-module_badge--primary__1JGTF {\n  background-color: #FEECD3;\n  border-color: #FCDAAB;\n}\n.style-module_badge--error__1g5DA {\n  background-color: #FEE6E6;\n  border-color: #FED7D7;\n}\n.style-module_badge--success__YJJ9N {\n  background-color: #E6FAF1;\n  border-color: #D5F6E7;\n}\n.style-module_badge--black__sdqec {\n  background-color: #26262e;\n  border-color: #26262e;\n  color: #fff;\n}\n.style-module_badge--secondary__1kblP {\n  background-color: #EEEEFE;\n  border-color: #E8E7FE;\n}\n.style-module_badge--secondaryStrong__33FDy {\n  background-color: #8883D8;\n  border-color: #8883D8;\n  color: #fff;\n}\n\n.style-module_badgeDot__N2_h5 {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.style-module_badgeDot--primary__q-_rt, .style-module_badgeDot--warning__1xu_H {\n  background-color: #C6824E;\n}\n.style-module_badgeDot--white__2Zi0j {\n  background-color: #b8b8c0;\n}\n.style-module_badgeDot--neutral__3Y6Z9 {\n  background-color: #919199;\n}\n.style-module_badgeDot--neutralStrong__3KzHS {\n  background-color: #696971;\n}\n.style-module_badgeDot--information__1t-rb {\n  background-color: #5F7BA0;\n}\n.style-module_badgeDot--error__3Lh5R {\n  background-color: #C64848;\n}\n.style-module_badgeDot--success__7tHPA {\n  background-color: #599278;\n}\n.style-module_badgeDot--black__2YWa7 {\n  background-color: #fff;\n}\n.style-module_badgeDot--secondary__RU2iJ {\n  background-color: #6A65AE;\n}\n.style-module_badgeDot--secondaryStrong__3AN6H {\n  background-color: #fff;\n}";
+var styles = {"badge":"style-module_badge__7H1Jt","badge--xsmall":"style-module_badge--xsmall__2lIav","badge--small":"style-module_badge--small__cHO6v","badge--medium":"style-module_badge--medium__3CekE","badge--large":"style-module_badge--large__3_tWC","badge--white":"style-module_badge--white__QtwA_","badge--neutral":"style-module_badge--neutral__7yAYx","badge--neutralStrong":"style-module_badge--neutralStrong__1JHph","badge--information":"style-module_badge--information__1tegJ","badge--warning":"style-module_badge--warning__2UCOz","badge--primary":"style-module_badge--primary__1JGTF","badge--error":"style-module_badge--error__1g5DA","badge--success":"style-module_badge--success__YJJ9N","badge--black":"style-module_badge--black__sdqec","badge--secondary":"style-module_badge--secondary__1kblP","badge--secondaryStrong":"style-module_badge--secondaryStrong__33FDy","badgeDot":"style-module_badgeDot__N2_h5","badgeDot--primary":"style-module_badgeDot--primary__q-_rt","badgeDot--warning":"style-module_badgeDot--warning__1xu_H","badgeDot--white":"style-module_badgeDot--white__2Zi0j","badgeDot--neutral":"style-module_badgeDot--neutral__3Y6Z9","badgeDot--neutralStrong":"style-module_badgeDot--neutralStrong__3KzHS","badgeDot--information":"style-module_badgeDot--information__1t-rb","badgeDot--error":"style-module_badgeDot--error__3Lh5R","badgeDot--success":"style-module_badgeDot--success__7tHPA","badgeDot--black":"style-module_badgeDot--black__2YWa7","badgeDot--secondary":"style-module_badgeDot--secondary__RU2iJ","badgeDot--secondaryStrong":"style-module_badgeDot--secondaryStrong__3AN6H"};
 styleInject(css_248z);
 
-var getVariantClassNames = function (variant) { return ({
-    information: 'bg-blue-100',
-    neutral: 'bg-white',
-    neutral200: 'bg-grey-200',
-    neutral300: 'bg-grey-300',
-    warning: 'bg-yellow-100',
-    error: 'bg-red-100',
-    success: 'bg-green-100',
-    primary: 'bg-purple-100',
-    primary900: 'bg-purple-900 tc-white',
-}[variant]); };
 var Badge = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.variant, variant = _d === void 0 ? 'information' : _d, children = _a.children;
-    return (jsx("div", { className: classNames(className, 'px16 br8 d-inline-block ai-center fw-bold p-p', { 'p-p--small': size === 'small' }, styles["badge--".concat(size)], getVariantClassNames(variant)), children: children }));
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.variant, variant = _d === void 0 ? 'information' : _d, children = _a.children, _e = _a.showDot, showDot = _e === void 0 ? false : _e;
+    return (jsxs("div", { role: "status", className: classNames(className, 'br8 d-inline-flex ai-center fw-bold p-p', styles.badge, styles["badge--".concat(size)], styles["badge--".concat(variant)], {
+            'p-p--small': size === 'small' || size === 'xsmall',
+        }), children: [showDot && (jsx("span", { className: classNames(styles.badgeDot, styles["badgeDot--".concat(variant)]) })), children] }));
 };
 
 export { Badge };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n | 'warning'\n | 'error'\n | 'success'\n | 'information'\n | 'neutral'\n | 'neutral200'\n | 'neutral300'\n | 'primary'\n | 'primary900';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'small' | 'medium' | 'large';\n  children: ReactNode;\n}\n\nconst getVariantClassNames = (variant: Variant) => ({\n  information: 'bg-blue-100',\n  neutral: 'bg-white',\n  neutral200: 'bg-grey-200',\n  neutral300: 'bg-grey-300',\n  warning: 'bg-yellow-100',\n  error: 'bg-red-100',\n  success: 'bg-green-100',\n  primary: 'bg-purple-100',\n  primary900: 'bg-purple-900 tc-white',\n}[variant])\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n}: BadgeProps) => (\n  <div\n    className={classNames(\n      className, \n      'px16 br8 d-inline-block ai-center fw-bold p-p', \n      { 'p-p--small': size === 'small' },\n      styles[`badge--${size}`],\n      getVariantClassNames(variant)\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsx"],"mappings":";;;;;;;;AAsBA,IAAM,oBAAoB,GAAG,UAAC,OAAgB,IAAK,QAAC;IAClD,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,aAAa;IACzB,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,wBAAwB;CACrC,CAAC,OAAO,CAAC,IAAC,CAAA;IAEL,KAAK,GAAG,UAAC,EAKF;QAJX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA;IACQ,QAChBA,aACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,+CAA+C,EAC/C,EAAE,YAAY,EAAE,IAAI,KAAK,OAAO,EAAE,EAClC,MAAM,CAAC,iBAAU,IAAI,CAAE,CAAC,EACxB,oBAAoB,CAAC,OAAO,CAAC,CAC9B,YAEA,QAAQ,GACL;AAXU;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n  | 'white'\n  | 'neutral'\n  | 'neutralStrong'\n  | 'information'\n  | 'warning'\n  | 'primary'\n  | 'error'\n  | 'success'\n  | 'black'\n  | 'secondary'\n  | 'secondaryStrong';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  children: ReactNode;\n  showDot?: boolean;\n}\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n  showDot = false\n}: BadgeProps) => (\n  <div\n    role=\"status\" \n    className={classNames(\n      className,\n      'br8 d-inline-flex ai-center fw-bold p-p',\n      styles.badge,\n      styles[`badge--${size}`],\n      styles[`badge--${variant}`],\n      {\n        'p-p--small': size === 'small' || size === 'xsmall',\n      }\n    )}\n  >\n    {showDot && (\n      <span\n        className={classNames(\n          styles.badgeDot,\n          styles[`badgeDot--${variant}`]\n        )}\n      />\n    )}\n\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAyBA,IAAM,KAAK,GAAG,UAAC,EAMF,EAAA;AALX,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,SAAc,EAAd,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACd,EAAA,GAAA,EAAA,CAAA,IAAe,EAAf,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA,EACf,EAAA,GAAA,EAAA,CAAA,OAAuB,EAAvB,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,EACvB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,OAAe,EAAf,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA;AACC,IAAA,QAChBA,IAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,yCAAyC,EACzC,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,SAAA,CAAA,MAAA,CAAU,IAAI,CAAE,CAAC,EACxB,MAAM,CAAC,SAAA,CAAA,MAAA,CAAU,OAAO,CAAE,CAAC,EAC3B;AACE,YAAA,YAAY,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;SACpD,CACF,EAAA,QAAA,EAAA,CAEA,OAAO,KACNC,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,YAAA,CAAA,MAAA,CAAa,OAAO,CAAE,CAAC,CAC/B,EAAA,CACD,CACH,EAEA,QAAQ,CAAA,EAAA,CACL;AAxBU;;;;"}

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

@@ -1,7 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Badge } from './index.js';
-import '../../index-6ea95111.js';
-import '../../style-inject.es-1f59c1d0.js';
+import '../../index-DLQEsiym.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 
 var story = {
     title: 'JSX/Badge',
@@ -13,7 +14,7 @@ var story = {
         },
         className: {
             description: 'Class name for the most parent element',
-            control: 'text'
+            control: 'text',
         },
         size: {
             description: 'Define the size of the badge',
@@ -21,20 +22,41 @@ var story = {
         variant: {
             description: 'Variant that defines the style of the Badge',
         },
+        showDot: {
+            description: 'Whether to show a dot indicator',
+        },
     },
     args: {
         children: 'Value',
         className: '',
         size: 'medium',
         variant: 'information',
-    }
+        showDot: false,
+    },
 };
-var BadgeStory = function (_a) {
-    var children = _a.children, className = _a.className, size = _a.size, variant = _a.variant;
-    return (jsx(Badge, { className: className, size: size, variant: variant, children: children }));
+var BadgeStory = {
+    render: function (_a) {
+        var children = _a.children, className = _a.className, size = _a.size, variant = _a.variant, showDot = _a.showDot;
+        return (jsx(Badge, { className: className, size: size, variant: variant, showDot: showDot, children: children }));
+    },
+    name: 'Badge',
 };
-BadgeStory.storyName = "Badge";
+var variants = [
+    'white',
+    'neutral',
+    'neutralStrong',
+    'information',
+    'warning',
+    'primary',
+    'error',
+    'success',
+    'secondary',
+    'secondaryStrong',
+    'black',
+];
+var Variants = function () { return (jsx("div", { className: "d-flex fd-column gap16", children: variants.map(function (variant) { return (jsxs("div", { className: "d-flex", children: [jsx("div", { className: "ws3", children: jsx(Badge, { variant: variant, children: variant }) }), jsx("div", { className: "ws3 ml32", children: jsx(Badge, { variant: variant, showDot: true, children: variant }) })] }, variant)); }) })); };
+var sizes = ['xsmall', 'small', 'medium', 'large'];
+var Sizes = function () { return (jsx("div", { className: "d-flex fd-column gap16", children: sizes.map(function (size) { return (jsxs("div", { className: "d-flex", children: [jsx("div", { className: "ws3", children: jsx(Badge, { size: size, children: size }) }), jsx("div", { className: "ws3 ml32", children: jsx(Badge, { size: size, showDot: true, children: size }) })] }, size)); }) })); };
 
-export default story;
-export { BadgeStory };
+export { BadgeStory, Sizes, Variants, story as default };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/badge/index.stories.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '.';\n\nconst story = {\n  title: 'JSX/Badge',\n  component: Badge,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the badge',\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text'\n    },\n    size: {\n      description: 'Define the size of the badge',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Badge',\n    },\n  },\n  args: {\n    children: 'Value',\n    className: '',\n    size: 'medium',\n    variant: 'information',\n  }\n};\n \nexport const BadgeStory = ({\n  children,\n  className,\n  size,\n  variant,\n}: BadgeProps) => (\n  <Badge\n    className={className}\n    size={size}\n    variant={variant}\n  >\n    {children}\n  </Badge>\n);\n\nBadgeStory.storyName = \"Badge\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4CAA4C;SAC1D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,8BAA8B;SAC5C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,6CAA6C;SAC3D;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,aAAa;KACvB;EACD;IAEW,UAAU,GAAG,UAAC,EAKd;QAJX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA;IACS,QAChBA,IAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,YAEf,QAAQ,GACH;AAPQ,EAQhB;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/badge/index.stories.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '.';\n\nconst story = {\n  title: 'JSX/Badge',\n  component: Badge,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the badge',\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text',\n    },\n    size: {\n      description: 'Define the size of the badge',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Badge',\n    },\n    showDot: {\n      description: 'Whether to show a dot indicator',\n    },\n  },\n  args: {\n    children: 'Value',\n    className: '',\n    size: 'medium',\n    variant: 'information',\n    showDot: false,\n  },\n};\n\nexport const BadgeStory = {\n  render: ({ children, className, size, variant, showDot }: BadgeProps) => (\n    <Badge\n      className={className}\n      size={size}\n      variant={variant}\n      showDot={showDot}\n    >\n      {children}\n    </Badge>\n  ),\n\n  name: 'Badge',\n};\n\nconst variants: BadgeProps['variant'][] = [\n  'white',\n  'neutral',\n  'neutralStrong',\n  'information',\n  'warning',\n  'primary',\n  'error',\n  'success',\n  'secondary',\n  'secondaryStrong',\n  'black',\n];\n\nexport const Variants = () => (\n  <div className=\"d-flex fd-column gap16\">\n    {variants.map((variant) => (\n      <div key={variant} className=\"d-flex\">\n        <div className=\"ws3\">\n          <Badge variant={variant}>{variant}</Badge>\n        </div>\n        <div className=\"ws3 ml32\">\n          <Badge variant={variant} showDot>\n            {variant}\n          </Badge>\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nconst sizes: BadgeProps['size'][] = ['xsmall', 'small', 'medium', 'large'];\n\nexport const Sizes = () => (\n  <div className=\"d-flex fd-column gap16\">\n    {sizes.map((size) => (\n      <div key={size} className=\"d-flex\">\n        <div className=\"ws3\">\n          <Badge size={size}>{size}</Badge>\n        </div>\n        <div className=\"ws3 ml32\">\n          <Badge size={size} showDot>\n            {size}\n          </Badge>\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/badge/index.test.js

@@ -1,13 +1,14 @@
-import { c as __awaiter, d as __generator } from '../../tslib.es6-a39f91fc.js';
+import { _ as __awaiter, a as __generator } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
-import { c as customRender, s as screen } from '../../customRender-d03c10b6.js';
+import { c as customRender, s as screen } from '../../customRender-DzdqZxUd.js';
 import { Badge } from './index.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
 import 'react-dom';
-import '../../_commonjsHelpers-4730bd53.js';
+import 'util';
 import 'react-dom/test-utils';
-import '../../index-6ea95111.js';
-import '../../style-inject.es-1f59c1d0.js';
+import '../../index-DLQEsiym.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 
 describe('Badge component', function () {
     it('Should render content', function () { return __awaiter(void 0, void 0, void 0, function () {

package/dist/esm/components/badge/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/badge/index.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\n\nimport { Badge } from '.';\n\ndescribe('Badge component', () => {\n  it('Should render content', async () => {\n    render(<Badge>Content</Badge>);\n\n    expect(screen.getByText('Content')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;AAIA,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,EAAE,CAAC,uBAAuB,EAAE;;YAC1BA,YAAM,CAACC,IAAC,KAAK,0BAAgB,CAAC,CAAC;YAE/B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;;;SACzD,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/badge/index.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\n\nimport { Badge } from '.';\n\ndescribe('Badge component', () => {\n  it('Should render content', async () => {\n    render(<Badge>Content</Badge>);\n\n    expect(screen.getByText('Content')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;AAIA,QAAQ,CAAC,iBAAiB,EAAE,YAAA;IAC1B,EAAE,CAAC,uBAAuB,EAAE,YAAA,EAAA,OAAA,SAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA;;AAC1B,YAAAA,YAAM,CAACC,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,CAAC;YAE9B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE;;;AACxD,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,34 +1,36 @@
-import { b as __rest, a as __assign } from '../../tslib.es6-a39f91fc.js';
+import { c as __rest, b as __assign } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as classNames } from '../../index-6ea95111.js';
-import require$$0__default from 'react';
+import { c as classNames } from '../../index-DLQEsiym.js';
+import React__default from 'react';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 
 var buttonTypeClassNameMap = {
-    filledColor: 'p-btn--primary',
+    filledBlack: 'p-btn--secondary-black',
     filledGray: 'p-btn--secondary-grey',
     filledWhite: 'p-btn--secondary-white',
-    textColor: 'p-btn--secondary',
+    textBlack: 'p-btn--text-black',
     textWhite: 'p-btn--secondary-inverted',
     outlineWhite: 'p-btn--outline-white',
-    filledSuccess: 'p-btn--success',
+    outlineGray: 'p-btn--outline-grey',
     filledError: 'p-btn--danger',
 };
-var Button = require$$0__default.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? 'filledColor' : _c, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
-    return (jsx("button", __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
+var buttonDefaultAsType = 'button';
+var Button = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.as, ButtonTag = _b === void 0 ? buttonDefaultAsType : _b, className = _a.className, _c = _a.loading, loading = _c === void 0 ? false : _c, children = _a.children, _d = _a.variant, variant = _d === void 0 ? 'filledBlack' : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["as", "className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
+    return (jsx(ButtonTag, __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
             'p-btn--loading': loading,
             'tc-transparent': loading,
             'p-btn--icon-only': hideLabel,
         }), "data-testid": "button" }, props, { children: !loading && (leftIcon || rightIcon) ? (jsxs("div", { className: "d-flex jc-center ai-center", children: [leftIcon && (jsx("span", { className: classNames('d-inline-flex', {
                         'mr8': !hideLabel
-                    }), children: require$$0__default.cloneElement(leftIcon, {
+                    }), children: React__default.cloneElement(leftIcon, {
                         size: 20,
                         noMargin: true
                     }) })), jsx("div", { className: classNames({
                         'sr-only': hideLabel
                     }), children: children }), rightIcon && (jsx("span", { className: classNames('d-inline-flex', {
                         'ml8': !hideLabel
-                    }), children: require$$0__default.cloneElement(rightIcon, {
+                    }), children: React__default.cloneElement(rightIcon, {
                         size: 20,
                         noMargin: true
                     }) }))] })) : children })));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledColor'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'textColor'\n  | 'textWhite'\n  | 'outlineWhite'\n  | 'filledSuccess'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledColor: 'p-btn--primary',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  textColor: 'p-btn--secondary',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  filledSuccess: 'p-btn--success',\n  filledError: 'p-btn--danger',\n};\n\ntype ButtonProps = {\n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nconst Button = React.forwardRef((\n  {\n    className,\n    loading = false,\n    children,\n    variant = 'filledColor',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>\n) => (\n    <button\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </button>\n  )\n);\n\nexport { Button };\nexport type { ButtonProps, ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;AAaA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,eAAe;CAC7B,CAAC;IAWI,MAAM,GAAGA,mBAAK,CAAC,UAAU,CAAC,UAC9B,EASc,EACd,GAA2C;IATzC,IAAA,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cARV,qFASC,CADS;IAGP,QACDC,yBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;YACT,gBAAgB,EAAE,OAAO;YACzB,gBAAgB,EAAE,OAAO;YACzB,kBAAkB,EAAE,SAAS;SAC9B,CAAC,iBACQ,QAAQ,IAChB,KAAK,cAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,cAAK,SAAS,EAAC,4BAA4B,aACxC,QAAQ,KACPD,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;wBAC5B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,EAEDC,aAAK,SAAS,EAAE,UAAU,CAAC;wBACvB,SAAS,EAAE,SAAS;qBACrB,CAAC,YAED,QAAQ,GACL,EAEL,SAAS,KACRA,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,IACG,IACJ,QAAQ,IACL,EACV;CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledBlack'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'textBlack'\n  | 'textWhite'\n  | 'outlineGray'\n  | 'outlineWhite'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledBlack: 'p-btn--secondary-black',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  textBlack: 'p-btn--text-black',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  outlineGray: 'p-btn--outline-grey',\n  filledError: 'p-btn--danger',\n};\n\ntype ButtonProps = {\n  as?: React.ElementType\n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nconst buttonDefaultAsType = 'button' as const;\ntype ButtonDefaultAsType = typeof buttonDefaultAsType;\n\ntype Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;\ntype IntrinsicElement<E> = E extends PolymorphicButton ? IntrinsicElement<E> : never;\n\ninterface PolymorphicButton {\n  <As = ButtonDefaultAsType>(props:\n  As extends React.ComponentType<infer P> ? Merge<P, ButtonProps & {\n      as?: As;\n  }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], ButtonProps & {\n      as?: As;\n  }> : never): React.ReactElement | null;\n}\n\nconst Button = React.forwardRef((\n  {\n    as: ButtonTag = buttonDefaultAsType,\n    className,\n    loading = false,\n    children,\n    variant = 'filledBlack',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>\n) => (\n    <ButtonTag\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </ButtonTag>\n  )\n) as PolymorphicButton;\n\nexport { Button };\nexport type { ButtonProps, ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;;AAaA,IAAM,sBAAsB,GAAqC;AAC/D,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,UAAU,EAAE,uBAAuB;AACnC,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,SAAS,EAAE,mBAAmB;AAC9B,IAAA,SAAS,EAAE,2BAA2B;AACtC,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,WAAW,EAAE,qBAAqB;AAClC,IAAA,WAAW,EAAE,eAAe;CAC7B;AAYD,IAAM,mBAAmB,GAAG,QAAiB;AAe7C,IAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAC,UAC9B,EAUc,EACd,GAA2C,EAAA;AAVzC,IAAA,IAAA,UAAmC,EAA/B,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,mBAAmB,KAAA,EACnC,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,GAAA,EAAA,EACf,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,OAAuB,EAAvB,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,EACvB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,KAAK,GAAA,MAAA,CAAA,EAAA,EATV,2FAUC,CADS;AAGP,IAAA,QACDC,GAAA,CAAC,SAAS,aACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;AACT,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,kBAAkB,EAAE,SAAS;AAC9B,SAAA,CAAC,EAAA,aAAA,EACQ,QAAQ,EAAA,EAChB,KAAK,EAAA,EAAA,QAAA,EAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,aACxC,QAAQ,KACPD,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC;AACT,qBAAA,CAAC,YAEDD,cAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAC5B,wBAAA,IAAI,EAAE,EAAE;AACR,wBAAA,QAAQ,EAAE;AACX,qBAAA,CAAC,GACG,CACR,EAEDC,aAAK,SAAS,EAAE,UAAU,CAAC;AACvB,wBAAA,SAAS,EAAE;AACZ,qBAAA,CAAC,EAAA,QAAA,EAED,QAAQ,EAAA,CACL,EAEL,SAAS,KACRA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC;AACT,qBAAA,CAAC,YAEDD,cAAK,CAAC,YAAY,CAAC,SAAS,EAAE;AAC7B,wBAAA,IAAI,EAAE,EAAE;AACR,wBAAA,QAAQ,EAAE;qBACX,CAAC,EAAA,CACG,CACR,CAAA,EAAA,CACG,IACJ,QAAQ,EAAA,CAAA,CACF;AACb,CAAA;;;;"}

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

@@ -1,17 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from './index.js';
+import 'react';
+import '../../index-DLQEsiym.js';
+import InfoIcon from '../icon/icons/Info.js';
 import PlusIcon from '../icon/icons/Plus.js';
 import SendIcon from '../icon/icons/Send.js';
-import '../../tslib.es6-a39f91fc.js';
-import '../../index-6ea95111.js';
-import 'react';
+import '../../tslib.es6-CVlKGIvp.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../style-inject.es-1f59c1d0.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 
 var story = {
     title: 'JSX/Button',
     component: Button,
     argTypes: {
+        as: {
+            control: { type: 'text' },
+            description: 'Allow wrapper element type to be custom defined',
+        },
         children: {
             control: 'text',
             description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',
@@ -39,7 +45,7 @@ var story = {
     args: {
         children: 'Click me',
         disabled: false,
-        variant: 'filledColor',
+        variant: 'filledBlack',
         loading: false,
         hideLabel: false,
         className: 'wmn3',
@@ -47,40 +53,55 @@ var story = {
     parameters: {
         design: {
             url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',
-            type: 'figma'
+            type: 'figma',
         },
     },
 };
-var ButtonStory = function (_a) {
-    var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, variant = _a.variant, hideLabel = _a.hideLabel, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, disabled = _a.disabled;
-    return (jsx("div", { className: 'wmx6', children: jsx(Button, { className: className, loading: loading, variant: variant, hideLabel: hideLabel, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, children: children }) }));
+var ButtonStory = {
+    render: function (_a) {
+        var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, variant = _a.variant, hideLabel = _a.hideLabel, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, disabled = _a.disabled;
+        return (jsx("div", { className: "wmx6", children: jsx(Button, { className: className, loading: loading, variant: variant, hideLabel: hideLabel, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, children: children }) }));
+    },
+    name: 'Button',
 };
-ButtonStory.storyName = "Button";
-var ButtonVariants = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (jsxs("div", { children: [jsx("h3", { className: 'p-h3 mb24', children: "Filled variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-grey-300 br8', children: ["filledColor", "filledGray", "filledWhite"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Text variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-grey-300 br8', children: ["textColor", "textWhite"].map(function (variant, index) { return (jsxs("div", { className: variant === "textWhite" ? "bg-primary-500 px32 br8" : "", children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === "textWhite" ? "tc-white" : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Outline variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-primary-500 br8', children: jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16 tc-white', children: "outlineWhite" }), jsx(Button, { onClick: onClick, variant: 'outlineWhite', children: children })] }) }), jsx("h3", { className: 'p-h3 my24', children: "State variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-grey-300 br8', children: ["filledSuccess", "filledError"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) })] }));
+var ButtonVariants = {
+    render: function (_a) {
+        var children = _a.children, onClick = _a.onClick;
+        return (jsxs("div", { children: [jsx("h3", { className: "p-h3 mb24", children: "Filled variants" }), jsx("div", { className: "d-flex gap16 p24 bg-neutral-100 br8", children: ['filledBlack', 'filledGray', 'filledWhite'].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: "p-h4 mb16", children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: "p-h3 my24", children: "Text variants" }), jsx("div", { className: "d-flex gap16 p24 bg-neutral-100 br8", children: ['textBlack', 'textWhite'].map(function (variant, index) { return (jsxs("div", { className: variant === 'textWhite' ? 'bg-neutral-800 px32 pb16 br8' : '', children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === 'textWhite' ? 'tc-white' : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: "p-h3 my24", children: "Outline variants" }), jsx("div", { className: "d-flex gap16 p24 bg-neutral-100 br8", children: ['outlineGray', 'outlineWhite'].map(function (variant, index) { return (jsx("div", { className: variant === 'outlineWhite'
+                            ? 'bg-neutral-800 px32 py16 br8'
+                            : 'px32 py16', children: jsxs("div", { children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === 'outlineWhite' ? 'tc-white' : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }) }, variant)); }) }), jsx("h3", { className: "p-h3 my24", children: "State variants" }), jsx("div", { className: "d-flex gap16 p24 bg-neutral-100 br8", children: jsxs("div", { children: [jsx("h4", { className: "p-h4 mb16", children: "filledError" }), jsx(Button, { onClick: onClick, variant: "filledError", children: children })] }) })] }));
+    },
 };
-var ButtonOnBackgrounds = function (_a) {
-    var onClick = _a.onClick;
-    return (jsxs("div", { children: [jsxs("div", { className: 'p24 bg-white br8', children: [jsx("h3", { className: 'p-h3 mb16', children: "On white" }), jsx("div", { className: 'd-flex gap16', children: ["filledColor", "filledGray", "textColor"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] }), jsxs("div", { className: 'p24 bg-grey-200 br8', children: [jsx("h3", { className: 'p-h3 mb16', children: "On grey" }), jsx("div", { className: 'd-flex gap16', children: ["filledColor", "filledWhite", "textColor"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] }), jsxs("div", { className: 'p24 bg-primary-500 br8', children: [jsx("h3", { className: 'p-h3 mb16 tc-white', children: "On primary" }), jsx("div", { className: 'd-flex gap16', children: ["filledWhite", "outlineWhite", "textWhite"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] })] }));
+var ButtonWithIcons = {
+    render: function (_a) {
+        var children = _a.children, onClick = _a.onClick;
+        return (jsxs("div", { className: "d-flex gap16", children: [jsx(Button, { leftIcon: jsx(SendIcon, {}), onClick: onClick, children: children }), jsx(Button, { rightIcon: jsx(SendIcon, {}), onClick: onClick, children: children })] }));
+    },
 };
-var ButtonWithIcons = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (jsxs("div", { className: 'd-flex gap16', children: [jsx(Button, { leftIcon: jsx(SendIcon, {}), onClick: onClick, children: children }), jsx(Button, { rightIcon: jsx(SendIcon, {}), onClick: onClick, children: children })] }));
+var ButtonWithIconOnly = {
+    render: function (_a) {
+        var children = _a.children, onClick = _a.onClick;
+        return (jsx(Button, { leftIcon: jsx(PlusIcon, {}), hideLabel: true, onClick: onClick, children: children }));
+    },
 };
-var ButtonWithIconOnly = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (jsx(Button, { leftIcon: jsx(PlusIcon, {}), hideLabel: true, onClick: onClick, children: children }));
+var ButtonLoading = {
+    render: function (_a) {
+        var children = _a.children, onClick = _a.onClick;
+        return (jsx(Button, { loading: true, onClick: onClick, children: children }));
+    },
 };
-var ButtonLoading = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (jsx(Button, { loading: true, onClick: onClick, children: children }));
+var ButtonDisabled = {
+    render: function (_a) {
+        var children = _a.children, onClick = _a.onClick;
+        return (jsx(Button, { disabled: true, onClick: onClick, children: children }));
+    },
 };
-var ButtonDisabled = function (_a) {
-    var children = _a.children, onClick = _a.onClick;
-    return (jsx(Button, { disabled: true, onClick: onClick, children: children }));
+var ButtonAsOtherComponents = {
+    render: function (_a) {
+        var children = _a.children; _a.as; var onClick = _a.onClick;
+        return (jsxs("div", { className: "d-flex fd-column gap16 p24 bg-neutral-100", children: [jsx("h3", { className: "p-h3", children: "As an anchor:" }), jsx(Button, { as: "a", href: "https://feather-insurance.com", target: "_blank", children: children }), jsx("h3", { className: "p-h3", children: "As a button:" }), jsx(Button, { as: "button", onClick: onClick, children: children }), jsx("h3", { className: "p-h3", children: "As a h3:" }), jsx(Button, { as: "h3", children: children }), jsxs("p", { className: "p-p p-p--small fw-bold d-flex ai-center gap8 mt32", children: [jsx(InfoIcon, {}), "Inspect elements to see the different HTML tags being rendered."] })] }));
+    },
 };
 
-export default story;
-export { ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
+export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons, story as default };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { Button, ButtonProps, ButtonVariant } from '.';\nimport { PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    children: 'Click me',\n    disabled: false,\n    variant: 'filledColor',\n    loading: false,\n    hideLabel: false,\n    className: 'wmn3',\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma'\n    },\n  },\n};\n\nexport const ButtonStory = ({\n  className,\n  loading = false,\n  children,\n  variant,\n  hideLabel,\n  leftIcon,\n  rightIcon,\n  disabled,\n}: ButtonProps) => (\n  <div className='wmx6'>\n    <Button\n      className={className}\n      loading={loading}\n      variant={variant}\n      hideLabel={hideLabel}\n      leftIcon={leftIcon}\n      rightIcon={rightIcon}\n      disabled={disabled}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n  <div>\n    <h3 className='p-h3 mb24'>Filled variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Text variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gFAAgF;SAC9F;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8CAA8C;SAC5D;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6JAA6J;SAC3K;QACD,SAAS,EAAE;YACT,WAAW,EAAE,8JAA8J;SAC5K;QACD,OAAO,EAAE;YACP,WAAW,EAAE,iCAAiC;SAC/C;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yGAAyG;SACvH;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,wCAAwC;SACtD;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,MAAM;KAClB;IACD,UAAU,EAAE;QACV,MAAM,EAAE;YACN,GAAG,EAAE,kKAAkK;YACvK,IAAI,EAAE,OAAO;SACd;KACF;EACD;IAEW,WAAW,GAAG,UAAC,EASd;QARZ,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA;IACS,QACjBA,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACF,GACL;AAbW,EAcjB;AAEF,WAAW,CAAC,SAAS,GAAG,QAAQ,CAAC;IAEpB,cAAc,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAoB,QACpEC,yBACED,YAAI,SAAS,EAAC,WAAW,gCAAqB,EAC9CA,aAAK,SAAS,EAAC,kCAAkC,YAC9C,CAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QAC5DC,yBACED,YAAI,SAAS,EAAC,WAAW,YACtB,OAAO,GACL,EAELA,IAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACxD,QAAQ,GACF,KAPD,OAAO,CAQX,IACT,CAAC,GACE,EAENA,YAAI,SAAS,EAAC,WAAW,8BAAmB,EAC5CA,aAAK,SAAS,EAAC,kCAAkC,YAC9C,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,QAClDC,cAAmB,SAAS,EAAE,OAAO,KAAK,WAAW,GAAG,yBAAyB,GAAG,EAAE,aACpFD,YAAI,SAAS,EAAE,oBAAa,OAAO,KAAK,WAAW,GAAG,UAAU,GAAG,EAAE,CAAE,YACpE,OAAO,GACL,EAELA,IAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACxD,QAAQ,GACF,KAPD,OAAO,CAQX,IACP,CAAC,GACE,EAENA,YAAI,SAAS,EAAC,WAAW,iCAAsB,EAC/CA,aAAK,SAAS,EAAC,qCAAqC,YAClDC,yBACED,YAAI,SAAS,EAAC,oBAAoB,6BAE7B,EAELA,IAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,YAC9C,QAAQ,GACF,IACL,GACF,EAENA,YAAI,SAAS,EAAC,WAAW,+BAAoB,EAC7CA,aAAK,SAAS,EAAC,kCAAkC,YAC9C,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QAC/CC,yBACED,YAAI,SAAS,EAAC,WAAW,YACtB,OAAO,GACL,EAELA,IAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACxD,QAAQ,GACF,KAPD,OAAO,CAQX,IACT,CAAC,GACE,IACF;AA3D8D,EA4DpE;IAEW,mBAAmB,GAAG,UAAC,EAAwB;QAAtB,OAAO,aAAA;IAAoB,QAC/DC,yBACEA,cAAK,SAAS,EAAC,kBAAkB,aAC/BD,YAAI,SAAS,EAAC,WAAW,yBAAc,EACvCA,aAAK,SAAS,EAAC,cAAc,YAC1B,CAAE,aAAa,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QAC5DA,IAAC,MAAM,IAAe,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACtE,OAAO,IADG,OAAO,CAEX,IACV,CAAC,GACE,IACF,EAENC,cAAK,SAAS,EAAC,qBAAqB,aAClCD,YAAI,SAAS,EAAC,WAAW,wBAAa,EACtCA,aAAK,SAAS,EAAC,cAAc,YAC1B,CAAE,aAAa,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QAC7DA,IAAC,MAAM,IAAe,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACtE,OAAO,IADG,OAAO,CAEX,IACV,CAAC,GACE,IACF,EAENC,cAAK,SAAS,EAAC,wBAAwB,aACrCD,YAAI,SAAS,EAAC,oBAAoB,2BAAgB,EAClDA,aAAK,SAAS,EAAC,cAAc,YAC1B,CAAC,aAAa,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QAC7DA,IAAC,MAAM,IAAe,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAwB,YACtE,OAAO,IADG,OAAO,CAEX,IACV,CAAC,GACE,IACF,IACF;AAlCyD,EAmC/D;IAEW,eAAe,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAoB,QACrEC,cAAK,SAAS,EAAC,cAAc,aAC3BD,IAAC,MAAM,IAAC,QAAQ,EAAEA,IAAC,QAAQ,KAAG,EAAE,OAAO,EAAE,OAAO,YAC7C,QAAQ,GACF,EACTA,IAAC,MAAM,IAAC,SAAS,EAAEA,IAAC,QAAQ,KAAG,EAAE,OAAO,EAAE,OAAO,YAC9C,QAAQ,GACF,IACL;AAR+D,EASrE;IAEW,kBAAkB,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAoB,QACxEA,IAAC,MAAM,IAAC,QAAQ,EAAEA,IAAC,QAAQ,KAAG,EAAE,SAAS,QAAC,OAAO,EAAE,OAAO,YACvD,QAAQ,GACF;AAH+D,EAIxE;IAEW,aAAa,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAoB,QACnEA,IAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,YAC7B,QAAQ,GACF;AAH0D,EAInE;IAEW,cAAc,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAoB,QACpEA,IAAC,MAAM,IAAC,QAAQ,QAAC,OAAO,EAAE,OAAO,YAC9B,QAAQ,GACF;AAH2D;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { Button, ButtonProps, ButtonVariant } from '.';\nimport { InfoIcon, PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    as: {\n      control: { type: 'text' },\n      description: 'Allow wrapper element type to be custom defined',\n    },\n    children: {\n      control: 'text',\n      description:\n        'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description:\n        'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description:\n        'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      description:\n        'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    children: 'Click me',\n    disabled: false,\n    variant: 'filledBlack',\n    loading: false,\n    hideLabel: false,\n    className: 'wmn3',\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma',\n    },\n  },\n};\n\nexport const ButtonStory = {\n  render: ({\n    className,\n    loading = false,\n    children,\n    variant,\n    hideLabel,\n    leftIcon,\n    rightIcon,\n    disabled,\n  }: ButtonProps) => (\n    <div className=\"wmx6\">\n      <Button\n        className={className}\n        loading={loading}\n        variant={variant}\n        hideLabel={hideLabel}\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        disabled={disabled}\n      >\n        {children}\n      </Button>\n    </div>\n  ),\n\n  name: 'Button',\n};\n\nexport const ButtonVariants = {\n  render: ({ children, onClick }: ButtonProps) => (\n    <div>\n      <h3 className=\"p-h3 mb24\">Filled variants</h3>\n      <div className=\"d-flex gap16 p24 bg-neutral-100 br8\">\n        {['filledBlack', 'filledGray', 'filledWhite'].map((variant) => (\n          <div key={variant}>\n            <h4 className=\"p-h4 mb16\">{variant}</h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n        ))}\n      </div>\n\n      <h3 className=\"p-h3 my24\">Text variants</h3>\n      <div className=\"d-flex gap16 p24 bg-neutral-100 br8\">\n        {['textBlack', 'textWhite'].map((variant, index) => (\n          <div\n            key={variant}\n            className={\n              variant === 'textWhite' ? 'bg-neutral-800 px32 pb16 br8' : ''\n            }\n          >\n            <h4\n              className={`p-h4 mb16 ${variant === 'textWhite' ? 'tc-white' : ''}`}\n            >\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n        ))}\n      </div>\n\n      <h3 className=\"p-h3 my24\">Outline variants</h3>\n      <div className=\"d-flex gap16 p24 bg-neutral-100 br8\">\n        {['outlineGray', 'outlineWhite'].map((variant, index) => (\n          <div\n            key={variant}\n            className={\n              variant === 'outlineWhite'\n                ? 'bg-neutral-800 px32 py16 br8'\n                : 'px32 py16'\n            }\n          >\n            <div>\n              <h4\n                className={`p-h4 mb16 ${\n                  variant === 'outlineWhite' ? 'tc-white' : ''\n                }`}\n              >\n                {variant}\n              </h4>\n\n              <Button onClick={onClick} variant={variant as ButtonVariant}>\n                {children}\n              </Button>\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <h3 className=\"p-h3 my24\">State variants</h3>\n      <div className=\"d-flex gap16 p24 bg-neutral-100 br8\">\n        <div>\n          <h4 className=\"p-h4 mb16\">filledError</h4>\n\n          <Button onClick={onClick} variant=\"filledError\">\n            {children}\n          </Button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const ButtonWithIcons = {\n  render: ({ children, onClick }: ButtonProps) => (\n    <div className=\"d-flex gap16\">\n      <Button leftIcon={<SendIcon />} onClick={onClick}>\n        {children}\n      </Button>\n      <Button rightIcon={<SendIcon />} onClick={onClick}>\n        {children}\n      </Button>\n    </div>\n  ),\n};\n\nexport const ButtonWithIconOnly = {\n  render: ({ children, onClick }: ButtonProps) => (\n    <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n      {children}\n    </Button>\n  ),\n};\n\nexport const ButtonLoading = {\n  render: ({ children, onClick }: ButtonProps) => (\n    <Button loading onClick={onClick}>\n      {children}\n    </Button>\n  ),\n};\n\nexport const ButtonDisabled = {\n  render: ({ children, onClick }: ButtonProps) => (\n    <Button disabled onClick={onClick}>\n      {children}\n    </Button>\n  ),\n};\n\nexport const ButtonAsOtherComponents = {\n  render: ({ children, as, onClick }: ButtonProps) => (\n    <div className=\"d-flex fd-column gap16 p24 bg-neutral-100\">\n      <h3 className=\"p-h3\">As an anchor:</h3>\n      <Button as=\"a\" href=\"https://feather-insurance.com\" target=\"_blank\">\n        {children}\n      </Button>\n\n      <h3 className=\"p-h3\">As a button:</h3>\n      <Button as=\"button\" onClick={onClick}>\n        {children}\n      </Button>\n\n      <h3 className=\"p-h3\">As a h3:</h3>\n      <Button as=\"h3\">{children}</Button>\n\n      <p className=\"p-p p-p--small fw-bold d-flex ai-center gap8 mt32\">\n        <InfoIcon />\n        Inspect elements to see the different HTML tags being rendered.\n      </p>\n    </div>\n  ),\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/button/index.test.js

@@ -1,12 +1,13 @@
-import { c as __awaiter, d as __generator } from '../../tslib.es6-a39f91fc.js';
+import { _ as __awaiter, a as __generator } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
-import { c as customRender, s as screen } from '../../customRender-d03c10b6.js';
+import { c as customRender, s as screen } from '../../customRender-DzdqZxUd.js';
 import { Button } from './index.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
 import 'react-dom';
-import '../../_commonjsHelpers-4730bd53.js';
+import 'util';
 import 'react-dom/test-utils';
-import '../../index-6ea95111.js';
+import '../../index-DLQEsiym.js';
 
 var buttonContent = "Click here";
 var FakeIcon = function () { return (jsx("span", { children: "ABC" })); };

package/dist/esm/components/button/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/button/index.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\n\nimport { Button } from '.';\n\nconst buttonContent = \"Click here\";\n\nconst FakeIcon = () => (\n  <span>ABC</span>\n)\n\nconst mockOnClick = jest.fn();\n\ndescribe('Button component', () => {\n  it('Should render content', () => {\n    render(<Button>{buttonContent}</Button>);\n\n    expect(screen.getByText(buttonContent)).toBeInTheDocument();\n  });\n  \n  it('Should render leftIcon', () => {\n    render(<Button leftIcon={<FakeIcon />}>{buttonContent}</Button>);\n\n    expect(screen.getByText(\"ABC\")).toBeInTheDocument();\n  });\n  \n  it('Should render rightIcon', () => {\n    render(<Button rightIcon={<FakeIcon />}>{buttonContent}</Button>);\n\n    expect(screen.getByText(\"ABC\")).toBeInTheDocument();\n  });\n  \n  it('Should be disabled', () => {\n    render(<Button disabled>{buttonContent}</Button>);\n\n    expect(screen.getByTestId(\"button\")).toBeDisabled();\n  });\n  \n  it('Should show loading state', () => {\n    render(<Button loading>{buttonContent}</Button>);\n\n    expect(screen.getByTestId(\"button\")).toHaveClass('p-btn--loading');\n  });\n  \n  it('Should call onClick  clicked', async () => {\n    const { user } = render(<Button onClick={mockOnClick}>{buttonContent}</Button>);\n\n    await user.click(screen.getByText(buttonContent));\n\n    expect(mockOnClick).toHaveBeenCalledTimes(1)\n  });\n});\n"],"names":["_jsx","render"],"mappings":";;;;;;;;;;AAIA,IAAM,aAAa,GAAG,YAAY,CAAC;AAEnC,IAAM,QAAQ,GAAG,cAAM,QACrBA,gCAAgB,IACjB,CAAA;AAED,IAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE;IAC3B,EAAE,CAAC,uBAAuB,EAAE;QAC1BC,YAAM,CAACD,IAAC,MAAM,cAAE,aAAa,GAAU,CAAC,CAAC;QAEzC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC7D,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE;QAC3BC,YAAM,CAACD,IAAC,MAAM,IAAC,QAAQ,EAAEA,IAAC,QAAQ,KAAG,YAAG,aAAa,GAAU,CAAC,CAAC;QAEjE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE;QAC5BC,YAAM,CAACD,IAAC,MAAM,IAAC,SAAS,EAAEA,IAAC,QAAQ,KAAG,YAAG,aAAa,GAAU,CAAC,CAAC;QAElE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,oBAAoB,EAAE;QACvBC,YAAM,CAACD,IAAC,MAAM,IAAC,QAAQ,kBAAE,aAAa,GAAU,CAAC,CAAC;QAElD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE;QAC9BC,YAAM,CAACD,IAAC,MAAM,IAAC,OAAO,kBAAE,aAAa,GAAU,CAAC,CAAC;QAEjD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;KACpE,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE;;;;;oBACzB,IAAI,GAAKC,YAAM,CAACD,IAAC,MAAM,IAAC,OAAO,EAAE,WAAW,YAAG,aAAa,GAAU,CAAC,KAAnE,CAAoE;oBAEhF,qBAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAA;;oBAAjD,SAAiD,CAAC;oBAElD,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;;;;SAC7C,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/button/index.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\n\nimport { Button } from '.';\n\nconst buttonContent = \"Click here\";\n\nconst FakeIcon = () => (\n  <span>ABC</span>\n)\n\nconst mockOnClick = jest.fn();\n\ndescribe('Button component', () => {\n  it('Should render content', () => {\n    render(<Button>{buttonContent}</Button>);\n\n    expect(screen.getByText(buttonContent)).toBeInTheDocument();\n  });\n  \n  it('Should render leftIcon', () => {\n    render(<Button leftIcon={<FakeIcon />}>{buttonContent}</Button>);\n\n    expect(screen.getByText(\"ABC\")).toBeInTheDocument();\n  });\n  \n  it('Should render rightIcon', () => {\n    render(<Button rightIcon={<FakeIcon />}>{buttonContent}</Button>);\n\n    expect(screen.getByText(\"ABC\")).toBeInTheDocument();\n  });\n  \n  it('Should be disabled', () => {\n    render(<Button disabled>{buttonContent}</Button>);\n\n    expect(screen.getByTestId(\"button\")).toBeDisabled();\n  });\n  \n  it('Should show loading state', () => {\n    render(<Button loading>{buttonContent}</Button>);\n\n    expect(screen.getByTestId(\"button\")).toHaveClass('p-btn--loading');\n  });\n  \n  it('Should call onClick  clicked', async () => {\n    const { user } = render(<Button onClick={mockOnClick}>{buttonContent}</Button>);\n\n    await user.click(screen.getByText(buttonContent));\n\n    expect(mockOnClick).toHaveBeenCalledTimes(1)\n  });\n});\n"],"names":["_jsx","render"],"mappings":";;;;;;;;;;;AAIA,IAAM,aAAa,GAAG,YAAY;AAElC,IAAM,QAAQ,GAAG,YAAA,EAAM,QACrBA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAgB,EACjB,CAFsB,CAEtB;AAED,IAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE;AAE7B,QAAQ,CAAC,kBAAkB,EAAE,YAAA;IAC3B,EAAE,CAAC,uBAAuB,EAAE,YAAA;AAC1B,QAAAC,YAAM,CAACD,GAAA,CAAC,MAAM,cAAE,aAAa,EAAA,CAAU,CAAC;QAExC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE;AAC7D,IAAA,CAAC,CAAC;IAEF,EAAE,CAAC,wBAAwB,EAAE,YAAA;AAC3B,QAAAC,YAAM,CAACD,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAEA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,QAAA,EAAG,aAAa,EAAA,CAAU,CAAC;QAEhE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE;AACrD,IAAA,CAAC,CAAC;IAEF,EAAE,CAAC,yBAAyB,EAAE,YAAA;AAC5B,QAAAC,YAAM,CAACD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAEA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,QAAA,EAAG,aAAa,EAAA,CAAU,CAAC;QAEjE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE;AACrD,IAAA,CAAC,CAAC;IAEF,EAAE,CAAC,oBAAoB,EAAE,YAAA;QACvBC,YAAM,CAACD,IAAC,MAAM,EAAA,EAAC,QAAQ,EAAA,IAAA,EAAA,QAAA,EAAE,aAAa,EAAA,CAAU,CAAC;QAEjD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,EAAE;AACrD,IAAA,CAAC,CAAC;IAEF,EAAE,CAAC,2BAA2B,EAAE,YAAA;QAC9BC,YAAM,CAACD,IAAC,MAAM,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAAE,aAAa,EAAA,CAAU,CAAC;AAEhD,QAAA,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,gBAAgB,CAAC;AACpE,IAAA,CAAC,CAAC;IAEF,EAAE,CAAC,8BAA8B,EAAE,YAAA,EAAA,OAAA,SAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA;;;;;AACzB,oBAAA,IAAI,GAAKC,YAAM,CAACD,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAG,aAAa,EAAA,CAAU,CAAC,KAAnE;oBAEZ,OAAA,CAAA,CAAA,YAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;;AAAjD,oBAAA,EAAA,CAAA,IAAA,EAAiD;oBAEjD,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;;;;AAC7C,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC;AACJ,CAAC,CAAC"}