@wise/art 0.0.1 → 0.0.3

package/dist/Temp.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Temp: () => JSX.Element;
+export default Temp;

package/dist/common.d.ts

@@ -1,7 +1,11 @@
 export declare enum Sizes {
     SMALL = "small",
     MEDIUM = "medium",
-    LARGE = "large"
+    LARGE = "large",
+    AUTO = "auto"
 }
-export declare type SizeType = 'large' | 'medium' | 'small';
+export declare type LargeSize = 'large';
+export declare type MediumSize = 'medium';
+export declare type SmallSize = 'small';
+export declare type AutoSize = 'auto';
 export declare type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';

package/dist/illustrations/Illustration.d.ts

@@ -1,12 +1,18 @@
 import React, { ImgHTMLAttributes } from 'react';
+import { LargeSize, MediumSize, SmallSize, AutoSize } from './../common';
 import { IllustrationNames } from './metadata';
-declare type ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className' | 'loading'>;
+declare type ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;
+export declare type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;
 export declare type Props = {
     name: IllustrationNames;
     alt: string;
+    size?: IllustrationSizes;
+    loading?: 'eager' | 'lazy';
 } & ImgProps;
 declare const Illustration: React.ForwardRefExoticComponent<{
     name: IllustrationNames;
     alt: string;
+    size?: IllustrationSizes | undefined;
+    loading?: "eager" | "lazy" | undefined;
 } & ImgProps & React.RefAttributes<HTMLImageElement>>;
 export default Illustration;

package/dist/illustrations/Illustration.stories.d.ts

@@ -1,18 +1,21 @@
 import React from 'react';
+import { Sizes } from '../common';
 import { Assets, IllustrationNames } from './metadata';
 declare const _default: {
     component: React.ForwardRefExoticComponent<{
         name: IllustrationNames;
         alt: string;
+        size?: import("./Illustration").IllustrationSizes | undefined;
+        loading?: "eager" | "lazy" | undefined;
     } & {
-        id?: string | undefined;
         className?: string | undefined;
-        loading?: "eager" | "lazy" | undefined;
+        id?: string | undefined;
     } & React.RefAttributes<HTMLImageElement>>;
     title: string;
 };
 export default _default;
-export declare const Individual: ({ name }: {
+export declare const Individual: ({ name, size }: {
     name?: Assets | undefined;
+    size?: Sizes | undefined;
 }) => JSX.Element;
 export declare const All: () => JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Illustration } from './illustrations';
+export { default as Temp } from './Temp';
 export { Assets } from './illustrations';
 export { Sizes } from './common';
 export type { IllustrationNames, IllustrationProps } from './illustrations';

package/dist/index.js

@@ -1,2 +1,2 @@
-var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var E,a=/*#__PURE__*/r(e),i=/*#__PURE__*/r(t);exports.Sizes=void 0,(E=exports.Sizes||(exports.Sizes={})).SMALL="small",E.MEDIUM="medium",E.LARGE="large";var s,l=t.forwardRef(function(e,t){var r=e.name,E=e.alt,s=e.loading,l=void 0===s?"lazy":s,n=exports.Sizes.SMALL,c=exports.Sizes.MEDIUM,I=exports.Sizes.LARGE;return r?/*#__PURE__*/i.default.createElement("picture",{id:e.id,className:a.default("wds-illustration","wds-illustration-"+r,e.className)},/*#__PURE__*/i.default.createElement("source",{media:"(max-width: 575px)",srcSet:o(r,n,"1x")+", "+o(r,n,"2x")+" 2x"}),/*#__PURE__*/i.default.createElement("source",{media:"(max-width: 991px)",srcSet:o(r,c,"1x")+", "+o(r,c,"2x")+" 2x"}),/*#__PURE__*/i.default.createElement("img",{ref:t,src:o(r,I,"1x"),alt:E,loading:l,srcSet:o(r,I,"2x")+" 2x"})):null});function o(e,t,r){return"illustrations/assets/"+e+"-"+t+"@"+r+".webp"}exports.Assets=void 0,(s=exports.Assets||(exports.Assets={})).BELL="bell",s.BRIEFCASE="briefcase",s.CALENDAR="calendar",s.CHECK_MARK="check-mark",s.CLOSED_WINDOW="closed-window",s.COIN_PILE="coin-pile",s.CONFETTI="confetti",s.CONSTRUCTION_FENCE="construction-fence",s.CONVERT="convert",s.COOKIE="cookie",s.DOCUMENTS="documents",s.DOOR="door",s.ELECTRIC_PLUG="electric-plug",s.EMAIL="email",s.EXCLAMATION_MARK="exclamation-mark",s.FLAG="flag",s.FLOWER="flower",s.GEAR="gear",s.GLOBE="globe",s.GRAPH="graph",s.HEART="heart",s.HOUSE="house",s.ID_CARD="id-card",s.INFINITE="infinite",s.INVITE_LETTER="invite-letter",s.JARS="jars",s.KEY="key",s.LIGHT_BULB="light-bulb",s.LOCK="lock",s.MAGNIFYING_GLASS="magnifying-glass",s.MAP="map",s.MEGAPHONE="megaphone",s.MULTI_CURRENCY="multi-currency",s.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",s.PALM_TREE="palm-tree",s.PHONES="phones",s.PIE_CHART="pie-chart",s.PLANE="plane",s.PUZZLE_PIECES="puzzle-pieces",s.QUESTION_MARK="question-mark",s.RECEIVE="receive",s.REMINDER_LETTER="reminder-letter",s.SAND_TIMER="sand-timer",s.SHOPPING_BAG="shopping-bag",s.SKIP_AUTHENTICATION="skip-authentication",s.SPEECH_BUBBLE="speech-bubble",s.TOOL="tool",s.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",s.WALLET="wallet",exports.Illustration=l;
+var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s,a=/*#__PURE__*/r(e),l=/*#__PURE__*/r(t);exports.Sizes=void 0,(s=exports.Sizes||(exports.Sizes={})).SMALL="small",s.MEDIUM="medium",s.LARGE="large",s.AUTO="auto";var i,E=t.forwardRef(function(e,t){var r=e.name,s=e.alt,i=e.loading,E=void 0===i?"lazy":i,o=e.size,c=void 0===o?exports.Sizes.AUTO:o,u=exports.Sizes.SMALL,d=exports.Sizes.MEDIUM,p=exports.Sizes.LARGE,A=c===exports.Sizes.AUTO;return r?/*#__PURE__*/l.default.createElement("picture",{id:e.id,className:a.default("wds-illustration","wds-illustration-"+r,e.className)},A?/*#__PURE__*/l.default.createElement(l.default.Fragment,null,/*#__PURE__*/l.default.createElement("source",{media:"(max-width: 575px)",srcSet:n(r,u,"1x")+", "+n(r,u,"2x")+" 2x"}),/*#__PURE__*/l.default.createElement("source",{media:"(max-width: 991px)",srcSet:n(r,d,"1x")+", "+n(r,d,"2x")+" 2x"})):null,/*#__PURE__*/l.default.createElement("img",{ref:t,alt:s,loading:E,src:n(r,A?p:c,"1x"),srcSet:n(r,A?p:c,"2x")+" 2x"})):null});function n(e,t,r){return"illustrations/assets/"+e+"-"+t+"@"+r+".webp"}exports.Assets=void 0,(i=exports.Assets||(exports.Assets={})).BELL="bell",i.BRIEFCASE="briefcase",i.CALENDAR="calendar",i.CHECK_MARK="check-mark",i.CLOSED_WINDOW="closed-window",i.COIN_PILE="coin-pile",i.CONFETTI="confetti",i.CONSTRUCTION_FENCE="construction-fence",i.CONVERT="convert",i.COOKIE="cookie",i.DOCUMENTS="documents",i.DOOR="door",i.ELECTRIC_PLUG="electric-plug",i.EMAIL="email",i.EXCLAMATION_MARK="exclamation-mark",i.FLAG="flag",i.FLOWER="flower",i.GEAR="gear",i.GLOBE="globe",i.GRAPH="graph",i.HEART="heart",i.HOUSE="house",i.ID_CARD="id-card",i.INFINITE="infinite",i.INVITE_LETTER="invite-letter",i.JARS="jars",i.KEY="key",i.LIGHT_BULB="light-bulb",i.LOCK="lock",i.MAGNIFYING_GLASS="magnifying-glass",i.MAP="map",i.MEGAPHONE="megaphone",i.MULTI_CURRENCY="multi-currency",i.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",i.PALM_TREE="palm-tree",i.PHONES="phones",i.PIE_CHART="pie-chart",i.PLANE="plane",i.PUZZLE_PIECES="puzzle-pieces",i.QUESTION_MARK="question-mark",i.RECEIVE="receive",i.REMINDER_LETTER="reminder-letter",i.SAND_TIMER="sand-timer",i.SHOPPING_BAG="shopping-bag",i.SKIP_AUTHENTICATION="skip-authentication",i.SPEECH_BUBBLE="speech-bubble",i.TOOL="tool",i.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",i.WALLET="wallet",exports.Illustration=E,exports.Temp=function(){/*#__PURE__*/return l.default.createElement("img",{className:"wds-temp",src:"illustrations/assets/bell-large@1x.webp",alt:"test"})};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n}\n\nexport type SizeType = 'large' | 'medium' | 'small';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { SizeType, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className' | 'loading'>;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {/* Mobile screens */}\n        <source\n          media=\"(max-width: 575px)\"\n          srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n        />\n\n        {/* Tablets */}\n        <source\n          media=\"(max-width: 991px)\"\n          srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n        />\n\n        <img\n          ref={ref}\n          src={defineSrc(name, LARGE, '1x')}\n          alt={alt}\n          loading={loading}\n          srcSet={`${defineSrc(name, LARGE, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: SizeType, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","id","name","alt","loading","_ref$loading","SMALL","MEDIUM","LARGE","React","createElement","className","classNames","_ref","media","srcSet","defineSrc","src","illustration","size","descriptor"],"mappings":"2HAAYA,0CAIXA,QAAAA,WAAAA,GAJWA,EAAAA,gBAAAA,QAAAA,MAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QCYIC,ICRMC,EDQMD,EAAGE,EAAAA,WACnB,SAAwDC,EAAAA,GAArDC,IAAIC,EAAAA,EAAAA,KAAMC,EAAAA,EAAAA,QAAKC,QAAAA,OAAU,IAAAC,EAAA,SAClBC,EAAyBV,QAAAA,MAAzBU,MAAOC,EAAkBX,QAAKA,MAAvBW,OAAQC,EAAUZ,QAAKA,MAAfY,MACvB,sBACEC,EAAAA,QAAAC,cAAA,UAAA,CACET,KAJHA,GAKGU,UAAWC,EAAU,QAAC,mBAAkB,oBAAsBV,EALvBW,EAATF,yBAQ9BF,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUd,EAAMI,EAAO,WAAUU,EAAUd,EAAMI,EAAO,2BAIrEG,EAAAA,gCACEK,MAAM,qBACNC,OAAWC,EAAUd,EAAMK,EAAQ,MAAK,KAAKS,EAAUd,EAAMK,EAAQ,MAAW,qBAGlFE,EAAAA,QACEC,cAAA,MAAA,CAAAV,IAAKA,EACLiB,IAAKD,EAAUd,EAAMM,EAAO,MAC5BL,IAAKA,EACLC,QAASA,EACTW,OAAWC,EAAUd,EAAMM,EAAO,MAAK,SAGzC,IACN,GAGF,WAAmBU,EAAsBC,EAAgBC,GACvD,MAAA,wBAA+BF,EAAgBC,IAAAA,MAAQC,EAAU,OACnE,CCQCtB,QAAAA,YAAAA,GAlDWA,EAAAA,QAAMA,SAANA,eAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA"}
+{"version":3,"file":"index.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/Temp.tsx"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n  size?: IllustrationSizes;\n  loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    const autoSize: boolean = size === Sizes.AUTO;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {autoSize ? (\n          <>\n            {/* Mobile Screens */}\n            <source\n              media=\"(max-width: 575px)\"\n              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n            />\n            {/* Tablets */}\n            <source\n              media=\"(max-width: 991px)\"\n              srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n            />\n          </>\n        ) : null}\n\n        <img\n          ref={ref}\n          alt={alt}\n          loading={loading}\n          src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n          srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n","import React from 'react';\n\nconst Temp = () => {\n  return <img className=\"wds-temp\" src=\"illustrations/assets/bell-large@1x.webp\" alt=\"test\" />;\n};\n\nexport default Temp;\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","classNames","Fragment","media","srcSet","defineSrc","src","illustration","descriptor"],"mappings":"2HAAYA,gEAAAA,EAAAA,QAAKA,QAALA,cAKX,CAAA,IAJC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,OCeIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,cAAMY,KAC1DC,IAAiCb,QAAAA,MAAzBc,MAAOC,EAAkBf,QAAKA,MAAvBe,OAAQC,EAAUhB,QAAKA,MAAfgB,MACTC,EAAYN,IAASX,QAAKA,MAACY,KACzC,OAAOP,eACLa,UACEC,cAAA,UAAA,CAAAC,GALDZ,EAAFY,GAMGV,UAAWW,EAAAA,QAAW,mBAAwChB,oBAAAA,EANhCK,EAAAA,YAQ7BO,eACCC,EAAA,QAAAC,cAAAD,EAAA,QAAAI,SAAA,kBAEEJ,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMS,EAAO,MAAUW,KAAAA,EAAUpB,EAAMS,EAAO,2BAGrEI,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMU,EAAQ,MAAUU,KAAAA,EAAUpB,EAAMU,EAAQ,MAAK,SAG5E,kBAEJG,EACE,QAAAC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLG,QAASA,EACTiB,IAAKD,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAC9Ca,OAAWC,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASc,EAAUE,EAAsBhB,EAAyBiB,GAChE,MAAA,wBAA+BD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OACnE,CCAC1B,QAAAA,YAAAA,GAlDWA,EAAAA,QAAMA,SAANA,eAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,6CCtDW,wBACX,OAAOgB,EAAK,QAAAC,cAAA,MAAA,CAAAT,UAAU,WAAWgB,IAAI,0CAA0CpB,IAAI,QACrF"}

package/dist/index.modern.mjs

@@ -1,2 +1,2 @@
-import e from"classnames";import E,{forwardRef as t}from"react";var a;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(a||(a={}));const i=t(({id:t,name:i,alt:n,loading:l="lazy",className:c},o)=>{const{SMALL:s,MEDIUM:I,LARGE:L}=a;return i?/*#__PURE__*/E.createElement("picture",{id:t,className:e("wds-illustration",`wds-illustration-${i}`,c)},/*#__PURE__*/E.createElement("source",{media:"(max-width: 575px)",srcSet:`${r(i,s,"1x")}, ${r(i,s,"2x")} 2x`}),/*#__PURE__*/E.createElement("source",{media:"(max-width: 991px)",srcSet:`${r(i,I,"1x")}, ${r(i,I,"2x")} 2x`}),/*#__PURE__*/E.createElement("img",{ref:o,src:r(i,L,"1x"),alt:n,loading:l,srcSet:`${r(i,L,"2x")} 2x`})):null});function r(e,E,t){return`illustrations/assets/${e}-${E}@${t}.webp`}var n;!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(n||(n={}));export{n as Assets,i as Illustration,a as Sizes};
+import e from"classnames";import t,{forwardRef as E}from"react";var a;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large",e.AUTO="auto"}(a||(a={}));const l=E(({id:E,name:l,alt:i,loading:n="lazy",className:s,size:c=a.AUTO},o)=>{const{SMALL:m,MEDIUM:I,LARGE:T}=a,A=c===a.AUTO;return l?/*#__PURE__*/t.createElement("picture",{id:E,className:e("wds-illustration",`wds-illustration-${l}`,s)},A?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{media:"(max-width: 575px)",srcSet:`${r(l,m,"1x")}, ${r(l,m,"2x")} 2x`}),/*#__PURE__*/t.createElement("source",{media:"(max-width: 991px)",srcSet:`${r(l,I,"1x")}, ${r(l,I,"2x")} 2x`})):null,/*#__PURE__*/t.createElement("img",{ref:o,alt:i,loading:n,src:r(l,A?T:c,"1x"),srcSet:`${r(l,A?T:c,"2x")} 2x`})):null});function r(e,t,E){return`illustrations/assets/${e}-${t}@${E}.webp`}var i;!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(i||(i={}));const n=()=>/*#__PURE__*/t.createElement("img",{className:"wds-temp",src:"illustrations/assets/bell-large@1x.webp",alt:"test"});export{i as Assets,l as Illustration,a as Sizes,n as Temp};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.mjs","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n}\n\nexport type SizeType = 'large' | 'medium' | 'small';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { SizeType, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className' | 'loading'>;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {/* Mobile screens */}\n        <source\n          media=\"(max-width: 575px)\"\n          srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n        />\n\n        {/* Tablets */}\n        <source\n          media=\"(max-width: 991px)\"\n          srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n        />\n\n        <img\n          ref={ref}\n          src={defineSrc(name, LARGE, '1x')}\n          alt={alt}\n          loading={loading}\n          srcSet={`${defineSrc(name, LARGE, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: SizeType, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n"],"names":["Sizes","Illustration","forwardRef","id","name","alt","loading","className","ref","SMALL","MEDIUM","LARGE","React","createElement","classNames","media","srcSet","defineSrc","src","illustration","size","descriptor","Assets"],"mappings":"gEAAYA,IAIXA,GAJD,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,ICWKC,MAAYA,EAAGC,EACnB,EAAGC,KAAIC,OAAMC,MAAKC,QAAAA,EAAU,OAAQC,aAAoBC,KACtD,MAAMC,MAAEA,EAAKC,OAAEA,EAAMC,MAAEA,GAAUX,EACjC,sBACEY,EAAAC,cAAA,UAAA,CACEV,GAAIA,EACJI,UAAWO,EAAW,mBAAoB,oBAAoBV,IAAQG,iBAGtEK,EAAAC,cAAA,SAAA,CACEE,MAAM,qBACNC,OAAQ,GAAGC,EAAUb,EAAMK,EAAO,UAAUQ,EAAUb,EAAMK,EAAO,0BAIrEG,EAAAC,cAAA,SAAA,CACEE,MAAM,qBACNC,OAAQ,GAAGC,EAAUb,EAAMM,EAAQ,UAAUO,EAAUb,EAAMM,EAAQ,0BAGvEE,uBACEJ,IAAKA,EACLU,IAAKD,EAAUb,EAAMO,EAAO,MAC5BN,IAAKA,EACLC,QAASA,EACTU,UAAWC,EAAUb,EAAMO,EAAO,cAGpC,OAIR,SAAkBM,EAACE,EAAsBC,EAAgBC,GACvD,8BAA+BF,KAAgBC,KAAQC,QACzD,CC1CYC,IAkDXA,GAlDD,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA"}
+{"version":3,"file":"index.modern.mjs","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/Temp.tsx"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n  size?: IllustrationSizes;\n  loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    const autoSize: boolean = size === Sizes.AUTO;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {autoSize ? (\n          <>\n            {/* Mobile Screens */}\n            <source\n              media=\"(max-width: 575px)\"\n              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n            />\n            {/* Tablets */}\n            <source\n              media=\"(max-width: 991px)\"\n              srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n            />\n          </>\n        ) : null}\n\n        <img\n          ref={ref}\n          alt={alt}\n          loading={loading}\n          src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n          srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n","import React from 'react';\n\nconst Temp = () => {\n  return <img className=\"wds-temp\" src=\"illustrations/assets/bell-large@1x.webp\" alt=\"test\" />;\n};\n\nexport default Temp;\n"],"names":["Sizes","Illustration","forwardRef","id","name","alt","loading","className","size","AUTO","ref","SMALL","MEDIUM","LARGE","React","createElement","classNames","autoSize","Fragment","media","srcSet","defineSrc","src","illustration","descriptor","Assets","Temp"],"mappings":"gEAAYA,OAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,ICcKC,MAAYA,EAAGC,EACnB,EAAGC,KAAIC,OAAMC,MAAKC,QAAAA,EAAU,OAAQC,YAAWC,KAAAA,EAAOR,EAAMS,MAAeC,KACzE,MAAMC,MAAEA,EAAKC,OAAEA,EAAMC,MAAEA,GAAUb,IACPQ,IAASR,EAAMS,KACzC,OAAOL,eACLU,EAAAC,cAAA,UAAA,CACEZ,GAAIA,EACJI,UAAWS,EAAW,mBAAoB,oBAAoBZ,IAAQG,IAErEU,eACCH,EAEEC,cAAAD,EAAAI,SAAA,kBAAAJ,EAAAC,cAAA,SAAA,CACEI,MAAM,qBACNC,OAAQ,GAAGC,EAAUjB,EAAMO,EAAO,UAAUU,EAAUjB,EAAMO,EAAO,0BAGrEG,EACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAQ,GAAGC,EAAUjB,EAAMQ,EAAQ,UAAUS,EAAUjB,EAAMQ,EAAQ,cAGvE,kBAEJE,EAAAC,cAAA,MAAA,CACEL,IAAKA,EACLL,IAAKA,EACLC,QAASA,EACTgB,IAAKD,EAAUjB,EAAMa,EAAWJ,EAAQL,EAAM,MAC9CY,OAAQ,GAAGC,EAAUjB,EAAMa,EAAWJ,EAAQL,EAAM,cAGtD,OAIR,SAAkBa,EAACE,EAAsBf,EAAyBgB,GAChE,8BAA+BD,KAAgBf,KAAQgB,QACzD,CClDYC,IAkDXA,GAlDD,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA,ICvDKC,MAAIA,EAAG,iBACJZ,EAAAC,cAAA,MAAA,CAAKR,UAAU,WAAWe,IAAI,0CAA0CjB,IAAI"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import e from"classnames";import E,{forwardRef as t}from"react";var i;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(i||(i={}));var a,r=t(function(t,a){var r=t.name,l=t.alt,o=t.loading,c=void 0===o?"lazy":o,s=i.SMALL,I=i.MEDIUM,L=i.LARGE;return r?/*#__PURE__*/E.createElement("picture",{id:t.id,className:e("wds-illustration","wds-illustration-"+r,t.className)},/*#__PURE__*/E.createElement("source",{media:"(max-width: 575px)",srcSet:n(r,s,"1x")+", "+n(r,s,"2x")+" 2x"}),/*#__PURE__*/E.createElement("source",{media:"(max-width: 991px)",srcSet:n(r,I,"1x")+", "+n(r,I,"2x")+" 2x"}),/*#__PURE__*/E.createElement("img",{ref:a,src:n(r,L,"1x"),alt:l,loading:c,srcSet:n(r,L,"2x")+" 2x"})):null});function n(e,E,t){return"illustrations/assets/"+e+"-"+E+"@"+t+".webp"}!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(a||(a={}));export{a as Assets,r as Illustration,i as Sizes};
+import e from"classnames";import t,{forwardRef as E}from"react";var a;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large",e.AUTO="auto"}(a||(a={}));var r,i=E(function(E,r){var i=E.name,n=E.alt,s=E.loading,c=void 0===s?"lazy":s,o=E.size,m=void 0===o?a.AUTO:o,I=a.SMALL,T=a.MEDIUM,A=a.LARGE,L=m===a.AUTO;return i?/*#__PURE__*/t.createElement("picture",{id:E.id,className:e("wds-illustration","wds-illustration-"+i,E.className)},L?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{media:"(max-width: 575px)",srcSet:l(i,I,"1x")+", "+l(i,I,"2x")+" 2x"}),/*#__PURE__*/t.createElement("source",{media:"(max-width: 991px)",srcSet:l(i,T,"1x")+", "+l(i,T,"2x")+" 2x"})):null,/*#__PURE__*/t.createElement("img",{ref:r,alt:n,loading:c,src:l(i,L?A:m,"1x"),srcSet:l(i,L?A:m,"2x")+" 2x"})):null});function l(e,t,E){return"illustrations/assets/"+e+"-"+t+"@"+E+".webp"}!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(r||(r={}));var n=function(){/*#__PURE__*/return t.createElement("img",{className:"wds-temp",src:"illustrations/assets/bell-large@1x.webp",alt:"test"})};export{r as Assets,i as Illustration,a as Sizes,n as Temp};
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n}\n\nexport type SizeType = 'large' | 'medium' | 'small';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { SizeType, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className' | 'loading'>;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {/* Mobile screens */}\n        <source\n          media=\"(max-width: 575px)\"\n          srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n        />\n\n        {/* Tablets */}\n        <source\n          media=\"(max-width: 991px)\"\n          srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n        />\n\n        <img\n          ref={ref}\n          src={defineSrc(name, LARGE, '1x')}\n          alt={alt}\n          loading={loading}\n          srcSet={`${defineSrc(name, LARGE, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: SizeType, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","id","name","alt","loading","_ref$loading","SMALL","MEDIUM","LARGE","React","createElement","className","classNames","_ref","media","srcSet","defineSrc","src","illustration","size","descriptor"],"mappings":"gEAAYA,IAIXA,GAJD,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,ICWKC,IC0CLC,ED1CiBD,EAAGE,EACnB,SAAwDC,EAAAA,GAArDC,IAAIC,EAAAA,EAAAA,KAAMC,EAAAA,EAAAA,QAAKC,QAAAA,OAAU,IAAAC,EAAA,SAClBC,EAAyBV,EAAzBU,MAAOC,EAAkBX,EAAlBW,OAAQC,EAAUZ,EAAVY,MACvB,sBACEC,EAAAC,cAAA,UAAA,CACET,KAJHA,GAKGU,UAAWC,EAAW,mBAAkB,oBAAsBV,EALvBW,EAATF,yBAQ9BF,EACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUd,EAAMI,EAAO,WAAUU,EAAUd,EAAMI,EAAO,2BAIrEG,0BACEK,MAAM,qBACNC,OAAWC,EAAUd,EAAMK,EAAQ,MAAK,KAAKS,EAAUd,EAAMK,EAAQ,MAAW,qBAGlFE,EACEC,cAAA,MAAA,CAAAV,IAAKA,EACLiB,IAAKD,EAAUd,EAAMM,EAAO,MAC5BL,IAAKA,EACLC,QAASA,EACTW,OAAWC,EAAUd,EAAMM,EAAO,MAAK,SAGzC,IACN,GAGF,WAAmBU,EAAsBC,EAAgBC,GACvD,MAAA,wBAA+BF,EAAgBC,IAAAA,MAAQC,EAAU,OACnE,EC1CA,SAAYtB,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA"}
+{"version":3,"file":"index.module.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/Temp.tsx"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n  size?: IllustrationSizes;\n  loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    const autoSize: boolean = size === Sizes.AUTO;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {autoSize ? (\n          <>\n            {/* Mobile Screens */}\n            <source\n              media=\"(max-width: 575px)\"\n              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n            />\n            {/* Tablets */}\n            <source\n              media=\"(max-width: 991px)\"\n              srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n            />\n          </>\n        ) : null}\n\n        <img\n          ref={ref}\n          alt={alt}\n          loading={loading}\n          src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n          srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n","import React from 'react';\n\nconst Temp = () => {\n  return <img className=\"wds-temp\" src=\"illustrations/assets/bell-large@1x.webp\" alt=\"test\" />;\n};\n\nexport default Temp;\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","classNames","Fragment","media","srcSet","defineSrc","src","illustration","descriptor","Temp"],"mappings":"gEAAYA,OAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,ICcKC,ICsCLC,EDtCiBD,EAAGE,EACnB,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,EAAMY,KAC1DC,IAAiCb,EAAzBc,MAAOC,EAAkBf,EAAlBe,OAAQC,EAAUhB,EAAVgB,MACTC,EAAYN,IAASX,EAAMY,KACzC,OAAOP,eACLa,EACEC,cAAA,UAAA,CAAAC,GALDZ,EAAFY,GAMGV,UAAWW,EAAW,mBAAwChB,oBAAAA,EANhCK,EAAAA,YAQ7BO,eACCC,EAAAC,cAAAD,EAAAI,SAAA,kBAEEJ,EACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMS,EAAO,MAAUW,KAAAA,EAAUpB,EAAMS,EAAO,2BAGrEI,EACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMU,EAAQ,MAAUU,KAAAA,EAAUpB,EAAMU,EAAQ,MAAK,SAG5E,kBAEJG,EACEC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLG,QAASA,EACTiB,IAAKD,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAC9Ca,OAAWC,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASc,EAAUE,EAAsBhB,EAAyBiB,GAChE,MAAA,wBAA+BD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OACnE,EClDA,SAAY1B,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA,ICvDK2B,IAAAA,EAAO,wBACX,OAAOX,EAAKC,cAAA,MAAA,CAAAT,UAAU,WAAWgB,IAAI,0CAA0CpB,IAAI,QACrF"}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("classnames"),require("react")):"function"==typeof define&&define.amd?define(["exports","classnames","react"],t):t((e||self).art={},e.classnames,e.react)}(this,function(e,t,i){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var E,l=/*#__PURE__*/a(t),n=/*#__PURE__*/a(i);e.Sizes=void 0,(E=e.Sizes||(e.Sizes={})).SMALL="small",E.MEDIUM="medium",E.LARGE="large";var s,r=i.forwardRef(function(t,i){var a=t.name,E=t.alt,s=t.loading,r=void 0===s?"lazy":s,c=e.Sizes.SMALL,d=e.Sizes.MEDIUM,u=e.Sizes.LARGE;return a?/*#__PURE__*/n.default.createElement("picture",{id:t.id,className:l.default("wds-illustration","wds-illustration-"+a,t.className)},/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 575px)",srcSet:o(a,c,"1x")+", "+o(a,c,"2x")+" 2x"}),/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 991px)",srcSet:o(a,d,"1x")+", "+o(a,d,"2x")+" 2x"}),/*#__PURE__*/n.default.createElement("img",{ref:i,src:o(a,u,"1x"),alt:E,loading:r,srcSet:o(a,u,"2x")+" 2x"})):null});function o(e,t,i){return"illustrations/assets/"+e+"-"+t+"@"+i+".webp"}e.Assets=void 0,(s=e.Assets||(e.Assets={})).BELL="bell",s.BRIEFCASE="briefcase",s.CALENDAR="calendar",s.CHECK_MARK="check-mark",s.CLOSED_WINDOW="closed-window",s.COIN_PILE="coin-pile",s.CONFETTI="confetti",s.CONSTRUCTION_FENCE="construction-fence",s.CONVERT="convert",s.COOKIE="cookie",s.DOCUMENTS="documents",s.DOOR="door",s.ELECTRIC_PLUG="electric-plug",s.EMAIL="email",s.EXCLAMATION_MARK="exclamation-mark",s.FLAG="flag",s.FLOWER="flower",s.GEAR="gear",s.GLOBE="globe",s.GRAPH="graph",s.HEART="heart",s.HOUSE="house",s.ID_CARD="id-card",s.INFINITE="infinite",s.INVITE_LETTER="invite-letter",s.JARS="jars",s.KEY="key",s.LIGHT_BULB="light-bulb",s.LOCK="lock",s.MAGNIFYING_GLASS="magnifying-glass",s.MAP="map",s.MEGAPHONE="megaphone",s.MULTI_CURRENCY="multi-currency",s.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",s.PALM_TREE="palm-tree",s.PHONES="phones",s.PIE_CHART="pie-chart",s.PLANE="plane",s.PUZZLE_PIECES="puzzle-pieces",s.QUESTION_MARK="question-mark",s.RECEIVE="receive",s.REMINDER_LETTER="reminder-letter",s.SAND_TIMER="sand-timer",s.SHOPPING_BAG="shopping-bag",s.SKIP_AUTHENTICATION="skip-authentication",s.SPEECH_BUBBLE="speech-bubble",s.TOOL="tool",s.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",s.WALLET="wallet",e.Illustration=r});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("classnames"),require("react")):"function"==typeof define&&define.amd?define(["exports","classnames","react"],t):t((e||self).art={},e.classnames,e.react)}(this,function(e,t,a){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l,s=/*#__PURE__*/i(t),n=/*#__PURE__*/i(a);e.Sizes=void 0,(l=e.Sizes||(e.Sizes={})).SMALL="small",l.MEDIUM="medium",l.LARGE="large",l.AUTO="auto";var r,E=a.forwardRef(function(t,a){var i=t.name,l=t.alt,r=t.loading,E=void 0===r?"lazy":r,c=t.size,u=void 0===c?e.Sizes.AUTO:c,d=e.Sizes.SMALL,m=e.Sizes.MEDIUM,T=e.Sizes.LARGE,f=u===e.Sizes.AUTO;return i?/*#__PURE__*/n.default.createElement("picture",{id:t.id,className:s.default("wds-illustration","wds-illustration-"+i,t.className)},f?/*#__PURE__*/n.default.createElement(n.default.Fragment,null,/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 575px)",srcSet:o(i,d,"1x")+", "+o(i,d,"2x")+" 2x"}),/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 991px)",srcSet:o(i,m,"1x")+", "+o(i,m,"2x")+" 2x"})):null,/*#__PURE__*/n.default.createElement("img",{ref:a,alt:l,loading:E,src:o(i,f?T:u,"1x"),srcSet:o(i,f?T:u,"2x")+" 2x"})):null});function o(e,t,a){return"illustrations/assets/"+e+"-"+t+"@"+a+".webp"}e.Assets=void 0,(r=e.Assets||(e.Assets={})).BELL="bell",r.BRIEFCASE="briefcase",r.CALENDAR="calendar",r.CHECK_MARK="check-mark",r.CLOSED_WINDOW="closed-window",r.COIN_PILE="coin-pile",r.CONFETTI="confetti",r.CONSTRUCTION_FENCE="construction-fence",r.CONVERT="convert",r.COOKIE="cookie",r.DOCUMENTS="documents",r.DOOR="door",r.ELECTRIC_PLUG="electric-plug",r.EMAIL="email",r.EXCLAMATION_MARK="exclamation-mark",r.FLAG="flag",r.FLOWER="flower",r.GEAR="gear",r.GLOBE="globe",r.GRAPH="graph",r.HEART="heart",r.HOUSE="house",r.ID_CARD="id-card",r.INFINITE="infinite",r.INVITE_LETTER="invite-letter",r.JARS="jars",r.KEY="key",r.LIGHT_BULB="light-bulb",r.LOCK="lock",r.MAGNIFYING_GLASS="magnifying-glass",r.MAP="map",r.MEGAPHONE="megaphone",r.MULTI_CURRENCY="multi-currency",r.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",r.PALM_TREE="palm-tree",r.PHONES="phones",r.PIE_CHART="pie-chart",r.PLANE="plane",r.PUZZLE_PIECES="puzzle-pieces",r.QUESTION_MARK="question-mark",r.RECEIVE="receive",r.REMINDER_LETTER="reminder-letter",r.SAND_TIMER="sand-timer",r.SHOPPING_BAG="shopping-bag",r.SKIP_AUTHENTICATION="skip-authentication",r.SPEECH_BUBBLE="speech-bubble",r.TOOL="tool",r.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",r.WALLET="wallet",e.Illustration=E,e.Temp=function(){/*#__PURE__*/return n.default.createElement("img",{className:"wds-temp",src:"illustrations/assets/bell-large@1x.webp",alt:"test"})}});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n}\n\nexport type SizeType = 'large' | 'medium' | 'small';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { SizeType, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className' | 'loading'>;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {/* Mobile screens */}\n        <source\n          media=\"(max-width: 575px)\"\n          srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n        />\n\n        {/* Tablets */}\n        <source\n          media=\"(max-width: 991px)\"\n          srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n        />\n\n        <img\n          ref={ref}\n          src={defineSrc(name, LARGE, '1x')}\n          alt={alt}\n          loading={loading}\n          srcSet={`${defineSrc(name, LARGE, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: SizeType, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n"],"names":["Sizes","Assets","Illustration","forwardRef","ref","id","name","alt","loading","_ref$loading","SMALL","MEDIUM","LARGE","React","createElement","className","classNames","_ref","media","srcSet","defineSrc","src","illustration","size","descriptor"],"mappings":"8XAAYA,0CAIXA,EAAAA,WAAAA,GAJWA,EAAAA,UAAAA,EAAAA,MAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QCYgB,ICRNC,EDQMC,EAAGC,EAAAA,WACnB,SAAwDC,EAAAA,GAArDC,IAAIC,EAAAA,EAAAA,KAAMC,EAAAA,EAAAA,QAAKC,QAAAA,OAAU,IAAAC,EAAA,SAClBC,EAAyBV,EAAAA,MAAzBU,MAAOC,EAAkBX,EAAKA,MAAvBW,OAAQC,EAAUZ,EAAKA,MAAfY,MACvB,sBACEC,EAAAA,QAAAC,cAAA,UAAA,CACET,KAJHA,GAKGU,UAAWC,EAAU,QAAC,mBAAkB,oBAAsBV,EALvBW,EAATF,yBAQ9BF,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUd,EAAMI,EAAO,WAAUU,EAAUd,EAAMI,EAAO,2BAIrEG,EAAAA,gCACEK,MAAM,qBACNC,OAAWC,EAAUd,EAAMK,EAAQ,MAAK,KAAKS,EAAUd,EAAMK,EAAQ,MAAW,qBAGlFE,EAAAA,QACEC,cAAA,MAAA,CAAAV,IAAKA,EACLiB,IAAKD,EAAUd,EAAMM,EAAO,MAC5BL,IAAKA,EACLC,QAASA,EACTW,OAAWC,EAAUd,EAAMM,EAAO,MAAK,SAGzC,IACN,GAGF,WAAmBU,EAAsBC,EAAgBC,GACvD,MAAA,wBAA+BF,EAAgBC,IAAAA,MAAQC,EAAU,OACnE,CCQCvB,EAAAA,YAAAA,GAlDWA,EAAAA,EAAMA,SAANA,SAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA"}
+{"version":3,"file":"index.umd.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/Temp.tsx"],"sourcesContent":["export enum Sizes {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n  name: IllustrationNames;\n  alt: string;\n  size?: IllustrationSizes;\n  loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n  ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n    const { SMALL, MEDIUM, LARGE } = Sizes;\n    const autoSize: boolean = size === Sizes.AUTO;\n    return name ? (\n      <picture\n        id={id}\n        className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n      >\n        {autoSize ? (\n          <>\n            {/* Mobile Screens */}\n            <source\n              media=\"(max-width: 575px)\"\n              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n            />\n            {/* Tablets */}\n            <source\n              media=\"(max-width: 991px)\"\n              srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n            />\n          </>\n        ) : null}\n\n        <img\n          ref={ref}\n          alt={alt}\n          loading={loading}\n          src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n          srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n        />\n      </picture>\n    ) : null;\n  },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n  return `illustrations/assets/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/**\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n  BELL = 'bell',\n  BRIEFCASE = 'briefcase',\n  CALENDAR = 'calendar',\n  CHECK_MARK = 'check-mark',\n  CLOSED_WINDOW = 'closed-window',\n  COIN_PILE = 'coin-pile',\n  CONFETTI = 'confetti',\n  CONSTRUCTION_FENCE = 'construction-fence',\n  CONVERT = 'convert',\n  COOKIE = 'cookie',\n  DOCUMENTS = 'documents',\n  DOOR = 'door',\n  ELECTRIC_PLUG = 'electric-plug',\n  EMAIL = 'email',\n  EXCLAMATION_MARK = 'exclamation-mark',\n  FLAG = 'flag',\n  FLOWER = 'flower',\n  GEAR = 'gear',\n  GLOBE = 'globe',\n  GRAPH = 'graph',\n  HEART = 'heart',\n  HOUSE = 'house',\n  ID_CARD = 'id-card',\n  INFINITE = 'infinite',\n  INVITE_LETTER = 'invite-letter',\n  JARS = 'jars',\n  KEY = 'key',\n  LIGHT_BULB = 'light-bulb',\n  LOCK = 'lock',\n  MAGNIFYING_GLASS = 'magnifying-glass',\n  MAP = 'map',\n  MEGAPHONE = 'megaphone',\n  MULTI_CURRENCY = 'multi-currency',\n  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n  PALM_TREE = 'palm-tree',\n  PHONES = 'phones',\n  PIE_CHART = 'pie-chart',\n  PLANE = 'plane',\n  PUZZLE_PIECES = 'puzzle-pieces',\n  QUESTION_MARK = 'question-mark',\n  RECEIVE = 'receive',\n  REMINDER_LETTER = 'reminder-letter',\n  SAND_TIMER = 'sand-timer',\n  SHOPPING_BAG = 'shopping-bag',\n  SKIP_AUTHENTICATION = 'skip-authentication',\n  SPEECH_BUBBLE = 'speech-bubble',\n  TOOL = 'tool',\n  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n  WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n  | 'bell'\n  | 'briefcase'\n  | 'calendar'\n  | 'check-mark'\n  | 'closed-window'\n  | 'coin-pile'\n  | 'confetti'\n  | 'construction-fence'\n  | 'convert'\n  | 'cookie'\n  | 'documents'\n  | 'door'\n  | 'electric-plug'\n  | 'email'\n  | 'exclamation-mark'\n  | 'flag'\n  | 'flower'\n  | 'gear'\n  | 'globe'\n  | 'graph'\n  | 'heart'\n  | 'house'\n  | 'id-card'\n  | 'infinite'\n  | 'invite-letter'\n  | 'jars'\n  | 'key'\n  | 'light-bulb'\n  | 'lock'\n  | 'magnifying-glass'\n  | 'map'\n  | 'megaphone'\n  | 'multi-currency'\n  | 'one-invite-letter-opened'\n  | 'palm-tree'\n  | 'phones'\n  | 'pie-chart'\n  | 'plane'\n  | 'puzzle-pieces'\n  | 'question-mark'\n  | 'receive'\n  | 'reminder-letter'\n  | 'sand-timer'\n  | 'shopping-bag'\n  | 'skip-authentication'\n  | 'speech-bubble'\n  | 'tool'\n  | 'two-invite-letters-opened'\n  | 'wallet';\n","import React from 'react';\n\nconst Temp = () => {\n  return <img className=\"wds-temp\" src=\"illustrations/assets/bell-large@1x.webp\" alt=\"test\" />;\n};\n\nexport default Temp;\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","classNames","Fragment","media","srcSet","defineSrc","src","illustration","descriptor"],"mappings":"8XAAYA,0DAAAA,EAAAA,EAAKA,QAALA,QAKX,CAAA,IAJC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,OCeIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,QAAMY,KAC1DC,IAAiCb,EAAAA,MAAzBc,MAAOC,EAAkBf,EAAKA,MAAvBe,OAAQC,EAAUhB,EAAKA,MAAfgB,MACTC,EAAYN,IAASX,EAAKA,MAACY,KACzC,OAAOP,eACLa,UACEC,cAAA,UAAA,CAAAC,GALDZ,EAAFY,GAMGV,UAAWW,EAAAA,QAAW,mBAAwChB,oBAAAA,EANhCK,EAAAA,YAQ7BO,eACCC,EAAA,QAAAC,cAAAD,EAAA,QAAAI,SAAA,kBAEEJ,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMS,EAAO,MAAUW,KAAAA,EAAUpB,EAAMS,EAAO,2BAGrEI,EAAAA,QACEC,cAAA,SAAA,CAAAI,MAAM,qBACNC,OAAWC,EAAUpB,EAAMU,EAAQ,MAAUU,KAAAA,EAAUpB,EAAMU,EAAQ,MAAK,SAG5E,kBAEJG,EACE,QAAAC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLG,QAASA,EACTiB,IAAKD,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAC9Ca,OAAWC,EAAUpB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASc,EAAUE,EAAsBhB,EAAyBiB,GAChE,MAAA,wBAA+BD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OACnE,CCAC1B,EAAAA,YAAAA,GAlDWA,EAAAA,EAAMA,SAANA,SAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,iCCtDW,wBACX,OAAOgB,EAAK,QAAAC,cAAA,MAAA,CAAAT,UAAU,WAAWgB,IAAI,0CAA0CpB,IAAI,QACrF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -61,8 +61,8 @@
     "microbundle": "^0.15.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "react": ">=17",
+    "react-dom": ">=17",
     "classnames": "^2.3"
   },
   "prettier": "@transferwise/eslint-config/.prettierrc.js"