@wise/art 1.0.0-beta.1 → 1.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,11 @@ This package relies on following peer dependencies:
|
|
|
26
26
|
|
|
27
27
|
Illustrations works via `Illustration` React component. The component implements [Responsive Images](https://web.dev/responsive-images/) concept so you don't need bother about different image sizes for different devices.
|
|
28
28
|
|
|
29
|
+
### Add Styles
|
|
29
30
|
|
|
31
|
+
```js
|
|
32
|
+
import '@wise/art/dist/Illustration.css';
|
|
33
|
+
```
|
|
30
34
|
|
|
31
35
|
### Usage in React
|
|
32
36
|
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=require("classnames"),t=require("react");function
|
|
1
|
+
var e=require("classnames"),t=require("react");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r,s,E=/*#__PURE__*/i(e),a=/*#__PURE__*/i(t);exports.Sizes=void 0,(r=exports.Sizes||(exports.Sizes={})).SMALL="small",r.MEDIUM="medium",r.LARGE="large";var l,o=((s={})[exports.Sizes.SMALL]=200,s[exports.Sizes.MEDIUM]=300,s[exports.Sizes.LARGE]=500,s),n=t.forwardRef(function(e,t){var i=e.id,r=e.name,s=e.alt,l=e.loading,n=void 0===l?"lazy":l,u=e.className,I=e.size,d=void 0===I?exports.Sizes.MEDIUM:I,p=exports.Sizes.SMALL,L=exports.Sizes.MEDIUM;return r?/*#__PURE__*/a.default.createElement("picture",null,d===exports.Sizes.LARGE||d===exports.Sizes.MEDIUM?/*#__PURE__*/a.default.createElement(a.default.Fragment,null,/*#__PURE__*/a.default.createElement("source",{width:o[p],height:o[p],media:"(max-width: 575px)",srcSet:c(r,p,"1x")+", "+c(r,p,"2x")+" 2x"}),d!==exports.Sizes.MEDIUM?/*#__PURE__*/a.default.createElement("source",{width:o[L],height:o[L],media:"(max-width: 991px)",srcSet:c(r,L,"1x")+", "+c(r,L,"2x")+" 2x"}):null):null,/*#__PURE__*/a.default.createElement("img",{id:i,ref:t,alt:s,className:E.default("wds-illustration","wds-illustration-"+r,u),loading:n,src:c(r,d,"1x"),srcSet:c(r,d,"2x")+" 2x",width:o[d],height:o[d]})):null});function c(e,t,i){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+i+".webp"}exports.Assets=void 0,(l=exports.Assets||(exports.Assets={})).BELL="bell",l.BRIEFCASE="briefcase",l.CALENDAR="calendar",l.CHECK_MARK="check-mark",l.CLOSED_WINDOW="closed-window",l.COIN_PILE="coin-pile",l.CONFETTI="confetti",l.CONSTRUCTION_FENCE="construction-fence",l.CONVERT="convert",l.COOKIE="cookie",l.DOCUMENTS="documents",l.DOOR="door",l.ELECTRIC_PLUG="electric-plug",l.EMAIL="email",l.EXCLAMATION_MARK="exclamation-mark",l.FLAG="flag",l.FLOWER="flower",l.GEAR="gear",l.GLOBE="globe",l.GRAPH="graph",l.HEART="heart",l.HOUSE="house",l.ID_CARD="id-card",l.INFINITE="infinite",l.INVITE_LETTER="invite-letter",l.JARS="jars",l.KEY="key",l.LIGHT_BULB="light-bulb",l.LOCK="lock",l.MAGNIFYING_GLASS="magnifying-glass",l.MAP="map",l.MEGAPHONE="megaphone",l.MULTI_CURRENCY="multi-currency",l.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",l.PALM_TREE="palm-tree",l.PHONES="phones",l.PIE_CHART="pie-chart",l.PLANE="plane",l.PUZZLE_PIECES="puzzle-pieces",l.QUESTION_MARK="question-mark",l.RECEIVE="receive",l.REMINDER_LETTER="reminder-letter",l.SAND_TIMER="sand-timer",l.SHOPPING_BAG="shopping-bag",l.SKIP_AUTHENTICATION="skip-authentication",l.SPEECH_BUBBLE="speech-bubble",l.TOOL="tool",l.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",l.WALLET="wallet",exports.Illustration=n;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","
|
|
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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst imageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\n};\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\n {/* Mobile Screens */}\n <source\n width={imageSizes[SMALL]}\n height={imageSizes[SMALL]}\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n width={imageSizes[size]}\n height={imageSizes[size]}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","_imageSizes","Assets","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","ref","id","_ref","name","alt","loading","_ref$loading","className","size","_ref$size","React","createElement","Fragment","width","height","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"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"}
|
package/dist/index.modern.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"classnames";import
|
|
1
|
+
import e from"classnames";import t,{forwardRef as E}from"react";var i;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(i||(i={}));const l={[i.SMALL]:200,[i.MEDIUM]:300,[i.LARGE]:500},a=E(({id:E,name:a,alt:r,loading:c="lazy",className:o,size:s=i.MEDIUM},I)=>{const{SMALL:L,MEDIUM:m}=i;return a?/*#__PURE__*/t.createElement("picture",null,s===i.LARGE||s===i.MEDIUM?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{width:l[L],height:l[L],media:"(max-width: 575px)",srcSet:`${n(a,L,"1x")}, ${n(a,L,"2x")} 2x`}),s!==i.MEDIUM?/*#__PURE__*/t.createElement("source",{width:l[m],height:l[m],media:"(max-width: 991px)",srcSet:`${n(a,m,"1x")}, ${n(a,m,"2x")} 2x`}):null):null,/*#__PURE__*/t.createElement("img",{id:E,ref:I,alt:r,className:e("wds-illustration",`wds-illustration-${a}`,o),loading:c,src:n(a,s,"1x"),srcSet:`${n(a,s,"2x")} 2x`,width:l[s],height:l[s]})):null});function n(e,t,E){return`https://wise.com/web-art/assets/illustrations/${e}-${t}@${E}.webp`}var r;!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={}));export{r as Assets,a as Illustration,i as Sizes};
|
|
2
2
|
//# sourceMappingURL=index.modern.mjs.map
|
|
@@ -1 +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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","size","
|
|
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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst imageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\n};\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\n {/* Mobile Screens */}\n <source\n width={imageSizes[SMALL]}\n height={imageSizes[SMALL]}\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n width={imageSizes[size]}\n height={imageSizes[size]}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","id","name","alt","loading","className","size","ref","React","createElement","width","height","media","srcSet","defineSrc","classNames","src","illustration","descriptor","Assets"],"mappings":"gEAAYA,IAIXA,GAJD,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,ICeD,MAAMC,EAAa,CACjB,CAACD,EAAME,OAAQ,IACf,CAACF,EAAMG,QAAS,IAChB,CAACH,EAAMI,OAAQ,KAGCC,EAAGC,EACnB,EAAGC,KAAIC,OAAMC,MAAKC,QAAAA,EAAU,OAAQC,YAAWC,KAAAA,EAAOZ,EAAMG,QAAiBU,KAC3E,MAAMX,MAAEA,EAAKC,OAAEA,GAAWH,EAE1B,OAAOQ,eACLM,EACGF,cAAAA,UAAAA,KAAAA,IAASZ,EAAMI,OAASQ,IAASZ,EAAMG,oBACtCW,6CAEEA,EACEC,cAAA,SAAA,CAAAC,MAAOf,EAAWC,GAClBe,OAAQhB,EAAWC,GACnBgB,MAAM,qBACNC,OAAW,GAAAC,EAAUZ,EAAMN,EAAO,UAAUkB,EAAUZ,EAAMN,EAAO,aAGpEU,IAASZ,EAAMG,oBACdW,EACEC,cAAA,SAAA,CAAAC,MAAOf,EAAWE,GAClBc,OAAQhB,EAAWE,GACnBe,MAAM,qBACNC,OAAW,GAAAC,EAAUZ,EAAML,EAAQ,UAAUiB,EAAUZ,EAAML,EAAQ,aAErE,MAEJ,kBAEJW,uBACEP,GAAIA,EACJM,IAAKA,EACLJ,IAAKA,EACLE,UAAWU,EAAW,mBAAoB,oBAAoBb,IAAQG,GACtED,QAASA,EACTY,IAAKF,EAAUZ,EAAMI,EAAM,MAC3BO,OAAW,GAAAC,EAAUZ,EAAMI,EAAM,WACjCI,MAAOf,EAAWW,GAClBK,OAAQhB,EAAWW,MAGrB,OAIR,SAAkBQ,EAACG,EAAsBX,EAAyBY,GAChE,uDAAwDD,KAAgBX,KAAQY,QAClF,CC/DYC,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"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"classnames";import
|
|
1
|
+
import e from"classnames";import t,{forwardRef as E}from"react";var i,a;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(i||(i={}));var l,r=((a={})[i.SMALL]=200,a[i.MEDIUM]=300,a[i.LARGE]=500,a),n=E(function(E,a){var l=E.id,n=E.name,c=E.alt,s=E.loading,I=void 0===s?"lazy":s,L=E.className,m=E.size,A=void 0===m?i.MEDIUM:m,T=i.SMALL,N=i.MEDIUM;return n?/*#__PURE__*/t.createElement("picture",null,A===i.LARGE||A===i.MEDIUM?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{width:r[T],height:r[T],media:"(max-width: 575px)",srcSet:o(n,T,"1x")+", "+o(n,T,"2x")+" 2x"}),A!==i.MEDIUM?/*#__PURE__*/t.createElement("source",{width:r[N],height:r[N],media:"(max-width: 991px)",srcSet:o(n,N,"1x")+", "+o(n,N,"2x")+" 2x"}):null):null,/*#__PURE__*/t.createElement("img",{id:l,ref:a,alt:c,className:e("wds-illustration","wds-illustration-"+n,L),loading:I,src:o(n,A,"1x"),srcSet:o(n,A,"2x")+" 2x",width:r[A],height:r[A]})):null});function o(e,t,E){return"https://wise.com/web-art/assets/illustrations/"+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"}(l||(l={}));export{l as Assets,n as Illustration,i as Sizes};
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","
|
|
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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst imageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\n};\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\n {/* Mobile Screens */}\n <source\n width={imageSizes[SMALL]}\n height={imageSizes[SMALL]}\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n width={imageSizes[size]}\n height={imageSizes[size]}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","_imageSizes","Assets","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","ref","id","_ref","name","alt","loading","_ref$loading","className","size","_ref$size","React","createElement","Fragment","width","height","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"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"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!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 l,E=/*#__PURE__*/a(t),n=/*#__PURE__*/a(i);e.Sizes=void 0,(l=e.Sizes||(e.Sizes={})).SMALL="small",l.MEDIUM="medium",l.LARGE="large";var s,
|
|
1
|
+
!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 l,s,E=/*#__PURE__*/a(t),n=/*#__PURE__*/a(i);e.Sizes=void 0,(l=e.Sizes||(e.Sizes={})).SMALL="small",l.MEDIUM="medium",l.LARGE="large";var r,o=((s={})[e.Sizes.SMALL]=200,s[e.Sizes.MEDIUM]=300,s[e.Sizes.LARGE]=500,s),c=i.forwardRef(function(t,i){var a=t.id,l=t.name,s=t.alt,r=t.loading,c=void 0===r?"lazy":r,u=t.className,I=t.size,L=void 0===I?e.Sizes.MEDIUM:I,f=e.Sizes.SMALL,m=e.Sizes.MEDIUM;return l?/*#__PURE__*/n.default.createElement("picture",null,L===e.Sizes.LARGE||L===e.Sizes.MEDIUM?/*#__PURE__*/n.default.createElement(n.default.Fragment,null,/*#__PURE__*/n.default.createElement("source",{width:o[f],height:o[f],media:"(max-width: 575px)",srcSet:d(l,f,"1x")+", "+d(l,f,"2x")+" 2x"}),L!==e.Sizes.MEDIUM?/*#__PURE__*/n.default.createElement("source",{width:o[m],height:o[m],media:"(max-width: 991px)",srcSet:d(l,m,"1x")+", "+d(l,m,"2x")+" 2x"}):null):null,/*#__PURE__*/n.default.createElement("img",{id:a,ref:i,alt:s,className:E.default("wds-illustration","wds-illustration-"+l,u),loading:c,src:d(l,L,"1x"),srcSet:d(l,L,"2x")+" 2x",width:o[L],height:o[L]})):null});function d(e,t,i){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+i+".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=c});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","
|
|
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 LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst imageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\n};\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\n {/* Mobile Screens */}\n <source\n width={imageSizes[SMALL]}\n height={imageSizes[SMALL]}\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n width={imageSizes[size]}\n height={imageSizes[size]}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${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","_imageSizes","Assets","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","ref","id","_ref","name","alt","loading","_ref$loading","className","size","_ref$size","React","createElement","Fragment","width","height","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"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"}
|