@wise/art 2.5.0 → 2.6.0-beta.2

package/src/illustrations3d/models/MultiCurrency.tsx

@@ -0,0 +1,58 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import React, { useRef } from 'react';
+import { ObjectLoader, TextureLoader, Color } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MultiCurrency = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc(`multi-currency.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('multi-currency-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+
+  const animatedMaps = [];
+
+  model.scene.traverse((child) => {
+    if (child.name.includes('Note')) {
+      child.castShadow = true;
+      child.receiveShadow = true;
+    }
+
+    if (child.name.startsWith('Coin_') && child.isMesh) {
+      const { material } = child;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      material.bumpScale = 1;
+      material.color = new Color(0.49, 0.49, 0.49);
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+
+    if (child.name.startsWith('NoteBase_') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+
+    if (child.name.includes('Wise') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+  });
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    animatedMaps.forEach((animatedMap) => {
+      animatedMap.offset.x += 0.001;
+    });
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} position={[-0.5, -10, 0]} scale={1.3} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MultiCurrency;

package/src/illustrations3d/models/Plane.tsx

@@ -0,0 +1,33 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import React, { useRef } from 'react';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Plane = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('plane.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('plane-light.json'));
+  const plane = model.scene.getObjectByName('Plane_6_update');
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.y += 0.018;
+
+    plane.position.x = 0.45;
+
+    plane.position.y = 7.5;
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.3} position={[0, -7, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Plane;

package/src/illustrations3d/utils.ts

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+
+import type { IllustrationNames } from '../illustrations/metadata';
+
+export function useBattery() {
+  const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });
+
+  useEffect(() => {
+    const getBatteryData = async () => {
+      // @ts-expect-error .getBattery exists in Navigator interface
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      const battery = await navigator.getBattery();
+
+      setBatteryData({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        level: battery?.level,
+      });
+    };
+    // Check if the browser supports the Battery API
+    if ('getBattery' in navigator) {
+      void getBatteryData();
+    }
+  }, []);
+
+  return batteryData;
+}
+
+export function isBatteryLow(batteryLevel: number): boolean {
+  return batteryLevel < 0.2;
+}
+
+export function isConnectionSlow(): boolean {
+  // @ts-expect-error .connection prop exists in Navigator interface
+  const { connection } = window.navigator;
+  if (connection === undefined) {
+    return false;
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||
+    // @ts-expect-error Property 'connection' does exist on type 'Navigator'
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    navigator?.connection?.saveData === true
+  );
+}
+
+export function defineSrc(asset: string): string {
+  return `https://wise.com/web-art/assets/illustrations3d/${asset}`;
+}
+
+const illustration3dNames = [
+  'lock',
+  'globe',
+  'confetti',
+  'check-mark',
+  'flower',
+  'graph',
+  'jars',
+  'magnifying-glass',
+  'marble',
+  'marble-card',
+  'multi-currency',
+  'plane',
+];
+
+export function is3dIllustrationSupported(asset: IllustrationNames): boolean {
+  return illustration3dNames.includes(asset);
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { Flag } from './flags';
+export { default as Illustration } from './illustrations';
+export { default as Illustration3d } from './illustrations3d';
+
+export { Assets } from './illustrations';
+export { Sizes } from './common';
+
+export type { FlagProps } from './flags';
+export type { IllustrationNames, IllustrationProps } from './illustrations';
+export type { Illustration3dNames, Illustration3dProps } from './illustrations3d';
+
+export { is3dIllustrationSupported } from './illustrations3d';

package/dist/flags/Flag.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Flag } from './Flag';
-declare const meta: Meta<typeof Flag>;
-export default meta;
-type Story = StoryObj<typeof Flag>;
-export declare const Basic: Story;

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

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

package/dist/index.modern.mjs

@@ -1,2 +0,0 @@
-import e,{useState as t,useEffect as E,forwardRef as a}from"react";import i from"classnames";const l=({code:e,intrinsicSize:a=64})=>{const[i,l]=t(null);E(()=>{l(null)},[e]);const n=a>=150,r="unknown"!==i?`${e.toLowerCase()}${null==i&&n?"-detailed":""}`:"wise";/*#__PURE__*/return React.createElement("img",{src:`https://wise.com/web-art/assets/flags/${r}.svg`,alt:"",width:a,height:a,onError:()=>{l(e=>null==e&&n?"simple":"unknown")}})};var n;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(n||(n={}));const r={[n.SMALL]:200,[n.MEDIUM]:300,[n.LARGE]:500},s=a(({id:t,name:E,alt:a,loading:l="eager",className:s,size:o=n.MEDIUM,disablePadding:A=!1},I)=>{const{SMALL:d,MEDIUM:L}=n;return E?/*#__PURE__*/e.createElement("picture",null,o===n.LARGE||o===n.MEDIUM?/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement("source",{width:r[d],height:r[d],media:"(max-width: 575px)",srcSet:`${c(E,d,"1x")}, ${c(E,d,"2x")} 2x`}),o!==n.MEDIUM?/*#__PURE__*/e.createElement("source",{width:r[L],height:r[L],media:"(max-width: 992px)",srcSet:`${c(E,L,"1x")}, ${c(E,L,"2x")} 2x`}):null):null,/*#__PURE__*/e.createElement("img",{id:t,ref:I,alt:null!=a?a:E.replace("-"," "),"data-testid":`wds-${E}-illustration`,className:i("wds-illustration",`wds-illustration-${E}`,{"wds-illustration-padding":!A},s),loading:l,src:c(E,o,"1x"),srcSet:`${c(E,o,"2x")} 2x`,width:r[o],height:r[o]})):null});function c(e,t,E){return`https://wise.com/web-art/assets/illustrations/${e}-${t}@${E}.webp`}var o;!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"}(o||(o={}));export{o as Assets,l as Flag,s as Illustration,n as Sizes};
-//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.modern.mjs","sources":["../src/flags/Flag.tsx","../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface FlagProps {\n  /**\n   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).\n   */\n  code: string;\n\n  /**\n   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.\n   */\n  intrinsicSize?: number;\n}\n\nconst unknownFlagName = 'wise';\n\nexport const Flag = ({ code, intrinsicSize = 64 }: FlagProps) => {\n  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);\n  useEffect(() => {\n    setFallback(null);\n  }, [code]);\n\n  const detailed = intrinsicSize >= 150;\n  const name =\n    fallback !== 'unknown'\n      ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}`\n      : unknownFlagName;\n\n  return (\n    <img\n      src={`https://wise.com/web-art/assets/flags/${name}.svg`}\n      alt=\"\"\n      width={intrinsicSize}\n      height={intrinsicSize}\n      onError={() => {\n        setFallback((prev) => (prev == null && detailed ? 'simple' : 'unknown'));\n      }}\n    />\n  );\n};\n","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  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"],"names":["Flag","code","intrinsicSize","fallback","setFallback","useState","useEffect","detailed","name","toLowerCase","React","createElement","src","alt","width","height","onError","prev","Sizes","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","id","loading","className","size","disablePadding","ref","Fragment","media","srcSet","defineSrc","replace","classNames","illustration","descriptor","Assets"],"mappings":"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"}

package/dist/index.module.js

@@ -1,2 +0,0 @@
-import e,{useState as t,useEffect as i,forwardRef as a}from"react";import E from"classnames";var n,r,l=function(e){var a=e.code,E=e.intrinsicSize,n=void 0===E?64:E,r=t(null),l=r[0],s=r[1];i(function(){s(null)},[a]);var c=n>=150,o="unknown"!==l?a.toLowerCase()+(null==l&&c?"-detailed":""):"wise";/*#__PURE__*/return React.createElement("img",{src:"https://wise.com/web-art/assets/flags/"+o+".svg",alt:"",width:n,height:n,onError:function(){s(function(e){return null==e&&c?"simple":"unknown"})}})};!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(n||(n={}));var s,c=((r={})[n.SMALL]=200,r[n.MEDIUM]=300,r[n.LARGE]=500,r),o=a(function(t,i){var a=t.id,r=t.name,l=t.alt,s=t.loading,o=void 0===s?"eager":s,d=t.className,I=t.size,u=void 0===I?n.MEDIUM:I,L=t.disablePadding,R=void 0!==L&&L,m=n.SMALL,_=n.MEDIUM;return r?/*#__PURE__*/e.createElement("picture",null,u===n.LARGE||u===n.MEDIUM?/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement("source",{width:c[m],height:c[m],media:"(max-width: 575px)",srcSet:A(r,m,"1x")+", "+A(r,m,"2x")+" 2x"}),u!==n.MEDIUM?/*#__PURE__*/e.createElement("source",{width:c[_],height:c[_],media:"(max-width: 992px)",srcSet:A(r,_,"1x")+", "+A(r,_,"2x")+" 2x"}):null):null,/*#__PURE__*/e.createElement("img",{id:a,ref:i,alt:null!=l?l:r.replace("-"," "),"data-testid":"wds-"+r+"-illustration",className:E("wds-illustration","wds-illustration-"+r,{"wds-illustration-padding":!R},d),loading:o,src:A(r,u,"1x"),srcSet:A(r,u,"2x")+" 2x",width:c[u],height:c[u]})):null});function A(e,t,i){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+i+".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={}));export{s as Assets,l as Flag,o as Illustration,n as Sizes};
-//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.module.js","sources":["../src/flags/Flag.tsx","../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface FlagProps {\n  /**\n   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).\n   */\n  code: string;\n\n  /**\n   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.\n   */\n  intrinsicSize?: number;\n}\n\nconst unknownFlagName = 'wise';\n\nexport const Flag = ({ code, intrinsicSize = 64 }: FlagProps) => {\n  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);\n  useEffect(() => {\n    setFallback(null);\n  }, [code]);\n\n  const detailed = intrinsicSize >= 150;\n  const name =\n    fallback !== 'unknown'\n      ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}`\n      : unknownFlagName;\n\n  return (\n    <img\n      src={`https://wise.com/web-art/assets/flags/${name}.svg`}\n      alt=\"\"\n      width={intrinsicSize}\n      height={intrinsicSize}\n      onError={() => {\n        setFallback((prev) => (prev == null && detailed ? 'simple' : 'unknown'));\n      }}\n    />\n  );\n};\n","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  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"],"names":["Sizes","_imageSizes","Flag","_ref","code","intrinsicSize","_ref$intrinsicSize","_useState","useState","fallback","setFallback","useEffect","detailed","name","toLowerCase","React","createElement","src","alt","width","height","onError","prev","Assets","imageSizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","ref","id","loading","_ref$loading","className","size","_ref$size","disablePadding","_ref$disablePadding","Fragment","media","srcSet","defineSrc","replace","classNames","illustration","descriptor"],"mappings":"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"}

package/dist/index.umd.js

@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["exports","react","classnames"],t):t((e||self).art={},e.react,e.classnames)}(this,function(e,t,i){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,l,s=/*#__PURE__*/a(t),r=/*#__PURE__*/a(i);e.Sizes=void 0,(n=e.Sizes||(e.Sizes={})).SMALL="small",n.MEDIUM="medium",n.LARGE="large";var E,o=((l={})[e.Sizes.SMALL]=200,l[e.Sizes.MEDIUM]=300,l[e.Sizes.LARGE]=500,l),c=t.forwardRef(function(t,i){var a=t.id,n=t.name,l=t.alt,E=t.loading,c=void 0===E?"eager":E,u=t.className,A=t.size,I=void 0===A?e.Sizes.MEDIUM:A,R=t.disablePadding,L=void 0!==R&&R,S=e.Sizes.SMALL,m=e.Sizes.MEDIUM;return n?/*#__PURE__*/s.default.createElement("picture",null,I===e.Sizes.LARGE||I===e.Sizes.MEDIUM?/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement("source",{width:o[S],height:o[S],media:"(max-width: 575px)",srcSet:d(n,S,"1x")+", "+d(n,S,"2x")+" 2x"}),I!==e.Sizes.MEDIUM?/*#__PURE__*/s.default.createElement("source",{width:o[m],height:o[m],media:"(max-width: 992px)",srcSet:d(n,m,"1x")+", "+d(n,m,"2x")+" 2x"}):null):null,/*#__PURE__*/s.default.createElement("img",{id:a,ref:i,alt:null!=l?l:n.replace("-"," "),"data-testid":"wds-"+n+"-illustration",className:r.default("wds-illustration","wds-illustration-"+n,{"wds-illustration-padding":!L},u),loading:c,src:d(n,I,"1x"),srcSet:d(n,I,"2x")+" 2x",width:o[I],height:o[I]})):null});function d(e,t,i){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+i+".webp"}e.Assets=void 0,(E=e.Assets||(e.Assets={})).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",e.Flag=function(e){var i=e.code,a=e.intrinsicSize,n=void 0===a?64:a,l=t.useState(null),s=l[0],r=l[1];t.useEffect(function(){r(null)},[i]);var E=n>=150,o="unknown"!==s?i.toLowerCase()+(null==s&&E?"-detailed":""):"wise";/*#__PURE__*/return React.createElement("img",{src:"https://wise.com/web-art/assets/flags/"+o+".svg",alt:"",width:n,height:n,onError:function(){r(function(e){return null==e&&E?"simple":"unknown"})}})},e.Illustration=c});
-//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.umd.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/flags/Flag.tsx"],"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  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 { useEffect, useState } from 'react';\n\nexport interface FlagProps {\n  /**\n   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).\n   */\n  code: string;\n\n  /**\n   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.\n   */\n  intrinsicSize?: number;\n}\n\nconst unknownFlagName = 'wise';\n\nexport const Flag = ({ code, intrinsicSize = 64 }: FlagProps) => {\n  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);\n  useEffect(() => {\n    setFallback(null);\n  }, [code]);\n\n  const detailed = intrinsicSize >= 150;\n  const name =\n    fallback !== 'unknown'\n      ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}`\n      : unknownFlagName;\n\n  return (\n    <img\n      src={`https://wise.com/web-art/assets/flags/${name}.svg`}\n      alt=\"\"\n      width={intrinsicSize}\n      height={intrinsicSize}\n      onError={() => {\n        setFallback((prev) => (prev == null && detailed ? 'simple' : 'unknown'));\n      }}\n    />\n  );\n};\n"],"names":["Sizes","_imageSizes","Assets","imageSizes","SMALL","MEDIUM","LARGE","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","exports","code","intrinsicSize","_ref$intrinsicSize","_useState","useState","fallback","setFallback","useEffect","detailed","toLowerCase","onError","prev"],"mappings":"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"}