@popsure/dirty-swan 0.41.18 → 0.42.0

package/dist/cjs/lib/components/card/index.d.ts

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
-export interface CardProps {
+import { ElementType, ReactNode } from 'react';
+declare const CardDefault: "section";
+declare type CardDefaultAsType = typeof CardDefault;
+declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
+    as?: E;
     children?: ReactNode;
     classNames?: {
         buttonWrapper?: string;
@@ -22,6 +25,7 @@ export interface CardProps {
     onClick?: () => void;
     actionIcon?: ReactNode;
     showActionIcon?: boolean;
-}
-declare const Card: (props: CardProps) => JSX.Element;
+};
+export declare type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>;
+declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
 export { Card };

package/dist/cjs/lib/components/card/index.stories.d.ts

@@ -1,8 +1,15 @@
+/// <reference types="react" />
 import { CardProps } from '.';
 declare const story: {
     title: string;
-    component: (props: CardProps) => JSX.Element;
+    component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
     argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         density: {
             description: string;
         };
@@ -67,12 +74,13 @@ declare const story: {
     };
 };
 export declare const CardStory: {
-    ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
+    ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
     storyName: string;
 };
+export declare const CardAsOtherComponents: () => JSX.Element;
 export declare const CardDensities: () => JSX.Element;
-export declare const CardsWithIcons: ({ children, icon, title, }: CardProps) => JSX.Element;
-export declare const CardWithOnClickAction: ({ children, icon, title, }: CardProps) => JSX.Element;
+export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
+export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
 export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
-export declare const CardsWithinCardsAndComplexLayout: ({ children, label, title, }: CardProps) => JSX.Element;
+export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
 export default story;

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as classNames } from '../../index-6ea95111.js';
 import ChevronRightIcon from '../icon/icons/ChevronRight.js';
@@ -6,35 +6,39 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import 'react';
 import '../icon/IconWrapper/IconWrapper.js';
 
-var css_248z = ".style-module_button__KWY7b {\n  background-color: transparent;\n  color: #26262e;\n  outline: 1px solid transparent;\n  transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n  outline: 1px solid #8e8cee;\n  color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n  outline: 2px solid #8e8cee;\n  color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n  margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n  margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n  margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n  margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n  margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n  margin-left: 24px;\n}";
+var css_248z = ".style-module_button__KWY7b {\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}\n.style-module_button__KWY7b:hover {\n  outline: 1px solid #8e8cee;\n  color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n  outline: 2px solid #8e8cee;\n  color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n  margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n  margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n  margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n  margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n  margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n  margin-left: 24px;\n}";
 var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N6B2P","iconbalanced":"style-module_iconbalanced__3JdKC","iconspacious":"style-module_iconspacious__36ovv","actionIcon":"style-module_actionIcon__2klnb","actionIconbalanced":"style-module_actionIconbalanced__1duYl","actionIconspacious":"style-module_actionIconspacious__1sjsd"};
 styleInject(css_248z);
 
-var CardContent = function (_a) {
-    var children = _a.children, classNames$1 = _a.classNames, _b = _a.density, density = _b === void 0 ? 'balanced' : _b, description = _a.description, _c = _a.descriptionVariant, descriptionVariant = _c === void 0 ? 'large' : _c, _d = _a.dropShadow, dropShadow = _d === void 0 ? true : _d, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _e = _a.titleVariant, titleVariant = _e === void 0 ? 'large' : _e, showActionIcon = _a.showActionIcon;
+var CardDefault = '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, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon"]);
     var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
-    return (jsxs("section", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
-            compact: 'p16',
-            balanced: 'p24',
-            spacious: 'p32',
-        }[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
-                    jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
-                                    title && (jsx("h2", __assign({ 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 }), void 0)),
-                                    description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
-                            (showActionIcon || (onClick && !hideActionIcon)) && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
-            children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0));
-};
-var Card = function (props) {
-    var _a;
-    var onClick = props.onClick;
-    if (onClick) {
-        return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8 ai-stretch', styles.button, (_a = props.classNames) === null || _a === void 0 ? void 0 : _a.buttonWrapper), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
-    }
-    return jsx(CardContent, __assign({}, props), void 0);
+    var propsWithActionIcon = onClick || (rest === null || rest === void 0 ? void 0 : rest.href) || rest.to;
+    var cardDefaultTag = onClick ? 'button' : CardDefault;
+    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 br8 ai-stretch', (_b = {
+                'c-pointer': propsWithActionIcon
+            },
+            _b[styles.button] = propsWithActionIcon,
+            _b)) }, onClick && {
+        onClick: onClick,
+        type: "button"
+    }, rest, { children: jsxs("div", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
+                compact: 'p16',
+                balanced: 'p24',
+                spacious: 'p32',
+            }[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
+                        jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
+                                        title && (jsx("h2", __assign({ 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 }), void 0)),
+                                        description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
+                                (showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
+                children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0) }), void 0));
 };
 
 export { Card };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\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?: 'balanced' | 'compact' | 'spacious';\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: 'small' | 'medium' | 'large';\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n}\n\nconst CardContent = ({\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}: CardProps) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n\n  return (\n    <section\n      className={classNamesUtil(\n        'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n        { 'bs-sm': dropShadow },\n        {\n          compact: 'p16',\n          balanced: 'p24',\n          spacious: 'p32',\n        }[density],\n        classNames?.wrapper\n      )}\n    >\n      <div className=\"d-flex w100\">\n        {icon && (\n          <div\n            className={classNamesUtil(\n              `d-flex ai-center tc-primary-500`,\n              styles.icon,\n              styles[`icon${density}`],\n              classNames?.icon\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              <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n                {label}\n              </h3>\n            )}\n\n            {title && (\n              <h2\n                className={classNamesUtil(\n                  classNames?.title,\n                  {\n                    large: 'p-h3',\n                    medium: 'p-h4',\n                    small: 'p-p',\n                  }[titleVariant]\n                )}\n              >\n                {title}\n              </h2>\n            )}\n\n            {description && (\n              <div\n                className={classNamesUtil(\n                  'tc-grey-600',\n                  classNames?.description,\n                  descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n                )}\n              >\n                {description}\n              </div>\n            )}\n          </div>\n\n          {(showActionIcon || (onClick && !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    </section>\n  );\n};\n\nconst Card = (props: CardProps) => {\n  const { onClick } = props;\n\n  if (onClick) {\n    return (\n      <button\n        className={classNamesUtil(\n          'c-pointer d-flex w100 br8 ai-stretch',\n          styles.button,\n          props.classNames?.buttonWrapper\n        )}\n        onClick={onClick}\n        type=\"button\"\n      >\n        <CardContent {...props} />\n      </button>\n    );\n  }\n\n  return <CardContent {...props} />;\n};\n\nexport { Card };\n"],"names":["classNames","_jsxs","classNamesUtil","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nconst CardDefault = 'section' as const\ntype CardDefaultAsType = typeof CardDefault;\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?: 'balanced' | 'compact' | 'spacious';\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: 'small' | 'medium' | 'large';\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n}\n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n  Omit<React.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  ...rest\n}: CardProps<E>) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n  const propsWithActionIcon = onClick || rest?.href || rest.to; \n  const cardDefaultTag = onClick ? 'button' : CardDefault;\n  const Tag = as || cardDefaultTag;\n  \n  return (\n    <Tag\n      className={classNamesUtil(\n        classNames?.buttonWrapper,\n        ' d-flex w100 br8 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 br8 bg-white w100 ta-left',\n          { 'bs-sm': dropShadow },\n          {\n            compact: 'p16',\n            balanced: 'p24',\n            spacious: 'p32',\n          }[density],\n          classNames?.wrapper\n        )}\n      >\n        <div className=\"d-flex w100\">\n          {icon && (\n            <div\n              className={classNamesUtil(\n                `d-flex ai-center tc-primary-500`,\n                styles.icon,\n                styles[`icon${density}`],\n                classNames?.icon\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                <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n                  {label}\n                </h3>\n              )}\n\n              {title && (\n                <h2\n                  className={classNamesUtil(\n                    classNames?.title,\n                    {\n                      large: 'p-h3',\n                      medium: 'p-h4',\n                      small: 'p-p',\n                    }[titleVariant]\n                  )}\n                >\n                  {title}\n                </h2>\n              )}\n\n              {description && (\n                <div\n                  className={classNamesUtil(\n                    'tc-grey-600',\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/card/index.stories.js

@@ -5,6 +5,7 @@ import { i as illustrations } from '../../index-1693701e.js';
 import { Button } from '../button/index.js';
 import { Badge } from '../badge/index.js';
 import CheckIcon from '../icon/icons/Check.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';
@@ -18,6 +19,10 @@ var story = {
     title: 'JSX/Card',
     component: Card,
     argTypes: {
+        as: {
+            control: { type: 'text' },
+            description: 'Allow wrapper element type to be custom defined'
+        },
         density: {
             description: 'Spacing around the card'
         },
@@ -78,20 +83,25 @@ var story = {
     }
 };
 var CardStory = function (_a) {
-    var 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;
-    return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon }, { children: children }), void 0) }), void 0));
+    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;
+    return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ 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 }, { children: children }), void 0) }), void 0));
 };
 CardStory.storyName = "Card";
+var CardAsOtherComponents = function () { return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx("h3", __assign({ className: 'p-h3' }, { children: "As an anchor:" }), void 0),
+        jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }, void 0),
+        jsx("h3", __assign({ className: 'p-h3' }, { children: "As a nav:" }), void 0),
+        jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }, void 0),
+        jsxs("p", __assign({ className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32' }, { children: [jsx(InfoIcon, {}, void 0), "Inspect elements to see the different HTML tags being rendered."] }), void 0)] }), void 0)); };
 var CardDensities = function () { return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx(Card, { title: 'Card density: Compact', density: 'compact' }, void 0),
         jsx(Card, { title: 'Card density: Balanced', density: 'balanced' }, void 0),
         jsx(Card, { title: 'Card density: Spacious', density: 'spacious' }, void 0)] }), void 0)); };
 var CardsWithIcons = function (_a) {
-    _a.children; _a.icon; var title = _a.title;
+    var title = _a.title;
     return (jsxs("div", __assign({ className: 'd-flex gap16 p24 bg-grey-200' }, { children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }, void 0), title: title }, void 0),
-            jsx(Card, { icon: jsx(MehIcon, { size: 24 }, void 0), title: title }, void 0)] }), void 0));
+            jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }, void 0), title: title }, void 0)] }), void 0));
 };
 var CardWithOnClickAction = function (_a) {
-    var children = _a.children; _a.icon; var title = _a.title;
+    var children = _a.children, title = _a.title;
     return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }, void 0), title: title, titleVariant: 'medium', onClick: function () { } }, { children: children }), void 0) }), void 0));
 };
 var CardOverridesStyles = function (_a) {
@@ -102,14 +112,11 @@ var CardOverridesStyles = function (_a) {
                 title: 'tc-white'
             } }, { children: children }), void 0) }), void 0));
 };
-var CardsWithinCardsAndComplexLayout = function (_a) {
-    _a.children; _a.label; _a.title;
-    return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsxs(Card, __assign({ label: (jsx(Badge, __assign({ size: 'small', variant: 'success' }, { children: "Active" }), void 0)), title: (jsxs("div", __assign({ className: 'd-flex jc-between ai-center w100' }, { children: ["Coverage overview", jsx(Button, __assign({ onClick: function () { }, variant: 'filledGray' }, { children: "Full coverage details" }), void 0)] }), void 0)) }, { children: [jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
-                        jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0),
-                jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
-                        jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0)] }), void 0) }), void 0));
-};
+var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsxs(Card, __assign({ label: (jsx(Badge, __assign({ size: 'small', variant: 'success' }, { children: "Active" }), void 0)), title: (jsxs("div", __assign({ className: 'd-flex jc-between ai-center w100' }, { children: ["Coverage overview", jsx(Button, __assign({ onClick: function () { }, variant: 'filledGray' }, { children: "Full coverage details" }), void 0)] }), void 0)) }, { children: [jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
+                    jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0),
+            jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
+                    jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0)] }), void 0) }), void 0)); };
 
 export default story;
-export { CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
+export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../util/images';\nimport { Button } from '../button';\nimport { Badge } from '../badge';\nimport { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Card',\n  component: Card,\n  argTypes: {\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: { type: 'text' },\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\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: { type: '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  },\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  }\n};\n\nexport const CardStory = ({ \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}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\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    >\n      {children}\n    </Card>\n  </div>\n);\n\nCardStory.storyName = \"Card\";\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 = ({ \n  children,\n  icon,\n  title,\n}: 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} />}\n      title={title}\n    />\n  </div>\n);\n\nexport const CardWithOnClickAction = ({ \n  children,\n  icon,\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  children,\n  label,\n  title,\n}: CardProps) => (\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"],"mappings":";;;;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,mDAAmD;SACjE;QACD,WAAW,EAAE;YACX,WAAW,EAAE,uCAAuC;SACrD;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,yDAAyD;SACvE;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;SACrE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,uEAAuE;SACrF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,gDAAgD;SAC9D;QACD,UAAU,EAAE;YACV,WAAW,EAAE,wDAAwD;SACtE;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,qIAAqI;SACnJ;QACD,cAAc,EAAE;YACd,WAAW,EAAE,sEAAsE;SACpF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,WAAW,EAAE,6GAA6G;QAC1H,kBAAkB,EAAE,OAAO;QAC3B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,0BAA0B;QACjC,YAAY,EAAE,OAAO;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACV,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;SACT;QACD,UAAU,EAAE,IAAI;KACjB;EACD;IAEW,SAAS,GAAG,UAAC,EAcd;QAbV,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAY,kBAAA;IACG,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,gBAE7B,QAAQ,YACJ,YACH;AAlBS,EAmBf;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;IAEhB,aAAa,GAAG,cAAM,QACjCC,uBAAK,SAAS,EAAC,wCAAwC,iBACrDD,IAAC,IAAI,IACH,KAAK,EAAE,uBAAuB,EAC9B,OAAO,EAAC,SAAS,WACjB;QACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,WAClB;QACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,WAClB,aACE,KACN;IAEW,cAAc,GAAG,UAAC,EAInB;eAHF,SACJ,MACJ,KAAK;IACU,QACfC,uBAAK,SAAS,EAAC,8BAA8B,iBAC3CD,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,WACT,EAEJ,KAAK,EAAE,KAAK,WACZ;YACFA,IAAC,IAAI,IACH,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,WAAI,EAC3B,KAAK,EAAE,KAAK,WACZ,aACE;AAhBS,EAiBf;IAEW,qBAAqB,GAAG,UAAC,EAI1B;QAHV,QAAQ,cAAA,SACJ,MACJ,KAAK;IACU,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,WACT,EAEJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,OAAO,EAAE,eAAQ,gBAEhB,QAAQ,YACJ,YACH;AAhBS,EAiBf;IAEW,mBAAmB,GAAG,UAAC,EAIxB;QAHV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA;IACU,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,IAAI,EAAEA,IAAC,cAAc,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,WAAI,EACnD,UAAU,EAAE;gBACV,OAAO,EAAE,aAAa;gBACtB,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB,gBAEA,QAAQ,YACJ,YACH;AAfS,EAgBf;IAEW,gCAAgC,GAAG,UAAC,EAIrC;eAHF,UACH;IAEU,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCC,KAAC,IAAI,aACH,KAAK,GACHD,IAAC,KAAK,aAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,oCAE7B,CACT,EACD,KAAK,GACHC,uBAAK,SAAS,EAAC,kCAAkC,sCAG/CD,IAAC,MAAM,aACL,OAAO,EAAE,eAAQ,EACjB,OAAO,EAAC,YAAY,mDAGb,aACL,CACP,iBAEDC,uBAAK,SAAS,EAAC,mBAAmB,iBAChCD,IAAC,IAAI,IACH,WAAW,EAAC,WAAW,EACvB,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,aAAa,WAAI,EACzC,OAAO,EAAC,SAAS,WACjB;wBACFA,IAAC,IAAI,IACH,WAAW,EAAC,cAAc,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,aAAa,WAAI,EACrC,OAAO,EAAC,SAAS,WACjB,aACE;gBAENC,uBAAK,SAAS,EAAC,mBAAmB,iBAChCD,IAAC,IAAI,IACH,WAAW,EAAC,oBAAoB,EAChC,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,aAAa,WAAI,EACzC,OAAO,EAAC,SAAS,WACjB;wBACFA,IAAC,IAAI,IACH,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,aAAa,WAAI,EACrC,OAAO,EAAC,SAAS,WACjB,aACE,aACD,YACH;AAnDS;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/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/Card',\n  component: Card,\n  argTypes: {\n    as: {\n      control: { type: '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: { type: 'text' },\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\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: { type: '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  },\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  }\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}: 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    >\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"],"mappings":"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"}

package/dist/esm/components/icon/icons/Info.js

@@ -5,9 +5,9 @@ import '../../../tslib.es6-5bc94358.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
-var Info = (function (props) {
+var InfoIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("path", { fill: "currentColor", d: "M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z" }, void 0));
 });
 
-export default Info;
+export default InfoIcon;
 //# sourceMappingURL=Info.js.map

package/dist/esm/components/icon/icons/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sources":["../../../../../../src/lib/components/icon/icons/Info.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <path\n      fill=\"currentColor\"\n      d=\"M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,YAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6SAA6S,WAC/S,CACH;AAPD,CAOC;;;;"}
+{"version":3,"file":"Info.js","sources":["../../../../../../src/lib/components/icon/icons/Info.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <path\n      fill=\"currentColor\"\n      d=\"M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,gBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6SAA6S,WAC/S,CACH;AAPD,CAOC;;;;"}

package/dist/esm/components/icon/icons.stories.js

@@ -2,7 +2,7 @@ import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from '../input/index.js';
-import { i as icons } from '../../index-e506c4ca.js';
+import { i as icons } from '../../index-03b0133a.js';
 import { Button } from '../button/index.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconWrapper } from './IconWrapper/IconWrapper.js';
-import { i as icons } from '../../index-e506c4ca.js';
+import { i as icons } from '../../index-03b0133a.js';
 import '../../tslib.es6-5bc94358.js';
 import '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';

package/dist/esm/{index-e506c4ca.js → index-03b0133a.js}

@@ -175,7 +175,7 @@ import HospitalBuilding from './components/icon/icons/HospitalBuilding.js';
 import ImagePicture from './components/icon/icons/ImagePicture.js';
 import Inbox from './components/icon/icons/Inbox.js';
 import InfoFilled from './components/icon/icons/InfoFilled.js';
-import Info from './components/icon/icons/Info.js';
+import InfoIcon from './components/icon/icons/Info.js';
 import Instagram from './components/icon/icons/Instagram.js';
 import Italic from './components/icon/icons/Italic.js';
 import Key from './components/icon/icons/Key.js';
@@ -539,7 +539,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	ImagePictureIcon: ImagePicture,
 	InboxIcon: Inbox,
 	InfoFilledIcon: InfoFilled,
-	InfoIcon: Info,
+	InfoIcon: InfoIcon,
 	InstagramIcon: Instagram,
 	ItalicIcon: Italic,
 	KeyIcon: Key,
@@ -726,4 +726,4 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 export { icons as i };
-//# sourceMappingURL=index-e506c4ca.js.map
+//# sourceMappingURL=index-03b0133a.js.map

package/dist/esm/{index-e506c4ca.js.map → index-03b0133a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-e506c4ca.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index-03b0133a.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
-export interface CardProps {
+import { ElementType, ReactNode } from 'react';
+declare const CardDefault: "section";
+declare type CardDefaultAsType = typeof CardDefault;
+declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
+    as?: E;
     children?: ReactNode;
     classNames?: {
         buttonWrapper?: string;
@@ -22,6 +25,7 @@ export interface CardProps {
     onClick?: () => void;
     actionIcon?: ReactNode;
     showActionIcon?: boolean;
-}
-declare const Card: (props: CardProps) => JSX.Element;
+};
+export declare type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>;
+declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
 export { Card };

package/dist/esm/lib/components/card/index.stories.d.ts

@@ -1,8 +1,15 @@
+/// <reference types="react" />
 import { CardProps } from '.';
 declare const story: {
     title: string;
-    component: (props: CardProps) => JSX.Element;
+    component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
     argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         density: {
             description: string;
         };
@@ -67,12 +74,13 @@ declare const story: {
     };
 };
 export declare const CardStory: {
-    ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
+    ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
     storyName: string;
 };
+export declare const CardAsOtherComponents: () => JSX.Element;
 export declare const CardDensities: () => JSX.Element;
-export declare const CardsWithIcons: ({ children, icon, title, }: CardProps) => JSX.Element;
-export declare const CardWithOnClickAction: ({ children, icon, title, }: CardProps) => JSX.Element;
+export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
+export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
 export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
-export declare const CardsWithinCardsAndComplexLayout: ({ children, label, title, }: CardProps) => JSX.Element;
+export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
 export default story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.41.18",
+  "version": "0.42.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/card/index.stories.tsx

@@ -2,12 +2,16 @@ import { Card, CardProps } from '.';
 import { illustrations } from '../../util/images';
 import { Button } from '../button';
 import { Badge } from '../badge';
-import { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
+import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
 
 const story = {
   title: 'JSX/Card',
   component: Card,
   argTypes: {
+    as: {
+      control: { type: 'text' },
+      description: 'Allow wrapper element type to be custom defined'
+    },
     density: {
       description: 'Spacing around the card'
     },
@@ -69,6 +73,7 @@ const story = {
 };
 
 export const CardStory = ({ 
+  as,
   actionIcon,
   showActionIcon,
   children,
@@ -85,6 +90,7 @@ export const CardStory = ({
 }: CardProps) => (
   <div className='d-flex p24 bg-grey-200'>
     <Card
+      as={as}
       classNames={classNames}
       description={description}
       descriptionVariant={descriptionVariant}
@@ -105,6 +111,32 @@ export const CardStory = ({
 
 CardStory.storyName = "Card";
 
+export const CardAsOtherComponents = () => (
+  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+   
+    <h3 className='p-h3'>As an anchor:</h3>
+    <Card
+      as="a"
+      href="https://feather-insurance.com"
+      target="_blank"
+      title="Card with an a tag"
+      density='compact'
+    />
+
+    <h3 className='p-h3'>As a nav:</h3>
+    <Card
+      as="nav"
+      title="Card with a nav tag"
+      density='compact'
+    />
+
+    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>
+      <InfoIcon />
+      Inspect elements to see the different HTML tags being rendered.
+    </p>
+  </div>
+);
+
 export const CardDensities = () => (
   <div className='d-flex fd-column gap16 p24 bg-grey-200'>
     <Card
@@ -122,11 +154,7 @@ export const CardDensities = () => (
   </div>
 );
 
-export const CardsWithIcons = ({ 
-  children,
-  icon,
-  title,
-}: CardProps) => (
+export const CardsWithIcons = ({ title }: CardProps) => (
   <div className='d-flex gap16 p24 bg-grey-200'>
     <Card
       icon={
@@ -139,7 +167,7 @@ export const CardsWithIcons = ({
       title={title}
     />
     <Card
-      icon={<MehIcon size={24} />}
+      icon={<MehIcon size={24} noMargin />}
       title={title}
     />
   </div>
@@ -147,7 +175,6 @@ export const CardsWithIcons = ({
 
 export const CardWithOnClickAction = ({ 
   children,
-  icon,
   title,
 }: CardProps) => (
   <div className='d-flex p24 bg-grey-200'>
@@ -190,11 +217,7 @@ export const CardOverridesStyles = ({
   </div>
 );
 
-export const CardsWithinCardsAndComplexLayout = ({ 
-  children,
-  label,
-  title,
-}: CardProps) => (
+export const CardsWithinCardsAndComplexLayout = () => (
   <div className='d-flex p24 bg-grey-200'>
     <Card
       label={(