@popsure/dirty-swan 0.59.0-beta → 0.59.0-beta-2

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

@@ -4,19 +4,18 @@ import { c as classNames } from '../../index-6ea95111.js';
 import React__default from 'react';
 
 var buttonTypeClassNameMap = {
-    filledColor: 'p-btn--primary',
+    filledBlack: 'p-btn--secondary-black',
     filledGray: 'p-btn--secondary-grey',
     filledWhite: 'p-btn--secondary-white',
-    filledBlack: 'p-btn--secondary-black',
-    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 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 ? 'filledColor' : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["as", "className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
+    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,

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  | 'filledBlack'\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  filledBlack: 'p-btn--secondary-black',\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  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 = 'filledColor',\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":";;;;;AAcA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,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;AAYF,IAAM,mBAAmB,GAAG,QAAiB,CAAC;IAexC,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAC,UAC9B,EAUc,EACd,GAA2C;IAVzC,IAAA,UAAmC,EAA/B,SAAS,mBAAG,mBAAmB,KAAA,EACnC,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,cATV,2FAUC,CADS;IAGP,QACDC,IAAC,SAAS,aACR,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,cAAK,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,cAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,IACG,IACJ,QAAQ,IACF,EACb;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;IAC/D,WAAW,EAAE,wBAAwB;IACrC,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,mBAAmB;IAC9B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,WAAW,EAAE,qBAAqB;IAClC,WAAW,EAAE,eAAe;CAC7B,CAAC;AAYF,IAAM,mBAAmB,GAAG,QAAiB,CAAC;IAexC,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAC,UAC9B,EAUc,EACd,GAA2C;IAVzC,IAAA,UAAmC,EAA/B,SAAS,mBAAG,mBAAmB,KAAA,EACnC,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,cATV,2FAUC,CADS;IAGP,QACDC,IAAC,SAAS,aACR,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,cAAK,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,cAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,IACG,IACJ,QAAQ,IACF,EACb;CAAA;;;;"}

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

@@ -44,7 +44,7 @@ var story = {
     args: {
         children: 'Click me',
         disabled: false,
-        variant: 'filledColor',
+        variant: 'filledBlack',
         loading: false,
         hideLabel: false,
         className: 'wmn3',
@@ -63,11 +63,7 @@ var ButtonStory = function (_a) {
 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-neutral-300 br8', children: ["filledColor", "filledGray", "filledWhite", "filledBlack"].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-300 br8', children: ["textColor", "textWhite"].map(function (variant, index) { return (jsxs("div", { className: variant === "textWhite" ? "bg-purple-600 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-purple-600 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-neutral-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 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-neutral-100 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-purple-600 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)); }) })] })] }));
+    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 ButtonWithIcons = function (_a) {
     var children = _a.children, onClick = _a.onClick;
@@ -91,5 +87,5 @@ var ButtonAsOtherComponents = function (_a) {
 };
 
 export default story;
-export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
+export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
 //# 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 { ElementType } from 'react';\nimport { 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: '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-neutral-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\", \"filledBlack\"].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-neutral-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-purple-600 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-purple-600 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-neutral-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-neutral-100 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-purple-600 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 const ButtonAsOtherComponents = ({ 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\">\n      {children}\n    </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\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { ElementType } from 'react';\nimport { 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: '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: '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  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-neutral-100 br8'>\n      {[ \"filledBlack\", \"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-neutral-100 br8'>\n      {[\"textBlack\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-neutral-800 px32 pb16 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-neutral-100 br8'>\n      {[\"outlineGray\", \"outlineWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"outlineWhite\" ? \"bg-neutral-800 px32 py16 br8\" : \"px32 py16\"}>\n          <div>\n            <h4 className={`p-h4 mb16 ${variant === \"outlineWhite\" ? \"tc-white\" : ''}`}>\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'>\n          filledError\n        </h4>\n\n        <Button onClick={onClick} variant=\"filledError\">\n          {children}\n        </Button>\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 const ButtonAsOtherComponents = ({ 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\">\n      {children}\n    </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\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/comparisonTable/components/TableArrows/index.js

@@ -3,7 +3,7 @@ import { c as classNames } from '../../../../index-6ea95111.js';
 import ArrowIcon from './Arrow.js';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: stretch;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 56px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 8px;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #b8b8c0;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f7f7fd;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #26262e;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f7f7fd;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  pointer-events: none;\n}";
+var css_248z = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: stretch;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 56px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 8px;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #b8b8c0;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f7f7fd;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #26262e;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f7f7fd;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  visibility: hidden;\n  pointer-events: none;\n}";
 var styles = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB","noPointerEvents":"style-module_noPointerEvents__21KuB"};
 styleInject(css_248z);
 

package/dist/esm/components/dateSelector/components/Calendar.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { C as Calendar } from '../../../Calendar-2d7e51b5.js';
+export { C as Calendar } from '../../../Calendar-5ad3eccf.js';
 import '../../icon/icons/Calendar.js';
 import '../../button/index.js';
 import '../../../_commonjsHelpers-4730bd53.js';

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

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import { a as dayjs, C as Calendar } from '../../Calendar-2d7e51b5.js';
+import { a as dayjs, C as Calendar } from '../../Calendar-5ad3eccf.js';
 import { c as commonjsGlobal } from '../../_commonjsHelpers-4730bd53.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { Input } from '../input/index.js';

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

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { DateSelector } from './index.js';
 import { c as commonjsGlobal } from '../../_commonjsHelpers-4730bd53.js';
-import { d as dayjs_min } from '../../Calendar-2d7e51b5.js';
+import { d as dayjs_min } from '../../Calendar-5ad3eccf.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../style-inject.es-1f59c1d0.js';
 import '../input/index.js';

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

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../Calendar-2d7e51b5.js';
+import '../../Calendar-5ad3eccf.js';
 import '../icon/icons/Calendar.js';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../../index-6ea95111.js';

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

@@ -5,7 +5,7 @@ import { c as classNames } from '../../index-6ea95111.js';
 import { g as generateId } from '../../index-69a46657.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: top 0.3s, color 0.3s;\n}\n.style-module_prefix--with-value__2QiEA {\n  color: var(--ds-neutral-900);\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-purple-600);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\ninput:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-neutral-900);\n}\ninput:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: top 0.3s, color 0.3s;\n}\n.style-module_prefix--with-value__2QiEA {\n  color: var(--ds-neutral-900);\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-neutral-900);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\ninput:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-neutral-900);\n}\ninput:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
 var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-value":"style-module_prefix--with-value__2QiEA","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
 styleInject(css_248z);
 

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

@@ -100,7 +100,7 @@ var BottomOrRegularModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, classNames: classNames, title: title, isOpen: display, size: size, onModalScroll: onModalScroll, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, classNames: classNames, title: title, isOpen: display, size: size, onModalScroll: onModalScroll, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
 var RegularModalStory = function (_a) {
@@ -110,7 +110,7 @@ var RegularModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 RegularModalStory.storyName = 'RegularModal';
 var BottomModalStory = function (_a) {
@@ -120,7 +120,7 @@ var BottomModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 BottomModalStory.storyName = 'BottomModal';
 var FullScreenModalStory = function (_a) {
@@ -130,7 +130,7 @@ var FullScreenModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Full screen modals are primary meant to be used as blocker screens. The modal will cover the entire screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(FullScreenModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Full screen modals are primary meant to be used as blocker screens. The modal will cover the entire screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(FullScreenModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 FullScreenModalStory.storyName = 'FullScreenModal';
 var NonDismissibleModal = function (_a) {
@@ -140,7 +140,7 @@ var NonDismissibleModal = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 var ModalWithFooter = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
@@ -149,7 +149,7 @@ var ModalWithFooter = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textColor", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsx("div", { children: children }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsx("div", { children: children }) }) })] }));
 };
 var ModalWithFooterAndScroll = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
@@ -158,7 +158,7 @@ var ModalWithFooterAndScroll = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textColor", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
 };
 
 export default story;

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\nimport { FullScreenModal } from './fullScreenModal';\n\nconst story = {\n  title: 'JSX/Modals',\n  component: BottomOrRegularModal,\n  argTypes: {\n    title: {\n      description: 'The title that needs to be displayed on the modal',\n    },\n    isOpen: {\n      description:\n        'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',\n    },\n    dismissible: {\n      description: 'The content that gets displayed on the modal',\n    },\n    className: {\n      description: 'Any additional className',\n    },\n    classNames: {\n      description:\n        'Class names for the Modal component and its children elements',\n    },\n    size: {\n      description: 'The size of the modal, either large or default.',\n      control: 'radio',\n      options: {\n        default: 'default',\n        large: 'large',\n      },\n    },\n    children: {\n      description: 'The content that gets displayed on the modal',\n      type: 'text',\n      table: {\n        type: {\n          summary: 'ReactNode',\n        },\n      },\n    },\n    onClose: {\n      description: 'Callback when the user close the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onModalScroll: {\n      description: 'Callback when the user scroll the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    title: 'Modal title',\n    isOpen: false,\n    dismissible: true,\n    className: '',\n    classNames: {\n      wrapper: '',\n      container: '',\n      overlay: '',\n      header: '',\n      closeButton: '',\n      closeButtonIcon: '',\n      title: '',\n      body: '',\n      footer: '',\n    },\n    children: 'Modal content to be displayed',\n    size: 'default',\n  },\n  parameters: {\n    componentSubtitle:\n      'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n    docs: {\n      description: {\n        component:\n          'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n      },\n    },\n  },\n};\n\nexport const BottomOrRegularModalStory = ({\n  children,\n  className,\n  classNames,\n  dismissible,\n  isOpen,\n  onClose,\n  onModalScroll,\n  size,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"d-flex p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        dismissible={dismissible}\n        className={className}\n        classNames={classNames}\n        title={title}\n        isOpen={display}\n        size={size}\n        onModalScroll={onModalScroll}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Regular modals are primary meant to be used on Desktop or Tablet\n      environment. The modal will appear in the middle of the screen and the\n      user will be able to dismiss them using the top left \"X\" icon. If you want\n      to use it for Mobile only, you should check BottomModal instead. Want to\n      use either Regular Modal or Bottom Modal based on the screen width? You\n      can use Bottom or Regular modal.\n      <button\n        className=\"d-flex p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n      <RegularModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </RegularModal>\n    </>\n  );\n};\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Bottom modals are primary meant to be used on Mobile environment. The\n      modal will appear from the bottom of the screen and the user will be able\n      to dismiss them using the top left \"X\" icon. If you want to use it for\n      Desktop only, you should check Regular modal instead. Want to use either\n      Regular Modal or Bottom Modal based on the screen width? You can use\n      Bottom or Regular modal.\n      <button\n        className=\"d-flex p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n      <BottomModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomModal>\n    </>\n  );\n};\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const FullScreenModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Full screen modals are primary meant to be used as blocker screens. The\n      modal will cover the entire screen and the user will be able to dismiss\n      them using the top left \"X\" icon.\n      <button\n        className=\"d-flex p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n      <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </FullScreenModal>\n    </>\n  );\n};\n\nFullScreenModalStory.storyName = 'FullScreenModal';\n\nexport const NonDismissibleModal = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Setting the dismissible prop to false will hide the close button and\n      prevent the user from closing it using the escape key or clicking outside.\n      This prop can be useful if we want the user to explicitly interact with\n      the modal options.\n      <strong>Warning:</strong> a modal with the dismissible prop can only be\n      closed by changing the isOpen prop to false.\n      <button\n        className=\"d-flex p-btn--primary wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n      <BottomOrRegularModal\n        dismissible={false}\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport const ModalWithFooter = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"d-flex p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={\n          <div className=\"d-flex fd-row gap8\">\n            <Button\n              variant=\"textColor\"\n              className=\"w100\"\n              onClick={handleOnClose}\n            >\n              Skip\n            </Button>\n            <Button className=\"w100\" onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"p24\">\n          <div>{children}</div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport const ModalWithFooterAndScroll = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <button\n        className=\"d-flex p-btn--primary wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={\n          <div className=\"d-flex fd-row gap8\">\n            <Button\n              variant=\"textColor\"\n              className=\"w100\"\n              onClick={handleOnClose}\n            >\n              Skip\n            </Button>\n            <Button className=\"w100\" onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"p24\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            <div style={{ height: '840px' }} />\n            {children}\n          </div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\nimport { FullScreenModal } from './fullScreenModal';\n\nconst story = {\n  title: 'JSX/Modals',\n  component: BottomOrRegularModal,\n  argTypes: {\n    title: {\n      description: 'The title that needs to be displayed on the modal',\n    },\n    isOpen: {\n      description:\n        'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',\n    },\n    dismissible: {\n      description: 'The content that gets displayed on the modal',\n    },\n    className: {\n      description: 'Any additional className',\n    },\n    classNames: {\n      description:\n        'Class names for the Modal component and its children elements',\n    },\n    size: {\n      description: 'The size of the modal, either large or default.',\n      control: 'radio',\n      options: {\n        default: 'default',\n        large: 'large',\n      },\n    },\n    children: {\n      description: 'The content that gets displayed on the modal',\n      type: 'text',\n      table: {\n        type: {\n          summary: 'ReactNode',\n        },\n      },\n    },\n    onClose: {\n      description: 'Callback when the user close the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onModalScroll: {\n      description: 'Callback when the user scroll the modal',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    title: 'Modal title',\n    isOpen: false,\n    dismissible: true,\n    className: '',\n    classNames: {\n      wrapper: '',\n      container: '',\n      overlay: '',\n      header: '',\n      closeButton: '',\n      closeButtonIcon: '',\n      title: '',\n      body: '',\n      footer: '',\n    },\n    children: 'Modal content to be displayed',\n    size: 'default',\n  },\n  parameters: {\n    componentSubtitle:\n      'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n    docs: {\n      description: {\n        component:\n          'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n      },\n    },\n  },\n};\n\nexport const BottomOrRegularModalStory = ({\n  children,\n  className,\n  classNames,\n  dismissible,\n  isOpen,\n  onClose,\n  onModalScroll,\n  size,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <Button\n        className=\"wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n\n      <BottomOrRegularModal\n        dismissible={dismissible}\n        className={className}\n        classNames={classNames}\n        title={title}\n        isOpen={display}\n        size={size}\n        onModalScroll={onModalScroll}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Regular modals are primary meant to be used on Desktop or Tablet\n      environment. The modal will appear in the middle of the screen and the\n      user will be able to dismiss them using the top left \"X\" icon. If you want\n      to use it for Mobile only, you should check BottomModal instead. Want to\n      use either Regular Modal or Bottom Modal based on the screen width? You\n      can use Bottom or Regular modal.\n      <Button\n        className=\"wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n      <RegularModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </RegularModal>\n    </>\n  );\n};\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Bottom modals are primary meant to be used on Mobile environment. The\n      modal will appear from the bottom of the screen and the user will be able\n      to dismiss them using the top left \"X\" icon. If you want to use it for\n      Desktop only, you should check Regular modal instead. Want to use either\n      Regular Modal or Bottom Modal based on the screen width? You can use\n      Bottom or Regular modal.\n      <Button\n        className=\"wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n      <BottomModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomModal>\n    </>\n  );\n};\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const FullScreenModalStory = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Full screen modals are primary meant to be used as blocker screens. The\n      modal will cover the entire screen and the user will be able to dismiss\n      them using the top left \"X\" icon.\n      <Button\n        className=\"wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n      <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </FullScreenModal>\n    </>\n  );\n};\n\nFullScreenModalStory.storyName = 'FullScreenModal';\n\nexport const NonDismissibleModal = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      Setting the dismissible prop to false will hide the close button and\n      prevent the user from closing it using the escape key or clicking outside.\n      This prop can be useful if we want the user to explicitly interact with\n      the modal options.\n      <strong>Warning:</strong> a modal with the dismissible prop can only be\n      closed by changing the isOpen prop to false.\n      <Button\n        className=\"wmn2 mt24\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n      <BottomOrRegularModal\n        dismissible={false}\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n      >\n        <div style={{ padding: '0 24px 24px 24px' }}>\n          <div>{children}</div>\n          <button\n            className=\"p-btn--primary mt24 wmn3\"\n            onClick={() => setDisplay(false)}\n          >\n            Continue\n          </button>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport const ModalWithFooter = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <Button\n        className=\"wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={\n          <div className=\"d-flex fd-row gap8\">\n            <Button\n              variant=\"textBlack\"\n              className=\"w100\"\n              onClick={handleOnClose}\n            >\n              Skip\n            </Button>\n            <Button className=\"w100\" onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"p24\">\n          <div>{children}</div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport const ModalWithFooterAndScroll = ({\n  children,\n  isOpen,\n  onClose,\n  title,\n}: Props) => {\n  const [display, setDisplay] = useState(isOpen);\n  const handleOnClose = () => {\n    onClose();\n    setDisplay(false);\n  };\n\n  return (\n    <>\n      <Button\n        className=\"wmn2\"\n        onClick={() => setDisplay(true)}\n      >\n        Click to open modal\n      </Button>\n\n      <BottomOrRegularModal\n        title={title}\n        isOpen={display}\n        onClose={handleOnClose}\n        footer={\n          <div className=\"d-flex fd-row gap8\">\n            <Button\n              variant=\"textBlack\"\n              className=\"w100\"\n              onClick={handleOnClose}\n            >\n              Skip\n            </Button>\n            <Button className=\"w100\" onClick={handleOnClose}>\n              Continue\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"p24\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            <div style={{ height: '840px' }} />\n            {children}\n          </div>\n        </div>\n      </BottomOrRegularModal>\n    </>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-purple-600);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
+var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-purple-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-purple-600);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
 var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
 styleInject(css_248z);
 

package/dist/esm/components/table/Table.js

@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-3a883ecb.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-018d8e8f.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';

package/dist/esm/components/table/Table.stories.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-3a883ecb.js';
+import '../../TableSection-018d8e8f.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/Table.test.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-3a883ecb.js';
+import '../../TableSection-018d8e8f.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-3a883ecb.js';
+import { T as TableSection } from '../../../../TableSection-018d8e8f.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-3a883ecb.js';
+import '../../../../TableSection-018d8e8f.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableControls/TableControls.js

@@ -8,13 +8,14 @@ import 'react';
 import '../../../icon/IconWrapper/IconWrapper.js';
 import '../../../../tslib.es6-a39f91fc.js';
 
-var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 9;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  width: 32px;\n  height: 100%;\n  padding: 0;\n  min-width: 32px;\n}";
-var styles = {"stickyHeader":"TableControls-module_stickyHeader__1f6Ta","controlButton":"TableControls-module_controlButton__2kQiG"};
+var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 9;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  width: 32px;\n  height: 100%;\n  padding: 0;\n  min-width: 32px;\n}\n.TableControls-module_controlButtonHidden__1YsHA {\n  visibility: hidden;\n  pointer-events: none;\n}";
+var styles = {"stickyHeader":"TableControls-module_stickyHeader__1f6Ta","controlButton":"TableControls-module_controlButton__2kQiG","controlButtonHidden":"TableControls-module_controlButtonHidden__1YsHA"};
 styleInject(css_248z);
 
 var TableControls = function (_a) {
+    var _b, _c;
     var activeSection = _a.activeSection, children = _a.children, columnsLength = _a.columnsLength, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, navigateTable = _a.navigateTable;
-    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-stretch jc-between bg-white px8', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx("div", { className: 'py24', children: jsx(Button, { className: classNames('br8', styles.controlButton), disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", style: { height: '100%' }, children: "Previous section" }) }), children, jsx("div", { className: 'py24', children: jsx(Button, { className: classNames('br8', styles.controlButton), disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" }) })] }));
+    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-stretch jc-between bg-white px8', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_b = {}, _b[styles.controlButtonHidden] = activeSection <= 1, _b), 'br8', styles.controlButton), disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", style: { height: '100%' }, children: "Previous section" }) }), children, jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_c = {}, _c[styles.controlButtonHidden] = activeSection >= columnsLength - 1, _c), 'br8', styles.controlButton), disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" }) })] }));
 };
 
 export { TableControls };

package/dist/esm/components/table/components/TableControls/TableControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-stretch jc-between bg-white px8',\n        styles.stickyHeader\n      )}\n      style={{ top: `${stickyHeaderTopOffset}px` }}\n    >\n      <div className='py24'>\n        <Button\n          className={classNames('br8', styles.controlButton)}\n          disabled={activeSection <= 1}\n          hideLabel\n          leftIcon={<ChevronLeftIcon />}\n          onClick={() => navigateTable()}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"previous-section-button\"\n          style={{ height: '100%' }}\n        >\n          Previous section\n        </Button>\n      </div>\n\n      {children}\n\n      <div className='py24'>\n        <Button\n          className={classNames('br8', styles.controlButton)}\n          disabled={activeSection >= columnsLength - 1}\n          hideLabel\n          leftIcon={<ChevronRightIcon />}\n          onClick={() => navigateTable(true)}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"next-section-button\"\n        >\n          Next section\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,2CAA2C,EAC3C,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAE5CC,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC,EAClD,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,EACrC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,iCAGlB,GACL,EAEL,QAAQ,EAETA,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC,EAClD,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,GACL,IACF,EACN;AACJ;;;;"}
+{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-stretch jc-between bg-white px8',\n        styles.stickyHeader\n      )}\n      style={{ top: `${stickyHeaderTopOffset}px` }}\n    >\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection <= 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection <= 1}\n          hideLabel\n          leftIcon={<ChevronLeftIcon />}\n          onClick={() => navigateTable()}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"previous-section-button\"\n          style={{ height: '100%' }}\n        >\n          Previous section\n        </Button>\n      </div>\n\n      {children}\n\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection >= columnsLength - 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection >= columnsLength - 1}\n          hideLabel\n          leftIcon={<ChevronRightIcon />}\n          onClick={() => navigateTable(true)}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"next-section-button\"\n        >\n          Next section\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,2CAA2C,EAC3C,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAE5CC,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,CAAC,OAClD,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,EACrC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,iCAGlB,GACL,EAEL,QAAQ,EAETA,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,aAAa,GAAG,CAAC,OAClE,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,GACL,IACF,EACN;AACJ;;;;"}

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-3a883ecb.js';
+export { T as TableSection } from '../../../../TableSection-018d8e8f.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../useMediaQuery-1a3a2432.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-3a883ecb.js';
+import { T as TableSection } from '../../../../TableSection-018d8e8f.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/index.js

@@ -32,7 +32,7 @@ export { Accordion } from './components/accordion/index.js';
 export { Table } from './components/table/Table.js';
 import { useCallback, useEffect } from 'react';
 export { u as useMediaQuery } from './useMediaQuery-1a3a2432.js';
-export { u as useOnClickOutside } from './Calendar-2d7e51b5.js';
+export { u as useOnClickOutside } from './Calendar-5ad3eccf.js';
 export { LogoColor } from './components/logo/LogoColor.js';
 export { LogoWhite } from './components/logo/LogoWhite.js';
 export { LogoBlack } from './components/logo/LogoBlack.js';
@@ -466,7 +466,7 @@ import './components/table/components/IconRenderer/IconRenderer.js';
 import './components/table/components/TableCell/CardCell/CardCell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
-import './TableSection-3a883ecb.js';
+import './TableSection-018d8e8f.js';
 import './components/table/components/TableContents/Collapsible.js';
 import './useTableNavigation-f929fbc9.js';
 import './components/table/components/TableControls/TableControls.js';

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

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-type ButtonVariant = 'filledColor' | 'filledGray' | 'filledWhite' | 'filledBlack' | 'textColor' | 'textWhite' | 'outlineWhite' | 'filledSuccess' | 'filledError';
+type ButtonVariant = 'filledBlack' | 'filledGray' | 'filledWhite' | 'textBlack' | 'textWhite' | 'outlineGray' | 'outlineWhite' | 'filledError';
 type ButtonProps = {
     as?: React.ElementType;
     children: ReactNode;