@wise/art 2.3.4-beta.10 → 2.3.4-beta.12

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.
@@ -7,17 +7,6 @@ img.wds-illustration {
7
7
  padding: 24px;
8
8
  }
9
9
 
10
- .wds-animated-illustration {
11
- max-width: 100%;
12
- min-height: 500px;
13
- }
14
- @media (min-width: 768px) {
15
- .wds-animated-illustration {
16
- min-height: 200px;
17
- }
18
- }
19
- @media (min-width: 992px) {
20
- .wds-animated-illustration {
21
- min-height: 300px;
22
- }
10
+ .wds-illustration-3d {
11
+ padding: 24px;
23
12
  }
@@ -0,0 +1,2 @@
1
+ import{PerspectiveCamera as e}from"@react-three/drei";import{Canvas as t}from"@react-three/fiber";import i from"react";import{LinearToneMapping as r,SRGBColorSpace as a,PCFShadowMap as o}from"three";import{I as n,S as p}from"./index-20353b5c.js";import"classnames";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},s.apply(this,arguments)}var l,c={size:(l={},l[p.SMALL]={height:"200px",width:"200px"},l[p.MEDIUM]={height:"300px",width:"300px"},l[p.LARGE]={height:"500px",width:"500px"},l)};function h(l){var h=l.children,d=l.config,f=void 0===d?{castShadow:!0}:d,m=l.size,w=void 0===m?p.MEDIUM:m;/*#__PURE__*/return i.createElement(t,{style:s({},c.size[w],{display:"inline-block"}),onCreated:function(e){var t=e.gl;t.setClearColor(0,0),t.setSize(n[w],n[w]),t.clearDepth()},gl:{alpha:!0,antialias:!0,pixelRatio:1*window.devicePixelRatio,toneMapping:r,outputColorSpace:a},shadows:{type:o,enabled:f.castShadow}},/*#__PURE__*/i.createElement(e,{makeDefault:!0,far:1e12,near:.1,fov:10.29,aspect:window.innerWidth/window.innerHeight,position:[0,0,100]}),h)}export{h as default};
2
+ //# sourceMappingURL=Scene-1d066cf4.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scene-1d066cf4.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":["/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/function-component-definition */\nimport { PerspectiveCamera } from '@react-three/drei';\nimport { Canvas } from '@react-three/fiber';\nimport React, { PropsWithChildren } from 'react';\nimport { PCFShadowMap, LinearToneMapping, SRGBColorSpace } from 'three';\n\nimport { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';\n\nexport type SceneConfig = { castShadow?: boolean };\n\nexport type Props = PropsWithChildren<{\n config?: {\n castShadow?: boolean;\n };\n size?: SmallSize | MediumSize | LargeSize;\n}>;\n\nconst sceneStyles = {\n size: {\n [Sizes.SMALL]: {\n height: '200px',\n width: '200px',\n },\n [Sizes.MEDIUM]: {\n height: '300px',\n width: '300px',\n },\n [Sizes.LARGE]: {\n height: '500px',\n width: '500px',\n },\n },\n};\n\nexport default function Scene({\n children,\n config = { castShadow: true },\n size = Sizes.MEDIUM,\n}: Props) {\n return (\n <Canvas\n style={{ ...sceneStyles.size[size], display: 'inline-block' }}\n onCreated={({ gl }) => {\n gl.setClearColor(0x000000, 0);\n gl.setSize(ImageSizes[size], ImageSizes[size]);\n gl.clearDepth();\n }}\n gl={{\n alpha: true,\n antialias: true,\n pixelRatio: window.devicePixelRatio * 1,\n toneMapping: LinearToneMapping,\n outputColorSpace: SRGBColorSpace,\n }}\n shadows={{ type: PCFShadowMap, enabled: config.castShadow }}\n >\n <PerspectiveCamera\n makeDefault\n far={1000000000000}\n near={0.1}\n fov={10.29}\n aspect={window.innerWidth / window.innerHeight}\n position={[0, 0, 100]}\n />\n {children}\n </Canvas>\n );\n}\n"],"names":["sceneStyles","size","_size","Sizes","SMALL","height","width","MEDIUM","LARGE","Scene","_ref","children","_ref$config","config","castShadow","_ref$size","React","createElement","Canvas","style","display","onCreated","_ref2","gl","setClearColor","setSize","ImageSizes","clearDepth","alpha","antialias","pixelRatio","window","devicePixelRatio","toneMapping","LinearToneMapping","outputColorSpace","SRGBColorSpace","shadows","type","PCFShadowMap","enabled","PerspectiveCamera","makeDefault","far","near","fov","aspect","innerWidth","innerHeight","position"],"mappings":"mfAkBMA,EAAc,CAClBC,MAAIC,EAAA,CAAA,EAAAA,EACDC,EAAMC,OAAQ,CACbC,OAAQ,QACRC,MAAO,SACRJ,EACAC,EAAMI,QAAS,CACdF,OAAQ,QACRC,MAAO,SAERH,EAAAA,EAAMK,OAAQ,CACbH,OAAQ,QACRC,MAAO,aAKWG,SAAAA,EAIhBC,GAAA,IAHEC,EAAAD,EAARC,SAAQC,EAAAF,EACRG,OAAAA,OAAS,IAAAD,EAAA,CAAEE,YAAY,GACvBb,EAAAA,EAAAA,EAAAA,KAAAA,OAAOE,IAAAA,EAAAA,EAAMI,OAEbQ,eAAA,OACEC,EAACC,cAAAC,EACC,CAAAC,MAAYnB,EAAAA,CAAAA,EAAAA,EAAYC,KAAKA,GAAK,CAAEmB,QAAS,iBAC7CC,UAAW,SAAWC,GAAA,IAANC,EAAAD,EAAFC,GACZA,EAAGC,cAAc,EAAU,GAC3BD,EAAGE,QAAQC,EAAWzB,GAAOyB,EAAWzB,IACxCsB,EAAGI,YACL,EACAJ,GAAI,CACFK,OAAO,EACPC,WAAW,EACXC,WAAsC,EAA1BC,OAAOC,iBACnBC,YAAaC,EACbC,iBAAkBC,GAEpBC,QAAS,CAAEC,KAAMC,EAAcC,QAAS3B,EAAOC,0BAE/CE,EAACC,cAAAwB,EACC,CAAAC,aACA,EAAAC,IAAK,KACLC,KAAM,GACNC,IAAK,MACLC,OAAQf,OAAOgB,WAAahB,OAAOiB,YACnCC,SAAU,CAAC,EAAG,EAAG,OAElBtC,EAGP"}
@@ -0,0 +1,2 @@
1
+ var e=require("@react-three/drei"),i=require("@react-three/fiber"),t=require("react"),a=require("three"),r=require("./index-60ebd656.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("classnames");var o,s=/*#__PURE__*/n(t);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}var p={size:(o={},o[r.Sizes.SMALL]={height:"200px",width:"200px"},o[r.Sizes.MEDIUM]={height:"300px",width:"300px"},o[r.Sizes.LARGE]={height:"500px",width:"500px"},o)};exports.default=function(t){var n=t.children,o=t.config,c=void 0===o?{castShadow:!0}:o,d=t.size,h=void 0===d?r.Sizes.MEDIUM:d;/*#__PURE__*/return s.default.createElement(i.Canvas,{style:l({},p.size[h],{display:"inline-block"}),onCreated:function(e){var i=e.gl;i.setClearColor(0,0),i.setSize(r.ImageSizes[h],r.ImageSizes[h]),i.clearDepth()},gl:{alpha:!0,antialias:!0,pixelRatio:1*window.devicePixelRatio,toneMapping:a.LinearToneMapping,outputColorSpace:a.SRGBColorSpace},shadows:{type:a.PCFShadowMap,enabled:c.castShadow}},/*#__PURE__*/s.default.createElement(e.PerspectiveCamera,{makeDefault:!0,far:1e12,near:.1,fov:10.29,aspect:window.innerWidth/window.innerHeight,position:[0,0,100]}),n)};
2
+ //# sourceMappingURL=Scene-3ab5e961.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scene-3ab5e961.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":["/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/function-component-definition */\nimport { PerspectiveCamera } from '@react-three/drei';\nimport { Canvas } from '@react-three/fiber';\nimport React, { PropsWithChildren } from 'react';\nimport { PCFShadowMap, LinearToneMapping, SRGBColorSpace } from 'three';\n\nimport { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';\n\nexport type SceneConfig = { castShadow?: boolean };\n\nexport type Props = PropsWithChildren<{\n config?: {\n castShadow?: boolean;\n };\n size?: SmallSize | MediumSize | LargeSize;\n}>;\n\nconst sceneStyles = {\n size: {\n [Sizes.SMALL]: {\n height: '200px',\n width: '200px',\n },\n [Sizes.MEDIUM]: {\n height: '300px',\n width: '300px',\n },\n [Sizes.LARGE]: {\n height: '500px',\n width: '500px',\n },\n },\n};\n\nexport default function Scene({\n children,\n config = { castShadow: true },\n size = Sizes.MEDIUM,\n}: Props) {\n return (\n <Canvas\n style={{ ...sceneStyles.size[size], display: 'inline-block' }}\n onCreated={({ gl }) => {\n gl.setClearColor(0x000000, 0);\n gl.setSize(ImageSizes[size], ImageSizes[size]);\n gl.clearDepth();\n }}\n gl={{\n alpha: true,\n antialias: true,\n pixelRatio: window.devicePixelRatio * 1,\n toneMapping: LinearToneMapping,\n outputColorSpace: SRGBColorSpace,\n }}\n shadows={{ type: PCFShadowMap, enabled: config.castShadow }}\n >\n <PerspectiveCamera\n makeDefault\n far={1000000000000}\n near={0.1}\n fov={10.29}\n aspect={window.innerWidth / window.innerHeight}\n position={[0, 0, 100]}\n />\n {children}\n </Canvas>\n );\n}\n"],"names":["sceneStyles","size","_size","Sizes","SMALL","height","width","MEDIUM","LARGE","Scene","_ref","children","_ref$config","config","castShadow","_ref$size","React","createElement","Canvas","style","display","onCreated","_ref2","gl","setClearColor","setSize","ImageSizes","clearDepth","alpha","antialias","pixelRatio","window","devicePixelRatio","toneMapping","LinearToneMapping","outputColorSpace","SRGBColorSpace","shadows","type","PCFShadowMap","enabled","PerspectiveCamera","makeDefault","far","near","fov","aspect","innerWidth","innerHeight","position"],"mappings":"seAkBA,IAAMA,EAAc,CAClBC,MAAIC,EAAA,CAAA,EAAAA,EACDC,EAAAA,MAAMC,OAAQ,CACbC,OAAQ,QACRC,MAAO,SACRJ,EACAC,EAAKA,MAACI,QAAS,CACdF,OAAQ,QACRC,MAAO,SAERH,EAAAA,QAAMK,OAAQ,CACbH,OAAQ,QACRC,MAAO,6BAKWG,SAIhBC,GAAA,IAHEC,EAAAD,EAARC,SAAQC,EAAAF,EACRG,OAAAA,OAAS,IAAAD,EAAA,CAAEE,YAAY,GACvBb,EAAAA,EAAAA,EAAAA,KAAAA,OAAOE,IAAAA,EAAAA,EAAKA,MAACI,OAEbQ,eAAA,OACEC,EAAC,QAAAC,cAAAC,EAAMA,OACL,CAAAC,MAAYnB,EAAAA,CAAAA,EAAAA,EAAYC,KAAKA,GAAK,CAAEmB,QAAS,iBAC7CC,UAAW,SAAWC,GAAA,IAANC,EAAAD,EAAFC,GACZA,EAAGC,cAAc,EAAU,GAC3BD,EAAGE,QAAQC,EAAUA,WAACzB,GAAOyB,EAAAA,WAAWzB,IACxCsB,EAAGI,YACL,EACAJ,GAAI,CACFK,OAAO,EACPC,WAAW,EACXC,WAAsC,EAA1BC,OAAOC,iBACnBC,YAAaC,EAAiBA,kBAC9BC,iBAAkBC,kBAEpBC,QAAS,CAAEC,KAAMC,EAAAA,aAAcC,QAAS3B,EAAOC,0BAE/CE,UAACC,cAAAwB,EAAAA,kBACC,CAAAC,aACA,EAAAC,IAAK,KACLC,KAAM,GACNC,IAAK,MACLC,OAAQf,OAAOgB,WAAahB,OAAOiB,YACnCC,SAAU,CAAC,EAAG,EAAG,OAElBtC,EAGP"}
@@ -6,5 +6,5 @@ export declare type Props = {
6
6
  size?: SmallSize | MediumSize | LargeSize;
7
7
  alt?: string;
8
8
  };
9
- declare const Illustration3d: ({ name, size, alt }: Props) => JSX.Element | null;
9
+ declare const Illustration3d: ({ name, size, alt }: Props) => JSX.Element;
10
10
  export default Illustration3d;
@@ -0,0 +1,2 @@
1
+ import e from"classnames";import t,{forwardRef as n,useState as a,useEffect as i,Suspense as r,lazy as l}from"react";var E,o;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(o||(o={}));var c,s,u,d=((E={})[o.SMALL]=200,E[o.MEDIUM]=300,E[o.LARGE]=500,E),A=((c={})[o.SMALL]=200,c[o.MEDIUM]=300,c[o.LARGE]=500,c),I=n(function(n,a){var i=n.id,r=n.name,l=n.alt,E=n.loading,c=void 0===E?"eager":E,s=n.className,u=n.size,d=void 0===u?o.MEDIUM:u,I=n.disablePadding,L=void 0!==I&&I,T=o.SMALL,_=o.MEDIUM;return r?/*#__PURE__*/t.createElement("picture",null,d===o.LARGE||d===o.MEDIUM?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{width:A[T],height:A[T],media:"(max-width: 575px)",srcSet:m(r,T,"1x")+", "+m(r,T,"2x")+" 2x"}),d!==o.MEDIUM?/*#__PURE__*/t.createElement("source",{width:A[_],height:A[_],media:"(max-width: 992px)",srcSet:m(r,_,"1x")+", "+m(r,_,"2x")+" 2x"}):null):null,/*#__PURE__*/t.createElement("img",{id:i,ref:a,alt:null!=l?l:r.replace("-"," "),"data-testid":"wds-"+r+"-illustration",className:e("wds-illustration","wds-illustration-"+r,{"wds-illustration-padding":!L},s),loading:c,src:m(r,d,"1x"),srcSet:m(r,d,"2x")+" 2x",width:A[d],height:A[d]})):null});function m(e,t,n){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+n+".webp"}!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.BUSINESS_CARD="business-card",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE_DOWN="coin-pile-down",e.COIN_PILE_UP="coin-pile-up",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DIGITAL_CARD_2="digital-card-2",e.DIGITAL_CARD="digital-card",e.DOCUMENTS="documents",e.DOOR="door",e.ECO_CARD="eco-card",e.ELECTRIC_PLUG="electric-plug",e.EMAIL_SUCCESS="email-success",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_2="heart-2",e.HEART_3="heart-3",e.HEART_4="heart-4",e.HEART_5="heart-5",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.MARBLE_CARD_BUSINESS="marble-card-business",e.MARBLE_CARD="marble-card",e.MARBLE="marble",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PERCENTAGE="percentage",e.PERSONAL_CARD="personal-card",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE_2="plane-2",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"}(s||(s={})),function(e){e[e.INIT=0]="INIT",e[e.FALLBACK=1]="FALLBACK",e[e.ASSET_3D=2]="ASSET_3D"}(u||(u={}));var L=function(n){var E,c,d,A=n.name,m=n.size,L=void 0===m?o.MEDIUM:m,T=n.alt,_=void 0===T?"":T,R=t.useState(u.INIT),N=R[0],S=R[1],C=(E=a({level:1}),c=E[0],d=E[1],i(function(){"getBattery"in navigator&&function(){try{Promise.resolve(navigator.getBattery()).then(function(e){d({level:e.level})})}catch(e){return Promise.reject(e)}}()},[]),c).level;return i(function(){var e,t,n,a=!((void 0===(n=window.navigator.connection)?(console.log("connection API is unsupported"),0):(console.log("do internet check",null==n?void 0:n.effectiveType),["slow-2g","2g"].includes(null==n?void 0:n.effectiveType)||!0===(null==(e=navigator)||null==(t=e.connection)?void 0:t.saveData)))||C<=.2);new Promise(function(e){return setTimeout(e,0)}).then(function(){S(a?u.ASSET_3D:u.FALLBACK)})},[]),/*#__PURE__*/t.createElement("div",{className:e("wds-illustration-3d")},N===u.INIT?null:N===u.ASSET_3D?/*#__PURE__*/t.createElement(r,{fallback:null},function(e){var n=e.name,a=e.size,i=/*#__PURE__*/t.createElement(t.Fragment,null),r=l(function(){return import("./Scene-1d066cf4.js")});switch(n){case s.LOCK:i=l(function(){return import("./LockModel-059a77ed.js")});break;case s.GLOBE:i=l(function(){return import("./GlobeModel-98d215e9.js")});break;case s.CONFETTI:i=l(function(){return import("./ConfettiModel-9eb6dfdb.js")})}/*#__PURE__*/return t.createElement(r,{size:a},/*#__PURE__*/t.createElement(i,null))}({name:A,size:L})):/*#__PURE__*/t.createElement(I,{name:A,size:L,alt:_}))};export{s as A,d as I,o as S,I as a,L as b};
2
+ //# sourceMappingURL=index-20353b5c.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-20353b5c.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/Illustration3d.tsx","../src/illustrations3d/useBattery.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\nexport const ImageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\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 disablePadding?: boolean;\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 (\n {\n id,\n name,\n alt,\n loading = 'eager',\n className,\n size = Sizes.MEDIUM,\n disablePadding = false,\n }: Props,\n ref,\n ) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\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 {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 992px)\"\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 ?? name.replace('-', ' ')}\n data-testid={`wds-${name}-illustration`}\n className={classNames(\n 'wds-illustration',\n `wds-illustration-${name}`,\n { 'wds-illustration-padding': !disablePadding },\n className,\n )}\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 BUSINESS_CARD = 'business-card',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE_DOWN = 'coin-pile-down',\n COIN_PILE_UP = 'coin-pile-up',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DIGITAL_CARD_2 = 'digital-card-2',\n DIGITAL_CARD = 'digital-card',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ECO_CARD = 'eco-card',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL_SUCCESS = 'email-success',\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_2 = 'heart-2',\n HEART_3 = 'heart-3',\n HEART_4 = 'heart-4',\n HEART_5 = 'heart-5',\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 MARBLE_CARD_BUSINESS = 'marble-card-business',\n MARBLE_CARD = 'marble-card',\n MARBLE = 'marble',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PERCENTAGE = 'percentage',\n PERSONAL_CARD = 'personal-card',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE_2 = 'plane-2',\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 | 'business-card'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile-down'\n | 'coin-pile-up'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'digital-card-2'\n | 'digital-card'\n | 'documents'\n | 'door'\n | 'eco-card'\n | 'electric-plug'\n | 'email-success'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart-2'\n | 'heart-3'\n | 'heart-4'\n | 'heart-5'\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 | 'marble-card-business'\n | 'marble-card'\n | 'marble'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'percentage'\n | 'personal-card'\n | 'phones'\n | 'pie-chart'\n | 'plane-2'\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","/* eslint-disable fp/no-mutation */\n/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport classNames from 'classnames';\nimport React, { lazy, Suspense, useEffect, LazyExoticComponent } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, Sizes } from '../common';\n\nimport Illustration, { Assets } from './../illustrations';\nimport useBattery from './useBattery';\n\nexport type Illustration3dNames = 'lock' | 'globe' | 'confetti';\n\nexport type Props = {\n name: Illustration3dNames;\n size?: SmallSize | MediumSize | LargeSize;\n alt?: string;\n};\n\nenum RenderMode {\n INIT,\n FALLBACK,\n ASSET_3D,\n}\n\nconst Illustration3d = ({ name, size = Sizes.MEDIUM, alt = '' }: Props) => {\n const [renderMode, setRenderMode] = React.useState<RenderMode>(RenderMode.INIT);\n const { level } = useBattery();\n\n useEffect(() => {\n const isClientOkRender3dAssset = !(isConnectionSlow() || level <= 0.2);\n\n // todo: remove artificial delay\n void wait(0).then(() => {\n setRenderMode(isClientOkRender3dAssset ? RenderMode.ASSET_3D : RenderMode.FALLBACK);\n });\n }, []);\n\n return (\n <div className={classNames('wds-illustration-3d')}>\n {renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (\n <Suspense fallback={null}>{getModel({ name, size })}</Suspense>\n ) : (\n <Illustration name={name} size={size} alt={alt} />\n )}\n </div>\n );\n};\n\nfunction getModel({ name, size }: Props) {\n // @ts-expect-error later\n let Model: LazyExoticComponent = <></>;\n const Scene = lazy(() => import('./Scene'));\n switch (name) {\n case Assets.LOCK: {\n Model = lazy(() => import('./LockModel'));\n break;\n }\n case Assets.GLOBE: {\n Model = lazy(() => import('./GlobeModel'));\n break;\n }\n case Assets.CONFETTI: {\n Model = lazy(() => import('./ConfettiModel'));\n break;\n }\n }\n return (\n <Scene size={size}>\n <Model />\n </Scene>\n );\n}\n\nfunction isConnectionSlow(): boolean {\n // @ts-expect-error .connection prop exists in Navigator interface\n const { connection } = window.navigator;\n if (connection === undefined) {\n console.log('connection API is unsupported');\n return false;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n console.log('do internet check', connection?.effectiveType);\n return (\n ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||\n // @ts-expect-error later\n navigator?.connection?.saveData === true\n );\n}\n\nfunction wait(time: number) {\n return new Promise((resolve) => setTimeout(resolve, time));\n}\n\nexport default Illustration3d;\n","import { useState, useEffect } from 'react';\n\nconst useBattery = () => {\n const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });\n\n useEffect(() => {\n const getBatteryData = async () => {\n // @ts-expect-error .getBattery exists in Navigator interface\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n const battery = await navigator.getBattery();\n\n setBatteryData({\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n level: battery.level,\n });\n };\n // Check if the browser supports the Battery API\n if ('getBattery' in navigator) {\n void getBatteryData();\n }\n }, []);\n\n return batteryData;\n};\n\nexport default useBattery;\n"],"names":["_ImageSizes","Sizes","ImageSizes","_imageSizes","Assets","RenderMode","SMALL","MEDIUM","LARGE","imageSizes","Illustration","forwardRef","ref","id","name","_ref","alt","loading","_ref$loading","className","size","_ref$size","disablePadding","_ref$disablePadding","React","createElement","Fragment","width","height","media","srcSet","defineSrc","replace","classNames","src","illustration","descriptor","Illustration3d","useState","batteryData","setBatteryData","_ref$alt","INIT","renderMode","_React$useState","setRenderMode","level","_useState","useEffect","getBatteryData","navigator","getBattery","battery","e","Promise","reject","connection","isClientOkRender3dAssset","undefined","window","console","log","effectiveType","includes","_navigator$connection","_navigator","saveData","resolve","setTimeout","then","ASSET_3D","FALLBACK","Suspense","fallback","_ref2","Model","Scene","lazy","import","LOCK","GLOBE","CONFETTI","getModel"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,i,s=/*#__PURE__*/r(e),a=/*#__PURE__*/r(t);exports.Sizes=void 0,(i=exports.Sizes||(exports.Sizes={})).SMALL="small",i.MEDIUM="medium",i.LARGE="large";var l,o,E,c=((n={})[exports.Sizes.SMALL]=200,n[exports.Sizes.MEDIUM]=300,n[exports.Sizes.LARGE]=500,n),u=((l={})[exports.Sizes.SMALL]=200,l[exports.Sizes.MEDIUM]=300,l[exports.Sizes.LARGE]=500,l),d=t.forwardRef(function(e,t){var r=e.id,n=e.name,i=e.alt,l=e.loading,o=void 0===l?"eager":l,E=e.className,c=e.size,d=void 0===c?exports.Sizes.MEDIUM:c,I=e.disablePadding,f=void 0!==I&&I,S=exports.Sizes.SMALL,p=exports.Sizes.MEDIUM;return n?/*#__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:u[S],height:u[S],media:"(max-width: 575px)",srcSet:A(n,S,"1x")+", "+A(n,S,"2x")+" 2x"}),d!==exports.Sizes.MEDIUM?/*#__PURE__*/a.default.createElement("source",{width:u[p],height:u[p],media:"(max-width: 992px)",srcSet:A(n,p,"1x")+", "+A(n,p,"2x")+" 2x"}):null):null,/*#__PURE__*/a.default.createElement("img",{id:r,ref:t,alt:null!=i?i:n.replace("-"," "),"data-testid":"wds-"+n+"-illustration",className:s.default("wds-illustration","wds-illustration-"+n,{"wds-illustration-padding":!f},E),loading:o,src:A(n,d,"1x"),srcSet:A(n,d,"2x")+" 2x",width:u[d],height:u[d]})):null});function A(e,t,r){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+r+".webp"}exports.Assets=void 0,(o=exports.Assets||(exports.Assets={})).BELL="bell",o.BRIEFCASE="briefcase",o.BUSINESS_CARD="business-card",o.CALENDAR="calendar",o.CHECK_MARK="check-mark",o.CLOSED_WINDOW="closed-window",o.COIN_PILE_DOWN="coin-pile-down",o.COIN_PILE_UP="coin-pile-up",o.CONFETTI="confetti",o.CONSTRUCTION_FENCE="construction-fence",o.CONVERT="convert",o.COOKIE="cookie",o.DIGITAL_CARD_2="digital-card-2",o.DIGITAL_CARD="digital-card",o.DOCUMENTS="documents",o.DOOR="door",o.ECO_CARD="eco-card",o.ELECTRIC_PLUG="electric-plug",o.EMAIL_SUCCESS="email-success",o.EMAIL="email",o.EXCLAMATION_MARK="exclamation-mark",o.FLAG="flag",o.FLOWER="flower",o.GEAR="gear",o.GLOBE="globe",o.GRAPH="graph",o.HEART_2="heart-2",o.HEART_3="heart-3",o.HEART_4="heart-4",o.HEART_5="heart-5",o.HEART="heart",o.HOUSE="house",o.ID_CARD="id-card",o.INFINITE="infinite",o.INVITE_LETTER="invite-letter",o.JARS="jars",o.KEY="key",o.LIGHT_BULB="light-bulb",o.LOCK="lock",o.MAGNIFYING_GLASS="magnifying-glass",o.MAP="map",o.MARBLE_CARD_BUSINESS="marble-card-business",o.MARBLE_CARD="marble-card",o.MARBLE="marble",o.MEGAPHONE="megaphone",o.MULTI_CURRENCY="multi-currency",o.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",o.PALM_TREE="palm-tree",o.PERCENTAGE="percentage",o.PERSONAL_CARD="personal-card",o.PHONES="phones",o.PIE_CHART="pie-chart",o.PLANE_2="plane-2",o.PLANE="plane",o.PUZZLE_PIECES="puzzle-pieces",o.QUESTION_MARK="question-mark",o.RECEIVE="receive",o.REMINDER_LETTER="reminder-letter",o.SAND_TIMER="sand-timer",o.SHOPPING_BAG="shopping-bag",o.SKIP_AUTHENTICATION="skip-authentication",o.SPEECH_BUBBLE="speech-bubble",o.TOOL="tool",o.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",o.WALLET="wallet",function(e){e[e.INIT=0]="INIT",e[e.FALLBACK=1]="FALLBACK",e[e.ASSET_3D=2]="ASSET_3D"}(E||(E={})),exports.Illustration=d,exports.Illustration3d=function(e){var r,n,i,l=e.name,o=e.size,c=void 0===o?exports.Sizes.MEDIUM:o,u=e.alt,A=void 0===u?"":u,I=a.default.useState(E.INIT),f=I[0],S=I[1],p=(r=t.useState({level:1}),n=r[0],i=r[1],t.useEffect(function(){"getBattery"in navigator&&function(){try{Promise.resolve(navigator.getBattery()).then(function(e){i({level:e.level})})}catch(e){return Promise.reject(e)}}()},[]),n).level;return t.useEffect(function(){var e,t,r,n=!((void 0===(r=window.navigator.connection)?(console.log("connection API is unsupported"),0):(console.log("do internet check",null==r?void 0:r.effectiveType),["slow-2g","2g"].includes(null==r?void 0:r.effectiveType)||!0===(null==(e=navigator)||null==(t=e.connection)?void 0:t.saveData)))||p<=.2);new Promise(function(e){return setTimeout(e,0)}).then(function(){S(n?E.ASSET_3D:E.FALLBACK)})},[]),/*#__PURE__*/a.default.createElement("div",{className:s.default("wds-illustration-3d")},f===E.INIT?null:f===E.ASSET_3D?/*#__PURE__*/a.default.createElement(t.Suspense,{fallback:null},function(e){var r=e.name,n=e.size,i=/*#__PURE__*/a.default.createElement(a.default.Fragment,null),s=t.lazy(function(){return Promise.resolve().then(function(){return require("./Scene-3ab5e961.js")})});switch(r){case exports.Assets.LOCK:i=t.lazy(function(){return Promise.resolve().then(function(){return require("./LockModel-d3070ff8.js")})});break;case exports.Assets.GLOBE:i=t.lazy(function(){return Promise.resolve().then(function(){return require("./GlobeModel-f3a58aa5.js")})});break;case exports.Assets.CONFETTI:i=t.lazy(function(){return Promise.resolve().then(function(){return require("./ConfettiModel-77cb11cf.js")})})}/*#__PURE__*/return a.default.createElement(s,{size:n},/*#__PURE__*/a.default.createElement(i,null))}({name:l,size:c})):/*#__PURE__*/a.default.createElement(d,{name:l,size:c,alt:A}))},exports.ImageSizes=c;
2
+ //# sourceMappingURL=index-60ebd656.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-60ebd656.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/Illustration3d.tsx","../src/illustrations3d/useBattery.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\nexport const ImageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\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 disablePadding?: boolean;\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 (\n {\n id,\n name,\n alt,\n loading = 'eager',\n className,\n size = Sizes.MEDIUM,\n disablePadding = false,\n }: Props,\n ref,\n ) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\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 {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 992px)\"\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 ?? name.replace('-', ' ')}\n data-testid={`wds-${name}-illustration`}\n className={classNames(\n 'wds-illustration',\n `wds-illustration-${name}`,\n { 'wds-illustration-padding': !disablePadding },\n className,\n )}\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 BUSINESS_CARD = 'business-card',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE_DOWN = 'coin-pile-down',\n COIN_PILE_UP = 'coin-pile-up',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DIGITAL_CARD_2 = 'digital-card-2',\n DIGITAL_CARD = 'digital-card',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ECO_CARD = 'eco-card',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL_SUCCESS = 'email-success',\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_2 = 'heart-2',\n HEART_3 = 'heart-3',\n HEART_4 = 'heart-4',\n HEART_5 = 'heart-5',\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 MARBLE_CARD_BUSINESS = 'marble-card-business',\n MARBLE_CARD = 'marble-card',\n MARBLE = 'marble',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PERCENTAGE = 'percentage',\n PERSONAL_CARD = 'personal-card',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE_2 = 'plane-2',\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 | 'business-card'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile-down'\n | 'coin-pile-up'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'digital-card-2'\n | 'digital-card'\n | 'documents'\n | 'door'\n | 'eco-card'\n | 'electric-plug'\n | 'email-success'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart-2'\n | 'heart-3'\n | 'heart-4'\n | 'heart-5'\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 | 'marble-card-business'\n | 'marble-card'\n | 'marble'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'percentage'\n | 'personal-card'\n | 'phones'\n | 'pie-chart'\n | 'plane-2'\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","/* eslint-disable fp/no-mutation */\n/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport classNames from 'classnames';\nimport React, { lazy, Suspense, useEffect, LazyExoticComponent } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, Sizes } from '../common';\n\nimport Illustration, { Assets } from './../illustrations';\nimport useBattery from './useBattery';\n\nexport type Illustration3dNames = 'lock' | 'globe' | 'confetti';\n\nexport type Props = {\n name: Illustration3dNames;\n size?: SmallSize | MediumSize | LargeSize;\n alt?: string;\n};\n\nenum RenderMode {\n INIT,\n FALLBACK,\n ASSET_3D,\n}\n\nconst Illustration3d = ({ name, size = Sizes.MEDIUM, alt = '' }: Props) => {\n const [renderMode, setRenderMode] = React.useState<RenderMode>(RenderMode.INIT);\n const { level } = useBattery();\n\n useEffect(() => {\n const isClientOkRender3dAssset = !(isConnectionSlow() || level <= 0.2);\n\n // todo: remove artificial delay\n void wait(0).then(() => {\n setRenderMode(isClientOkRender3dAssset ? RenderMode.ASSET_3D : RenderMode.FALLBACK);\n });\n }, []);\n\n return (\n <div className={classNames('wds-illustration-3d')}>\n {renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (\n <Suspense fallback={null}>{getModel({ name, size })}</Suspense>\n ) : (\n <Illustration name={name} size={size} alt={alt} />\n )}\n </div>\n );\n};\n\nfunction getModel({ name, size }: Props) {\n // @ts-expect-error later\n let Model: LazyExoticComponent = <></>;\n const Scene = lazy(() => import('./Scene'));\n switch (name) {\n case Assets.LOCK: {\n Model = lazy(() => import('./LockModel'));\n break;\n }\n case Assets.GLOBE: {\n Model = lazy(() => import('./GlobeModel'));\n break;\n }\n case Assets.CONFETTI: {\n Model = lazy(() => import('./ConfettiModel'));\n break;\n }\n }\n return (\n <Scene size={size}>\n <Model />\n </Scene>\n );\n}\n\nfunction isConnectionSlow(): boolean {\n // @ts-expect-error .connection prop exists in Navigator interface\n const { connection } = window.navigator;\n if (connection === undefined) {\n console.log('connection API is unsupported');\n return false;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n console.log('do internet check', connection?.effectiveType);\n return (\n ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||\n // @ts-expect-error later\n navigator?.connection?.saveData === true\n );\n}\n\nfunction wait(time: number) {\n return new Promise((resolve) => setTimeout(resolve, time));\n}\n\nexport default Illustration3d;\n","import { useState, useEffect } from 'react';\n\nconst useBattery = () => {\n const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });\n\n useEffect(() => {\n const getBatteryData = async () => {\n // @ts-expect-error .getBattery exists in Navigator interface\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n const battery = await navigator.getBattery();\n\n setBatteryData({\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n level: battery.level,\n });\n };\n // Check if the browser supports the Battery API\n if ('getBattery' in navigator) {\n void getBatteryData();\n }\n }, []);\n\n return batteryData;\n};\n\nexport default useBattery;\n"],"names":["_ImageSizes","Sizes","ImageSizes","_imageSizes","Assets","RenderMode","SMALL","MEDIUM","LARGE","imageSizes","Illustration","forwardRef","ref","id","name","_ref","alt","loading","_ref$loading","className","size","_ref$size","disablePadding","_ref$disablePadding","React","createElement","Fragment","width","height","media","srcSet","defineSrc","replace","classNames","src","illustration","descriptor","useState","batteryData","setBatteryData","_ref$alt","INIT","renderMode","_React$useState","setRenderMode","level","_useState","useEffect","getBatteryData","navigator","getBattery","battery","e","Promise","reject","connection","isClientOkRender3dAssset","undefined","window","console","log","effectiveType","includes","_navigator$connection","_navigator","saveData","resolve","setTimeout","then","ASSET_3D","FALLBACK","Suspense","fallback","_ref2","Model","Scene","lazy","require","LOCK","GLOBE","CONFETTI","getModel"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- var e=require("./index-3be70f77.js");require("classnames"),require("react"),Object.defineProperty(exports,"Assets",{enumerable:!0,get:function(){return e.Assets}}),exports.Illustration=e.Illustration,exports.Illustration3d=e.Illustration3d,Object.defineProperty(exports,"Sizes",{enumerable:!0,get:function(){return e.Sizes}});
1
+ var e=require("./index-60ebd656.js");require("classnames"),require("react"),Object.defineProperty(exports,"Assets",{enumerable:!0,get:function(){return e.Assets}}),exports.Illustration=e.Illustration,exports.Illustration3d=e.Illustration3d,Object.defineProperty(exports,"Sizes",{enumerable:!0,get:function(){return e.Sizes}});
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- export{A as Assets,a as Illustration,b as Illustration3d,S as Sizes}from"./index-46554083.js";import"classnames";import"react";
1
+ export{A as Assets,a as Illustration,b as Illustration3d,S as Sizes}from"./index-20353b5c.js";import"classnames";import"react";
2
2
  //# sourceMappingURL=index.module.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/art",
3
- "version": "2.3.4-beta.10",
3
+ "version": "2.3.4-beta.12",
4
4
  "license": "MIT",
5
5
  "description": "React library for art elements in UI",
6
6
  "homepage": "https://github.com/transferwise/web-art#readme",
@@ -1,2 +0,0 @@
1
- var e=require("@react-three/drei"),a=require("@react-three/fiber"),i=require("react"),t=require("three"),r=require("./index-3be70f77.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("classnames");var o,l=/*#__PURE__*/n(i);(o={})[r.Sizes.SMALL]={minHeight:"200px"},o[r.Sizes.MEDIUM]={minHeight:"300px"},o[r.Sizes.LARGE]={minHeight:"500px"},exports.default=function(i){var n=i.children,o=i.config,d=i.size,s=void 0===d?r.Sizes.MEDIUM:d;/*#__PURE__*/return l.default.createElement("div",null,/*#__PURE__*/l.default.createElement(a.Canvas,{onCreated:function(e){var a=e.gl;a.setClearColor(0,0),a.setSize(r.ImageSizes[s],r.ImageSizes[s]),a.clearDepth()},gl:{alpha:!0,antialias:!0,pixelRatio:1*window.devicePixelRatio,toneMapping:t.LinearToneMapping,outputColorSpace:t.SRGBColorSpace},shadows:{type:t.PCFShadowMap,enabled:(void 0===o?{castShadow:!0}:o).castShadow}},/*#__PURE__*/l.default.createElement(e.PerspectiveCamera,{makeDefault:!0,far:1e12,near:.1,fov:10.29,aspect:window.innerWidth/window.innerHeight,position:[0,0,80]}),n))};
2
- //# sourceMappingURL=Scene-6164c983.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Scene-6164c983.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":["/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/function-component-definition */\nimport { PerspectiveCamera } from '@react-three/drei';\nimport { Canvas } from '@react-three/fiber';\nimport React, { PropsWithChildren } from 'react';\nimport { PCFShadowMap, LinearToneMapping, SRGBColorSpace } from 'three';\n\nimport { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';\n\nexport type SceneConfig = { castShadow?: boolean };\n\nexport type Props = PropsWithChildren<{\n config?: {\n castShadow?: boolean;\n };\n size?: SmallSize | MediumSize | LargeSize;\n}>;\n\nconst sceneStyles = {\n size: {\n [Sizes.SMALL]: {\n minHeight: '200px',\n },\n [Sizes.MEDIUM]: {\n minHeight: '300px',\n },\n [Sizes.LARGE]: {\n minHeight: '500px',\n },\n },\n};\n\nexport default function Scene({\n children,\n config = { castShadow: true },\n size = Sizes.MEDIUM,\n}: Props) {\n return (\n <div\n // style={sceneStyles.size[size]}\n >\n <Canvas\n onCreated={({ gl }) => {\n gl.setClearColor(0x000000, 0);\n gl.setSize(ImageSizes[size], ImageSizes[size]);\n gl.clearDepth();\n }}\n gl={{\n alpha: true,\n antialias: true,\n pixelRatio: window.devicePixelRatio * 1,\n toneMapping: LinearToneMapping,\n outputColorSpace: SRGBColorSpace,\n }}\n shadows={{ type: PCFShadowMap, enabled: config.castShadow }}\n >\n <PerspectiveCamera\n makeDefault\n far={1000000000000}\n near={0.1}\n fov={10.29}\n aspect={window.innerWidth / window.innerHeight}\n position={[0, 0, 80]}\n />\n {children}\n </Canvas>\n </div>\n );\n}\n"],"names":["_size","Sizes","SMALL","minHeight","MEDIUM","LARGE","Scene","_ref","children","config","_ref$size","size","React","createElement","Canvas","onCreated","_ref2","gl","setClearColor","setSize","ImageSizes","clearDepth","alpha","antialias","pixelRatio","window","devicePixelRatio","toneMapping","LinearToneMapping","outputColorSpace","SRGBColorSpace","shadows","type","PCFShadowMap","enabled","_ref$config","castShadow","PerspectiveCamera","makeDefault","far","near","fov","aspect","innerWidth","innerHeight","position"],"mappings":"mQAmBMA,EAAA,CAAA,GACDC,EAAAA,MAAMC,OAAQ,CACbC,UAAW,SAEZF,EAAAA,EAAKA,MAACG,QAAS,CACdD,UAAW,SAEZF,EAAAA,EAAAA,MAAMI,OAAQ,CACbF,UAAW,yBAKOG,SAIhBC,GAAA,IAHEC,EAAAD,EAARC,SACAC,EAAAA,EAAAA,OAA6BC,EAAAH,EAC7BI,KAAAA,OAAOV,IAAAA,EAAAA,EAAKA,MAACG,OAEbM,eAAA,OACEE,EAAAA,8CAGEA,EAAAA,QAACC,cAAAC,EAAAA,OACC,CAAAC,UAAW,SAAAC,OAAKC,EAAAD,EAAFC,GACZA,EAAGC,cAAc,EAAU,GAC3BD,EAAGE,QAAQC,EAAAA,WAAWT,GAAOS,EAAUA,WAACT,IACxCM,EAAGI,YACL,EACAJ,GAAI,CACFK,OAAO,EACPC,WAAW,EACXC,WAAsC,EAA1BC,OAAOC,iBACnBC,YAAaC,EAAAA,kBACbC,iBAAkBC,EACnBA,gBACDC,QAAS,CAAEC,KAAMC,EAAYA,aAAEC,cApB5B,IAAAC,EAAA,CAAEC,YAAY,GAAMD,GAoBwBC,0BAE/CxB,wBAACyB,EAAiBA,kBAAA,CAChBC,aAAW,EACXC,IAAK,KACLC,KAAM,GACNC,IAAK,MACLC,OAAQjB,OAAOkB,WAAalB,OAAOmB,YACnCC,SAAU,CAAC,EAAG,EAAG,MAElBrC,GAIT"}
@@ -1,2 +0,0 @@
1
- import{PerspectiveCamera as e}from"@react-three/drei";import{Canvas as t}from"@react-three/fiber";import i from"react";import{LinearToneMapping as a,SRGBColorSpace as r,PCFShadowMap as o}from"three";import{I as n,S as l}from"./index-46554083.js";import"classnames";var p;function m(p){var m=p.children,c=p.config,d=p.size,s=void 0===d?l.MEDIUM:d;/*#__PURE__*/return i.createElement("div",null,/*#__PURE__*/i.createElement(t,{onCreated:function(e){var t=e.gl;t.setClearColor(0,0),t.setSize(n[s],n[s]),t.clearDepth()},gl:{alpha:!0,antialias:!0,pixelRatio:1*window.devicePixelRatio,toneMapping:a,outputColorSpace:r},shadows:{type:o,enabled:(void 0===c?{castShadow:!0}:c).castShadow}},/*#__PURE__*/i.createElement(e,{makeDefault:!0,far:1e12,near:.1,fov:10.29,aspect:window.innerWidth/window.innerHeight,position:[0,0,80]}),m))}(p={})[l.SMALL]={minHeight:"200px"},p[l.MEDIUM]={minHeight:"300px"},p[l.LARGE]={minHeight:"500px"};export{m as default};
2
- //# sourceMappingURL=Scene-627695a5.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Scene-627695a5.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":["/* eslint-disable react/forbid-dom-props */\n/* eslint-disable react/function-component-definition */\nimport { PerspectiveCamera } from '@react-three/drei';\nimport { Canvas } from '@react-three/fiber';\nimport React, { PropsWithChildren } from 'react';\nimport { PCFShadowMap, LinearToneMapping, SRGBColorSpace } from 'three';\n\nimport { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';\n\nexport type SceneConfig = { castShadow?: boolean };\n\nexport type Props = PropsWithChildren<{\n config?: {\n castShadow?: boolean;\n };\n size?: SmallSize | MediumSize | LargeSize;\n}>;\n\nconst sceneStyles = {\n size: {\n [Sizes.SMALL]: {\n minHeight: '200px',\n },\n [Sizes.MEDIUM]: {\n minHeight: '300px',\n },\n [Sizes.LARGE]: {\n minHeight: '500px',\n },\n },\n};\n\nexport default function Scene({\n children,\n config = { castShadow: true },\n size = Sizes.MEDIUM,\n}: Props) {\n return (\n <div\n // style={sceneStyles.size[size]}\n >\n <Canvas\n onCreated={({ gl }) => {\n gl.setClearColor(0x000000, 0);\n gl.setSize(ImageSizes[size], ImageSizes[size]);\n gl.clearDepth();\n }}\n gl={{\n alpha: true,\n antialias: true,\n pixelRatio: window.devicePixelRatio * 1,\n toneMapping: LinearToneMapping,\n outputColorSpace: SRGBColorSpace,\n }}\n shadows={{ type: PCFShadowMap, enabled: config.castShadow }}\n >\n <PerspectiveCamera\n makeDefault\n far={1000000000000}\n near={0.1}\n fov={10.29}\n aspect={window.innerWidth / window.innerHeight}\n position={[0, 0, 80]}\n />\n {children}\n </Canvas>\n </div>\n );\n}\n"],"names":["Scene","_ref","children","config","_ref$size","size","Sizes","MEDIUM","React","createElement","Canvas","onCreated","_ref2","gl","setClearColor","setSize","ImageSizes","clearDepth","alpha","antialias","pixelRatio","window","devicePixelRatio","toneMapping","LinearToneMapping","outputColorSpace","SRGBColorSpace","shadows","type","PCFShadowMap","enabled","_ref$config","castShadow","PerspectiveCamera","makeDefault","far","near","fov","aspect","innerWidth","innerHeight","position","_size","SMALL","minHeight","LARGE"],"mappings":"+QAgCwBA,SAAAA,EAIhBC,GAAA,IAHEC,EAAAD,EAARC,SACAC,EAAAA,EAAAA,OAA6BC,EAAAH,EAC7BI,KAAAA,OAAOC,IAAAA,EAAAA,EAAMC,OAEbH,eAAA,OACEI,wCAGEA,EAACC,cAAAC,EACC,CAAAC,UAAW,SAAAC,OAAKC,EAAAD,EAAFC,GACZA,EAAGC,cAAc,EAAU,GAC3BD,EAAGE,QAAQC,EAAWX,GAAOW,EAAWX,IACxCQ,EAAGI,YACL,EACAJ,GAAI,CACFK,OAAO,EACPC,WAAW,EACXC,WAAsC,EAA1BC,OAAOC,iBACnBC,YAAaC,EACbC,iBAAkBC,GAEpBC,QAAS,CAAEC,KAAMC,EAAcC,cApB5B,IAAAC,EAAA,CAAEC,YAAY,GAAMD,GAoBwBC,0BAE/CxB,gBAACyB,EAAiB,CAChBC,aAAW,EACXC,IAAK,KACLC,KAAM,GACNC,IAAK,MACLC,OAAQjB,OAAOkB,WAAalB,OAAOmB,YACnCC,SAAU,CAAC,EAAG,EAAG,MAElBvC,GAIT,EAjDMwC,EAAA,CAAA,GACDpC,EAAMqC,OAAQ,CACbC,UAAW,SAEZtC,EAAAA,EAAMC,QAAS,CACdqC,UAAW,SAEZtC,EAAAA,EAAMuC,OAAQ,CACbD,UAAW"}
@@ -1,2 +0,0 @@
1
- var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,i,a=/*#__PURE__*/r(e),l=/*#__PURE__*/r(t);exports.Sizes=void 0,(i=exports.Sizes||(exports.Sizes={})).SMALL="small",i.MEDIUM="medium",i.LARGE="large";var s,o,u=((n={})[exports.Sizes.SMALL]=200,n[exports.Sizes.MEDIUM]=300,n[exports.Sizes.LARGE]=500,n),E=((s={})[exports.Sizes.SMALL]=200,s[exports.Sizes.MEDIUM]=300,s[exports.Sizes.LARGE]=500,s),c=t.forwardRef(function(e,t){var r=e.id,n=e.name,i=e.alt,s=e.loading,o=void 0===s?"eager":s,u=e.className,c=e.size,A=void 0===c?exports.Sizes.MEDIUM:c,f=e.disablePadding,I=void 0!==f&&f,S=exports.Sizes.SMALL,p=exports.Sizes.MEDIUM;return n?/*#__PURE__*/l.default.createElement("picture",null,A===exports.Sizes.LARGE||A===exports.Sizes.MEDIUM?/*#__PURE__*/l.default.createElement(l.default.Fragment,null,/*#__PURE__*/l.default.createElement("source",{width:E[S],height:E[S],media:"(max-width: 575px)",srcSet:d(n,S,"1x")+", "+d(n,S,"2x")+" 2x"}),A!==exports.Sizes.MEDIUM?/*#__PURE__*/l.default.createElement("source",{width:E[p],height:E[p],media:"(max-width: 992px)",srcSet:d(n,p,"1x")+", "+d(n,p,"2x")+" 2x"}):null):null,/*#__PURE__*/l.default.createElement("img",{id:r,ref:t,alt:null!=i?i:n.replace("-"," "),"data-testid":"wds-"+n+"-illustration",className:a.default("wds-illustration","wds-illustration-"+n,{"wds-illustration-padding":!I},u),loading:o,src:d(n,A,"1x"),srcSet:d(n,A,"2x")+" 2x",width:E[A],height:E[A]})):null});function d(e,t,r){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+r+".webp"}exports.Assets=void 0,(o=exports.Assets||(exports.Assets={})).BELL="bell",o.BRIEFCASE="briefcase",o.BUSINESS_CARD="business-card",o.CALENDAR="calendar",o.CHECK_MARK="check-mark",o.CLOSED_WINDOW="closed-window",o.COIN_PILE_DOWN="coin-pile-down",o.COIN_PILE_UP="coin-pile-up",o.CONFETTI="confetti",o.CONSTRUCTION_FENCE="construction-fence",o.CONVERT="convert",o.COOKIE="cookie",o.DIGITAL_CARD_2="digital-card-2",o.DIGITAL_CARD="digital-card",o.DOCUMENTS="documents",o.DOOR="door",o.ECO_CARD="eco-card",o.ELECTRIC_PLUG="electric-plug",o.EMAIL_SUCCESS="email-success",o.EMAIL="email",o.EXCLAMATION_MARK="exclamation-mark",o.FLAG="flag",o.FLOWER="flower",o.GEAR="gear",o.GLOBE="globe",o.GRAPH="graph",o.HEART_2="heart-2",o.HEART_3="heart-3",o.HEART_4="heart-4",o.HEART_5="heart-5",o.HEART="heart",o.HOUSE="house",o.ID_CARD="id-card",o.INFINITE="infinite",o.INVITE_LETTER="invite-letter",o.JARS="jars",o.KEY="key",o.LIGHT_BULB="light-bulb",o.LOCK="lock",o.MAGNIFYING_GLASS="magnifying-glass",o.MAP="map",o.MARBLE_CARD_BUSINESS="marble-card-business",o.MARBLE_CARD="marble-card",o.MARBLE="marble",o.MEGAPHONE="megaphone",o.MULTI_CURRENCY="multi-currency",o.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",o.PALM_TREE="palm-tree",o.PERCENTAGE="percentage",o.PERSONAL_CARD="personal-card",o.PHONES="phones",o.PIE_CHART="pie-chart",o.PLANE_2="plane-2",o.PLANE="plane",o.PUZZLE_PIECES="puzzle-pieces",o.QUESTION_MARK="question-mark",o.RECEIVE="receive",o.REMINDER_LETTER="reminder-letter",o.SAND_TIMER="sand-timer",o.SHOPPING_BAG="shopping-bag",o.SKIP_AUTHENTICATION="skip-authentication",o.SPEECH_BUBBLE="speech-bubble",o.TOOL="tool",o.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",o.WALLET="wallet";var A,f=t.lazy(function(){return Promise.resolve().then(function(){return require("./Scene-6164c983.js")})}),I=t.lazy(function(){return Promise.resolve().then(function(){return require("./LockModel-d3070ff8.js")})}),S=t.lazy(function(){return Promise.resolve().then(function(){return require("./GlobeModel-f3a58aa5.js")})}),p=t.lazy(function(){return Promise.resolve().then(function(){return require("./ConfettiModel-77cb11cf.js")})});!function(e){e[e.INIT=0]="INIT",e[e.FALLBACK=1]="FALLBACK",e[e.ASSET_3D=2]="ASSET_3D"}(A||(A={})),exports.Illustration=c,exports.Illustration3d=function(e){var r,n,i,a=e.name,s=e.size,o=e.alt,u=void 0===o?"":o,E=l.default.useState(A.INIT),d=E[0],L=E[1],m=(r=t.useState({level:1}),n=r[0],i=r[1],t.useEffect(function(){"getBattery"in navigator&&function(){try{Promise.resolve(navigator.getBattery()).then(function(e){i({level:e.level})})}catch(e){return Promise.reject(e)}}()},[]),n).level;return t.useEffect(function(){var e,t,r,n=!((void 0===(r=window.navigator.connection)?(console.log("connection API is unsupported"),0):(console.log("do internet check",null==r?void 0:r.effectiveType),["slow-2g","2g"].includes(null==r?void 0:r.effectiveType)||!0===(null==(e=navigator)||null==(t=e.connection)?void 0:t.saveData)))||m<=.2);new Promise(function(e){return setTimeout(e,0)}).then(function(){L(n?A.ASSET_3D:A.FALLBACK)})},[]),d===A.INIT?null:d===A.ASSET_3D?/*#__PURE__*/l.default.createElement(t.Suspense,{fallback:null},/*#__PURE__*/l.default.createElement(f,{size:s},function(e){switch(e){case exports.Assets.LOCK:/*#__PURE__*/return l.default.createElement(I,null);case exports.Assets.GLOBE:/*#__PURE__*/return l.default.createElement(S,null);case exports.Assets.CONFETTI:/*#__PURE__*/return l.default.createElement(p,null);default:/*#__PURE__*/return l.default.createElement(c,{name:e,alt:""})}}(a))):/*#__PURE__*/l.default.createElement(c,{name:a,size:s,alt:u})},exports.ImageSizes=u;
2
- //# sourceMappingURL=index-3be70f77.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-3be70f77.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/useBattery.ts","../src/illustrations3d/Illustration3d.tsx"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\nexport const ImageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\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 disablePadding?: boolean;\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 (\n {\n id,\n name,\n alt,\n loading = 'eager',\n className,\n size = Sizes.MEDIUM,\n disablePadding = false,\n }: Props,\n ref,\n ) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\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 {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 992px)\"\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 ?? name.replace('-', ' ')}\n data-testid={`wds-${name}-illustration`}\n className={classNames(\n 'wds-illustration',\n `wds-illustration-${name}`,\n { 'wds-illustration-padding': !disablePadding },\n className,\n )}\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 BUSINESS_CARD = 'business-card',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE_DOWN = 'coin-pile-down',\n COIN_PILE_UP = 'coin-pile-up',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DIGITAL_CARD_2 = 'digital-card-2',\n DIGITAL_CARD = 'digital-card',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ECO_CARD = 'eco-card',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL_SUCCESS = 'email-success',\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_2 = 'heart-2',\n HEART_3 = 'heart-3',\n HEART_4 = 'heart-4',\n HEART_5 = 'heart-5',\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 MARBLE_CARD_BUSINESS = 'marble-card-business',\n MARBLE_CARD = 'marble-card',\n MARBLE = 'marble',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PERCENTAGE = 'percentage',\n PERSONAL_CARD = 'personal-card',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE_2 = 'plane-2',\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 | 'business-card'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile-down'\n | 'coin-pile-up'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'digital-card-2'\n | 'digital-card'\n | 'documents'\n | 'door'\n | 'eco-card'\n | 'electric-plug'\n | 'email-success'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart-2'\n | 'heart-3'\n | 'heart-4'\n | 'heart-5'\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 | 'marble-card-business'\n | 'marble-card'\n | 'marble'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'percentage'\n | 'personal-card'\n | 'phones'\n | 'pie-chart'\n | 'plane-2'\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 { useState, useEffect } from 'react';\n\nconst useBattery = () => {\n const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });\n\n useEffect(() => {\n const getBatteryData = async () => {\n // @ts-expect-error .getBattery exists in Navigator interface\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n const battery = await navigator.getBattery();\n\n setBatteryData({\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n level: battery.level,\n });\n };\n // Check if the browser supports the Battery API\n if ('getBattery' in navigator) {\n void getBatteryData();\n }\n }, []);\n\n return batteryData;\n};\n\nexport default useBattery;\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport React, { lazy, Suspense, useEffect } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize } from '../common';\n\nimport Illustration, { Assets } from './../illustrations';\nimport useBattery from './useBattery';\n\nconst Scene = lazy(() => import('./Scene'));\nconst LockModel = lazy(() => import('./LockModel'));\nconst GlobeModel = lazy(() => import('./GlobeModel'));\nconst ConfettiModel = lazy(() => import('./ConfettiModel'));\n\nexport type Illustration3dNames = 'lock' | 'globe' | 'confetti';\n\nexport type Props = {\n name: Illustration3dNames;\n size?: SmallSize | MediumSize | LargeSize;\n alt?: string;\n};\n\nenum RenderMode {\n INIT,\n FALLBACK,\n ASSET_3D,\n}\n\nconst Illustration3d = ({ name, size, alt = '' }: Props) => {\n const [renderMode, setRenderMode] = React.useState<RenderMode>(RenderMode.INIT);\n const { level } = useBattery();\n\n useEffect(() => {\n const isClientOkRender3dAssset = !(isConnectionSlow() || level <= 0.2);\n\n // todo: remove artificial delay\n void wait(0).then(() => {\n setRenderMode(isClientOkRender3dAssset ? RenderMode.ASSET_3D : RenderMode.FALLBACK);\n });\n }, []);\n\n return renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (\n <Suspense fallback={null}>\n <Scene size={size}>{getModel(name)}</Scene>\n </Suspense>\n ) : (\n <Illustration name={name} size={size} alt={alt} />\n );\n};\n\nfunction getModel(name: Props['name']) {\n switch (name) {\n case Assets.LOCK:\n return <LockModel />;\n case Assets.GLOBE:\n return <GlobeModel />;\n case Assets.CONFETTI:\n return <ConfettiModel />;\n default:\n return <Illustration name={name} alt=\"\" />;\n }\n}\n\nfunction isConnectionSlow(): boolean {\n // @ts-expect-error .connection prop exists in Navigator interface\n const { connection } = window.navigator;\n if (connection === undefined) {\n console.log('connection API is unsupported');\n return false;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n console.log('do internet check', connection?.effectiveType);\n return (\n ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||\n // @ts-expect-error later\n navigator?.connection?.saveData === true\n );\n}\n\nfunction wait(time: number) {\n return new Promise((resolve) => setTimeout(resolve, time));\n}\n\nexport default Illustration3d;\n"],"names":["_ImageSizes","Sizes","ImageSizes","_imageSizes","Assets","SMALL","MEDIUM","LARGE","imageSizes","Illustration","forwardRef","ref","id","name","_ref","alt","loading","_ref$loading","className","size","_ref$size","disablePadding","_ref$disablePadding","React","createElement","Fragment","width","height","media","srcSet","defineSrc","replace","classNames","src","illustration","descriptor","RenderMode","lazy","Promise","resolve","then","require","LockModel","GlobeModel","ConfettiModel","useState","batteryData","setBatteryData","_ref$alt","_React$useState","INIT","renderMode","setRenderMode","level","_useState","useEffect","getBatteryData","navigator","getBattery","battery","e","reject","_navigator","_navigator$connection","undefined","window","connection","console","log","effectiveType","includes","saveData","setTimeout","isClientOkRender3dAssset","ASSET_3D","FALLBACK","Suspense","fallback","Scene","LOCK","GLOBE","CONFETTI","getModel"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import e from"classnames";import t,{forwardRef as n,useState as a,useEffect as i,lazy as r,Suspense as l}from"react";var E,o;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(o||(o={}));var c,s,u=((E={})[o.SMALL]=200,E[o.MEDIUM]=300,E[o.LARGE]=500,E),A=((c={})[o.SMALL]=200,c[o.MEDIUM]=300,c[o.LARGE]=500,c),d=n(function(n,a){var i=n.id,r=n.name,l=n.alt,E=n.loading,c=void 0===E?"eager":E,s=n.className,u=n.size,d=void 0===u?o.MEDIUM:u,m=n.disablePadding,L=void 0!==m&&m,T=o.SMALL,_=o.MEDIUM;return r?/*#__PURE__*/t.createElement("picture",null,d===o.LARGE||d===o.MEDIUM?/*#__PURE__*/t.createElement(t.Fragment,null,/*#__PURE__*/t.createElement("source",{width:A[T],height:A[T],media:"(max-width: 575px)",srcSet:I(r,T,"1x")+", "+I(r,T,"2x")+" 2x"}),d!==o.MEDIUM?/*#__PURE__*/t.createElement("source",{width:A[_],height:A[_],media:"(max-width: 992px)",srcSet:I(r,_,"1x")+", "+I(r,_,"2x")+" 2x"}):null):null,/*#__PURE__*/t.createElement("img",{id:i,ref:a,alt:null!=l?l:r.replace("-"," "),"data-testid":"wds-"+r+"-illustration",className:e("wds-illustration","wds-illustration-"+r,{"wds-illustration-padding":!L},s),loading:c,src:I(r,d,"1x"),srcSet:I(r,d,"2x")+" 2x",width:A[d],height:A[d]})):null});function I(e,t,n){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+n+".webp"}!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.BUSINESS_CARD="business-card",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE_DOWN="coin-pile-down",e.COIN_PILE_UP="coin-pile-up",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DIGITAL_CARD_2="digital-card-2",e.DIGITAL_CARD="digital-card",e.DOCUMENTS="documents",e.DOOR="door",e.ECO_CARD="eco-card",e.ELECTRIC_PLUG="electric-plug",e.EMAIL_SUCCESS="email-success",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_2="heart-2",e.HEART_3="heart-3",e.HEART_4="heart-4",e.HEART_5="heart-5",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.MARBLE_CARD_BUSINESS="marble-card-business",e.MARBLE_CARD="marble-card",e.MARBLE="marble",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PERCENTAGE="percentage",e.PERSONAL_CARD="personal-card",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE_2="plane-2",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"}(s||(s={}));var m,L=r(function(){return import("./Scene-627695a5.js")}),T=r(function(){return import("./LockModel-059a77ed.js")}),_=r(function(){return import("./GlobeModel-98d215e9.js")}),R=r(function(){return import("./ConfettiModel-9eb6dfdb.js")});!function(e){e[e.INIT=0]="INIT",e[e.FALLBACK=1]="FALLBACK",e[e.ASSET_3D=2]="ASSET_3D"}(m||(m={}));var N=function(e){var n,r,E,o=e.name,c=e.size,u=e.alt,A=void 0===u?"":u,I=t.useState(m.INIT),N=I[0],S=I[1],C=(n=a({level:1}),r=n[0],E=n[1],i(function(){"getBattery"in navigator&&function(){try{Promise.resolve(navigator.getBattery()).then(function(e){E({level:e.level})})}catch(e){return Promise.reject(e)}}()},[]),r).level;return i(function(){var e,t,n,a=!((void 0===(n=window.navigator.connection)?(console.log("connection API is unsupported"),0):(console.log("do internet check",null==n?void 0:n.effectiveType),["slow-2g","2g"].includes(null==n?void 0:n.effectiveType)||!0===(null==(e=navigator)||null==(t=e.connection)?void 0:t.saveData)))||C<=.2);new Promise(function(e){return setTimeout(e,0)}).then(function(){S(a?m.ASSET_3D:m.FALLBACK)})},[]),N===m.INIT?null:N===m.ASSET_3D?/*#__PURE__*/t.createElement(l,{fallback:null},/*#__PURE__*/t.createElement(L,{size:c},function(e){switch(e){case s.LOCK:/*#__PURE__*/return t.createElement(T,null);case s.GLOBE:/*#__PURE__*/return t.createElement(_,null);case s.CONFETTI:/*#__PURE__*/return t.createElement(R,null);default:/*#__PURE__*/return t.createElement(d,{name:e,alt:""})}}(o))):/*#__PURE__*/t.createElement(d,{name:o,size:c,alt:A})};export{s as A,u as I,o as S,d as a,N as b};
2
- //# sourceMappingURL=index-46554083.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-46554083.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/useBattery.ts","../src/illustrations3d/Illustration3d.tsx"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\nexport const ImageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\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 disablePadding?: boolean;\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 (\n {\n id,\n name,\n alt,\n loading = 'eager',\n className,\n size = Sizes.MEDIUM,\n disablePadding = false,\n }: Props,\n ref,\n ) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\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 {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 992px)\"\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 ?? name.replace('-', ' ')}\n data-testid={`wds-${name}-illustration`}\n className={classNames(\n 'wds-illustration',\n `wds-illustration-${name}`,\n { 'wds-illustration-padding': !disablePadding },\n className,\n )}\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 BUSINESS_CARD = 'business-card',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE_DOWN = 'coin-pile-down',\n COIN_PILE_UP = 'coin-pile-up',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DIGITAL_CARD_2 = 'digital-card-2',\n DIGITAL_CARD = 'digital-card',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ECO_CARD = 'eco-card',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL_SUCCESS = 'email-success',\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_2 = 'heart-2',\n HEART_3 = 'heart-3',\n HEART_4 = 'heart-4',\n HEART_5 = 'heart-5',\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 MARBLE_CARD_BUSINESS = 'marble-card-business',\n MARBLE_CARD = 'marble-card',\n MARBLE = 'marble',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PERCENTAGE = 'percentage',\n PERSONAL_CARD = 'personal-card',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE_2 = 'plane-2',\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 | 'business-card'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile-down'\n | 'coin-pile-up'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'digital-card-2'\n | 'digital-card'\n | 'documents'\n | 'door'\n | 'eco-card'\n | 'electric-plug'\n | 'email-success'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart-2'\n | 'heart-3'\n | 'heart-4'\n | 'heart-5'\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 | 'marble-card-business'\n | 'marble-card'\n | 'marble'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'percentage'\n | 'personal-card'\n | 'phones'\n | 'pie-chart'\n | 'plane-2'\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 { useState, useEffect } from 'react';\n\nconst useBattery = () => {\n const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });\n\n useEffect(() => {\n const getBatteryData = async () => {\n // @ts-expect-error .getBattery exists in Navigator interface\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n const battery = await navigator.getBattery();\n\n setBatteryData({\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n level: battery.level,\n });\n };\n // Check if the browser supports the Battery API\n if ('getBattery' in navigator) {\n void getBatteryData();\n }\n }, []);\n\n return batteryData;\n};\n\nexport default useBattery;\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport React, { lazy, Suspense, useEffect } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize } from '../common';\n\nimport Illustration, { Assets } from './../illustrations';\nimport useBattery from './useBattery';\n\nconst Scene = lazy(() => import('./Scene'));\nconst LockModel = lazy(() => import('./LockModel'));\nconst GlobeModel = lazy(() => import('./GlobeModel'));\nconst ConfettiModel = lazy(() => import('./ConfettiModel'));\n\nexport type Illustration3dNames = 'lock' | 'globe' | 'confetti';\n\nexport type Props = {\n name: Illustration3dNames;\n size?: SmallSize | MediumSize | LargeSize;\n alt?: string;\n};\n\nenum RenderMode {\n INIT,\n FALLBACK,\n ASSET_3D,\n}\n\nconst Illustration3d = ({ name, size, alt = '' }: Props) => {\n const [renderMode, setRenderMode] = React.useState<RenderMode>(RenderMode.INIT);\n const { level } = useBattery();\n\n useEffect(() => {\n const isClientOkRender3dAssset = !(isConnectionSlow() || level <= 0.2);\n\n // todo: remove artificial delay\n void wait(0).then(() => {\n setRenderMode(isClientOkRender3dAssset ? RenderMode.ASSET_3D : RenderMode.FALLBACK);\n });\n }, []);\n\n return renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (\n <Suspense fallback={null}>\n <Scene size={size}>{getModel(name)}</Scene>\n </Suspense>\n ) : (\n <Illustration name={name} size={size} alt={alt} />\n );\n};\n\nfunction getModel(name: Props['name']) {\n switch (name) {\n case Assets.LOCK:\n return <LockModel />;\n case Assets.GLOBE:\n return <GlobeModel />;\n case Assets.CONFETTI:\n return <ConfettiModel />;\n default:\n return <Illustration name={name} alt=\"\" />;\n }\n}\n\nfunction isConnectionSlow(): boolean {\n // @ts-expect-error .connection prop exists in Navigator interface\n const { connection } = window.navigator;\n if (connection === undefined) {\n console.log('connection API is unsupported');\n return false;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n console.log('do internet check', connection?.effectiveType);\n return (\n ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||\n // @ts-expect-error later\n navigator?.connection?.saveData === true\n );\n}\n\nfunction wait(time: number) {\n return new Promise((resolve) => setTimeout(resolve, time));\n}\n\nexport default Illustration3d;\n"],"names":["_ImageSizes","Sizes","ImageSizes","_imageSizes","Assets","SMALL","MEDIUM","LARGE","imageSizes","Illustration","forwardRef","ref","id","name","_ref","alt","loading","_ref$loading","className","size","_ref$size","disablePadding","_ref$disablePadding","React","createElement","Fragment","width","height","media","srcSet","defineSrc","replace","classNames","src","illustration","descriptor","RenderMode","lazy","import","LockModel","GlobeModel","ConfettiModel","Illustration3d","useState","batteryData","setBatteryData","_ref$alt","_React$useState","INIT","renderMode","setRenderMode","level","_useState","useEffect","getBatteryData","navigator","getBattery","battery","e","Promise","reject","_navigator","_navigator$connection","undefined","window","connection","console","log","effectiveType","includes","saveData","resolve","setTimeout","then","isClientOkRender3dAssset","ASSET_3D","FALLBACK","Suspense","fallback","Scene","LOCK","GLOBE","CONFETTI","getModel"],"mappings":"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"}