npm - @popsure/dirty-swan - Versions diffs - 0.63.0 → 0.63.2 - Mend

@popsure/dirty-swan 0.63.0 → 0.63.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 (1394) hide show

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

@@ -1,47 +1,52 @@
-import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
+import { c as __rest, b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as classNames } from '../../../index-6ea95111.js';
-import ChevronRightIcon from '../../icon/icons/ChevronRight.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../index-DLQEsiym.js';
 import 'react';
+import ChevronRightIcon from '../../icon/icons/ChevronRight.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-var css_248z = ".style-module_button__P-UIa {\n  background-color: transparent;\n  color: #26262e;\n  outline: 1px solid transparent;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  border-radius: 8px;\n}\n.style-module_button__P-UIa:hover {\n  outline: 1px solid #8e8cee;\n  color: #8e8cee;\n}\n.style-module_button__P-UIa:focus-visible {\n  outline: 2px solid #8e8cee;\n  color: #8e8cee;\n}\n\n.style-module_wrapper__35C6V {\n  background-color: #fff;\n}\n\n.style-module_icon__15X1c {\n  margin-right: 12px;\n  color: #8e8cee;\n}\n.style-module_iconbalanced__Zb-hZ {\n  margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n  margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n  margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n  margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n  margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n  color: #696970;\n}";
-var 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 #f2f2f8;\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--defaultNoShadow__2x-zI {\n  border: 1px solid #f2f2f8;\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:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--default__NYcwG {\n  border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--transparent__1M1sg {\n  background-color: #f9f9fd;\n  border-color: transparent;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--outline__3fBDi {\n  background-color: #fff;\n  border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--secondary__1l7bB {\n  background-color: #EEEEFE;\n  border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--primary__Sulin {\n  background-color: #FEECD3;\n  border-color: #F2B873;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper__35C6V {\n  border-color: #26262e;\n  box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--default__NYcwG {\n  border-color: #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--outline__3fBDi {\n  border-color: #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--transparent__1M1sg {\n  background-color: #f2f2f8;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper__35C6V {\n  border-color: #b8b8c0;\n  box-shadow: inset 0 0 0 1px #b8b8c0;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--outline__3fBDi {\n  border-color: #26262e;\n  box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--transparent__1M1sg {\n  background-color: #f2f2f8;\n  border-color: transparent;\n  box-shadow: none;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--primary__Sulin {\n  border-color: #F2B873;\n  box-shadow: inset 0 0 0 1px #F2B873;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--secondary__1l7bB {\n  border-color: #8883D8;\n  box-shadow: inset 0 0 0 1px #8883D8;\n}\n.style-module_buttonDisabled__3wmX3 {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n@media (pointer: coarse) {\n  .style-module_button__P-UIa:hover .style-module_wrapper__35C6V, .style-module_button__P-UIa:active .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_button__P-UIa:hover .style-module_wrapper--default__NYcwG, .style-module_button__P-UIa:active .style-module_wrapper--default__NYcwG {\n    background-color: #fff;\n  }\n  .style-module_button__P-UIa:hover .style-module_wrapper--defaultNoShadow__2x-zI, .style-module_button__P-UIa:active .style-module_wrapper--defaultNoShadow__2x-zI {\n    border: 1px solid #f2f2f8;\n  }\n  .style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg, .style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n    background-color: transparent;\n  }\n  .style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi, .style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n    background-color: #fff;\n    border: 1px solid #d2d2d9;\n  }\n  .style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB, .style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n    background-color: #EEEEFE;\n  }\n  .style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin, .style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n    background-color: #FEECD3;\n  }\n}\n\n.style-module_smallPadding__19rsl {\n  padding: 20px !important;\n}\n\n.style-module_icon__15X1c {\n  margin-right: 12px;\n  color: #26262e;\n}\n.style-module_iconDensity--small__3JnzO {\n  margin-right: 14px;\n}\n.style-module_iconDensity--medium__2TmAl {\n  margin-right: 16px;\n}\n.style-module_iconDensity--large__1YzHv {\n  margin-right: 20px;\n}\n\n.style-module_actionIcon__3pnwR {\n  color: #26262e;\n  margin-left: 12px;\n}\n.style-module_actionIconDensity--small__37jvs {\n  margin-right: 14px;\n}\n.style-module_actionIconDensity--medium__3SnW2 {\n  margin-right: 16px;\n}\n.style-module_actionIconDensity--large__mZD03 {\n  margin-right: 20px;\n}\n\n.style-module_description__ksrnP {\n  color: #696971;\n}\n.style-module_description--primary__2h0cB {\n  color: #3f3f47;\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--defaultNoShadow":"style-module_wrapper--defaultNoShadow__2x-zI","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","buttonDisabled":"style-module_buttonDisabled__3wmX3","smallPadding":"style-module_smallPadding__19rsl","icon":"style-module_icon__15X1c","iconDensity--small":"style-module_iconDensity--small__3JnzO","iconDensity--medium":"style-module_iconDensity--medium__2TmAl","iconDensity--large":"style-module_iconDensity--large__1YzHv","actionIcon":"style-module_actionIcon__3pnwR","actionIconDensity--small":"style-module_actionIconDensity--small__37jvs","actionIconDensity--medium":"style-module_actionIconDensity--medium__3SnW2","actionIconDensity--large":"style-module_actionIconDensity--large__mZD03","description":"style-module_description__ksrnP","description--primary":"style-module_description--primary__2h0cB"};
 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 _b, _c;
+    var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _d = _a.density, density = _d === void 0 ? 'medium' : _d, description = _a.description, _e = _a.descriptionVariant, descriptionVariant = _e === void 0 ? 'large' : _e, _f = _a.dropShadow, dropShadow = _f === void 0 ? true : _f, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _g = _a.titleVariant, titleVariant = _g === void 0 ? 'large' : _g, showActionIcon = _a.showActionIcon, _h = _a.verticalAlignment, verticalAlignment = _h === void 0 ? 'center' : _h, _j = _a.variant, variant = _j === void 0 ? 'default' : _j, disabled = _a.disabled, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment", "variant", "disabled"]);
     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;
     var Tag = as || cardDefaultTag;
     return (jsx(Tag, __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.buttonWrapper, 'd-flex w100 ai-stretch', (_b = {
-                'c-pointer': propsWithActionIcon
+                'c-pointer': propsWithActionIcon && !disabled
             },
             _b[styles.button] = propsWithActionIcon,
+            _b[styles.buttonDisabled] = propsWithActionIcon && disabled,
             _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 }, {
-                compact: 'p16',
-                balanced: 'p24',
-                spacious: 'p32',
+    }, { disabled: disabled }, rest, { children: jsxs("div", { className: classNames('d-flex fd-column jc-center w100 ta-left br8', { 'bs-sm': dropShadow && variant === 'default' }, {
+                xsmall: 'p16',
+                small: styles.smallPadding,
+                medium: 'p24',
+                large: 'p32',
             }[density], {
                 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)], (_c = {},
+                _c[styles === null || styles === void 0 ? void 0 : styles["wrapper--defaultNoShadow"]] = !dropShadow && variant === 'default',
+                _c), 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["iconDensity--".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-grey-900 w100", children: [label && (jsx("h4", { className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label), children: label })), title && (jsx("h3", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
+                            }[verticalAlignment]), children: icon })), jsxs("div", { className: "d-flex jc-between w100", children: [jsxs("div", { className: 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',
-                                            }[titleVariant]), children: title })), description && (jsx("div", { className: classNames(styles.description, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p'), children: description }))] }), (showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (jsx("div", { className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon".concat(density)], 'd-flex ai-center'), children: actionIcon || jsx(ChevronRightIcon, { size: 24 }) }))] })] }), children && jsx("div", { className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children, children: children })] }) })));
+                                            }[titleVariant]), children: title })), description && (jsx("div", { className: classNames(styles.description, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p', styles === null || styles === void 0 ? void 0 : styles["description--".concat(variant)]), children: description }))] }), (showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (jsx("div", { className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIconDensity--".concat(density)], 'd-flex ai-center'), children: actionIcon || jsx(ChevronRightIcon, { size: 24 }) }))] })] }), children && jsx("div", { className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children, children: children })] }) })));
 };
 export { Card };

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-grey-900 w100\">\n {label && (\n <h4 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h4>\n )}\n\n {title && (\n <h3\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant as TitleVariantType]\n )}\n >\n {title}\n </h3>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n styles.description,\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p',\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {(showActionIcon \|\| (propsWithActionIcon && !hideActionIcon)) && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon \|\| <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </div>\n </Tag>\n );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
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 = 'xsmall' \| 'small' \| 'medium' \| 'large';\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 disabled?: boolean;\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 = 'medium',\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 disabled,\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 && !disabled,\n [styles.button]: propsWithActionIcon,\n [styles.buttonDisabled]: propsWithActionIcon && disabled,\n },\n )}\n {...onClick && { \n onClick, \n type: \"button\"\n }}\n disabled={disabled}\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 xsmall: 'p16',\n small: styles.smallPadding,\n medium: 'p24',\n large: '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 {\n [styles?.[`wrapper--defaultNoShadow`]]: !dropShadow && variant === 'default',\n },\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[`iconDensity--${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 styles?.[`description--${variant}`]\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[`actionIconDensity--${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

@@ -1,19 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Card } from './index.js';
-import { i as illustrations } from '../../../index-29e6f39e.js';
+import { a as illustrations } from '../../../index-C4hs4X-e.js';
 import { Button } from '../../button/index.js';
 import { Badge } from '../../badge/index.js';
+import 'react';
+import '../../../index-DLQEsiym.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';
-import '../../../tslib.es6-a39f91fc.js';
-import '../../../index-6ea95111.js';
+import '../../../tslib.es6-CVlKGIvp.js';
 import '../../icon/icons/ChevronRight.js';
-import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 var story = {
     title: 'JSX/Cards/Card',
@@ -21,25 +23,25 @@ var story = {
     argTypes: {
         as: {
             control: 'text',
-            description: 'Allow wrapper element type to be custom defined'
+            description: 'Allow wrapper element type to be custom defined',
         },
         density: {
-            description: 'Spacing around the card'
+            description: 'Spacing around the card',
         },
         label: {
-            description: 'Content to be rendered as label'
+            description: 'Content to be rendered as label',
         },
         title: {
-            description: 'Content to be rendered as title'
+            description: 'Content to be rendered as title',
         },
         titleVariant: {
-            description: 'Variant that allows changing title sizing styles.'
+            description: 'Variant that allows changing title sizing styles.',
         },
         description: {
-            description: 'Content to be rendered as description'
+            description: 'Content to be rendered as description',
         },
         descriptionVariant: {
-            description: 'Variant that allows changing description sizing styles.'
+            description: 'Variant that allows changing description sizing styles.',
         },
         icon: {
             description: 'ReactNode to be rendered on the left side of the card',
@@ -51,7 +53,7 @@ var story = {
         onClick: {
             action: true,
             table: {
-                category: "Callbacks",
+                category: 'Callbacks',
             },
             description: 'On click action to be triggered on card click.',
         },
@@ -71,7 +73,7 @@ var story = {
         },
     },
     args: {
-        density: 'balanced',
+        density: 'medium',
         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!',
         descriptionVariant: 'large',
         label: 'Label',
@@ -85,37 +87,51 @@ var story = {
             title: '',
             description: '',
             children: '',
-            icon: ''
+            icon: '',
         },
         dropShadow: true,
         verticalAlignment: 'center',
-    }
+    },
 };
-var CardStory = function (_a) {
-    var as = _a.as, actionIcon = _a.actionIcon, showActionIcon = _a.showActionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant, verticalAlignment = _a.verticalAlignment;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { as: as, classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon, verticalAlignment: verticalAlignment, children: children }) }));
+var CardStory = {
+    render: 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 }) }));
+    },
+    name: 'Card',
 };
-CardStory.storyName = "Card";
-var CardAsOtherComponents = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }), jsx("h3", { className: 'p-h3', children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] })); };
-var CardDensities = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx(Card, { title: 'Card density: Compact', density: 'compact' }), jsx(Card, { title: 'Card density: Balanced', density: 'balanced' }), jsx(Card, { title: 'Card density: Spacious', density: 'spacious' })] })); };
-var CardsWithIcons = function (_a) {
-    var title = _a.title;
-    return (jsxs("div", { className: 'd-flex gap16 p24 bg-grey-200', children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title }), jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }), title: title })] }));
+var CardVariants = {
+    render: function (_a) {
+        var description = _a.description, onClick = _a.onClick, title = _a.title;
+        return (jsxs("div", { className: "d-flex fd-column gap24 p24", 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", dropShadow: false })] }), 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" })] })] }));
+    },
 };
-var CardWithOnClickAction = function (_a) {
-    var children = _a.children, title = _a.title;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title, titleVariant: 'medium', onClick: function () { }, children: children }) }));
+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: "xsmall" }), jsx("h3", { className: "p-h3", children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: "xsmall" }), 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 CardDisabledStates = function () { return (jsxs("div", { className: "d-flex fd-column gap16 p24 bg-neutral-100", children: [jsx(Card, { as: "button", onClick: function () { }, title: "Card with an a tag", density: "xsmall" }), jsx(Card, { as: "button", onClick: function () { }, title: "Card with an a tag", density: "xsmall", disabled: true })] })); };
+var CardDensities = function () { return (jsxs("div", { className: "d-flex fd-column gap16 p24 bg-neutral-100", children: [jsx(Card, { title: 'Card density: xsmall', density: "xsmall" }), jsx(Card, { title: 'Card density: small', density: "small" }), jsx(Card, { title: 'Card density: medium', density: "medium" }), jsx(Card, { title: 'Card density: large', density: "large" })] })); };
+var CardsWithIcons = {
+    render: function (_a) {
+        var title = _a.title;
+        return (jsxs("div", { className: "d-flex gap16 p24 bg-neutral-100", children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title }), jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }), title: title })] }));
+    },
+};
+var CardWithOnClickAction = {
+    render: function (_a) {
+        var children = _a.children, title = _a.title;
+        return (jsx("div", { className: "d-flex p24 bg-neutral-100", children: jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }), title: title, titleVariant: 'medium', onClick: function () { }, children: children }) }));
+    },
 };
-var CardOverridesStyles = function (_a) {
-    var children = _a.children, label = _a.label, title = _a.title;
-    return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsx(Card, { label: label, title: title, titleVariant: 'medium', icon: jsx(PlusCircleIcon, { color: "grey-100", size: 32 }), classNames: {
-                wrapper: 'bg-grey-700',
-                label: 'tc-white',
-                title: 'tc-white'
-            }, children: children }) }));
+var CardOverridesStyles = {
+    render: function (_a) {
+        var children = _a.children, label = _a.label, title = _a.title;
+        return (jsx("div", { className: "d-flex p24 bg-neutral-100", children: jsx(Card, { label: label, title: title, titleVariant: 'medium', icon: jsx(PlusCircleIcon, { color: "neutral-50", size: 32 }), classNames: {
+                    wrapper: 'bg-neutral-800',
+                    label: 'tc-white',
+                    title: 'tc-white',
+                }, children: children }) }));
+    },
 };
-var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { onClick: function () { }, variant: 'filledGray', children: "Full coverage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] })] }) })); };
+var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: "d-flex p24 bg-neutral-100", children: jsxs(Card, { label: jsx(Badge, { size: "small", variant: "success", children: "Active" }), title: jsxs("div", { className: "d-flex jc-between ai-center w100", children: ["Coverage overview", jsx(Button, { as: "a", href: "#", onClick: console.log, children: "Full covxerage details" })] }), children: [jsxs("div", { className: "d-flex gap16 mt16", children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(CheckIcon, { color: 'purple-600' }), density: "xsmall" }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: "xsmall" })] }), 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: "xsmall" }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: "xsmall" })] })] }) })); };
-export default story;
-export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
+export { CardAsOtherComponents, CardDensities, CardDisabledStates, CardOverridesStyles, CardStory, CardVariants, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout, story as default };
 //# 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-grey-200'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='compact'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='compact'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n classNames={{ \n wrapper: 'bg-grey-700',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n onClick={() => {}}\n variant='filledGray'\n >\n Full coverage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}
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 {\n BasketballSportsIcon,\n CheckIcon,\n InfoIcon,\n MehIcon,\n PlusCircleIcon,\n XIcon,\n} 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:\n '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:\n '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:\n '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: 'medium',\n description:\n '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 render: ({\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\n name: 'Card',\n};\n\nexport const CardVariants = {\n render: ({ description, onClick, title }: CardProps) => (\n <div className=\"d-flex fd-column gap24 p24\">\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 dropShadow={false}\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};\n\nexport const CardAsOtherComponents = () => (\n <div className=\"d-flex fd-column gap16 p24 bg-neutral-100\">\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=\"xsmall\"\n />\n\n <h3 className=\"p-h3\">As a nav:</h3>\n <Card as=\"nav\" title=\"Card with a nav tag\" density=\"xsmall\" />\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 CardDisabledStates = () => (\n <div className=\"d-flex fd-column gap16 p24 bg-neutral-100\">\n <Card\n as=\"button\"\n onClick={() => {}}\n title=\"Card with an a tag\"\n density=\"xsmall\"\n />\n <Card\n as=\"button\"\n onClick={() => {}}\n title=\"Card with an a tag\"\n density=\"xsmall\"\n disabled\n />\n </div>\n);\n\nexport const CardDensities = () => (\n <div className=\"d-flex fd-column gap16 p24 bg-neutral-100\">\n <Card title={'Card density: xsmall'} density=\"xsmall\" />\n <Card title={'Card density: small'} density=\"small\" />\n <Card title={'Card density: medium'} density=\"medium\" />\n <Card title={'Card density: large'} density=\"large\" />\n </div>\n);\n\nexport const CardsWithIcons = {\n render: ({ title }: CardProps) => (\n <div className=\"d-flex gap16 p24 bg-neutral-100\">\n <Card\n icon={<img alt=\"\" src={illustrations.aids} width={24} />}\n title={title}\n />\n <Card icon={<MehIcon size={24} noMargin />} title={title} />\n </div>\n ),\n};\n\nexport const CardWithOnClickAction = {\n render: ({ children, title }: CardProps) => (\n <div className=\"d-flex p24 bg-neutral-100\">\n <Card\n icon={<img alt=\"\" src={illustrations.aids} width={24} />}\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n ),\n};\n\nexport const CardOverridesStyles = {\n render: ({ children, label, title }: 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};\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 <Button as=\"a\" href=\"#\" onClick={console.log}>\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=\"xsmall\"\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density=\"xsmall\"\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=\"xsmall\"\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density=\"xsmall\"\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

@@ -1,14 +1,15 @@
-import { a as __assign } from '../../../tslib.es6-a39f91fc.js';
+import { b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { c as classNames } from '../../../index-DLQEsiym.js';
 import ChevronRightIcon from '../../icon/icons/ChevronRight.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
 import { Card } from '../card/index.js';
-import { c as classNames } from '../../../index-6ea95111.js';
-import 'react';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 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 +17,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-primary-500 p-p',
-        }, density: 'compact', label: title, description: typeof description === 'string' ? description : null, actionIcon: jsx(ChevronRightIcon, { size: 20, color: 'purple-500', className: styles.chevronRight }), showActionIcon: true }, href ? { href: href } : {}, { children: typeof description !== 'string' ? description : null })));
+            label: 'tc-neutral-900',
+            description: 'tc-neutral-700 p-p',
+            contentWrapper: styles.contentWrapper
+        }, density: 'xsmall', 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-~~primary~~-~~500~~ p-p',\n }}\n density='~~compact~~'\n label={title}\n description={typeof description === 'string' ? description : null}\n actionIcon={\n <ChevronRightIcon\n size={20}\n color={'~~purple~~-~~500~~'}\n className={styles.chevronRight}\n />\n }\n showActionIcon\n {...href ? { href } : {}}\n >\n {typeof description !== 'string' ? description : null}\n </Card>\n);\n"],"names":["_jsx"],"mappings":"~~;;;;;;;;;;;;;IAgBa~~,UAAU,GAAG,UAAC,EAMT;;~~QALhB~~,KAAK,WAAA,EACL,WAAW,~~iBAAA~~,EACX,gBAAgB,EAAhB,QAAQ,~~mBAAG~~,KAAK,KAAA,EAChB,SAAS,~~eAAA~~,EACT,IAAI,~~UAAA~~;~~IACiB~~,QACrBA,~~IAAC~~,IAAI,~~aACD~~,EAAE,EAAE,IAAI,GAAG,GAAG,GAAG,QAAQ,EACzB,UAAU,EAAE;~~YACV~~,aAAa,EAAE,UAAU,CACvB,wBAAwB,EACxB,SAAS,~~YACP~~,~~GAAC~~,MAAM,CAAC,iBAAiB,~~IAAG~~,QAAQ,~~MACvC~~;~~YACD~~,WAAW,EAAE,oBAAoB;~~SAClC~~,EACD,OAAO,EAAC,~~SAAS~~,~~EACjB~~,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,EACjE,UAAU,EACRA,~~IAAC~~,gBAAgB,IACf,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,~~YAAY~~,~~EACnB~~,SAAS,EAAE,MAAM,CAAC,YAAY,GAC9B,EAEJ,cAAc,~~UACV~~,IAAI,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,~~cAEvB~~,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,IAClD;~~AAzBc~~;;;;"}
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-900',\n description: 'tc-neutral-700 p-p',\n contentWrapper: styles.contentWrapper\n }}\n density='xsmall'\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":";;;;;;;;;;;;;;AAgBO,IAAM,UAAU,GAAG,UAAC,EAMT,EAAA;;AALhB,IAAA,IAAA,KAAK,WAAA,EACL,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,gBAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,KAAA,EAChB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,IAAI,GAAA,EAAA,CAAA,IAAA;AACiB,IAAA,QACrBA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACD,EAAE,EAAE,IAAI,GAAG,GAAG,GAAG,QAAQ,EACzB,UAAU,EAAE;AACV,YAAA,aAAa,EAAE,UAAU,CACvB,wBAAwB,EACxB,SAAS,GAAA,EAAA,GAAA,EAAA,EACP,EAAA,CAAC,MAAM,CAAC,iBAAiB,CAAA,GAAG,QAAQ,EAAA,EAAA,EACvC;AACD,YAAA,KAAK,EAAE,gBAAgB;AACvB,YAAA,WAAW,EAAE,oBAAoB;YACjC,cAAc,EAAE,MAAM,CAAC;AACxB,SAAA,EACD,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,EACjE,UAAU,EACRA,GAAA,CAAC,gBAAgB,IACf,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,MAAM,CAAC,YAAY,GAC9B,EAEJ,cAAc,EAAA,IAAA,EAAA,EACV,IAAI,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,EAAA,EAAA,QAAA,EAEvB,OAAO,WAAW,KAAK,QAAQ,GAAG,WAAW,GAAG,IAAI,IAClD;AA3Bc;;;;"}

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

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { CardButton } from './index.js';
-import '../../../tslib.es6-a39f91fc.js';
-import '../../icon/icons/ChevronRight.js';
+import '../../../tslib.es6-CVlKGIvp.js';
 import 'react';
+import '../../../index-DLQEsiym.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../icon/icons/ChevronRight.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
 import '../card/index.js';
 var story = {
@@ -36,19 +37,20 @@ 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/',
-    }
+    },
 };
-var CardButtonStory = function (_a) {
-    var title = _a.title, description = _a.description, disabled = _a.disabled, className = _a.className, href = _a.href, onClick = _a.onClick;
-    return (jsx(CardButton, { title: title, description: description, disabled: disabled, className: className, href: href, onClick: onClick }));
+var CardButtonStory = {
+    render: function (_a) {
+        var title = _a.title, description = _a.description, disabled = _a.disabled, className = _a.className, href = _a.href, onClick = _a.onClick;
+        return (jsx(CardButton, { title: title, description: description, disabled: disabled, className: className, href: href, onClick: onClick }));
+    },
+    name: 'CardButton',
 };
-CardButtonStory.storyName = "CardButton";
-export default story;
-export { CardButtonStory };
+export { CardButtonStory, story as default };
 //# sourceMappingURL=index.stories.js.map

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 render: ({\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\n name: 'CardButton',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAEA,IAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,sBAAsB;AAC7B,IAAA,SAAS,EAAE,UAAU;AACrB,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,WAAW,EAAE,uCAAuC;AACrD,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,WAAW,EAAE,gDAAgD;AAC9D,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,8BAA8B;AAC5C,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,WAAW,EAAE,wCAAwC;AACtD,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,WAAW,EAAE,2CAA2C;AACxD,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,WAAW;AACtB,aAAA;AACF,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,WAAW,EAAE,qCAAqC;AACnD,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,WAAW,EAAE,0BAA0B;AACvC,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,IAAI,EAAE,gCAAgC;AACvC,KAAA;;AAGI,IAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,UAAC,EAOS,EAAA;AANhB,QAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,eAAA,EACT,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,OAAO,GAAA,EAAA,CAAA,OAAA;AACc,QAAA,QACrBA,GAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB;IARmB,CAStB;AAED,IAAA,IAAI,EAAE,YAAY;;;;;"}

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

@@ -1,28 +1,15 @@
-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-CVlKGIvp.js';
+import 'react/jsx-runtime';
+import '../icon/icons/ArrowRight.js';
 import 'react';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../index-6ea95111.js';
+import '../../index-DLQEsiym.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+import '../../style-inject.es-tgCJW-Cu.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-grey-600", children: children })] })] })));
-};
+import '../icon/icons/ChevronRight.js';
 var headingForCardSize = function (cardSize) {
     switch (cardSize) {
@@ -52,5 +39,5 @@ var associatedClassForCardState = function (state, dropshadow) {
     return baseClass;
 };
-export { InfoCard, associatedClassForCardState, headingForCardSize };
+export { associatedClassForCardState, headingForCardSize };
 //# sourceMappingURL=index.js.map