@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

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

@@ -9,12 +9,12 @@ styleInject(css_248z);
 var getVariantClassNames = function (variant) { return ({
     information: 'bg-blue-100',
     neutral: 'bg-white',
-    neutral200: 'bg-grey-200',
-    neutral300: 'bg-grey-300',
-    warning: 'bg-yellow-100',
+    neutral200: 'bg-neutral-100',
+    neutral300: 'bg-neutral-300',
+    warning: 'bg-yellow-200',
     error: 'bg-red-100',
     success: 'bg-green-100',
-    primary: 'bg-purple-100',
+    primary: 'bg-purple-300',
     primary900: 'bg-purple-900 tc-white',
 }[variant]); };
 var Badge = function (_a) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n | 'warning'\n | 'error'\n | 'success'\n | 'information'\n | 'neutral'\n | 'neutral200'\n | 'neutral300'\n | 'primary'\n | 'primary900';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'small' | 'medium' | 'large';\n  children: ReactNode;\n}\n\nconst getVariantClassNames = (variant: Variant) => ({\n  information: 'bg-blue-100',\n  neutral: 'bg-white',\n  neutral200: 'bg-grey-200',\n  neutral300: 'bg-grey-300',\n  warning: 'bg-yellow-100',\n  error: 'bg-red-100',\n  success: 'bg-green-100',\n  primary: 'bg-purple-100',\n  primary900: 'bg-purple-900 tc-white',\n}[variant])\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n}: BadgeProps) => (\n  <div\n    role=\"status\" \n    className={classNames(\n      className, \n      'px16 br8 d-inline-block ai-center fw-bold p-p', \n      { 'p-p--small': size === 'small' },\n      styles[`badge--${size}`],\n      getVariantClassNames(variant)\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsx"],"mappings":";;;;;;;;AAsBA,IAAM,oBAAoB,GAAG,UAAC,OAAgB,IAAK,QAAC;IAClD,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,aAAa;IACzB,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,wBAAwB;CACrC,CAAC,OAAO,CAAC,IAAC,CAAA;IAEL,KAAK,GAAG,UAAC,EAKF;QAJX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA;IACQ,QAChBA,aACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,+CAA+C,EAC/C,EAAE,YAAY,EAAE,IAAI,KAAK,OAAO,EAAE,EAClC,MAAM,CAAC,iBAAU,IAAI,CAAE,CAAC,EACxB,oBAAoB,CAAC,OAAO,CAAC,CAC9B,YAEA,QAAQ,GACL;AAZU;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n | 'warning'\n | 'error'\n | 'success'\n | 'information'\n | 'neutral'\n | 'neutral200'\n | 'neutral300'\n | 'primary'\n | 'primary900';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'small' | 'medium' | 'large';\n  children: ReactNode;\n}\n\nconst getVariantClassNames = (variant: Variant) => ({\n  information: 'bg-blue-100',\n  neutral: 'bg-white',\n  neutral200: 'bg-neutral-100',\n  neutral300: 'bg-neutral-300',\n  warning: 'bg-yellow-200',\n  error: 'bg-red-100',\n  success: 'bg-green-100',\n  primary: 'bg-purple-300',\n  primary900: 'bg-purple-900 tc-white',\n}[variant])\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n}: BadgeProps) => (\n  <div\n    role=\"status\" \n    className={classNames(\n      className, \n      'px16 br8 d-inline-block ai-center fw-bold p-p', \n      { 'p-p--small': size === 'small' },\n      styles[`badge--${size}`],\n      getVariantClassNames(variant)\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsx"],"mappings":";;;;;;;;AAsBA,IAAM,oBAAoB,GAAG,UAAC,OAAgB,IAAK,QAAC;IAClD,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,gBAAgB;IAC5B,UAAU,EAAE,gBAAgB;IAC5B,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,wBAAwB;CACrC,CAAC,OAAO,CAAC,IAAC,CAAA;IAEL,KAAK,GAAG,UAAC,EAKF;QAJX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA;IACQ,QAChBA,aACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,+CAA+C,EAC/C,EAAE,YAAY,EAAE,IAAI,KAAK,OAAO,EAAE,EAClC,MAAM,CAAC,iBAAU,IAAI,CAAE,CAAC,EACxB,oBAAoB,CAAC,OAAO,CAAC,CAC9B,YAEA,QAAQ,GACL;AAZU;;;;"}

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

@@ -63,11 +63,11 @@ 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-grey-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-grey-300 br8', children: ["textColor", "textWhite"].map(function (variant, index) { return (jsxs("div", { className: variant === "textWhite" ? "bg-primary-500 px32 br8" : "", children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === "textWhite" ? "tc-white" : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Outline variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-primary-500 br8', children: jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16 tc-white', children: "outlineWhite" }), jsx(Button, { onClick: onClick, variant: 'outlineWhite', children: children })] }) }), jsx("h3", { className: 'p-h3 my24', children: "State variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-grey-300 br8', children: ["filledSuccess", "filledError"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) })] }));
+    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-grey-200 br8', children: [jsx("h3", { className: 'p-h3 mb16', children: "On grey" }), jsx("div", { className: 'd-flex gap16', children: ["filledColor", "filledWhite", "textColor"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] }), jsxs("div", { className: 'p24 bg-primary-500 br8', children: [jsx("h3", { className: 'p-h3 mb16 tc-white', children: "On primary" }), jsx("div", { className: 'd-flex gap16', children: ["filledWhite", "outlineWhite", "textWhite"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] })] }));
+    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)); }) })] })] }));
 };
 var ButtonWithIcons = function (_a) {
     var children = _a.children, onClick = _a.onClick;
@@ -87,7 +87,7 @@ var ButtonDisabled = function (_a) {
 };
 var ButtonAsOtherComponents = function (_a) {
     var children = _a.children; _a.as; var onClick = _a.onClick;
-    return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Button, { as: "a", href: "https://feather-insurance.com", target: "_blank", children: children }), jsx("h3", { className: 'p-h3', children: "As a button:" }), jsx(Button, { as: "button", onClick: onClick, children: children }), jsx("h3", { className: 'p-h3', children: "As a h3:" }), jsx(Button, { as: "h3", children: children }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] }));
+    return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Button, { as: "a", href: "https://feather-insurance.com", target: "_blank", children: children }), jsx("h3", { className: 'p-h3', children: "As a button:" }), jsx(Button, { as: "button", onClick: onClick, children: children }), jsx("h3", { className: 'p-h3', children: "As a h3:" }), jsx(Button, { as: "h3", children: children }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] }));
 };
 
 export default story;

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-grey-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-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\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","InfoIcon"],"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: '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","InfoIcon"],"mappings":"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"}

package/dist/esm/components/cards/card/index.js

@@ -6,7 +6,7 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
 
-var css_248z = ".style-module_button__P-UIa {\n  background-color: transparent;\n  color: #26262e;\n  outline: 1px solid transparent;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  border-radius: 8px;\n}\n.style-module_button__P-UIa:hover {\n  outline: 1px solid #8e8cee;\n  color: #8e8cee;\n}\n.style-module_button__P-UIa:focus-visible {\n  outline: 2px solid #8e8cee;\n  color: #8e8cee;\n}\n\n.style-module_wrapper__35C6V {\n  background-color: #fff;\n}\n\n.style-module_icon__15X1c {\n  margin-right: 12px;\n  color: #8e8cee;\n}\n.style-module_iconbalanced__Zb-hZ {\n  margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n  margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n  margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n  margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n  margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n  color: #696970;\n}";
+var css_248z = ".style-module_button__P-UIa {\n  background-color: transparent;\n  color: #26262e;\n  outline: 1px solid transparent;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  border-radius: 8px;\n}\n.style-module_button__P-UIa:hover {\n  outline: 1px solid #8883D8;\n  color: #8883D8;\n}\n.style-module_button__P-UIa:focus-visible {\n  outline: 2px solid #8883D8;\n  color: #8883D8;\n}\n\n.style-module_wrapper__35C6V {\n  background-color: #fff;\n}\n\n.style-module_icon__15X1c {\n  margin-right: 12px;\n  color: #8883D8;\n}\n.style-module_iconbalanced__Zb-hZ {\n  margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n  margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n  margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n  margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n  margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n  color: #696971;\n}";
 var styles = {"button":"style-module_button__P-UIa","wrapper":"style-module_wrapper__35C6V","icon":"style-module_icon__15X1c","iconbalanced":"style-module_iconbalanced__Zb-hZ","iconspacious":"style-module_iconspacious__3Ly0X","actionIcon":"style-module_actionIcon__3pnwR","actionIconbalanced":"style-module_actionIconbalanced__19jnn","actionIconspacious":"style-module_actionIconspacious__2LJN4","description":"style-module_description__ksrnP"};
 styleInject(css_248z);
 
@@ -37,7 +37,7 @@ var Card = function (_a) {
                                 top: 'ai-start',
                                 center: 'ai-center',
                                 bottom: 'ai-end',
-                            }[verticalAlignment]), children: icon })), jsxs("div", { className: "d-flex jc-between w100", children: [jsxs("div", { className: "d-flex jc-center gap8 fd-column tc-grey-900 w100", children: [label && (jsx("h4", { className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label), children: label })), title && (jsx("h3", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
+                            }[verticalAlignment]), children: icon })), jsxs("div", { className: "d-flex jc-between w100", children: [jsxs("div", { className: "d-flex jc-center gap8 fd-column tc-neutral-900 w100", children: [label && (jsx("h4", { className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label), children: label })), title && (jsx("h3", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
                                                 large: 'p-h3',
                                                 medium: 'p-h4',
                                                 small: 'p-p',

package/dist/esm/components/cards/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'balanced' | 'compact' | 'spacious';\ntype TitleVariantType = 'small' | 'medium' | 'large';\ntype VerticalAlignmentType = 'top' | 'center' | 'bottom';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n  as?: E;\n  children?: ReactNode;\n  classNames?: {\n    buttonWrapper?: string;\n    wrapper?: string;\n    label?: string;\n    title?: string;\n    description?: string;\n    children?: string;\n    icon?: string;\n    actionIcon?: string;\n  };\n  density?: DensityType;\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: TitleVariantType;\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n  verticalAlignment?: VerticalAlignmentType;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n  Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n  as,\n  children,\n  classNames,\n  density = 'balanced',\n  description,\n  descriptionVariant = 'large',\n  dropShadow = true,\n  icon,\n  label,\n  onClick,\n  actionIcon,\n  title,\n  titleVariant = 'large',\n  showActionIcon,\n  verticalAlignment = 'center',\n  ...rest\n}: CardProps<E>) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n  const propsWithActionIcon = onClick || rest?.href || rest.to; \n  const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n  const Tag = as || cardDefaultTag;\n  \n  return (\n    <Tag\n      className={classNamesUtil(\n        classNames?.buttonWrapper,\n        'd-flex w100 ai-stretch',\n        {\n          'c-pointer': propsWithActionIcon,\n          [styles.button]: propsWithActionIcon\n        },\n      )}\n      {...onClick && { \n        onClick, \n        type: \"button\"\n      }}\n      {...rest}\n    >\n      <div\n        className={classNamesUtil(\n          'd-flex fd-column jc-center w100 ta-left br8',\n          { 'bs-sm': dropShadow },\n          {\n            compact: 'p16',\n            balanced: 'p24',\n            spacious: 'p32',\n          }[density as DensityType],\n          {\n            top: 'jc-start',\n            center: 'jc-center',\n            bottom: 'jc-end',\n          }[verticalAlignment as VerticalAlignmentType],\n          styles?.wrapper,\n          classNames?.wrapper\n        )}\n      >\n        <div className=\"d-flex w100\">\n          {icon && (\n            <div\n              className={classNamesUtil(\n                `d-flex`,\n                styles.icon,\n                styles[`icon${density}`],\n                classNames?.icon, \n                {\n                  top: 'ai-start',\n                  center: 'ai-center',\n                  bottom: 'ai-end',\n                }[verticalAlignment as VerticalAlignmentType],\n              )}\n            >\n              {icon}\n            </div>\n          )}\n\n          <div className=\"d-flex jc-between w100\">\n            <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n              {label && (\n                <h4 className={classNamesUtil('p-p--small', classNames?.label)}>\n                  {label}\n                </h4>\n              )}\n\n              {title && (\n                <h3\n                  className={classNamesUtil(\n                    classNames?.title,\n                    {\n                      large: 'p-h3',\n                      medium: 'p-h4',\n                      small: 'p-p',\n                    }[titleVariant as TitleVariantType]\n                  )}\n                >\n                  {title}\n                </h3>\n              )}\n\n              {description && (\n                <div\n                  className={classNamesUtil(\n                    styles.description,\n                    classNames?.description,\n                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p',\n                  )}\n                >\n                  {description}\n                </div>\n              )}\n            </div>\n\n            {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n              <div\n                className={classNamesUtil(\n                  styles.actionIcon,\n                  classNames?.actionIcon,\n                  styles[`actionIcon${density}`],\n                  'd-flex ai-center'\n                )}\n              >\n                {actionIcon || <ChevronRightIcon size={24} />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {children && <div className={classNames?.children}>{children}</div>}\n      </div>\n    </Tag>\n  );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'balanced' | 'compact' | 'spacious';\ntype TitleVariantType = 'small' | 'medium' | 'large';\ntype VerticalAlignmentType = 'top' | 'center' | 'bottom';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n  as?: E;\n  children?: ReactNode;\n  classNames?: {\n    buttonWrapper?: string;\n    wrapper?: string;\n    label?: string;\n    title?: string;\n    description?: string;\n    children?: string;\n    icon?: string;\n    actionIcon?: string;\n  };\n  density?: DensityType;\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: TitleVariantType;\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n  verticalAlignment?: VerticalAlignmentType;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n  Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n  as,\n  children,\n  classNames,\n  density = 'balanced',\n  description,\n  descriptionVariant = 'large',\n  dropShadow = true,\n  icon,\n  label,\n  onClick,\n  actionIcon,\n  title,\n  titleVariant = 'large',\n  showActionIcon,\n  verticalAlignment = 'center',\n  ...rest\n}: CardProps<E>) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n  const propsWithActionIcon = onClick || rest?.href || rest.to; \n  const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n  const Tag = as || cardDefaultTag;\n  \n  return (\n    <Tag\n      className={classNamesUtil(\n        classNames?.buttonWrapper,\n        'd-flex w100 ai-stretch',\n        {\n          'c-pointer': propsWithActionIcon,\n          [styles.button]: propsWithActionIcon\n        },\n      )}\n      {...onClick && { \n        onClick, \n        type: \"button\"\n      }}\n      {...rest}\n    >\n      <div\n        className={classNamesUtil(\n          'd-flex fd-column jc-center w100 ta-left br8',\n          { 'bs-sm': dropShadow },\n          {\n            compact: 'p16',\n            balanced: 'p24',\n            spacious: 'p32',\n          }[density as DensityType],\n          {\n            top: 'jc-start',\n            center: 'jc-center',\n            bottom: 'jc-end',\n          }[verticalAlignment as VerticalAlignmentType],\n          styles?.wrapper,\n          classNames?.wrapper\n        )}\n      >\n        <div className=\"d-flex w100\">\n          {icon && (\n            <div\n              className={classNamesUtil(\n                `d-flex`,\n                styles.icon,\n                styles[`icon${density}`],\n                classNames?.icon, \n                {\n                  top: 'ai-start',\n                  center: 'ai-center',\n                  bottom: 'ai-end',\n                }[verticalAlignment as VerticalAlignmentType],\n              )}\n            >\n              {icon}\n            </div>\n          )}\n\n          <div className=\"d-flex jc-between w100\">\n            <div className=\"d-flex jc-center gap8 fd-column tc-neutral-900 w100\">\n              {label && (\n                <h4 className={classNamesUtil('p-p--small', classNames?.label)}>\n                  {label}\n                </h4>\n              )}\n\n              {title && (\n                <h3\n                  className={classNamesUtil(\n                    classNames?.title,\n                    {\n                      large: 'p-h3',\n                      medium: 'p-h4',\n                      small: 'p-p',\n                    }[titleVariant as TitleVariantType]\n                  )}\n                >\n                  {title}\n                </h3>\n              )}\n\n              {description && (\n                <div\n                  className={classNamesUtil(\n                    styles.description,\n                    classNames?.description,\n                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p',\n                  )}\n                >\n                  {description}\n                </div>\n              )}\n            </div>\n\n            {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n              <div\n                className={classNamesUtil(\n                  styles.actionIcon,\n                  classNames?.actionIcon,\n                  styles[`actionIcon${density}`],\n                  'd-flex ai-center'\n                )}\n              >\n                {actionIcon || <ChevronRightIcon size={24} />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {children && <div className={classNames?.children}>{children}</div>}\n      </div>\n    </Tag>\n  );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}

package/dist/esm/components/cards/card/index.stories.js

@@ -93,28 +93,28 @@ var story = {
 };
 var CardStory = function (_a) {
     var as = _a.as, actionIcon = _a.actionIcon, showActionIcon = _a.showActionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant, verticalAlignment = _a.verticalAlignment;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { as: as, classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon, verticalAlignment: verticalAlignment, children: children }) }));
+    return (jsx("div", { className: 'd-flex p24 bg-neutral-100', children: jsx(Card, { as: as, classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon, verticalAlignment: verticalAlignment, children: children }) }));
 };
 CardStory.storyName = "Card";
-var CardAsOtherComponents = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }), jsx("h3", { className: 'p-h3', children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] })); };
-var CardDensities = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx(Card, { title: 'Card density: Compact', density: 'compact' }), jsx(Card, { title: 'Card density: Balanced', density: 'balanced' }), jsx(Card, { title: 'Card density: Spacious', density: 'spacious' })] })); };
+var CardAsOtherComponents = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }), jsx("h3", { className: 'p-h3', children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] })); };
+var CardDensities = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx(Card, { title: 'Card density: Compact', density: 'compact' }), jsx(Card, { title: 'Card density: Balanced', density: 'balanced' }), jsx(Card, { title: 'Card density: Spacious', density: 'spacious' })] })); };
 var CardsWithIcons = function (_a) {
     var title = _a.title;
-    return (jsxs("div", { className: 'd-flex gap16 p24 bg-grey-200', children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title }), jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }), title: title })] }));
+    return (jsxs("div", { className: 'd-flex gap16 p24 bg-neutral-100', children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title }), jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }), title: title })] }));
 };
 var CardWithOnClickAction = function (_a) {
     var children = _a.children, title = _a.title;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title, titleVariant: 'medium', onClick: function () { }, children: children }) }));
+    return (jsx("div", { className: 'd-flex p24 bg-neutral-100', children: jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title, titleVariant: 'medium', onClick: function () { }, children: children }) }));
 };
 var CardOverridesStyles = function (_a) {
     var children = _a.children, label = _a.label, title = _a.title;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { label: label, title: title, titleVariant: 'medium', icon: jsx(PlusCircleIcon, { color: "grey-100", size: 32 }), classNames: {
-                wrapper: 'bg-grey-700',
+    return (jsx("div", { className: 'd-flex p24 bg-neutral-100', children: jsx(Card, { label: label, title: title, titleVariant: 'medium', icon: jsx(PlusCircleIcon, { color: "neutral-50", size: 32 }), classNames: {
+                wrapper: 'bg-neutral-800',
                 label: 'tc-white',
                 title: 'tc-white'
             }, children: children }) }));
 };
-var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { as: "a", href: "#", onClick: console.log, children: "Full covxerage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] })] }) })); };
+var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-neutral-100', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { as: "a", href: "#", onClick: console.log, children: "Full covxerage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(CheckIcon, { color: 'purple-600' }), density: 'compact' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: 'compact' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(CheckIcon, { color: 'purple-600' }), density: 'compact' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: 'compact' })] })] }) })); };
 
 export default story;
 export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };

package/dist/esm/components/cards/card/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\nimport { Link } from '../../link';\n\nconst story = {\n  title: 'JSX/Cards/Card',\n  component: Card,\n  argTypes: {\n    as: {\n      control: 'text',\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    density: {\n      description: 'Spacing around the card'\n    },\n    label: {\n      description: 'Content to be rendered as label'\n    },\n    title: {\n      description: 'Content to be rendered as title'\n    },\n    titleVariant: {\n      description: 'Variant that allows changing title sizing styles.'\n    },\n    description: {\n      description: 'Content to be rendered as description'\n    },\n    descriptionVariant: {\n      description: 'Variant that allows changing description sizing styles.'\n    },\n    icon: {\n      description: 'ReactNode to be rendered on the left side of the card',\n    },\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n      description: 'On click action to be triggered on card click.',\n    },\n    dropShadow: {\n      description: 'Wether to display card with drop shadow styles or not.',\n    },\n    actionIcon: {\n      control: 'text',\n      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n    },\n    showActionIcon: {\n      description: 'Property that always displays action icon even if no onClick is set.',\n    },\n    verticalAlignment: {\n      description: 'Vertical alignment of the card content',\n      control: { type: 'select' },\n    },\n  },\n  args: {\n    density: 'balanced',\n    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n    descriptionVariant: 'large',\n    label: 'Label',\n    title: 'Honest, simple insurance',\n    titleVariant: 'large',\n    icon: 'ABC',\n    children: '',\n    classNames: {\n      wrapper: '',\n      label: '',\n      title: '',\n      description: '',\n      children: '',\n      icon: ''\n    },\n    dropShadow: true,\n    verticalAlignment: 'center',\n  }\n};\n\nexport const CardStory = ({ \n  as,\n  actionIcon,\n  showActionIcon,\n  children,\n  classNames,\n  density,\n  description,\n  descriptionVariant,\n  dropShadow,\n  icon,\n  label,\n  onClick,\n  title,\n  titleVariant,\n  verticalAlignment,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      as={as}\n      classNames={classNames}\n      description={description}\n      descriptionVariant={descriptionVariant}\n      density={density}\n      dropShadow={dropShadow}\n      icon={icon}\n      label={label}\n      title={title}\n      titleVariant={titleVariant}\n      onClick={onClick}\n      actionIcon={actionIcon}\n      showActionIcon={showActionIcon}\n      verticalAlignment={verticalAlignment}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n   \n    <h3 className='p-h3'>As an anchor:</h3>\n    <Card\n      as=\"a\"\n      href=\"https://feather-insurance.com\"\n      target=\"_blank\"\n      title=\"Card with an a tag\"\n      density='compact'\n    />\n\n    <h3 className='p-h3'>As a nav:</h3>\n    <Card\n      as=\"nav\"\n      title=\"Card with a nav tag\"\n      density='compact'\n    />\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 const CardDensities = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n    <Card\n      title={'Card density: Compact'}\n      density='compact'\n    />\n    <Card\n      title={'Card density: Balanced'}\n      density='balanced'\n    />\n    <Card\n      title={'Card density: Spacious'}\n      density='spacious'\n    />\n  </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n  <div className='d-flex gap16 p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n    />\n    <Card\n      icon={<MehIcon size={24} noMargin />}\n      title={title}\n    />\n  </div>\n);\n\nexport const CardWithOnClickAction = ({ \n  children,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n      titleVariant={'medium'}\n      onClick={() => {}}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardOverridesStyles = ({ \n  children,\n  label,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={label}\n      title={title}\n      titleVariant={'medium'}\n      icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n      classNames={{ \n        wrapper: 'bg-grey-700',\n        label: 'tc-white',\n        title: 'tc-white'\n      }}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={(\n        <Badge size='small' variant='success'>\n          Active\n        </Badge>\n      )}\n      title={(\n        <div className='d-flex jc-between ai-center w100'>\n          Coverage overview\n\n          <Button\n          as=\"a\"\n          href=\"#\"\n            onClick={console.log}\n          >\n            Full covxerage details\n          </Button>\n        </div>\n      )}\n    >\n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Lost keys\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Broken glass\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n      \n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Damage to property\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Drones\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n    </Card>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n  title: 'JSX/Cards/Card',\n  component: Card,\n  argTypes: {\n    as: {\n      control: 'text',\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    density: {\n      description: 'Spacing around the card'\n    },\n    label: {\n      description: 'Content to be rendered as label'\n    },\n    title: {\n      description: 'Content to be rendered as title'\n    },\n    titleVariant: {\n      description: 'Variant that allows changing title sizing styles.'\n    },\n    description: {\n      description: 'Content to be rendered as description'\n    },\n    descriptionVariant: {\n      description: 'Variant that allows changing description sizing styles.'\n    },\n    icon: {\n      description: 'ReactNode to be rendered on the left side of the card',\n    },\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n      description: 'On click action to be triggered on card click.',\n    },\n    dropShadow: {\n      description: 'Wether to display card with drop shadow styles or not.',\n    },\n    actionIcon: {\n      control: 'text',\n      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n    },\n    showActionIcon: {\n      description: 'Property that always displays action icon even if no onClick is set.',\n    },\n    verticalAlignment: {\n      description: 'Vertical alignment of the card content',\n      control: { type: 'select' },\n    },\n  },\n  args: {\n    density: 'balanced',\n    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n    descriptionVariant: 'large',\n    label: 'Label',\n    title: 'Honest, simple insurance',\n    titleVariant: 'large',\n    icon: 'ABC',\n    children: '',\n    classNames: {\n      wrapper: '',\n      label: '',\n      title: '',\n      description: '',\n      children: '',\n      icon: ''\n    },\n    dropShadow: true,\n    verticalAlignment: 'center',\n  }\n};\n\nexport const CardStory = ({ \n  as,\n  actionIcon,\n  showActionIcon,\n  children,\n  classNames,\n  density,\n  description,\n  descriptionVariant,\n  dropShadow,\n  icon,\n  label,\n  onClick,\n  title,\n  titleVariant,\n  verticalAlignment,\n}: CardProps) => (\n  <div className='d-flex p24 bg-neutral-100'>\n    <Card\n      as={as}\n      classNames={classNames}\n      description={description}\n      descriptionVariant={descriptionVariant}\n      density={density}\n      dropShadow={dropShadow}\n      icon={icon}\n      label={label}\n      title={title}\n      titleVariant={titleVariant}\n      onClick={onClick}\n      actionIcon={actionIcon}\n      showActionIcon={showActionIcon}\n      verticalAlignment={verticalAlignment}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n   \n    <h3 className='p-h3'>As an anchor:</h3>\n    <Card\n      as=\"a\"\n      href=\"https://feather-insurance.com\"\n      target=\"_blank\"\n      title=\"Card with an a tag\"\n      density='compact'\n    />\n\n    <h3 className='p-h3'>As a nav:</h3>\n    <Card\n      as=\"nav\"\n      title=\"Card with a nav tag\"\n      density='compact'\n    />\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 const CardDensities = () => (\n  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n    <Card\n      title={'Card density: Compact'}\n      density='compact'\n    />\n    <Card\n      title={'Card density: Balanced'}\n      density='balanced'\n    />\n    <Card\n      title={'Card density: Spacious'}\n      density='spacious'\n    />\n  </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n  <div className='d-flex gap16 p24 bg-neutral-100'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n    />\n    <Card\n      icon={<MehIcon size={24} noMargin />}\n      title={title}\n    />\n  </div>\n);\n\nexport const CardWithOnClickAction = ({ \n  children,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-neutral-100'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n      titleVariant={'medium'}\n      onClick={() => {}}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardOverridesStyles = ({ \n  children,\n  label,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-neutral-100'>\n    <Card\n      label={label}\n      title={title}\n      titleVariant={'medium'}\n      icon={<PlusCircleIcon color=\"neutral-50\" size={32} />}\n      classNames={{ \n        wrapper: 'bg-neutral-800',\n        label: 'tc-white',\n        title: 'tc-white'\n      }}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n  <div className='d-flex p24 bg-neutral-100'>\n    <Card\n      label={(\n        <Badge size='small' variant='success'>\n          Active\n        </Badge>\n      )}\n      title={(\n        <div className='d-flex jc-between ai-center w100'>\n          Coverage overview\n\n          <Button\n          as=\"a\"\n          href=\"#\"\n            onClick={console.log}\n          >\n            Full covxerage details\n          </Button>\n        </div>\n      )}\n    >\n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Lost keys\"\n          classNames={{ wrapper: 'bg-neutral-300' }}\n          icon={<CheckIcon color={'purple-600'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Broken glass\"\n          classNames={{ wrapper: 'bg-neutral-300' }}\n          icon={<XIcon color={'purple-600'} />}\n          density='compact'\n        />\n      </div>\n      \n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Damage to property\"\n          classNames={{ wrapper: 'bg-neutral-300' }}\n          icon={<CheckIcon color={'purple-600'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Drones\"\n          classNames={{ wrapper: 'bg-neutral-300' }}\n          icon={<XIcon color={'purple-600'} />}\n          density='compact'\n        />\n      </div>\n    </Card>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":";;;;;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;SAC/D;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,mDAAmD;SACjE;QACD,WAAW,EAAE;YACX,WAAW,EAAE,uCAAuC;SACrD;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,yDAAyD;SACvE;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;SACrE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uEAAuE;SACrF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;YACD,WAAW,EAAE,gDAAgD;SAC9D;QACD,UAAU,EAAE;YACV,WAAW,EAAE,wDAAwD;SACtE;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qIAAqI;SACnJ;QACD,cAAc,EAAE;YACd,WAAW,EAAE,sEAAsE;SACpF;QACD,iBAAiB,EAAE;YACjB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,WAAW,EAAE,6GAA6G;QAC1H,kBAAkB,EAAE,OAAO;QAC3B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,0BAA0B;QACjC,YAAY,EAAE,OAAO;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACV,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;SACT;QACD,UAAU,EAAE,IAAI;QAChB,iBAAiB,EAAE,QAAQ;KAC5B;EACD;IAEW,SAAS,GAAG,UAAC,EAgBd;QAfV,EAAE,QAAA,EACF,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,iBAAiB,uBAAA;IACF,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,YAEnC,QAAQ,GACJ,GACH;AApBS,EAqBf;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;IAEhB,qBAAqB,GAAG,cAAM,QACzCC,cAAK,SAAS,EAAC,2CAA2C,aAExDD,YAAI,SAAS,EAAC,MAAM,8BAAmB,EACvCA,IAAC,IAAI,IACH,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAC,SAAS,GACjB,EAEFA,YAAI,SAAS,EAAC,MAAM,0BAAe,EACnCA,IAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAC,SAAS,GACjB,EAEFC,YAAG,SAAS,EAAC,mDAAmD,aAC9DD,IAACE,IAAQ,KAAG,uEAEV,IACA,KACN;IAEW,aAAa,GAAG,cAAM,QACjCD,cAAK,SAAS,EAAC,2CAA2C,aACxDD,IAAC,IAAI,IACH,KAAK,EAAE,uBAAuB,EAC9B,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,GAClB,EACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,GAClB,IACE,KACN;IAEW,cAAc,GAAG,UAAC,EAAoB;QAAlB,KAAK,WAAA;IAAkB,QACtDC,cAAK,SAAS,EAAC,iCAAiC,aAC9CD,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,GACT,EAEJ,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,IAAI,IACH,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG,EACpC,KAAK,EAAE,KAAK,GACZ,IACE;AAhBgD,EAiBtD;IAEW,qBAAqB,GAAG,UAAC,EAG1B;QAFV,QAAQ,cAAA,EACR,KAAK,WAAA;IACU,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,GACT,EAEJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,OAAO,EAAE,eAAQ,YAEhB,QAAQ,GACJ,GACH;AAhBS,EAiBf;IAEW,mBAAmB,GAAG,UAAC,EAIxB;QAHV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA;IACU,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,IAAI,EAAEA,IAAC,cAAc,IAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,EACrD,UAAU,EAAE;gBACV,OAAO,EAAE,gBAAgB;gBACzB,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB,YAEA,QAAQ,GACJ,GACH;AAfS,EAgBf;IAEW,gCAAgC,GAAG,cAAM,QACpDA,aAAK,SAAS,EAAC,2BAA2B,YACxCC,KAAC,IAAI,IACH,KAAK,GACHD,IAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,uBAE7B,CACT,EACD,KAAK,GACHC,cAAK,SAAS,EAAC,kCAAkC,kCAG/CD,IAAC,MAAM,IACP,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,GAAG,EACN,OAAO,EAAE,OAAO,CAAC,GAAG,uCAGb,IACL,CACP,aAEDC,cAAK,SAAS,EAAC,mBAAmB,aAChCD,IAAC,IAAI,IACH,WAAW,EAAC,WAAW,EACvB,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,YAAY,GAAI,EACxC,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,WAAW,EAAC,cAAc,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,YAAY,GAAI,EACpC,OAAO,EAAC,SAAS,GACjB,IACE,EAENC,cAAK,SAAS,EAAC,mBAAmB,aAChCD,IAAC,IAAI,IACH,WAAW,EAAC,oBAAoB,EAChC,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,YAAY,GAAI,EACxC,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,YAAY,GAAI,EACpC,OAAO,EAAC,SAAS,GACjB,IACE,IACD,GACH;;;;;"}

package/dist/esm/components/cards/cardButton/index.js

@@ -16,8 +16,8 @@ var CardButton = function (_a) {
     var title = _a.title, description = _a.description, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, href = _a.href;
     return (jsx(Card, __assign({ as: href ? 'a' : 'button', classNames: {
             buttonWrapper: classNames('c-pointer ta-left w100', className, (_b = {}, _b[styles.containerDisabled] = disabled, _b)),
-            description: 'tc-primary-500 p-p',
-        }, density: 'compact', label: title, description: typeof description === 'string' ? description : null, actionIcon: jsx(ChevronRightIcon, { size: 20, color: 'purple-500', className: styles.chevronRight }), showActionIcon: true }, href ? { href: href } : {}, { children: typeof description !== 'string' ? description : null })));
+            description: 'tc-purple-600 p-p',
+        }, density: 'compact', label: title, description: typeof description === 'string' ? description : null, actionIcon: jsx(ChevronRightIcon, { size: 20, color: 'purple-600', className: styles.chevronRight }), showActionIcon: true }, href ? { href: href } : {}, { children: typeof description !== 'string' ? description : null })));
 };
 
 export { CardButton };

package/dist/esm/components/cards/cardButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/cardButton/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { ChevronRightIcon } from '../../icon/icons';\n\nimport styles from './style.module.scss';\nimport { Card, CardProps } from '../card';\nimport classNames from 'classnames';\n\nexport type CardButtonProps = {\n  title: string;\n  description: string | ReactNode;\n  disabled?: boolean;\n  className?: string;\n  href?: string;\n} & CardProps;\n\nexport const CardButton = ({\n  title,\n  description,\n  disabled = false,\n  className,\n  href,\n}: CardButtonProps) => (\n  <Card\n      as={href ? 'a' : 'button'}\n      classNames={{\n        buttonWrapper: classNames(\n          'c-pointer ta-left w100',\n          className,\n          { [styles.containerDisabled]: disabled }\n        ),\n        description: 'tc-primary-500 p-p',\n      }}\n      density='compact'\n      label={title}\n      description={typeof description === 'string' ? description : null}\n      actionIcon={\n        <ChevronRightIcon\n          size={20}\n          color={'purple-500'}\n          className={styles.chevronRight}\n        />\n      }\n      showActionIcon\n      {...href ? { href } : {}}\n    >\n      {typeof description !== 'string' ? description : null}\n  </Card>\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;IAgBa,UAAU,GAAG,UAAC,EAMT;;QALhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,SAAS,eAAA,EACT,IAAI,UAAA;IACiB,QACrBA,IAAC,IAAI,aACD,EAAE,EAAE,IAAI,GAAG,GAAG,GAAG,QAAQ,EACzB,UAAU,EAAE;YACV,aAAa,EAAE,UAAU,CACvB,wBAAwB,EACxB,SAAS,YACP,GAAC,MAAM,CAAC,iBAAiB,IAAG,QAAQ,MACvC;YACD,WAAW,EAAE,oBAAoB;SAClC,EACD,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,EACjE,UAAU,EACRA,IAAC,gBAAgB,IACf,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,MAAM,CAAC,YAAY,GAC9B,EAEJ,cAAc,UACV,IAAI,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,cAEvB,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,IAClD;AAzBc;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/cardButton/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { ChevronRightIcon } from '../../icon/icons';\n\nimport styles from './style.module.scss';\nimport { Card, CardProps } from '../card';\nimport classNames from 'classnames';\n\nexport type CardButtonProps = {\n  title: string;\n  description: string | ReactNode;\n  disabled?: boolean;\n  className?: string;\n  href?: string;\n} & CardProps;\n\nexport const CardButton = ({\n  title,\n  description,\n  disabled = false,\n  className,\n  href,\n}: CardButtonProps) => (\n  <Card\n      as={href ? 'a' : 'button'}\n      classNames={{\n        buttonWrapper: classNames(\n          'c-pointer ta-left w100',\n          className,\n          { [styles.containerDisabled]: disabled }\n        ),\n        description: 'tc-purple-600 p-p',\n      }}\n      density='compact'\n      label={title}\n      description={typeof description === 'string' ? description : null}\n      actionIcon={\n        <ChevronRightIcon\n          size={20}\n          color={'purple-600'}\n          className={styles.chevronRight}\n        />\n      }\n      showActionIcon\n      {...href ? { href } : {}}\n    >\n      {typeof description !== 'string' ? description : null}\n  </Card>\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;IAgBa,UAAU,GAAG,UAAC,EAMT;;QALhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,SAAS,eAAA,EACT,IAAI,UAAA;IACiB,QACrBA,IAAC,IAAI,aACD,EAAE,EAAE,IAAI,GAAG,GAAG,GAAG,QAAQ,EACzB,UAAU,EAAE;YACV,aAAa,EAAE,UAAU,CACvB,wBAAwB,EACxB,SAAS,YACP,GAAC,MAAM,CAAC,iBAAiB,IAAG,QAAQ,MACvC;YACD,WAAW,EAAE,mBAAmB;SACjC,EACD,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,EACjE,UAAU,EACRA,IAAC,gBAAgB,IACf,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,MAAM,CAAC,YAAY,GAC9B,EAEJ,cAAc,UACV,IAAI,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,cAEvB,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,IAClD;AAzBc;;;;"}

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

@@ -21,7 +21,7 @@ styleInject(css_248z);
 
 var InfoCard = function (_a) {
     var className = _a.className, title = _a.title, children = _a.children, topIcon = _a.topIcon, rightIcon = _a.rightIcon, _b = _a.state, state = _b === void 0 ? 'actionable' : _b, _c = _a.dropshadow, dropshadow = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "children", "topIcon", "rightIcon", "state", "dropshadow"]);
-    return (jsxs("div", __assign({ className: "".concat(styles['root-container'], " ").concat(className !== null && className !== void 0 ? className : '') }, props, { children: [jsx("img", { src: topIcon.src, alt: topIcon.alt, className: "".concat(styles['top-icon'], " ").concat(state === 'muted' ? styles['top-icon--muted'] : '', " "), width: "80px", height: "80px" }), jsxs("div", { className: "".concat(associatedClassForCardState(state, dropshadow), " ").concat(styles.container), children: [rightIcon && (jsx("img", { width: "20px", height: "20px", className: styles['right-icon'], src: rightIcon === 'info' ? info.src : rightIcon.src, alt: rightIcon === 'info' ? info.alt : rightIcon.alt })), jsx("h3", { className: "p-h4 ta-center mt64", children: title }), jsx("div", { className: "p-p mt16 tc-grey-600", children: children })] })] })));
+    return (jsxs("div", __assign({ className: "".concat(styles['root-container'], " ").concat(className !== null && className !== void 0 ? className : '') }, props, { children: [jsx("img", { src: topIcon.src, alt: topIcon.alt, className: "".concat(styles['top-icon'], " ").concat(state === 'muted' ? styles['top-icon--muted'] : '', " "), width: "80px", height: "80px" }), jsxs("div", { className: "".concat(associatedClassForCardState(state, dropshadow), " ").concat(styles.container), children: [rightIcon && (jsx("img", { width: "20px", height: "20px", className: styles['right-icon'], src: rightIcon === 'info' ? info.src : rightIcon.src, alt: rightIcon === 'info' ? info.alt : rightIcon.alt })), jsx("h3", { className: "p-h4 ta-center mt64", children: title }), jsx("div", { className: "p-p mt16 tc-neutral-700", children: children })] })] })));
 };
 
 var headingForCardSize = function (cardSize) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/lib/components/cards/icons/info.svg","../../../../../src/lib/components/cards/icons/index.ts","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Cpath%20d%3D%22M10%2018.3334C14.6024%2018.3334%2018.3334%2014.6024%2018.3334%2010C18.3334%205.39765%2014.6024%201.66669%2010%201.66669C5.39765%201.66669%201.66669%205.39765%201.66669%2010C1.66669%2014.6024%205.39765%2018.3334%2010%2018.3334Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2013.3333V10%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.66665%22%20r%3D%220.833333%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\"","import arrowRightImage from './arrow-right.svg';\nimport featherLogoImage from './feather-logo.svg';\nimport infoImage from './info.svg';\n\nexport interface Icon {\n  src: string;\n  alt: string;\n}\n\nexport interface IconSize {\n  width: number;\n  height: number;\n}\n\nconst arrowRight: Icon = {\n  src: arrowRightImage,\n  alt: 'arrow pointing right',\n};\n\nconst featherLogo: Icon = {\n  src: featherLogoImage,\n  alt: 'feather logo',\n};\n\nconst info: Icon = {\n  src: infoImage,\n  alt: 'circle with the letter i inside for information',\n};\n\n\nexport { arrowRight, featherLogo, info };\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n  topIcon: Icon;\n  rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n  className,\n  title,\n  children,\n  topIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: InfoCardProps) => (\n  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n    <img\n      src={topIcon.src}\n      alt={topIcon.alt}\n      className={`${styles['top-icon']} ${\n        state === 'muted' ? styles['top-icon--muted'] : ''\n      } `}\n      width=\"80px\"\n      height=\"80px\"\n    />\n    <div\n      className={`${associatedClassForCardState(state, dropshadow)} ${\n        styles.container\n      }`}\n    >\n      {rightIcon && (\n        <img\n          width=\"20px\"\n          height=\"20px\"\n          className={styles['right-icon']}\n          src={rightIcon === 'info' ? info.src : rightIcon.src}\n          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n        />\n      )}\n      <h3 className=\"p-h4 ta-center mt64\">{title}</h3>\n      <div className=\"p-p mt16 tc-grey-600\">{children}</div>\n    </div>\n  </div>\n);\n","import { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n  title: string;\n  children: React.ReactNode;\n  state?: CardState;\n  dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'p-h4';\n    case 'medium':\n      return 'p-h3';\n    case 'big':\n      return 'p-h2';\n  }\n};\n\nexport const associatedClassForCardState = (\n  state: CardState,\n  dropshadow: boolean\n): string => {\n  const baseClass = (() => {\n    switch (state) {\n      case 'actionable':\n        return 'ds-card--actionable';\n      case 'muted':\n        return 'ds-card--muted';\n      case 'static':\n        return 'ds-card';\n    }\n  })();\n\n  if (dropshadow === false) {\n    return `${baseClass} ds-card--no-dropshadow`;\n  }\n  return baseClass;\n};\n\nexport {\n  InfoCard,\n  CardButton,\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACwBf,IAAM,IAAI,GAAS;IACjB,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,iDAAiD;CACvD;;;;;;ICjBY,QAAQ,GAAG,UAAC,EAST;IARd,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAoB,EAApB,KAAK,mBAAG,YAAY,KAAA,EACpB,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACd,KAAK,cARe,iFASxB,CADS;IACW,QACnBA,uBAAK,SAAS,EAAE,UAAG,MAAM,CAAC,gBAAgB,CAAC,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,IAAM,KAAK,eACzEC,aACE,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,SAAS,EAAE,UAAG,MAAM,CAAC,UAAU,CAAC,cAC9B,KAAK,KAAK,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE,MACjD,EACH,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,GACb,EACFD,cACE,SAAS,EAAE,UAAG,2BAA2B,CAAC,KAAK,EAAE,UAAU,CAAC,cAC1D,MAAM,CAAC,SAAS,CAChB,aAED,SAAS,KACRC,aACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAC/B,GAAG,EAAE,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,EACpD,GAAG,EAAE,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,GACpD,CACH,EACDA,YAAI,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAM,EAChDA,aAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,IAClD,KACF,EACP;;;ICpCY,kBAAkB,GAAG,UAChC,QAA+C;IAE/C,QAAQ,QAAQ;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,OAAO;YACV,OAAO,MAAM,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,MAAM,CAAC;QAChB,KAAK,KAAK;YACR,OAAO,MAAM,CAAC;KACjB;AACH,EAAE;IAEW,2BAA2B,GAAG,UACzC,KAAgB,EAChB,UAAmB;IAEnB,IAAM,SAAS,GAAG,CAAC;QACjB,QAAQ,KAAK;YACX,KAAK,YAAY;gBACf,OAAO,qBAAqB,CAAC;YAC/B,KAAK,OAAO;gBACV,OAAO,gBAAgB,CAAC;YAC1B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC;SACpB;KACF,GAAG,CAAC;IAEL,IAAI,UAAU,KAAK,KAAK,EAAE;QACxB,OAAO,UAAG,SAAS,4BAAyB,CAAC;KAC9C;IACD,OAAO,SAAS,CAAC;AACnB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/lib/components/cards/icons/info.svg","../../../../../src/lib/components/cards/icons/index.ts","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Cpath%20d%3D%22M10%2018.3334C14.6024%2018.3334%2018.3334%2014.6024%2018.3334%2010C18.3334%205.39765%2014.6024%201.66669%2010%201.66669C5.39765%201.66669%201.66669%205.39765%201.66669%2010C1.66669%2014.6024%205.39765%2018.3334%2010%2018.3334Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2013.3333V10%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.66665%22%20r%3D%220.833333%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\"","import arrowRightImage from './arrow-right.svg';\nimport featherLogoImage from './feather-logo.svg';\nimport infoImage from './info.svg';\n\nexport interface Icon {\n  src: string;\n  alt: string;\n}\n\nexport interface IconSize {\n  width: number;\n  height: number;\n}\n\nconst arrowRight: Icon = {\n  src: arrowRightImage,\n  alt: 'arrow pointing right',\n};\n\nconst featherLogo: Icon = {\n  src: featherLogoImage,\n  alt: 'feather logo',\n};\n\nconst info: Icon = {\n  src: infoImage,\n  alt: 'circle with the letter i inside for information',\n};\n\n\nexport { arrowRight, featherLogo, info };\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n  topIcon: Icon;\n  rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n  className,\n  title,\n  children,\n  topIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: InfoCardProps) => (\n  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n    <img\n      src={topIcon.src}\n      alt={topIcon.alt}\n      className={`${styles['top-icon']} ${\n        state === 'muted' ? styles['top-icon--muted'] : ''\n      } `}\n      width=\"80px\"\n      height=\"80px\"\n    />\n    <div\n      className={`${associatedClassForCardState(state, dropshadow)} ${\n        styles.container\n      }`}\n    >\n      {rightIcon && (\n        <img\n          width=\"20px\"\n          height=\"20px\"\n          className={styles['right-icon']}\n          src={rightIcon === 'info' ? info.src : rightIcon.src}\n          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n        />\n      )}\n      <h3 className=\"p-h4 ta-center mt64\">{title}</h3>\n      <div className=\"p-p mt16 tc-neutral-700\">{children}</div>\n    </div>\n  </div>\n);\n","import { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n  title: string;\n  children: React.ReactNode;\n  state?: CardState;\n  dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'p-h4';\n    case 'medium':\n      return 'p-h3';\n    case 'big':\n      return 'p-h2';\n  }\n};\n\nexport const associatedClassForCardState = (\n  state: CardState,\n  dropshadow: boolean\n): string => {\n  const baseClass = (() => {\n    switch (state) {\n      case 'actionable':\n        return 'ds-card--actionable';\n      case 'muted':\n        return 'ds-card--muted';\n      case 'static':\n        return 'ds-card';\n    }\n  })();\n\n  if (dropshadow === false) {\n    return `${baseClass} ds-card--no-dropshadow`;\n  }\n  return baseClass;\n};\n\nexport {\n  InfoCard,\n  CardButton,\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACwBf,IAAM,IAAI,GAAS;IACjB,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,iDAAiD;CACvD;;;;;;ICjBY,QAAQ,GAAG,UAAC,EAST;IARd,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAoB,EAApB,KAAK,mBAAG,YAAY,KAAA,EACpB,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACd,KAAK,cARe,iFASxB,CADS;IACW,QACnBA,uBAAK,SAAS,EAAE,UAAG,MAAM,CAAC,gBAAgB,CAAC,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,IAAM,KAAK,eACzEC,aACE,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,SAAS,EAAE,UAAG,MAAM,CAAC,UAAU,CAAC,cAC9B,KAAK,KAAK,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE,MACjD,EACH,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,GACb,EACFD,cACE,SAAS,EAAE,UAAG,2BAA2B,CAAC,KAAK,EAAE,UAAU,CAAC,cAC1D,MAAM,CAAC,SAAS,CAChB,aAED,SAAS,KACRC,aACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAC/B,GAAG,EAAE,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,EACpD,GAAG,EAAE,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,GACpD,CACH,EACDA,YAAI,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAM,EAChDA,aAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO,IACrD,KACF,EACP;;;ICpCY,kBAAkB,GAAG,UAChC,QAA+C;IAE/C,QAAQ,QAAQ;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,OAAO;YACV,OAAO,MAAM,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,MAAM,CAAC;QAChB,KAAK,KAAK;YACR,OAAO,MAAM,CAAC;KACjB;AACH,EAAE;IAEW,2BAA2B,GAAG,UACzC,KAAgB,EAChB,UAAmB;IAEnB,IAAM,SAAS,GAAG,CAAC;QACjB,QAAQ,KAAK;YACX,KAAK,YAAY;gBACf,OAAO,qBAAqB,CAAC;YAC/B,KAAK,OAAO;gBACV,OAAO,gBAAgB,CAAC;YAC1B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC;SACpB;KACF,GAAG,CAAC;IAEL,IAAI,UAAU,KAAK,KAAK,EAAE;QACxB,OAAO,UAAG,SAAS,4BAAyB,CAAC;KAC9C;IACD,OAAO,SAAS,CAAC;AACnB;;;;"}

package/dist/esm/components/cards/infoCard/index.stories.js

@@ -25,7 +25,7 @@ var story = {
             description: 'State that describe the interation with the card',
         },
         topIcon: {
-            description: 'Icon displayed on the top of the card, inside the purple circle',
+            description: 'Icon displayed on the top of the card, inside the circle',
         },
         rightIcon: {
             description: 'Icon displayed on the top right corner of the card',

package/dist/esm/components/cards/infoCard/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Cards/InfoCard',\n  component: InfoCard,\n  argTypes: {\n    title: {\n      description: 'Title text that needs to be displayed',\n    },\n    children: {\n      type: 'text',\n      description: 'Content that is displayed inside the card',\n    },\n    state: {\n      description: 'State that describe the interation with the card',\n    },\n    topIcon: {\n      description: 'Icon displayed on the top of the card, inside the purple circle',\n    },\n    rightIcon: {\n      description: 'Icon displayed on the top right corner of the card',\n    },\n    dropshadow: {\n      description: 'If the card should have a box-shadow or not',\n    },\n    className: {\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    title: 'Lorem Ipsum',\n    children: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',\n    state: 'actionable',\n    topIcon: {\n      src: images.mortgage,\n      alt: 'Image alt'\n    },\n    rightIcon: {\n       src: images.washingMachine,\n       alt: 'Icon alt'\n    },\n    dropshadow: true,\n    className: '',\n  }\n};\n\nexport const InfoCardStory = ({\n  title,\n  dropshadow,\n  children,\n  className,\n  rightIcon,\n  state,\n  topIcon\n}: InfoCardProps) => {\n  return (\n    <InfoCard\n      className={className}\n      dropshadow={dropshadow}\n      state={state}\n      rightIcon={rightIcon}\n      title={title}\n      topIcon={topIcon}\n    >\n      {children}\n    </InfoCard>\n  );\n}\n\nInfoCardStory.storyName = \"InfoCard\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;SACrD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,2CAA2C;SACzD;QACD,KAAK,EAAE;YACL,WAAW,EAAE,kDAAkD;SAChE;QACD,OAAO,EAAE;YACP,WAAW,EAAE,iEAAiE;SAC/E;QACD,SAAS,EAAE;YACT,WAAW,EAAE,oDAAoD;SAClE;QACD,UAAU,EAAE;YACV,WAAW,EAAE,6CAA6C;SAC3D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;SACtD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,qKAAqK;QAC/K,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE;YACP,GAAG,EAAE,MAAM,CAAC,QAAQ;YACpB,GAAG,EAAE,WAAW;SACjB;QACD,SAAS,EAAE;YACR,GAAG,EAAE,MAAM,CAAC,cAAc;YAC1B,GAAG,EAAE,UAAU;SACjB;QACD,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,EAAE;KACd;EACD;IAEW,aAAa,GAAG,UAAC,EAQd;QAPd,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,KAAK,WAAA,EACL,OAAO,aAAA;IAEP,QACEA,IAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,YAEf,QAAQ,GACA,EACX;AACJ,EAAC;AAED,aAAa,CAAC,SAAS,GAAG,UAAU;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Cards/InfoCard',\n  component: InfoCard,\n  argTypes: {\n    title: {\n      description: 'Title text that needs to be displayed',\n    },\n    children: {\n      type: 'text',\n      description: 'Content that is displayed inside the card',\n    },\n    state: {\n      description: 'State that describe the interation with the card',\n    },\n    topIcon: {\n      description: 'Icon displayed on the top of the card, inside the circle',\n    },\n    rightIcon: {\n      description: 'Icon displayed on the top right corner of the card',\n    },\n    dropshadow: {\n      description: 'If the card should have a box-shadow or not',\n    },\n    className: {\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    title: 'Lorem Ipsum',\n    children: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',\n    state: 'actionable',\n    topIcon: {\n      src: images.mortgage,\n      alt: 'Image alt'\n    },\n    rightIcon: {\n       src: images.washingMachine,\n       alt: 'Icon alt'\n    },\n    dropshadow: true,\n    className: '',\n  }\n};\n\nexport const InfoCardStory = ({\n  title,\n  dropshadow,\n  children,\n  className,\n  rightIcon,\n  state,\n  topIcon\n}: InfoCardProps) => {\n  return (\n    <InfoCard\n      className={className}\n      dropshadow={dropshadow}\n      state={state}\n      rightIcon={rightIcon}\n      title={title}\n      topIcon={topIcon}\n    >\n      {children}\n    </InfoCard>\n  );\n}\n\nInfoCardStory.storyName = \"InfoCard\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;SACrD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,2CAA2C;SACzD;QACD,KAAK,EAAE;YACL,WAAW,EAAE,kDAAkD;SAChE;QACD,OAAO,EAAE;YACP,WAAW,EAAE,0DAA0D;SACxE;QACD,SAAS,EAAE;YACT,WAAW,EAAE,oDAAoD;SAClE;QACD,UAAU,EAAE;YACV,WAAW,EAAE,6CAA6C;SAC3D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;SACtD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,qKAAqK;QAC/K,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE;YACP,GAAG,EAAE,MAAM,CAAC,QAAQ;YACpB,GAAG,EAAE,WAAW;SACjB;QACD,SAAS,EAAE;YACR,GAAG,EAAE,MAAM,CAAC,cAAc;YAC1B,GAAG,EAAE,UAAU;SACjB;QACD,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,EAAE;KACd;EACD;IAEW,aAAa,GAAG,UAAC,EAQd;QAPd,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,KAAK,WAAA,EACL,OAAO,aAAA;IAEP,QACEA,IAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,YAEf,QAAQ,GACA,EACX;AACJ,EAAC;AAED,aAAa,CAAC,SAAS,GAAG,UAAU;;;;;"}

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

@@ -6,7 +6,7 @@ import '../icon/IconWrapper/IconWrapper.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../index-6ea95111.js';
 
-var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-primary-500);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
+var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-purple-300);\n  border: 2px solid var(--ds-purple-300);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-purple-600);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #B8B4F3;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8883D8;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-purple-600);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
 var styles = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z);
 

package/dist/esm/components/comparisonTable/components/AccordionItem/AccordionItem.js

@@ -4,7 +4,7 @@ import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 import 'react';
 import '../../../../index-6ea95111.js';
 
-var css_248z = ".AccordionItem-module_container__29xle {\n  width: min-content;\n  width: var(--growContent, min-content);\n  max-width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n  transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n  column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n  border: none;\n  background: #fafaff;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  position: relative;\n  text-align: inherit;\n  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  background: #ebebff;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
+var css_248z = ".AccordionItem-module_container__29xle {\n  width: min-content;\n  width: var(--growContent, min-content);\n  max-width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n  transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n  column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n  border: none;\n  background: #f9f9fd;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  position: relative;\n  text-align: inherit;\n  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  background: #E8E7FE;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
 var styles = {"container":"AccordionItem-module_container__29xle","chevron":"AccordionItem-module_chevron__1Pdoe","chevronClosed":"AccordionItem-module_chevronClosed__1Sq5g","iconAndTextContainer":"AccordionItem-module_iconAndTextContainer__1K9NF","headerButton":"AccordionItem-module_headerButton__1C03u"};
 styleInject(css_248z);
 

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

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 import { c as classNames } from '../../../../index-6ea95111.js';
 
-var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 16px;\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n  text-decoration: underline;\n  text-decoration-color: #8e8cee;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 8px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #fafaff;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
+var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 16px;\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n  text-decoration: underline;\n  text-decoration-color: #8883D8;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 8px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #f9f9fd;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
 var styles = {"header":"style-module_header__32rw-","cell":"style-module_cell__1NoZ6","title":"style-module_title__1xYvu","sticky":"style-module_sticky__2T5jm","addon":"style-module_addon__CPf60"};
 styleInject(css_248z);
 

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: center;\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: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f5f6fb;\n  justify-content: center;\n  align-items: center;\n  stroke: #ebebff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f5f6fb;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f5f6fb;\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: center;\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: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #E8E7FE;\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: #8883D8;\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 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/comparisonTable/components/TableInfoButton/index.js

@@ -6,7 +6,7 @@ import '../../../icon/IconWrapper/IconWrapper.js';
 import '../../../../tslib.es6-a39f91fc.js';
 import '../../../../index-6ea95111.js';
 
-var css_248z = ".style-module_button__3TkNT {\n  padding: 0;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: bottom;\n  border-radius: 12px;\n  width: 24px;\n  height: 24px;\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n  background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg path, .style-module_button__3TkNT:focus svg path {\n  fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT svg path {\n  fill: #d2d2d8;\n}\n.style-module_button__3TkNT:focus-visible {\n  box-shadow: 0 0 0 2px #8e8cee;\n}";
+var css_248z = ".style-module_button__3TkNT {\n  padding: 0;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: bottom;\n  border-radius: 12px;\n  width: 24px;\n  height: 24px;\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n  background-color: #F6F6FE;\n}\n.style-module_button__3TkNT:hover svg path, .style-module_button__3TkNT:focus svg path {\n  fill: #B8B4F3;\n}\n.style-module_button__3TkNT svg {\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT svg path {\n  fill: #d2d2d9;\n}\n.style-module_button__3TkNT:focus-visible {\n  box-shadow: 0 0 0 2px #8883D8;\n}";
 var styles = {"button":"style-module_button__3TkNT"};
 styleInject(css_248z);
 

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

@@ -4,7 +4,7 @@ import StarIcon from './StarIcon.js';
 import ZapIcon from './ZapIcon.js';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_icon__1ep7- {\n  margin-right: 4px;\n}\n\n.style-module_filled__3l-v0 {\n  fill: #8e8cee;\n}\n\n.style-module_empty__Ikg_s {\n  fill: #f5f6fb;\n}";
+var css_248z = ".style-module_icon__1ep7- {\n  margin-right: 4px;\n}\n\n.style-module_filled__3l-v0 {\n  fill: #8883D8;\n}\n\n.style-module_empty__Ikg_s {\n  fill: #f7f7fd;\n}";
 var styles = {"icon":"style-module_icon__1ep7-","filled":"style-module_filled__3l-v0","empty":"style-module_empty__Ikg_s"};
 styleInject(css_248z);
 

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

@@ -15,7 +15,7 @@ var TableRowHeader = function (_a) {
     var icon = _a.icon, label = _a.label, subtitle = _a.subtitle, onClickInfo = _a.onClickInfo;
     return (jsxs("div", { className: "d-flex", children: [icon && jsx("span", { className: "mr8 ".concat(styles.icon), children: icon }), jsxs("div", { children: [jsxs("p", { className: "p-p d-inline", children: [jsx("span", { className: classNames({
                                     mr8: onClickInfo,
-                                }), children: label }), onClickInfo && jsx(TableInfoButton, { onClick: onClickInfo })] }), subtitle && jsx("p", { className: "p-p--small tc-grey-500", children: subtitle })] })] }));
+                                }), children: label }), onClickInfo && jsx(TableInfoButton, { onClick: onClickInfo })] }), subtitle && jsx("p", { className: "p-p--small tc-neutral-600", children: subtitle })] })] }));
 };
 
 export default TableRowHeader;

package/dist/esm/components/comparisonTable/components/TableRowHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableRowHeader/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport styles from './style.module.scss';\nimport TableInfoButton from '../TableInfoButton';\n\ninterface TableRowHeaderProps {\n  label: string;\n  icon?: string;\n  subtitle?: string;\n  onClickInfo?: () => void;\n}\n\nconst TableRowHeader = ({\n  icon,\n  label,\n  subtitle,\n  onClickInfo,\n}: TableRowHeaderProps) => (\n  <div className=\"d-flex\">\n    {icon && <span className={`mr8 ${styles.icon}`}>{icon}</span>}\n    <div>\n      <p className=\"p-p d-inline\">\n        <span\n          className={classNames({\n            mr8: onClickInfo,\n          })}\n        >\n          {label}\n        </span>\n        {onClickInfo && <TableInfoButton onClick={onClickInfo} />}\n      </p>\n      {subtitle && <p className=\"p-p--small tc-grey-500\">{subtitle}</p>}\n    </div>\n  </div>\n);\n\nexport type { TableRowHeaderProps };\nexport default TableRowHeader;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;IAWM,cAAc,GAAG,UAAC,EAKF;QAJpB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA;IACc,QACzBA,cAAK,SAAS,EAAC,QAAQ,aACpB,IAAI,IAAIC,cAAM,SAAS,EAAE,cAAO,MAAM,CAAC,IAAI,CAAE,YAAG,IAAI,GAAQ,EAC7DD,yBACEA,YAAG,SAAS,EAAC,cAAc,aACzBC,cACE,SAAS,EAAE,UAAU,CAAC;oCACpB,GAAG,EAAE,WAAW;iCACjB,CAAC,YAED,KAAK,GACD,EACN,WAAW,IAAIA,IAAC,eAAe,IAAC,OAAO,EAAE,WAAW,GAAI,IACvD,EACH,QAAQ,IAAIA,WAAG,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAK,IAC7D,IACF;AAhBmB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableRowHeader/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport styles from './style.module.scss';\nimport TableInfoButton from '../TableInfoButton';\n\ninterface TableRowHeaderProps {\n  label: string;\n  icon?: string;\n  subtitle?: string;\n  onClickInfo?: () => void;\n}\n\nconst TableRowHeader = ({\n  icon,\n  label,\n  subtitle,\n  onClickInfo,\n}: TableRowHeaderProps) => (\n  <div className=\"d-flex\">\n    {icon && <span className={`mr8 ${styles.icon}`}>{icon}</span>}\n    <div>\n      <p className=\"p-p d-inline\">\n        <span\n          className={classNames({\n            mr8: onClickInfo,\n          })}\n        >\n          {label}\n        </span>\n        {onClickInfo && <TableInfoButton onClick={onClickInfo} />}\n      </p>\n      {subtitle && <p className=\"p-p--small tc-neutral-600\">{subtitle}</p>}\n    </div>\n  </div>\n);\n\nexport type { TableRowHeaderProps };\nexport default TableRowHeader;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;IAWM,cAAc,GAAG,UAAC,EAKF;QAJpB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA;IACc,QACzBA,cAAK,SAAS,EAAC,QAAQ,aACpB,IAAI,IAAIC,cAAM,SAAS,EAAE,cAAO,MAAM,CAAC,IAAI,CAAE,YAAG,IAAI,GAAQ,EAC7DD,yBACEA,YAAG,SAAS,EAAC,cAAc,aACzBC,cACE,SAAS,EAAE,UAAU,CAAC;oCACpB,GAAG,EAAE,WAAW;iCACjB,CAAC,YAED,KAAK,GACD,EACN,WAAW,IAAIA,IAAC,eAAe,IAAC,OAAO,EAAE,WAAW,GAAI,IACvD,EACH,QAAQ,IAAIA,WAAG,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAK,IAChE,IACF;AAhBmB;;;;"}

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

@@ -138,7 +138,7 @@ var useComparisonTable = function (_a) {
     };
 };
 
-var css_248z = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n@media (max-width: 34rem) {\n  .style-module_noScrollBarsMobile__1txeg * {\n    scrollbar-width: none;\n    /* Firefox */\n    -ms-overflow-style: none;\n    /* Internet Explorer 10+ */\n  }\n  .style-module_noScrollBarsMobile__1txeg * -webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.style-module_section__1bf_0 + .style-module_section__1bf_0 {\n  margin-top: 48px;\n}\n@media (min-width: 34rem) {\n  .style-module_section__1bf_0 + .style-module_section__1bf_0 {\n    margin-top: 72px;\n  }\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #fafaff;\n  border-radius: 8px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #fafaff;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #fafaff;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
+var css_248z = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n@media (max-width: 34rem) {\n  .style-module_noScrollBarsMobile__1txeg * {\n    scrollbar-width: none;\n    /* Firefox */\n    -ms-overflow-style: none;\n    /* Internet Explorer 10+ */\n  }\n  .style-module_noScrollBarsMobile__1txeg * -webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.style-module_section__1bf_0 + .style-module_section__1bf_0 {\n  margin-top: 48px;\n}\n@media (min-width: 34rem) {\n  .style-module_section__1bf_0 + .style-module_section__1bf_0 {\n    margin-top: 72px;\n  }\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #f9f9fd;\n  border-radius: 8px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #f9f9fd;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #f9f9fd;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
 var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","noScrollBarsMobile":"style-module_noScrollBarsMobile__1txeg","section":"style-module_section__1bf_0","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
 styleInject(css_248z);
 

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

@@ -18,7 +18,7 @@ var InitialButton = function (_a) {
 };
 // TODO: Allow setting loading to true to display text
 var GeneratingButton = function () { return (jsx(Button, { className: "w100 ".concat(styles.button), loading: true, children: "Generating" })); };
-var CompletedChip = function () { return (jsxs("div", { className: styles['chip-complete'], children: [jsx(CheckIcon, { color: 'grey-500', size: 16 }), jsx("div", { className: "p-h4 tc-grey-500 ml8", children: "Download complete" })] })); };
+var CompletedChip = function () { return (jsxs("div", { className: styles['chip-complete'], children: [jsx(CheckIcon, { color: 'neutral-600', size: 16 }), jsx("div", { className: "p-h4 tc-neutral-600 ml8", children: "Download complete" })] })); };
 var DownloadButton = function (_a) {
     var downloadStatus = _a.downloadStatus, onDownload = _a.onDownload, _b = _a.className, className = _b === void 0 ? '' : _b, customFail = _a.customFail;
     var mapDownloadButton = {