@popsure/dirty-swan 0.41.0-rc.3 → 0.41.2

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface CardProps {
+    children?: ReactNode;
+    classNames?: {
+        wrapper?: string;
+        label?: string;
+        title?: string;
+        description?: string;
+        children?: string;
+        icon?: string;
+        actionIcon?: string;
+    };
+    density?: 'balanced' | 'compact' | 'spacious';
+    dropShadow?: boolean;
+    icon?: ReactNode;
+    title?: ReactNode;
+    titleVariant?: 'small' | 'medium' | 'large';
+    description?: ReactNode;
+    descriptionVariant?: 'small' | 'large';
+    label?: ReactNode;
+    onClick?: () => void;
+    actionIcon?: ReactNode;
+}
+declare const Card: (props: CardProps) => JSX.Element;
+export { Card };

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

@@ -0,0 +1,72 @@
+import { CardProps } from '.';
+declare const story: {
+    title: string;
+    component: (props: CardProps) => JSX.Element;
+    argTypes: {
+        density: {
+            description: string;
+        };
+        label: {
+            description: string;
+        };
+        title: {
+            description: string;
+        };
+        titleVariant: {
+            description: string;
+        };
+        description: {
+            description: string;
+        };
+        descriptionVariant: {
+            description: string;
+        };
+        icon: {
+            description: string;
+        };
+        children: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        onClick: {
+            description: string;
+        };
+        dropShadow: {
+            description: string;
+        };
+        actionIcon: {
+            description: string;
+        };
+    };
+    args: {
+        density: string;
+        description: string;
+        descriptionVariant: string;
+        label: string;
+        title: string;
+        titleVariant: string;
+        icon: string;
+        children: string;
+        classNames: {
+            wrapper: string;
+            label: string;
+            title: string;
+            description: string;
+            children: string;
+            icon: string;
+        };
+        dropShadow: boolean;
+    };
+};
+export declare const CardStory: {
+    ({ actionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
+    storyName: string;
+};
+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 CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
+export declare const CardsWithinCardsAndComplexLayout: ({ children, label, title, }: CardProps) => JSX.Element;
+export default story;

package/dist/cjs/lib/components/input/radio/index.d.ts

@@ -11,6 +11,7 @@ export interface RadioProps<ValueType extends string> {
     onChange: (value: ValueType) => void;
     wide?: boolean;
     inlineLayout?: boolean;
+    inlineIcon?: boolean;
     classNames?: {
         container?: string;
         label?: string;
@@ -18,4 +19,4 @@ export interface RadioProps<ValueType extends string> {
     };
     bordered?: boolean;
 }
-export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, classNames: classNamesObj, bordered, }: RadioProps<ValueType>) => JSX.Element;
+export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, }: RadioProps<ValueType>) => JSX.Element;

package/dist/cjs/lib/components/input/radio/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { RadioProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, classNames: classNamesObj, bordered, }: RadioProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, }: RadioProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -61,5 +61,6 @@ export declare const RadioWithCustomOptionStyles: ({ onChange }: RadioProps<stri
 export declare const RadioWithCustomLabelStyles: ({ onChange }: RadioProps<string>) => JSX.Element;
 export declare const RadioWithInlineLayout: ({ onChange }: RadioProps<string>) => JSX.Element;
 export declare const RadioWithCustomLabel: ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => JSX.Element;
+export declare const RadioWithCustomLabelInline: ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => JSX.Element;
 export declare const RadioIconOnly: ({ onChange }: RadioProps<string>) => JSX.Element;
 export default story;

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

@@ -20,11 +20,11 @@ import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButt
 import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
 import { Link } from './components/link';
-import { images } from './util/images';
+import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
 import { Toggle } from './components/input/toggle';
 import { Toaster, toast } from './components/toast';
 export * from './components/icon';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, Spinner, Toggle, Toaster, toast };
-export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, };
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
+export type { IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, };
 export type { DownloadStatus } from './models/download';

package/dist/cjs/lib/models/styles.d.ts

@@ -1,2 +1,2 @@
 export declare type Color = 'transparent' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-700' | 'blue-900' | 'purple-25' | 'purple-50' | 'purple-100' | 'purple-300' | 'purple-500' | 'purple-700' | 'purple-900' | 'primary-25' | 'primary-50' | 'primary-100' | 'primary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'red-100' | 'red-300' | 'red-500' | 'red-700' | 'red-900' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'grey-700' | 'grey-900' | 'green-100' | 'green-300' | 'green-500' | 'green-700' | 'green-900' | 'glacier-100' | 'glacier-300' | 'glacier-500' | 'glacier-700' | 'glacier-900' | 'spearmint-100' | 'spearmint-300' | 'spearmint-500' | 'spearmint-700' | 'spearmint-900' | 'pink-100' | 'pink-300' | 'pink-500' | 'pink-700' | 'pink-900' | 'yellow-100' | 'yellow-300' | 'yellow-500' | 'yellow-700' | 'yellow-900';
-export declare type Size = 0 | 8 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export declare type Size = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;

package/dist/cjs/lib/util/images/index.d.ts

@@ -20,4 +20,138 @@ declare const images: {
     readonly finalExpenses: "https://assets.cdn.feather-insurance.com/assets/images/finalExpenses.svg";
     readonly mortgage: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
 };
-export { images };
+declare const illustrations: {
+    readonly aids: `${string}/aids.svg`;
+    readonly allInOneAccount: `${string}/all-in-one-account.svg`;
+    readonly ambulance: `${string}/ambulance.svg`;
+    readonly bank: `${string}/bank.svg`;
+    readonly battery: `${string}/battery.svg`;
+    readonly bed: `${string}/bed.svg`;
+    readonly bigDog: `${string}/big-dog.svg`;
+    readonly bikeDamage: `${string}/bike-damage.svg`;
+    readonly bikeDestroyedDamaged: `${string}/bike-destroyed-damaged.svg`;
+    readonly bikeDetails: `${string}/bike-details.svg`;
+    readonly bikeFrameNumber: `${string}/bike-frame-number.svg`;
+    readonly bikeLock: `${string}/bike-lock.svg`;
+    readonly bikeParts: `${string}/bike-parts.svg`;
+    readonly bikeRiding: `${string}/bike-riding.svg`;
+    readonly bikeStolenBroken: `${string}/bike-stolen-broken.svg`;
+    readonly bikeStolen: `${string}/bike-stolen.svg`;
+    readonly bikeTrailer: `${string}/bike-trailer.svg`;
+    readonly bikeWear: `${string}/bike-wear.svg`;
+    readonly bike: `${string}/bike.svg`;
+    readonly bill: `${string}/bill.svg`;
+    readonly bookOpen: `${string}/book-open.svg`;
+    readonly briefcase: `${string}/briefcase.svg`;
+    readonly brokenAquarium: `${string}/broken-aquarium.svg`;
+    readonly brokenGlass: `${string}/broken-glass.svg`;
+    readonly calculating1: `${string}/calculating-1.svg`;
+    readonly calculatingDone: `${string}/calculating-done.svg`;
+    readonly calculating: `${string}/calculating.svg`;
+    readonly calendar: `${string}/calendar.svg`;
+    readonly car: `${string}/car.svg`;
+    readonly checkDoc: `${string}/check-doc.svg`;
+    readonly check: `${string}/check.svg`;
+    readonly concierge: `${string}/concierge.svg`;
+    readonly contract: `${string}/contract.svg`;
+    readonly crash: `${string}/crash.svg`;
+    readonly creditCard: `${string}/credit-card.svg`;
+    readonly damagedLaptop: `${string}/damaged-laptop.svg`;
+    readonly dentalCleaning: `${string}/dental-cleaning.svg`;
+    readonly dentalTreatment: `${string}/dental-treatment.svg`;
+    readonly dental: `${string}/dental.svg`;
+    readonly dependents: `${string}/dependents.svg`;
+    readonly document1: `${string}/document-1.svg`;
+    readonly documentCheck: `${string}/document-check.svg`;
+    readonly documentCross: `${string}/document-cross.svg`;
+    readonly document: `${string}/document.svg`;
+    readonly door: `${string}/door.svg`;
+    readonly education: `${string}/education.svg`;
+    readonly electricCar: `${string}/electric-car.svg`;
+    readonly email: `${string}/email.svg`;
+    readonly euroMoney: `${string}/euro-money.svg`;
+    readonly fastEasy: `${string}/fast-easy.svg`;
+    readonly fire: `${string}/fire.svg`;
+    readonly freelancerExpat: `${string}/freelancer-expat.svg`;
+    readonly funeralBurial: `${string}/funeral-burial.svg`;
+    readonly fuse: `${string}/fuse.svg`;
+    readonly giftPolicyOptionsQuote: `${string}/gift-policy-options-quote.svg`;
+    readonly grandmother: `${string}/grandmother.svg`;
+    readonly healthCard: `${string}/health-card.svg`;
+    readonly heart: `${string}/heart.svg`;
+    readonly helmet: `${string}/helmet.svg`;
+    readonly householdHome: `${string}/household-home.svg`;
+    readonly keys: `${string}/keys.svg`;
+    readonly legalLawyer: `${string}/legal-lawyer.svg`;
+    readonly location: `${string}/location.svg`;
+    readonly lock: `${string}/lock.svg`;
+    readonly mail: `${string}/mail.svg`;
+    readonly medicine: `${string}/medicine.svg`;
+    readonly mentalHealth: `${string}/mental-health.svg`;
+    readonly mentalIllness: `${string}/mental-llness.svg`;
+    readonly miniJobExpat: `${string}/minijob-expat.svg`;
+    readonly moneyIncome: `${string}/money-income.svg`;
+    readonly movingTruck: `${string}/moving-truck.svg`;
+    readonly naturalRemedies: `${string}/natural-remedies.svg`;
+    readonly newArrival: `${string}/new-arrival.svg`;
+    readonly noPolicies: `${string}/no-policies.svg`;
+    readonly passport: `${string}/passport.svg`;
+    readonly pawPet: `${string}/paw-pet.svg`;
+    readonly pen: `${string}/pen.svg`;
+    readonly personB: `${string}/person-b.svg`;
+    readonly person: `${string}/person.svg`;
+    readonly petsBunny: `${string}/pets-bunny.svg`;
+    readonly petsCat: `${string}/pets-cat.svg`;
+    readonly phone1: `${string}/phone-1.svg`;
+    readonly phone2Fa: `${string}/phone-2-fa.svg`;
+    readonly phonePerson: `${string}/phone-person.svg`;
+    readonly phonePhoto: `${string}/phone-photo.svg`;
+    readonly phone: `${string}/phone.svg`;
+    readonly photoPerson: `${string}/photo-person.svg`;
+    readonly pipes: `${string}/pipes.svg`;
+    readonly planeRepatriationFlight: `${string}/plane-repatriation-flight.svg`;
+    readonly pregnancy: `${string}/pregnancy.svg`;
+    readonly productionDown: `${string}/production-down.svg`;
+    readonly pushNotifications: `${string}/push-notifications.svg`;
+    readonly radioactive: `${string}/radioactive.svg`;
+    readonly referral: `${string}/referral.svg`;
+    readonly researcherExpat: `${string}/researcher-expat.svg`;
+    readonly restrictions: `${string}/restrictions.svg`;
+    readonly ring: `${string}/ring.svg`;
+    readonly screen: `${string}/screen.svg`;
+    readonly screenings: `${string}/screenings.svg`;
+    readonly shield1: `${string}/shield-1.svg`;
+    readonly shield2: `${string}/shield-2.svg`;
+    readonly shield3: `${string}/shield-3.svg`;
+    readonly shieldCross: `${string}/shield-cross.svg`;
+    readonly shieldQuestionMark: `${string}/shield-questionmark.svg`;
+    readonly shieldWarning: `${string}/shield-warning.svg`;
+    readonly shield: `${string}/shield.svg`;
+    readonly sign: `${string}/sign.svg`;
+    readonly spinner: `${string}/spinner.svg`;
+    readonly sportLifestyleBasketball: `${string}/sport-lifestyle-basketball.svg`;
+    readonly storm: `${string}/storm.svg`;
+    readonly studentExpat: `${string}/student-expat.svg`;
+    readonly submit: `${string}/submit.svg`;
+    readonly supportAgent: `${string}/support-agent.svg`;
+    readonly supportSpeakingMessageChatTalk: `${string}/support-speaking-message-chat-talk.svg`;
+    readonly theft: `${string}/theft.svg`;
+    readonly time: `${string}/time.svg`;
+    readonly traffic: `${string}/traffic.svg`;
+    readonly tree: `${string}/tree.svg`;
+    readonly user: `${string}/user.svg`;
+    readonly vaccination: `${string}/vaccination.svg`;
+    readonly vandalism: `${string}/vandalism.svg`;
+    readonly videoCall: `${string}/video-call.svg`;
+    readonly visaSeekerExpat: `${string}/visa-seeker-expat.svg`;
+    readonly visa: `${string}/visa.svg`;
+    readonly visualAid: `${string}/visual-aid.svg`;
+    readonly visual: `${string}/visual.svg`;
+    readonly washingMachine: `${string}/washing-machine.svg`;
+    readonly water: `${string}/water.svg`;
+    readonly wavingHand: `${string}/waving-hand.svg`;
+    readonly worldwide: `${string}/worldwide.svg`;
+};
+declare type IllustrationKeys = keyof typeof illustrations;
+export type { IllustrationKeys };
+export { illustrations, images };

package/dist/cjs/lib/util/images/index.stories.d.ts

@@ -8,5 +8,5 @@ declare const story: {
         };
     };
 };
-export declare const Images: () => JSX.Element;
+export declare const Illustrations: () => JSX.Element;
 export default story;

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

@@ -0,0 +1,39 @@
+import { _ 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';
+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  border: 1px solid transparent;\n  color: #26262e;\n  outline-color: #8e8cee;\n  transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n  border-color: #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;
+    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),
+                            onClick && (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 onClick = props.onClick;
+    if (onClick) {
+        return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8', styles.button), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
+    }
+    return jsx(CardContent, __assign({}, props), void 0);
+};
+
+export { Card };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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    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} \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}: CardProps) => (\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\n              className={classNamesUtil('p-p--small', classNames?.label)}\n            >\n              {label}\n            </h3>\n          )}\n\n          {title && (\n            <h2\n              className={classNamesUtil(classNames?.title, {\n                large:'p-h3',\n                medium:'p-h4',\n                small:'p-p',\n              }[titleVariant])}\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        {onClick && (\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 && (\n      <div className={classNames?.children}>{children}</div>\n    )}\n  </section>\n);\n\nconst Card = (props: CardProps) => {\n  const { onClick } = props;\n\n  if (onClick) {\n    return (\n      <button\n        className={classNamesUtil('c-pointer d-flex w100 br8', styles.button)}\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":";;;;;;;;;;;;AA6BA,IAAM,WAAW,GAAG,UAAC,EAaT;QAZV,QAAQ,cAAA,EACRA,YAAU,gBAAA,EACV,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,WAAW,iBAAA,EACX,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA;IACP,QACfC,2BACE,SAAS,EAAEC,UAAc,CACvB,sDAAsD,EACtD,EAAE,OAAO,EAAE,UAAU,EAAE,EACvB;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC,OAAO,CAAC,EACVF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,OAAO,CACpB,iBAEDC,uBAAK,SAAS,EAAC,aAAa,iBACzB,IAAI,KACHE,sBACE,SAAS,EAAED,UAAc,CACvB,iCAAiC,EACjC,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAO,OAAS,CAAC,EACxBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,IAAI,CACjB,gBAEA,IAAI,YACD,CACP;oBAEDC,uBAAK,SAAS,EAAC,wBAAwB,iBACrCA,uBAAK,SAAS,EAAC,kDAAkD,iBAC9D,KAAK,KACJE,qBACE,SAAS,EAAED,UAAc,CAAC,YAAY,EAAEF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,CAAC,gBAEzD,KAAK,YACH,CACN;oCAEA,KAAK,KACJG,qBACE,SAAS,EAAED,UAAc,CAACF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,EAAE;4CAC3C,KAAK,EAAC,MAAM;4CACZ,MAAM,EAAC,MAAM;4CACb,KAAK,EAAC,KAAK;yCACZ,CAAC,YAAY,CAAC,CAAC,gBAEf,KAAK,YACH,CACN;oCAEA,WAAW,KACVG,sBACE,SAAS,EAAED,UAAc,CACvB,aAAa,EACbF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,WAAW,EACvB,kBAAkB,KAAK,OAAO,GAAG,YAAY,GAAG,KAAK,CACtD,gBAEA,WAAW,YACR,CACP,aACG;4BAEL,OAAO,KACNG,sBACE,SAAS,EAAED,UAAc,CACvB,MAAM,CAAC,UAAU,EACjBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,UAAU,EACtB,MAAM,CAAC,eAAa,OAAS,CAAC,EAC9B,kBAAkB,CACnB,gBAEA,UAAU,IAAIG,IAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,WAAI,YACzC,CACP,aACG,aACF;YAEL,QAAQ,KACPA,sBAAK,SAAS,EAAEH,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,QAAQ,gBAAG,QAAQ,YAAO,CACvD,aACO;AAhFK,CAiFhB,CAAC;IAEI,IAAI,GAAG,UAAC,KAAgB;IACpB,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,IAAI,OAAO,EAAE;QACX,QACEG,yBACE,SAAS,EAAED,UAAc,CAAC,2BAA2B,EAAE,MAAM,CAAC,MAAM,CAAC,EACrE,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,gBAEbC,IAAC,WAAW,eAAK,KAAK,UAAI,YACnB,EACV;KACF;IAED,OAAOA,IAAC,WAAW,eAAK,KAAK,UAAI,CAAC;AACpC;;;;"}

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

@@ -0,0 +1,111 @@
+import { _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card } from './index.js';
+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 MehIcon from '../icon/icons/Meh.js';
+import PlusCircleIcon from '../icon/icons/PlusCircle.js';
+import XIcon from '../icon/icons/X.js';
+import '../../index-6ea95111.js';
+import '../icon/icons/ChevronRight.js';
+import 'react';
+import '../icon/IconWrapper/IconWrapper.js';
+import '../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/Card',
+    component: Card,
+    argTypes: {
+        density: {
+            description: 'Spacing around the card'
+        },
+        label: {
+            description: 'Content to be rendered as label'
+        },
+        title: {
+            description: 'Content to be rendered as title'
+        },
+        titleVariant: {
+            description: 'Variant that allows changing title sizing styles.'
+        },
+        description: {
+            description: 'Content to be rendered as description'
+        },
+        descriptionVariant: {
+            description: 'Variant that allows changing description sizing styles.'
+        },
+        icon: {
+            description: 'ReactNode to be rendered on the left side of the card',
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'Content that is displayed inside the card under the pre-defined props',
+        },
+        onClick: {
+            description: 'On click action to be triggered on card click.',
+        },
+        dropShadow: {
+            description: 'Wether to display card with drop shadow styles or not.',
+        },
+        actionIcon: {
+            description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
+        },
+    },
+    args: {
+        density: 'balanced',
+        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',
+        title: 'Honest, simple insurance',
+        titleVariant: 'large',
+        icon: 'ABC',
+        children: '',
+        classNames: {
+            wrapper: '',
+            label: '',
+            title: '',
+            description: '',
+            children: '',
+            icon: ''
+        },
+        dropShadow: true,
+    }
+};
+var CardStory = function (_a) {
+    var actionIcon = _a.actionIcon, 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 }, { children: children }), void 0) }), void 0));
+};
+CardStory.storyName = "Card";
+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;
+    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));
+};
+var CardWithOnClickAction = function (_a) {
+    var children = _a.children; _a.icon; var 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) {
+    var children = _a.children, label = _a.label, title = _a.title;
+    return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ label: label, title: title, titleVariant: 'medium', icon: jsx(PlusCircleIcon, { color: "grey-100", size: 32 }, void 0), classNames: {
+                wrapper: 'bg-grey-700',
+                label: 'tc-white',
+                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));
+};
+
+export default story;
+export { CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +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      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  },\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  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    >\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":"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"}

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

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { CardWithLeftIcon } from '../index.js';
-import { i as images } from '../../../index-31224f74.js';
+import { a as images } from '../../../index-1693701e.js';
 import '../../../feather-logo-a3f07990.js';
 import '../../../style-inject.es-1f59c1d0.js';
 import '../cardButton/index.js';

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

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { CardWithTopIcon } from '../index.js';
-import { i as images } from '../../../index-31224f74.js';
+import { a as images } from '../../../index-1693701e.js';
 import '../../../feather-logo-a3f07990.js';
 import '../../../style-inject.es-1f59c1d0.js';
 import '../cardButton/index.js';

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

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { InfoCard } from '../index.js';
-import { i as images } from '../../../index-31224f74.js';
+import { a as images } from '../../../index-1693701e.js';
 import '../../../feather-logo-a3f07990.js';
 import '../../../style-inject.es-1f59c1d0.js';
 import '../cardButton/index.js';

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

@@ -5,9 +5,9 @@ import '../../../tslib.es6-5bc94358.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
-var Meh = (function (props) {
+var MehIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 10v-.04m6 .04v-.04M8.5 15h7m6.5-3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" }, void 0));
 });
 
-export default Meh;
+export default MehIcon;
 //# sourceMappingURL=Meh.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Meh.js","sources":["../../../../../../src/lib/components/icon/icons/Meh.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      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 10v-.04m6 .04v-.04M8.5 15h7m6.5-3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,WAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,wGAAwG,WAC1G,CACH;AAVD,CAUC;;;;"}
+{"version":3,"file":"Meh.js","sources":["../../../../../../src/lib/components/icon/icons/Meh.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      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 10v-.04m6 .04v-.04M8.5 15h7m6.5-3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,eAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,wGAAwG,WAC1G,CACH;AAVD,CAUC;;;;"}

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

@@ -5,9 +5,9 @@ import '../../../tslib.es6-5bc94358.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
 
-var PlusCircle = (function (props) {
+var PlusCircleIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("circle", { cx: 12, cy: 12, r: 10, stroke: "currentColor", strokeWidth: 2 }, void 0), jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6M12 15V9M8 12h8M12 16V8" }, void 0));
 });
 
-export default PlusCircle;
+export default PlusCircleIcon;
 //# sourceMappingURL=PlusCircle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlusCircle.js","sources":["../../../../../../src/lib/components/icon/icons/PlusCircle.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    <circle cx={12} cy={12} r={10} stroke=\"currentColor\" strokeWidth={2} />,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 12h6M12 15V9M8 12h8M12 16V8\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,kBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,gBAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,WAAI,EACvEA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,gCAAgC,WAClC,CACH;AAXD,CAWC;;;;"}
+{"version":3,"file":"PlusCircle.js","sources":["../../../../../../src/lib/components/icon/icons/PlusCircle.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    <circle cx={12} cy={12} r={10} stroke=\"currentColor\" strokeWidth={2} />,\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 12h6M12 15V9M8 12h8M12 16V8\"\n    />\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,sBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,gBAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,WAAI,EACvEA,cACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,gCAAgC,WAClC,CACH;AAXD,CAWC;;;;"}

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-0a8de35a.js';
+import { i as icons } from '../../index-83ae7f18.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-0a8de35a.js';
+import { i as icons } from '../../index-83ae7f18.js';
 import '../../tslib.es6-5bc94358.js';
 import '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Checkbox } from './index.js';
-import { i as images } from '../../../index-31224f74.js';
+import { a as images } from '../../../index-1693701e.js';
 import '../../../tslib.es6-5bc94358.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';