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

package/dist/esm/{index-0a8de35a.js → index-83ae7f18.js}

@@ -198,7 +198,7 @@ import _Map from './components/icon/icons/Map.js';
 import Maximize2 from './components/icon/icons/Maximize2.js';
 import Maximize from './components/icon/icons/Maximize.js';
 import MedicationPills from './components/icon/icons/MedicationPills.js';
-import Meh from './components/icon/icons/Meh.js';
+import MehIcon from './components/icon/icons/Meh.js';
 import MentalHealth from './components/icon/icons/MentalHealth.js';
 import MenuDotsMoreHorizontal from './components/icon/icons/MenuDotsMoreHorizontal.js';
 import MenuDotsMoreVertical from './components/icon/icons/MenuDotsMoreVertical.js';
@@ -241,7 +241,7 @@ import PlaneFilled from './components/icon/icons/PlaneFilled.js';
 import Plane from './components/icon/icons/Plane.js';
 import PlayCircle from './components/icon/icons/PlayCircle.js';
 import Play from './components/icon/icons/Play.js';
-import PlusCircle from './components/icon/icons/PlusCircle.js';
+import PlusCircleIcon from './components/icon/icons/PlusCircle.js';
 import PlusSquare from './components/icon/icons/PlusSquare.js';
 import PlusIcon from './components/icon/icons/Plus.js';
 import Pocket from './components/icon/icons/Pocket.js';
@@ -562,7 +562,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	Maximize2Icon: Maximize2,
 	MaximizeIcon: Maximize,
 	MedicationPillsIcon: MedicationPills,
-	MehIcon: Meh,
+	MehIcon: MehIcon,
 	MentalHealthIcon: MentalHealth,
 	MenuDotsMoreHorizontalIcon: MenuDotsMoreHorizontal,
 	MenuDotsMoreVerticalIcon: MenuDotsMoreVertical,
@@ -605,7 +605,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	PlaneIcon: Plane,
 	PlayCircleIcon: PlayCircle,
 	PlayIcon: Play,
-	PlusCircleIcon: PlusCircle,
+	PlusCircleIcon: PlusCircleIcon,
 	PlusSquareIcon: PlusSquare,
 	PlusIcon: PlusIcon,
 	PocketIcon: Pocket,
@@ -726,4 +726,4 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 export { icons as i };
-//# sourceMappingURL=index-0a8de35a.js.map
+//# sourceMappingURL=index-83ae7f18.js.map

package/dist/esm/{index-0a8de35a.js.map → index-83ae7f18.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-0a8de35a.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index-83ae7f18.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, Spinner, Toggle, Toaster, toast, } from './lib';
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, } from './lib';
 export * from './lib/components/icon';
-export type { DownloadStatus, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, } from './lib';
+export type { DownloadStatus, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, } from './lib';

package/dist/esm/index.js

@@ -23,10 +23,10 @@ export { ComparisonTable } from './components/comparisonTable/index.js';
 export { SegmentedControl } from './components/segmentedControl/index.js';
 export { Markdown } from './components/markdown/index.js';
 export { Link } from './components/link/index.js';
-export { i as images } from './index-31224f74.js';
+export { i as illustrations, a as images } from './index-1693701e.js';
 export { Spinner } from './components/spinner/index.js';
 export { Toggle } from './components/input/toggle/index.js';
-export { a as Toaster, t as toast } from './index-eff726d3.js';
+export { a as Toaster, t as toast } from './index-45edc7d0.js';
 export { default as Svg1Icon } from './components/icon/icons/1.js';
 export { default as Svg2Icon } from './components/icon/icons/2.js';
 export { default as Svg3Icon } from './components/icon/icons/3.js';

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/util/images/index.stories.js

@@ -1,26 +1,57 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { i as images } from '../../index-31224f74.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { i as illustrations } from '../../index-1693701e.js';
+import { c as classNames } from '../../index-6ea95111.js';
+import { Input } from '../../components/input/index.js';
+import { Button } from '../../components/button/index.js';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+import '../../index-fb46adf9.js';
+
+var css_248z = ".style-module_searchBar__1ADz1 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #ededf2;\n  padding: 4px 20px;\n  z-index: 9;\n}\n\n.style-module_imageWrapper__1t-SZ {\n  width: 32px;\n  height: 32px;\n}\n.style-module_imageWrapper__1t-SZ img {\n  width: 100%;\n}";
+var styles = {"searchBar":"style-module_searchBar__1ADz1","imageWrapper":"style-module_imageWrapper__1t-SZ"};
+styleInject(css_248z);
 
 var story = {
-    title: 'Utils/Images',
+    title: 'Utils/Illustrations',
     parameters: {
         docs: {
             description: {
-                component: 'Use the `images` object export to access our list of available images.',
+                component: 'Use the `illustrations` object export to access our list of available images.',
             },
         },
     },
 };
-var Images = function () { return (jsx("div", __assign({ className: "d-flex gap8 f-wrap" }, { children: Object.entries(images).map(function (_a) {
-        var key = _a[0], value = _a[1];
-        if (typeof value !== 'string') {
-            return null;
+var initialImages = Object.entries(illustrations);
+var Illustrations = function () {
+    var _a = useState(''), value = _a[0], setValue = _a[1];
+    var _b = useState(initialImages), options = _b[0], setOptions = _b[1];
+    var clearSearch = function () {
+        setValue('');
+        setOptions(initialImages);
+    };
+    var handleOnSearch = function (event) {
+        var searchValue = event.target.value;
+        setValue(event.target.value);
+        if (searchValue === '') {
+            setOptions(initialImages);
+            return;
         }
-        return (jsxs("div", __assign({ className: "ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100" }, { children: [jsx("span", __assign({ className: "p-p--small mb8" }, { children: key }), void 0),
-                jsx("img", { alt: key, src: value }, void 0)] }), key));
-    }) }), void 0)); };
+        setOptions(initialImages.filter(function (_a) {
+            var key = _a[0];
+            return key.toLowerCase()
+                .includes(searchValue.toLowerCase());
+        }));
+    };
+    return (jsxs("div", { children: [jsx("div", __assign({ className: classNames(styles.searchBar, 'bg-white') }, { children: jsxs("div", __assign({ className: 'd-flex gap8 wmx12 m-auto' }, { children: [jsx(Input, { className: 'w70', onChange: handleOnSearch, placeholder: 'Search icon', value: value }, void 0),
+                        jsx(Button, __assign({ className: 'w30', disabled: !value, onClick: clearSearch }, { children: "Clear search" }), void 0)] }), void 0) }), void 0),
+            jsx("div", __assign({ className: 'd-flex f-wrap' }, { children: options.map(function (_a) {
+                    var iconKey = _a[0], src = _a[1];
+                    return (jsx("div", __assign({ className: "w20 p8" }, { children: jsxs("div", __assign({ className: 'br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center' }, { children: [jsx("div", __assign({ className: styles.imageWrapper }, { children: jsx("img", { src: src, alt: iconKey }, void 0) }), void 0),
+                                jsx("span", __assign({ className: 'p-p--small mt16' }, { children: iconKey }), void 0)] }), void 0) }), iconKey));
+                }) }), void 0)] }, void 0));
+};
 
 export default story;
-export { Images };
+export { Illustrations };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { images } from '../../util/images';\n\nconst story = {\n  title: 'Utils/Images',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `images` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nexport const Images = () => (\n  <div className=\"d-flex gap8 f-wrap\">\n    {Object.entries(images).map(([key, value]) => {\n      if (typeof value !== 'string') {\n        return null;\n      }\n      return (\n        <div\n          key={key}\n          className=\"ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100\"\n        >\n          <span className=\"p-p--small mb8\">{key}</span>\n\n          <img alt={key} src={value} />\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,wEAAwE;aAC3E;SACF;KACF;EACD;IAEW,MAAM,GAAG,cAAM,QAC1BA,sBAAK,SAAS,EAAC,oBAAoB,gBAChC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QACtC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,IAAI,CAAC;SACb;QACD,QACEC,uBAEE,SAAS,EAAC,8DAA8D,iBAExED,uBAAM,SAAS,EAAC,gBAAgB,gBAAE,GAAG,YAAQ;gBAE7CA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,WAAI,MALxB,GAAG,CAMJ,EACN;KACH,CAAC,YACE;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations)\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(initialImages.filter(([key]) => \n      key.toLowerCase()\n        .includes(searchValue.toLowerCase())\n    ));\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className='d-flex gap8 wmx12 m-auto'>\n        <Input\n          className='w70'\n          onChange={handleOnSearch}\n          placeholder='Search icon'\n          value={value} \n        />\n        <Button className='w30' disabled={!value} onClick={clearSearch}>\n          Clear search\n        </Button>\n        </div>\n      </div>\n\n      <div className='d-flex f-wrap'>\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className='br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center'>\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className='p-p--small mt16'>{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,+EAA+E;aAClF;SACF;KACF;EACD;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC,aAAa,GAAG;IACrB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,aAAa,CAAC,EAA9C,OAAO,QAAA,EAAE,UAAU,QAA2B,CAAC;IAEtD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,aAAa,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO;SACR;QAED,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YACnC,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,sBAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,gBACtDD,uBAAK,SAAS,EAAC,0BAA0B,iBACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,WACZ;wBACFA,IAAC,MAAM,aAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,0CAErD,aACH,YACF;YAENA,sBAAK,SAAS,EAAC,eAAe,gBAC3B,OAAO,CAAC,GAAG,CAAC,UAAC,EAAc;wBAAb,OAAO,QAAA,EAAE,GAAG,QAAA;oBAAM,QAC/BA,sBAAmB,SAAS,EAAC,QAAQ,gBACnCD,uBAAK,SAAS,EAAC,+DAA+D,iBAC5EC,sBAAK,SAAS,EAAE,MAAM,CAAC,YAAY,gBACjCA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,WAAI,YAC3B;gCACNA,uBAAM,SAAS,EAAC,iBAAiB,gBAAE,OAAO,YAAQ,aAC9C,KANE,OAAO,CAOX;iBACP,CAAC,YACE,YACF,EACN;AACJ;;;;;"}

package/dist/index.css

@@ -2773,7 +2773,7 @@ input:checked[type=checkbox] + .p-label--bordered {
 }
 
 .bs-sm {
-  box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.1);
+  box-shadow: 0px 2px 20px 0px rgba(97, 96, 162, 0.06);
 }
 
 .bs-md {

package/dist/lib/scss/public/shadows.scss

@@ -1,5 +1,5 @@
 $bs-xs: 0px 4px 6px rgba(97, 96, 162, 0.01);
-$bs-sm: 0px 2px 28px rgba(97, 96, 162, 0.1);
+$bs-sm: 0px 2px 20px 0px rgba(97, 96, 162, 0.06);
 $bs-md: 0px 2px 28px rgba(97, 96, 162, 0.12);
 $bs-l: 0px 2px 28px rgba(97, 96, 162, 0.15);
 

package/package.json

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

package/src/index.tsx

@@ -36,6 +36,7 @@ export {
   InformationBox,
   Badge,
   images,
+  illustrations,
   Spinner,
   Toggle,
   Toaster,
@@ -46,6 +47,7 @@ export * from './lib/components/icon';
 
 export type {
   DownloadStatus,
+  IllustrationKeys,
   FileType,
   MultiDropzoneProps,
   TableHeader,