npm - @popsure/dirty-swan - Versions diffs - 0.59.0-alpha → 0.59.0-beta-2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

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

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

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from './index.js';
-import Info from '../icon/icons/Info.js';
+import InfoIcon from '../icon/icons/Info.js';
 import PlusIcon from '../icon/icons/Plus.js';
 import SendIcon from '../icon/icons/Send.js';
 import '../../tslib.es6-a39f91fc.js';
@@ -44,7 +44,7 @@ var story = {
     args: {
         children: 'Click me',
         disabled: false,
-        variant: 'filledColor',
+        variant: 'filledBlack',
         loading: false,
         hideLabel: false,
         className: 'wmn3',
@@ -63,11 +63,7 @@ var ButtonStory = function (_a) {
 ButtonStory.storyName = "Button";
 var ButtonVariants = function (_a) {
     var children = _a.children, onClick = _a.onClick;
-    return (jsxs("div", { children: [jsx("h3", { className: 'p-h3 mb24', children: "Filled variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-300 br8', children: ["filledColor", "filledGray", "filledWhite", "filledBlack"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Text variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-300 br8', children: ["textColor", "textWhite"].map(function (variant, index) { return (jsxs("div", { className: variant === "textWhite" ? "bg-purple-600 px32 br8" : "", children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === "textWhite" ? "tc-white" : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Outline variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-purple-600 br8', children: jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16 tc-white', children: "outlineWhite" }), jsx(Button, { onClick: onClick, variant: 'outlineWhite', children: children })] }) }), jsx("h3", { className: 'p-h3 my24', children: "State variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-300 br8', children: ["filledSuccess", "filledError"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) })] }));
-};
-var ButtonOnBackgrounds = function (_a) {
-    var onClick = _a.onClick;
-    return (jsxs("div", { children: [jsxs("div", { className: 'p24 bg-white br8', children: [jsx("h3", { className: 'p-h3 mb16', children: "On white" }), jsx("div", { className: 'd-flex gap16', children: ["filledColor", "filledGray", "textColor"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] }), jsxs("div", { className: 'p24 bg-neutral-100 br8', children: [jsx("h3", { className: 'p-h3 mb16', children: "On grey" }), jsx("div", { className: 'd-flex gap16', children: ["filledColor", "filledWhite", "textColor"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] }), jsxs("div", { className: 'p24 bg-purple-600 br8', children: [jsx("h3", { className: 'p-h3 mb16 tc-white', children: "On primary" }), jsx("div", { className: 'd-flex gap16', children: ["filledWhite", "outlineWhite", "textWhite"].map(function (variant) { return (jsx(Button, { onClick: onClick, variant: variant, children: variant }, variant)); }) })] })] }));
+    return (jsxs("div", { children: [jsx("h3", { className: 'p-h3 mb24', children: "Filled variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-100 br8', children: ["filledBlack", "filledGray", "filledWhite"].map(function (variant) { return (jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Text variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-100 br8', children: ["textBlack", "textWhite"].map(function (variant, index) { return (jsxs("div", { className: variant === "textWhite" ? "bg-neutral-800 px32 pb16 br8" : "", children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === "textWhite" ? "tc-white" : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "Outline variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-100 br8', children: ["outlineGray", "outlineWhite"].map(function (variant, index) { return (jsx("div", { className: variant === "outlineWhite" ? "bg-neutral-800 px32 py16 br8" : "px32 py16", children: jsxs("div", { children: [jsx("h4", { className: "p-h4 mb16 ".concat(variant === "outlineWhite" ? "tc-white" : ''), children: variant }), jsx(Button, { onClick: onClick, variant: variant, children: children })] }) }, variant)); }) }), jsx("h3", { className: 'p-h3 my24', children: "State variants" }), jsx("div", { className: 'd-flex gap16 p24 bg-neutral-100 br8', children: jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "filledError" }), jsx(Button, { onClick: onClick, variant: "filledError", children: children })] }) })] }));
 };
 var ButtonWithIcons = function (_a) {
     var children = _a.children, onClick = _a.onClick;
@@ -87,9 +83,9 @@ 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-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."] })] }));
+    return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Button, { as: "a", href: "https://feather-insurance.com", target: "_blank", children: children }), jsx("h3", { className: 'p-h3', children: "As a button:" }), jsx(Button, { as: "button", onClick: onClick, children: children }), jsx("h3", { className: 'p-h3', children: "As a h3:" }), jsx(Button, { as: "h3", children: children }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(InfoIcon, {}), "Inspect elements to see the different HTML tags being rendered."] })] }));
 };
 export default story;
-export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
+export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
 //# sourceMappingURL=index.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { ElementType } from 'react';\nimport { Button, ButtonProps, ButtonVariant } from '.';\nimport { InfoIcon, PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n title: 'JSX/Button',\n component: Button,\n argTypes: {\n as: {\n control: { type: 'text' },\n description: 'Allow wrapper element type to be custom defined'\n },\n children: {\n control: 'text',\n description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n },\n variant: {\n description: 'Variant that defines the style of the Button',\n },\n leftIcon: {\n description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n },\n rightIcon: {\n description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n },\n loading: {\n description: 'Show button on a loading state.',\n },\n hideLabel: {\n description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n },\n className: {\n type: 'text',\n description: 'Class name for most top parent element',\n },\n },\n args: {\n children: 'Click me',\n disabled: false,\n variant: 'filledColor',\n loading: false,\n hideLabel: false,\n className: 'wmn3',\n },\n parameters: {\n design: {\n url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n type: 'figma'\n },\n },\n};\n\nexport const ButtonStory = ({\n className,\n loading = false,\n children,\n variant,\n hideLabel,\n leftIcon,\n rightIcon,\n disabled,\n}: ButtonProps) => (\n <div className='wmx6'>\n <Button\n className={className}\n loading={loading}\n variant={variant}\n hideLabel={hideLabel}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n disabled={disabled}\n >\n {children}\n </Button>\n </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n <div>\n <h3 className='p-h3 mb24'>Filled variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-300 br8'>\n {[ \"filledColor\", \"filledGray\", \"filledWhite\", \"filledBlack\"].map((variant) => (\n <div key={variant}>\n <h4 className='p-h4 mb16'>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n ))}\n </div>\n\n <h3 className='p-h3 my24'>Text variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-300 br8'>\n {[\"textColor\", \"textWhite\"].map((variant, index) => (\n <div key={variant} className={variant === \"textWhite\" ? \"bg-purple-600 px32 br8\" : \"\"}>\n <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n ))}\n </div>\n\n <h3 className='p-h3 my24'>Outline variants</h3>\n <div className='d-flex gap16 p24 bg-purple-600 br8'>\n <div>\n <h4 className='p-h4 mb16 tc-white'>\n outlineWhite\n </h4>\n\n <Button onClick={onClick} variant={'outlineWhite'}>\n {children}\n </Button>\n </div>\n </div>\n \n <h3 className='p-h3 my24'>State variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-300 br8'>\n {[\"filledSuccess\", \"filledError\"].map((variant) => (\n <div key={variant}>\n <h4 className='p-h4 mb16'>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n ))}\n </div>\n </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n <div>\n <div className='p24 bg-white br8'>\n <h3 className='p-h3 mb16'>On white</h3>\n <div className='d-flex gap16'>\n {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n {variant}\n </Button>\n ))}\n </div>\n </div>\n\n <div className='p24 bg-neutral-100 br8'>\n <h3 className='p-h3 mb16'>On grey</h3>\n <div className='d-flex gap16'>\n {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n {variant}\n </Button>\n ))}\n </div>\n </div>\n\n <div className='p24 bg-purple-600 br8'>\n <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n <div className='d-flex gap16'>\n {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n {variant}\n </Button>\n ))}\n </div>\n </div>\n </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n <div className='d-flex gap16'>\n <Button leftIcon={<SendIcon />} onClick={onClick}>\n {children}\n </Button>\n <Button rightIcon={<SendIcon />} onClick={onClick}>\n {children}\n </Button>\n </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n <Button loading onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n <Button disabled onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <h3 className='p-h3'>As an anchor:</h3>\n <Button as=\"a\" href=\"https://feather-insurance.com\" target=\"_blank\">\n {children}\n </Button>\n\n <h3 className='p-h3'>As a button:</h3>\n <Button as=\"button\" onClick={onClick}>\n {children}\n </Button>\n\n <h3 className='p-h3'>As a h3:</h3>\n <Button as=\"h3\">\n {children}\n </Button>\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}
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: 'filledBlack',\n loading: false,\n hideLabel: false,\n className: 'wmn3',\n },\n parameters: {\n design: {\n url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n type: 'figma'\n },\n },\n};\n\nexport const ButtonStory = ({\n className,\n loading = false,\n children,\n variant,\n hideLabel,\n leftIcon,\n rightIcon,\n disabled,\n}: ButtonProps) => (\n <div className='wmx6'>\n <Button\n className={className}\n loading={loading}\n variant={variant}\n hideLabel={hideLabel}\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n disabled={disabled}\n >\n {children}\n </Button>\n </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n <div>\n <h3 className='p-h3 mb24'>Filled variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-100 br8'>\n {[ \"filledBlack\", \"filledGray\", \"filledWhite\"].map((variant) => (\n <div key={variant}>\n <h4 className='p-h4 mb16'>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n ))}\n </div>\n\n <h3 className='p-h3 my24'>Text variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-100 br8'>\n {[\"textBlack\", \"textWhite\"].map((variant, index) => (\n <div key={variant} className={variant === \"textWhite\" ? \"bg-neutral-800 px32 pb16 br8\" : \"\"}>\n <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n ))}\n </div>\n\n <h3 className='p-h3 my24'>Outline variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-100 br8'>\n {[\"outlineGray\", \"outlineWhite\"].map((variant, index) => (\n <div key={variant} className={variant === \"outlineWhite\" ? \"bg-neutral-800 px32 py16 br8\" : \"px32 py16\"}>\n <div>\n <h4 className={`p-h4 mb16 ${variant === \"outlineWhite\" ? \"tc-white\" : ''}`}>\n {variant}\n </h4>\n\n <Button onClick={onClick} variant={variant as ButtonVariant}>\n {children}\n </Button>\n </div>\n </div>\n ))}\n </div>\n \n <h3 className='p-h3 my24'>State variants</h3>\n <div className='d-flex gap16 p24 bg-neutral-100 br8'>\n <div>\n <h4 className='p-h4 mb16'>\n filledError\n </h4>\n\n <Button onClick={onClick} variant=\"filledError\">\n {children}\n </Button>\n </div>\n </div>\n </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n <div className='d-flex gap16'>\n <Button leftIcon={<SendIcon />} onClick={onClick}>\n {children}\n </Button>\n <Button rightIcon={<SendIcon />} onClick={onClick}>\n {children}\n </Button>\n </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n <Button loading onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n <Button disabled onClick={onClick}>\n {children}\n </Button>\n);\n\nexport const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <h3 className='p-h3'>As an anchor:</h3>\n <Button as=\"a\" href=\"https://feather-insurance.com\" target=\"_blank\">\n {children}\n </Button>\n\n <h3 className='p-h3'>As a button:</h3>\n <Button as=\"button\" onClick={onClick}>\n {children}\n </Button>\n\n <h3 className='p-h3'>As a h3:</h3>\n <Button as=\"h3\">\n {children}\n </Button>\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -6,14 +6,14 @@ 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 #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"};
+var css_248z = ".style-module_border-strong-default__3_zF3 {\n  border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n  border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n  border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n  border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n  border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n  border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n  border: 1px solid #f5f5fb;\n}\n\n.style-module_border-soft-hover__30OW0 {\n  border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n  border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n  border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n  background-color: #fff;\n  border: 1px solid transparent;\n  transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n  background-color: #fff;\n}\n.style-module_wrapper--transparent__1M1sg {\n  background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n  background-color: #fff;\n  border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n  background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n  background-color: #FEECD3;\n}\n\n.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  border: 1px solid transparent;\n  outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n  border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n  background-color: transparent;\n  border-color: transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi {\n  background-color: #fff;\n  border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB {\n  background-color: #EEEEFE;\n  border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin {\n  background-color: #FEECD3;\n  border-color: #F2B873;\n}\n.style-module_button__P-UIa:focus .style-module_wrapper--default__NYcwG, .style-module_button__P-UIa:focus-visible .style-module_wrapper--default__NYcwG {\n  border-color: #26262e;\n  box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:focus .style-module_wrapper--outline__3fBDi, .style-module_button__P-UIa:focus-visible .style-module_wrapper--outline__3fBDi {\n  box-shadow: inset 0 0 0 1px #26262e;\n  border-color: #26262e;\n}\n.style-module_button__P-UIa:focus .style-module_wrapper--transparent__1M1sg, .style-module_button__P-UIa:focus-visible .style-module_wrapper--transparent__1M1sg {\n  background-color: #f5f5fb;\n  box-shadow: none;\n}\n.style-module_button__P-UIa:focus .style-module_wrapper--primary__Sulin, .style-module_button__P-UIa:focus-visible .style-module_wrapper--primary__Sulin {\n  border-color: #C6824E;\n  box-shadow: inset 0 0 0 1px #C6824E;\n}\n.style-module_button__P-UIa:focus .style-module_wrapper--secondary__1l7bB, .style-module_button__P-UIa:focus-visible .style-module_wrapper--secondary__1l7bB {\n  border-color: #6A65AE;\n  box-shadow: inset 0 0 0 1px #6A65AE;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper__35C6V {\n  border-color: #26262e;\n  box-shadow: inset 0 0 0 1px #26262e;\n}\n\n.style-module_icon__15X1c {\n  margin-right: 12px;\n  color: #26262e;\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  color: #26262e;\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 = {"border-strong-default":"style-module_border-strong-default__3_zF3","border-strong-hover":"style-module_border-strong-hover__2gkuG","border-strong-active":"style-module_border-strong-active__3BFbj","border-medium-default":"style-module_border-medium-default__21dIE","border-medium-hover":"style-module_border-medium-hover__Pq6pQ","border-medium-active":"style-module_border-medium-active__uLwlN","border-soft-default":"style-module_border-soft-default__398BS","border-soft-hover":"style-module_border-soft-hover__30OW0","border-soft-active":"style-module_border-soft-active__eUC5s","border-focus":"style-module_border-focus__28f29","wrapper":"style-module_wrapper__35C6V","wrapper--default":"style-module_wrapper--default__NYcwG","wrapper--transparent":"style-module_wrapper--transparent__1M1sg","wrapper--outline":"style-module_wrapper--outline__3fBDi","wrapper--secondary":"style-module_wrapper--secondary__1l7bB","wrapper--primary":"style-module_wrapper--primary__Sulin","button":"style-module_button__P-UIa","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);
 var cardDefaultAs = 'section';
 var Card = function (_a) {
     var _b;
-    var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _c = _a.density, density = _c === void 0 ? 'balanced' : _c, description = _a.description, _d = _a.descriptionVariant, descriptionVariant = _d === void 0 ? 'large' : _d, _e = _a.dropShadow, dropShadow = _e === void 0 ? true : _e, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _f = _a.titleVariant, titleVariant = _f === void 0 ? 'large' : _f, showActionIcon = _a.showActionIcon, _g = _a.verticalAlignment, verticalAlignment = _g === void 0 ? 'center' : _g, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment"]);
+    var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _c = _a.density, density = _c === void 0 ? 'balanced' : _c, description = _a.description, _d = _a.descriptionVariant, descriptionVariant = _d === void 0 ? 'large' : _d, _e = _a.dropShadow, dropShadow = _e === void 0 ? true : _e, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _f = _a.titleVariant, titleVariant = _f === void 0 ? 'large' : _f, showActionIcon = _a.showActionIcon, _g = _a.verticalAlignment, verticalAlignment = _g === void 0 ? 'center' : _g, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment", "variant"]);
     var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
     var propsWithActionIcon = onClick || (rest === null || rest === void 0 ? void 0 : rest.href) || rest.to;
     var cardDefaultTag = onClick ? 'button' : cardDefaultAs;
@@ -25,7 +25,7 @@ var Card = function (_a) {
             _b)) }, onClick && {
         onClick: onClick,
         type: "button"
-    }, rest, { children: jsxs("div", { className: classNames('d-flex fd-column jc-center w100 ta-left br8', { 'bs-sm': dropShadow }, {
+    }, rest, { children: jsxs("div", { className: classNames('d-flex fd-column jc-center w100 ta-left br8', { 'bs-sm': dropShadow && variant === 'default' }, {
                 compact: 'p16',
                 balanced: 'p24',
                 spacious: 'p32',
@@ -33,11 +33,11 @@ var Card = function (_a) {
                 top: 'jc-start',
                 center: 'jc-center',
                 bottom: 'jc-end',
-            }[verticalAlignment], styles === null || styles === void 0 ? void 0 : styles.wrapper, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper), children: [jsxs("div", { className: "d-flex w100", children: [icon && (jsx("div", { className: classNames("d-flex", styles.icon, styles["icon".concat(density)], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon, {
+            }[verticalAlignment], styles === null || styles === void 0 ? void 0 : styles.wrapper, styles === null || styles === void 0 ? void 0 : styles["wrapper--".concat(variant)], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper), children: [jsxs("div", { className: "d-flex w100", children: [icon && (jsx("div", { className: classNames("d-flex", styles.icon, styles["icon".concat(density)], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon, {
                                 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-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, {
+                            }[verticalAlignment]), children: icon })), jsxs("div", { className: "d-flex jc-between w100", children: [jsxs("div", { className: classNames((classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.contentWrapper) || '', "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 CHANGED Viewed

	@@ -1 +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-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":";;;;;;;;;;;;AAMA,IAAM,aAAa,GAAG,SAAkB,CAAA;~~IAoClC~~,IAAI,GAAG,UAA4C,~~EAiB1C~~;;~~IAhBb~~,IAAA,EAAE,QAAA,EACF,QAAQ,cAAA,EACRA,YAAU,gBAAA,EACV,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,WAAW,iBAAA,EACX,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA,EACtB,cAAc,oBAAA,EACd,yBAA4B,EAA5B,iBAAiB,mBAAG,QAAQ,KAAA,~~EACzB~~,IAAI,~~cAhBgD~~,~~wMAiBxD~~,CADQ;IAEP,IAAM,cAAc,GAAG,OAAO,UAAU,KAAK,WAAW,IAAI,CAAC,UAAU,CAAC;IACxE,IAAM,mBAAmB,GAAG,OAAO,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA,IAAI,IAAI,CAAC,EAAE,CAAC;IAC7D,IAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,CAAC;IAC1D,IAAM,GAAG,GAAG,EAAE,IAAI,cAAc,CAAC;IAEjC,QACEC,IAAC,GAAG,aACF,SAAS,EAAEC,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,aAAa,EACzB,wBAAwB;gBAEtB,WAAW,EAAE,mBAAmB;;YAChC,GAAC,MAAM,CAAC,MAAM,IAAG,mBAAmB;gBAEvC,IACG,OAAO,IAAI;QACb,OAAO,SAAA;QACP,IAAI,EAAE,QAAQ;KACf,EACG,IAAI,cAERG,cACE,SAAS,EAAED,UAAc,CACvB,6CAA6C,EAC7C,EAAE,OAAO,EAAE,UAAU,EAAE,~~EACvB~~;gBACE,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,KAAK;aAChB,CAAC,OAAsB,CAAC,EACzB;gBACE,GAAG,EAAE,UAAU;gBACf,MAAM,EAAE,WAAW;gBACnB,MAAM,EAAE,QAAQ;aACjB,CAAC,iBAA0C,CAAC,EAC7C,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,~~EACfF~~,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,OAAO,CACpB,aAEDG,cAAK,SAAS,EAAC,aAAa,aACzB,IAAI,KACHF,aACE,SAAS,EAAEC,UAAc,CACvB,QAAQ,EACR,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,cAAO,OAAO,CAAE,CAAC,EACxBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,IAAI,EAChB;gCACE,GAAG,EAAE,UAAU;gCACf,MAAM,EAAE,WAAW;gCACnB,MAAM,EAAE,QAAQ;6BACjB,CAAC,iBAA0C,CAAC,CAC9C,YAEA,IAAI,GACD,CACP,EAEDG,cAAK,SAAS,EAAC,wBAAwB,aACrCA,~~cAAK~~,SAAS,~~EAAC~~,qDAAqD,~~aACjE~~,KAAK,~~KACJF~~,YAAI,SAAS,EAAEC,UAAc,CAAC,YAAY,EAAEF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,CAAC,YAC3D,KAAK,GACH,CACN,EAEA,KAAK,KACJC,YACE,SAAS,EAAEC,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,EACjB;gDACE,KAAK,EAAE,MAAM;gDACb,MAAM,EAAE,MAAM;gDACd,KAAK,EAAE,KAAK;6CACb,CAAC,YAAgC,CAAC,CACpC,YAEA,KAAK,GACH,CACN,EAEA,WAAW,KACVC,aACE,SAAS,EAAEC,UAAc,CACvB,MAAM,CAAC,WAAW,EAClBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,WAAW,EACvB,kBAAkB,KAAK,OAAO,GAAG,YAAY,GAAG,KAAK,CACtD,YAEA,WAAW,GACR,CACP,IACG,EAEL,CAAC,cAAc,KAAK,mBAAmB,IAAI,CAAC,cAAc,CAAC,MAC1DC,aACE,SAAS,EAAEC,UAAc,CACvB,MAAM,CAAC,UAAU,EACjBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,UAAU,EACtB,MAAM,CAAC,oBAAa,OAAO,CAAE,CAAC,EAC9B,kBAAkB,CACnB,YAEA,UAAU,IAAIC,IAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,GACzC,CACP,IACG,IACF,EAEL,QAAQ,IAAIA,aAAK,SAAS,EAAED,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,QAAQ,YAAG,QAAQ,GAAO,IAC/D,IACF,EACN;AACJ;;;;"}
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';\ntype CardVariant = 'default' \| 'transparent' \| 'outline' \| 'secondary' \| 'primary';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n as?: E;\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string\n contentWrapper?: 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 variant?: CardVariant\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 variant = 'default',\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 && variant === 'default' },\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 styles?.[`wrapper--${variant}`],\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\n className={classNamesUtil(\n classNames?.contentWrapper \|\| '',\n \"d-flex jc-center gap8 fd-column tc-neutral-900 w100\"\n )}\n >\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 CHANGED Viewed

@@ -3,8 +3,9 @@ import { Card } from './index.js';
 import { i as illustrations } from '../../../index-29e6f39e.js';
 import { Button } from '../../button/index.js';
 import { Badge } from '../../badge/index.js';
+import BasketballSportsIcon from '../../icon/icons/BasketballSports.js';
 import CheckIcon from '../../icon/icons/Check.js';
-import Info from '../../icon/icons/Info.js';
+import InfoIcon from '../../icon/icons/Info.js';
 import MehIcon from '../../icon/icons/Meh.js';
 import PlusCircleIcon from '../../icon/icons/PlusCircle.js';
 import XIcon from '../../icon/icons/X.js';
@@ -95,8 +96,12 @@ 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-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 }) }));
 };
+var CardVariants = function (_a) {
+    var description = _a.description, onClick = _a.onClick, title = _a.title;
+    return (jsxs("div", { className: 'd-flex fd-column gap24 p24 bg-neutral-50', children: [jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "default" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'default' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "transparent" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'transparent' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "outline" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'outline' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "secondary" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'secondary' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "primary" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'primary' })] })] }));
+};
 CardStory.storyName = "Card";
-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 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(InfoIcon, {}), "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;
@@ -117,5 +122,5 @@ var CardOverridesStyles = function (_a) {
 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 };
+export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardVariants, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
 //# sourceMappingURL=index.stories.js.map

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

	@@ -1 +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';\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":"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"}
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 { BasketballSportsIcon, 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\nexport const CardVariants = ({ \n description,\n onClick,\n title,\n}: CardProps) => (\n <div className='d-flex fd-column gap24 p24 bg-neutral-50'>\n <div>\n <h4 className='p-h4 mb16'>default</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='default'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>transparent</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='transparent'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>outline</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='outline'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>secondary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='secondary'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>primary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='primary'\n />\n </div>\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"],"mappings":"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"}

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

@@ -7,8 +7,8 @@ import { c as classNames } from '../../../index-6ea95111.js';
 import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
-var css_248z = ".style-module_containerDisabled__2j9_N {\n  pointer-events: none;\n  opacity: 0.25;\n}";
-var styles = {"containerDisabled":"style-module_containerDisabled__2j9_N"};
+var css_248z = ".style-module_containerDisabled__2j9_N {\n  pointer-events: none;\n  opacity: 0.25;\n}\n\n.style-module_contentWrapper__EkTN9 {\n  gap: 4px !important;\n}";
+var styles = {"containerDisabled":"style-module_containerDisabled__2j9_N","contentWrapper":"style-module_contentWrapper__EkTN9"};
 styleInject(css_248z);
 var CardButton = function (_a) {
@@ -16,8 +16,10 @@ 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-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 })));
+            label: 'tc-neutral-700',
+            description: 'tc-neutral-900 p-p',
+            contentWrapper: styles.contentWrapper
+        }, density: 'compact', label: title, description: typeof description === 'string' ? description : null, actionIcon: jsx(ChevronRightIcon, { size: 20, color: 'neutral-900', 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 CHANGED Viewed

	@@ -1 +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-~~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~~;;;;"}
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 label: 'tc-neutral-700',\n description: 'tc-neutral-900 p-p',\n contentWrapper: styles.contentWrapper\n }}\n density='compact'\n label={title}\n description={typeof description === 'string' ? description : null}\n actionIcon={\n <ChevronRightIcon\n size={20}\n color={'neutral-900'}\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,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,oBAAoB;YACjC,cAAc,EAAE,MAAM,CAAC,cAAc;SACtC,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,aAAa,EACpB,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;AA3Bc;;;;"}

package/dist/esm/components/cards/cardButton/index.stories.js CHANGED Viewed

@@ -36,8 +36,8 @@ var story = {
         },
     },
     args: {
-        title: 'Risky Sports',
-        description: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+        title: 'Label',
+        description: 'Honest, simple insurance',
         disabled: false,
         className: '',
         href: 'https://feather-insurance.com/',

package/dist/esm/components/cards/cardButton/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/cardButton/index.stories.tsx"],"sourcesContent":["import { CardButton, CardButtonProps } from '.';\n\nconst story = {\n title: 'JSX/Cards/CardButton',\n component: CardButton,\n argTypes: {\n title: {\n description: 'Title text that needs to be displayed',\n },\n description: {\n description: 'Description text that is displayed under title',\n },\n disabled: {\n description: 'Disabled state of the button',\n },\n className: {\n description: 'Class name for most top parent element',\n },\n onClick: {\n description: 'Function that runs on click of the button',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n href: {\n description: 'Redirect URL on click of the button',\n },\n },\n args: {\n title: '~~Risky Sports~~',\n description: '~~Mountain or rock climbing~~, ~~Bouldering,~~ ~~Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,~~',\n disabled: false,\n className: '',\n href: 'https://feather-insurance.com/',\n }\n};\n\nexport const CardButtonStory = ({\n title,\n description,\n disabled,\n className,\n href,\n onClick,\n}: CardButtonProps) => (\n <CardButton\n title={title}\n description={description}\n disabled={disabled}\n className={className}\n href={href}\n onClick={onClick}\n />\n);\n\nCardButtonStory.storyName = \"CardButton\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;SACrD;QACD,WAAW,EAAE;YACX,WAAW,EAAE,gDAAgD;SAC9D;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,8BAA8B;SAC5C;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;SACtD;QACD,OAAO,EAAE;YACP,WAAW,EAAE,2CAA2C;YACxD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,qCAAqC;SACnD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,~~cAAc~~;~~QACrB~~,WAAW,EAAE,~~qKAAqK~~;~~QAClL~~,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,gCAAgC;KACvC;EACD;IAEW,eAAe,GAAG,UAAC,EAOd;QANhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA;IACc,QACrBA,IAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB;AARmB,EASrB;AAEF,eAAe,CAAC,SAAS,GAAG,YAAY;;;;;"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/cardButton/index.stories.tsx"],"sourcesContent":["import { CardButton, CardButtonProps } from '.';\n\nconst story = {\n title: 'JSX/Cards/CardButton',\n component: CardButton,\n argTypes: {\n title: {\n description: 'Title text that needs to be displayed',\n },\n description: {\n description: 'Description text that is displayed under title',\n },\n disabled: {\n description: 'Disabled state of the button',\n },\n className: {\n description: 'Class name for most top parent element',\n },\n onClick: {\n description: 'Function that runs on click of the button',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n href: {\n description: 'Redirect URL on click of the button',\n },\n },\n args: {\n title: 'Label',\n description: 'Honest, simple insurance',\n disabled: false,\n className: '',\n href: 'https://feather-insurance.com/',\n }\n};\n\nexport const CardButtonStory = ({\n title,\n description,\n disabled,\n className,\n href,\n onClick,\n}: CardButtonProps) => (\n <CardButton\n title={title}\n description={description}\n disabled={disabled}\n className={className}\n href={href}\n onClick={onClick}\n />\n);\n\nCardButtonStory.storyName = \"CardButton\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;SACrD;QACD,WAAW,EAAE;YACX,WAAW,EAAE,gDAAgD;SAC9D;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,8BAA8B;SAC5C;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;SACtD;QACD,OAAO,EAAE;YACP,WAAW,EAAE,2CAA2C;YACxD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,qCAAqC;SACnD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,gCAAgC;KACvC;EACD;IAEW,eAAe,GAAG,UAAC,EAOd;QANhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA;IACc,QACrBA,IAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB;AARmB,EASrB;AAEF,eAAe,CAAC,SAAS,GAAG,YAAY;;;;;"}

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

@@ -1,28 +1,14 @@
-import { b as __rest, a as __assign } from '../../tslib.es6-a39f91fc.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+export { InfoCard } from './infoCard/index.js';
 export { CardButton } from './cardButton/index.js';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import '../icon/icons/ChevronRight.js';
+import '../../tslib.es6-a39f91fc.js';
+import 'react/jsx-runtime';
+import '../icon/icons/ArrowRight.js';
 import 'react';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../../index-6ea95111.js';
+import '../../style-inject.es-1f59c1d0.js';
 import './card/index.js';
-var infoImage = "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";
-var info = {
-    src: infoImage,
-    alt: 'circle with the letter i inside for information',
-};
-var css_248z = "@keyframes style-module_appear-in__23V7k {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.style-module_root-container__3r_b9 {\n  position: relative;\n  padding-top: 40px;\n}\n.style-module_root-container__3r_b9:hover .style-module_right-icon__L6sf3 {\n  visibility: visible;\n  animation-name: style-module_appear-in__23V7k;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n}\n\n.style-module_top-icon__10CJ3 {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%) translateY(-40px);\n}\n.style-module_top-icon--muted__3PZ1X {\n  opacity: 0.25;\n}\n\n.style-module_right-icon__L6sf3 {\n  visibility: hidden;\n  position: absolute;\n  top: 64px;\n  right: 24px;\n}\n\n.style-module_container__19mu2 {\n  padding: 0 24px 24px 24px;\n  height: 100%;\n}\n@media (max-width: 34rem) {\n  .style-module_container__19mu2 {\n    height: fit-content;\n  }\n}";
-var styles = {"root-container":"style-module_root-container__3r_b9","right-icon":"style-module_right-icon__L6sf3","appear-in":"style-module_appear-in__23V7k","top-icon":"style-module_top-icon__10CJ3","top-icon--muted":"style-module_top-icon--muted__3PZ1X","container":"style-module_container__19mu2"};
-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-neutral-700", children: children })] })] })));
-};
+import '../icon/icons/ChevronRight.js';
 var headingForCardSize = function (cardSize) {
     switch (cardSize) {
@@ -52,5 +38,5 @@ var associatedClassForCardState = function (state, dropshadow) {
     return baseClass;
 };
-export { InfoCard, associatedClassForCardState, headingForCardSize };
+export { associatedClassForCardState, headingForCardSize };
 //# sourceMappingURL=index.js.map

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

	@@ -1 +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-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;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/cards/index.tsx"],"sourcesContent":["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":[],"mappings":";;;;;;;;;;;;IAYa,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.js CHANGED Viewed

@@ -1,11 +1,37 @@
-import '../../../tslib.es6-a39f91fc.js';
-import 'react/jsx-runtime';
-export { InfoCard } from '../index.js';
-import '../cardButton/index.js';
-import '../../icon/icons/ChevronRight.js';
+import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import ArrowRight from '../../icon/icons/ArrowRight.js';
+import { Card } from '../card/index.js';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
-import '../card/index.js';
+import '../../icon/icons/ChevronRight.js';
+var css_248z = ".style-module_bs-xs__2s8AD {\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__2KgTp {\n  box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__3yrN1 {\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__Ydmy8 {\n  box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__9OYoN {\n  box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_bannerWrapper__1m3mn {\n  padding-top: 124px;\n}\n\n.style-module_buttonWrapper__-dmFc:focus .style-module_wrapper__rVPyi {\n  border-color: #696971;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03), 0 0 0 1px #696971;\n}\n\n.style-module_buttonWrapper__-dmFc:focus-visible .style-module_wrapper__rVPyi {\n  overflow: hidden;\n  border-color: #26262e;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03), 0 0 0 1px #26262e;\n}\n\n.style-module_topIconWrapper__VYKR7 {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  left: 50%;\n  transform: translateX(-50%) translateY(-80px);\n}\n.style-module_topIconWrapper--muted__2a4Lq {\n  opacity: 0.25;\n}\n\n.style-module_topIconBanner__31-Hc {\n  position: absolute;\n  top: -123px;\n  left: -15px;\n  right: -15px;\n  height: 124px;\n  width: calc(100% + 30px);\n  overflow: hidden;\n}\n.style-module_topIconBanner__31-Hc img {\n  position: absolute;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  min-width: 100%;\n  min-height: 100%;\n}\n\n.style-module_contentWrapper__B1Dn1 {\n  gap: 0 !important;\n}\n\n.style-module_floatingLabel__1iIBj {\n  position: relative;\n}\n\n.style-module_disabled__1u28- {\n  opacity: 0.25;\n  cursor: not-allowed;\n}";
+var styles = {"bs-xs":"style-module_bs-xs__2s8AD","bs-sm":"style-module_bs-sm__2KgTp","bs-md":"style-module_bs-md__3yrN1","bs-lg":"style-module_bs-lg__Ydmy8","bs-xl":"style-module_bs-xl__9OYoN","bannerWrapper":"style-module_bannerWrapper__1m3mn","buttonWrapper":"style-module_buttonWrapper__-dmFc","wrapper":"style-module_wrapper__rVPyi","topIconWrapper":"style-module_topIconWrapper__VYKR7","topIconWrapper--muted":"style-module_topIconWrapper--muted__2a4Lq","topIconBanner":"style-module_topIconBanner__31-Hc","contentWrapper":"style-module_contentWrapper__B1Dn1","floatingLabel":"style-module_floatingLabel__1iIBj","disabled":"style-module_disabled__1u28-"};
+styleInject(css_248z);
+var InfoCard = function (_a) {
+    var _b, _c, _d;
+    _a.className; var _e = _a.showIcon, showIcon = _e === void 0 ? true : _e, title = _a.title, children = _a.children, topIcon = _a.topIcon, topIconType = _a.topIconType, _f = _a.disabled, disabled = _f === void 0 ? false : _f, onClick = _a.onClick, cardProps = __rest(_a, ["className", "showIcon", "title", "children", "topIcon", "topIconType", "disabled", "onClick"]);
+    return (jsx(Card, __assign({}, cardProps, { label: topIcon && (jsx(Fragment, { children: topIconType === 'icon' ? (jsx("div", { className: classNames('d-flex ai-center jc-center bg-orange-200 br-circle p16', styles.topIconWrapper), children: topIcon })) : (jsx("div", { className: classNames('d-flex ai-center jc-center', (_b = {}, _b[styles.topIconBanner] = topIconType === 'banner', _b)), children: topIcon })) })), title: title && (jsxs(Fragment, { children: [title, showIcon && jsx(ArrowRight, { size: 20 })] })), titleVariant: 'medium', description: children, descriptionVariant: 'small', actionIcon: null, showActionIcon: false, classNames: {
+            buttonWrapper: styles.buttonWrapper,
+            wrapper: classNames((_c = {},
+                _c[styles.wrapper] = true,
+                _c[styles.disabled] = disabled,
+                _c['pt40'] = topIcon && topIconType === 'icon',
+                _c['mt40'] = topIcon && topIconType === 'icon',
+                _c[styles.bannerWrapper] = topIcon && topIconType === 'banner',
+                _c)),
+            label: classNames((_d = {},
+                _d[styles.floatingLabel] = topIcon && topIconType !== 'image',
+                _d)),
+            title: classNames({ 'mt16': topIcon && topIconType === 'banner' }, 'd-flex ai-center jc-center my8'),
+            description: 'ta-center',
+            contentWrapper: styles.contentWrapper,
+        }, variant: 'default', onClick: disabled ? undefined : onClick, density: 'compact' })));
+};
+export { InfoCard };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/cards/infoCard/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport ArrowRight from '../../icon/icons/ArrowRight';\nimport { Card, CardProps } from '../card';\n\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface InfoCardProps extends CardProps {\n topIcon: ReactNode;\n showIcon?: boolean;\n topIconType?: 'image' \| 'icon' \| 'banner';\n disabled?: boolean;\n};\n\nexport const InfoCard = ({\n className,\n showIcon = true,\n title,\n children,\n topIcon,\n topIconType,\n disabled = false,\n onClick,\n ...cardProps\n}: InfoCardProps) => (\n <Card\n {...cardProps}\n label={topIcon && (\n <>\n {topIconType === 'icon' ? (\n <div\n className={classNames(\n 'd-flex ai-center jc-center bg-orange-200 br-circle p16',\n styles.topIconWrapper\n )}\n >\n {topIcon}\n </div>\n ) : (\n <div className={classNames(\n 'd-flex ai-center jc-center',\n { [styles.topIconBanner]: topIconType === 'banner' }\n )}>\n {topIcon}\n </div>\n )}\n </>\n )}\n title={title && (\n <>\n {title}\n\n {showIcon && <ArrowRight size={20} />}\n </>\n )}\n titleVariant='medium'\n description={children}\n descriptionVariant='small'\n actionIcon={null}\n showActionIcon={false}\n classNames={{\n buttonWrapper: styles.buttonWrapper,\n wrapper: classNames({\n [styles.wrapper]: true,\n [styles.disabled]: disabled,\n 'pt40': topIcon && topIconType === 'icon',\n 'mt40': topIcon && topIconType === 'icon',\n [styles.bannerWrapper]: topIcon && topIconType === 'banner',\n }),\n label: classNames({\n [styles.floatingLabel]: topIcon && topIconType !== 'image',\n }),\n title: classNames(\n {'mt16': topIcon && topIconType === 'banner'},\n 'd-flex ai-center jc-center my8'\n ),\n description: 'ta-center',\n contentWrapper: styles.contentWrapper,\n }}\n variant='default'\n onClick={disabled ? undefined : onClick}\n density='compact'\n />\n);\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;IAca,QAAQ,GAAG,UAAC,EAUT;;gBATL,MACT,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACJ,SAAS,cATW,+FAUxB;IAAoB,QACnBA,IAAC,IAAI,eACC,SAAS,IACb,KAAK,EAAE,OAAO,KACZA,0BACG,WAAW,KAAK,MAAM,IACrBA,aACE,SAAS,EAAE,UAAU,CACnB,wDAAwD,EACxD,MAAM,CAAC,cAAc,CACtB,YAEA,OAAO,GACJ,KAENA,aAAK,SAAS,EAAE,UAAU,CACxB,4BAA4B,YAC1B,GAAC,MAAM,CAAC,aAAa,IAAG,WAAW,KAAK,QAAQ,MACnD,YACE,OAAO,GACJ,CACP,GACA,CACJ,EACD,KAAK,EAAE,KAAK,KACVC,4BACG,KAAK,EAEL,QAAQ,IAAID,IAAC,UAAU,IAAC,IAAI,EAAE,EAAE,GAAI,IACpC,CACJ,EACD,YAAY,EAAC,QAAQ,EACrB,WAAW,EAAE,QAAQ,EACrB,kBAAkB,EAAC,OAAO,EAC1B,UAAU,EAAE,IAAI,EAChB,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE;YACV,aAAa,EAAE,MAAM,CAAC,aAAa;YACnC,OAAO,EAAE,UAAU;gBACjB,GAAC,MAAM,CAAC,OAAO,IAAG,IAAI;gBACtB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;gBAC3B,UAAM,GAAE,OAAO,IAAI,WAAW,KAAK,MAAM;gBACzC,UAAM,GAAE,OAAO,IAAI,WAAW,KAAK,MAAM;gBACzC,GAAC,MAAM,CAAC,aAAa,IAAG,OAAO,IAAI,WAAW,KAAK,QAAQ;oBAC3D;YACF,KAAK,EAAE,UAAU;gBACf,GAAC,MAAM,CAAC,aAAa,IAAG,OAAO,IAAI,WAAW,KAAK,OAAO;oBAC1D;YACF,KAAK,EAAE,UAAU,CACf,EAAC,MAAM,EAAE,OAAO,IAAI,WAAW,KAAK,QAAQ,EAAC,EAC7C,gCAAgC,CACjC;YACD,WAAW,EAAE,WAAW;YACxB,cAAc,EAAE,MAAM,CAAC,cAAc;SACtC,EACD,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,EACvC,OAAO,EAAC,SAAS,IACjB,EACH;;;;;"}