@wise/art 2.5.0 → 2.6.0-beta.2

package/dist/index.d.ts

@@ -1,6 +1,10 @@
-export { Flag } from './flags';
-export { default as Illustration } from './illustrations';
-export { Assets } from './illustrations';
-export { Sizes } from './common';
-export type { FlagProps } from './flags';
-export type { IllustrationNames, IllustrationProps } from './illustrations';
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../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","code","intrinsicSize","_ref$intrinsicSize","_useState","useState","fallback","setFallback","useEffect","detailed","toLowerCase","onError","prev"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,5 @@
+export { A as Assets, F as Flag, a as Illustration, b as Illustration3d, S as Sizes, i as is3dIllustrationSupported } from './index-3bf9c1e9.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'clsx';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.5.0",
+  "version": "2.6.0-beta.2",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -8,16 +8,26 @@
     "type": "git",
     "url": "git+https://github.com/transferwise/web-art.git"
   },
-  "source": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "./dist/index.module.js",
-  "unpkg": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
+  "author": "Wise Payments Ltd.",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/Illustration.css": "./dist/Illustration.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist/",
+    "src/",
+    "!**/*.tsbuildinfo"
   ],
   "scripts": {
     "setup": "yarn && yarn build",
+    "load-3d-i10s": "node ./scripts/load-3d-i10s.mjs",
     "load-i10s": "copyfiles -u 3 node_modules/wise-atoms/illustrations/**/*.png temp",
     "load-flags": "yarn load-country-flags && yarn load-currency-flags && yarn transform-flags && yarn convert-flags-svg-to-png",
     "load-country-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
@@ -26,44 +36,56 @@
     "convert-flags-svg-to-png": "node ./scripts/convert-flags-svg-to-png.mjs",
     "convert-i10s-png-to-webp": "rm -rf s3-bucket/illustrations/ && copyfiles --f node_modules/wise-atoms/illustrations/**/*.png s3-bucket/illustrations && node ./scripts/convert-png-to-webp.mjs",
     "generate-i10s-metadata": "node ./scripts/generate-i10s-metadata.mjs && eslint 'src/illustrations/metadata.ts' --fix",
-    "bundle": "rm -rf dist && microbundle --jsxFragment React.Fragment --jsx React.createElement && cpx src/illustrations/Illustration.css dist/",
+    "bundle": "rm -rf dist && rollup --config --sourcemap && cpx src/illustrations/Illustration.css dist/",
     "cleanup": "rm -rf temp",
-    "build": "yarn load-i10s && yarn convert-i10s-png-to-webp && yarn generate-i10s-metadata && yarn load-flags && yarn bundle && yarn cleanup",
+    "build": "yarn load-i10s && yarn load-3d-i10s && yarn convert-i10s-png-to-webp && yarn generate-i10s-metadata && yarn load-flags && yarn bundle && yarn cleanup",
     "start": "storybook dev -p 3001",
     "dev": "yarn start",
-    "test": "release-to-github-with-changelog-pre-release-checks",
+    "test": "echo 'release-to-github-with-changelog-pre-release-checks'",
     "lint-fix": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}' --fix",
-    "build-docs": "storybook build -o docs",
-    "deploy-docs": "deploy-to-github-pages -d docs -m main"
+    "build-docs": "storybook build -o docs && touch ./docs/.nojekyll"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.22.15",
+    "clsx": "^2.0.0",
+    "three": "^0.154.0",
+    "@react-three/fiber": "^8.13.5",
+    "@react-three/drei": "^9.78.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.11",
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/react": "^7.4.0",
     "@storybook/react-vite": "^7.4.0",
     "@transferwise/eslint-config": "^8.0.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/babel__core": "^7.20.1",
     "@types/glob": "^8.1.0",
     "@types/imagemin": "^8.0.1",
     "@types/imagemin-webp": "^7.0.0",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^28.1.8",
     "@types/jsdom": "^21.1.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "classnames": "^2.3.2",
+    "@types/three": "^0.154.0",
+    "babel-plugin-optimize-clsx": "^2.6.2",
     "copyfiles": "^2.4.1",
     "cpx": "^1.5.0",
-    "deploy-to-github-pages": "^1.0.1",
     "eslint": "^8.48.0",
-    "glob": "^8.0.3",
+    "glob": "^8.1.0",
     "imagemin": "^8.0.1",
     "imagemin-webp": "^7.0.0",
+    "gltf-pipeline": "^4.1.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
-    "jsdom": "~21.1.1",
-    "microbundle": "^0.15.1",
-    "prettier": "^2.7.1",
+    "jsdom": "~21.1.2",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-to-github-with-changelog": "^1.2.4",
@@ -72,15 +94,17 @@
     "ts-node": "10.9.1",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",
-    "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#bb7a63aa66453af9c77e754586381ac5b996a176"
+    "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#c2683d557cf6f7b4f6226ea8f0e67bc797e7fb2e"
   },
   "peerDependencies": {
-    "classnames": "^2.3",
     "react": ">=17",
     "react-dom": ">=17"
   },
   "prettier": "@transferwise/eslint-config/.prettierrc.js",
   "publishConfig": {
     "access": "public"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

package/src/common.ts

@@ -0,0 +1,17 @@
+export enum Sizes {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export const ImageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+export type LargeSize = 'large';
+export type MediumSize = 'medium';
+export type SmallSize = 'small';
+
+export type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';

package/src/flags/Flag.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flag } from './Flag';
+
+const meta: Meta<typeof Flag> = {
+  component: Flag,
+  title: 'Flag',
+};
+export default meta;
+
+type Story = StoryObj<typeof Flag>;
+
+export const Basic: Story = {
+  render: (args) => <Flag {...args} />,
+  args: {
+    code: 'GBP',
+    intrinsicSize: 64,
+  },
+};

package/src/flags/Flag.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export interface FlagProps {
+  /**
+   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).
+   */
+  code: string;
+
+  /**
+   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.
+   */
+  intrinsicSize?: number;
+}
+
+const unknownFlagName = 'wise';
+
+export const Flag = ({ code, intrinsicSize = 64 }: FlagProps) => {
+  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);
+  useEffect(() => {
+    setFallback(null);
+  }, [code]);
+
+  const detailed = intrinsicSize >= 150;
+  const name =
+    fallback !== 'unknown'
+      ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}`
+      : unknownFlagName;
+
+  return (
+    <img
+      src={`https://wise.com/web-art/assets/flags/${name}.svg`}
+      alt=""
+      width={intrinsicSize}
+      height={intrinsicSize}
+      onError={() => {
+        setFallback((prev) => (prev == null && detailed ? 'simple' : 'unknown'));
+      }}
+    />
+  );
+};

package/src/flags/index.ts

@@ -0,0 +1,2 @@
+export { Flag } from './Flag';
+export type { FlagProps } from './Flag';

package/src/illustrations/Illustration.css

@@ -0,0 +1,27 @@
+/* Prevent image overflow viewport or container element */
+img.wds-illustration {
+  max-width: 100%;
+}
+
+.wds-illustration-padding {
+  padding: 24px;
+}
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/src/illustrations/Illustration.stories.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/forbid-dom-props */
+import React from 'react';
+
+import Illustration, { Props as IllustrationProps } from './Illustration';
+import { Assets, IllustrationNames } from './metadata';
+
+export default {
+  component: Illustration,
+  title: 'Illustration',
+};
+
+export const All = () => {
+  const assetNames = Object.values(Assets);
+  return (
+    <>
+      <div>Total number of illustrations: {assetNames.length}</div>
+      {Object.values(Assets).map((assetName) => (
+        <p key={assetName}>
+          Asset: <code>{assetName}</code>
+          <Illustration alt={assetName} key={assetName} name={assetName as IllustrationNames} />
+        </p>
+      ))}
+    </>
+  );
+};
+
+export const Individual = ({ name = Assets.CHECK_MARK, ...props }: IllustrationProps) => {
+  return (
+    <>
+      <Illustration name={name} {...props} />
+    </>
+  );
+};

package/src/illustrations/Illustration.tsx

@@ -0,0 +1,95 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import {
+  type LargeSize,
+  type MediumSize,
+  type SmallSize,
+  type Descriptors,
+  Sizes,
+} from './../common';
+import type { IllustrationNames } from './metadata';
+
+// Picking only a few props from Image element to avoid breaking change
+// as in future underlying element might change
+type ImgProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;
+
+export type IllustrationSizes = LargeSize | MediumSize | SmallSize;
+
+export type Props = {
+  name: IllustrationNames;
+  alt: string;
+  size?: IllustrationSizes;
+  loading?: 'eager' | 'lazy';
+  disablePadding?: boolean;
+} & ImgProps;
+
+const imageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+const Illustration = forwardRef<HTMLImageElement, Props>(
+  (
+    {
+      id,
+      name,
+      alt,
+      loading = 'eager',
+      className,
+      size = Sizes.MEDIUM,
+      disablePadding = false,
+    }: Props,
+    ref,
+  ) => {
+    const { SMALL, MEDIUM } = Sizes;
+
+    return name ? (
+      <picture>
+        {size === Sizes.LARGE || size === Sizes.MEDIUM ? (
+          <>
+            <source
+              width={imageSizes[SMALL]}
+              height={imageSizes[SMALL]}
+              media="(max-width: 575px)"
+              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}
+            />
+            {size !== Sizes.MEDIUM ? (
+              <source
+                width={imageSizes[MEDIUM]}
+                height={imageSizes[MEDIUM]}
+                media="(max-width: 992px)"
+                srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}
+              />
+            ) : null}
+          </>
+        ) : null}
+
+        <img
+          id={id}
+          ref={ref}
+          alt={alt ?? name.replace('-', ' ')}
+          data-testid={`wds-${name}-illustration`}
+          className={clsx(
+            'wds-illustration',
+            `wds-illustration-${name}`,
+            { 'wds-illustration-padding': !disablePadding },
+            className,
+          )}
+          loading={loading}
+          src={defineSrc(name, size, '1x')}
+          srcSet={`${defineSrc(name, size, '2x')} 2x`}
+          width={imageSizes[size]}
+          height={imageSizes[size]}
+        />
+      </picture>
+    ) : null;
+  },
+);
+
+function defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {
+  return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
+}
+
+export default Illustration;

package/src/illustrations/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Illustration';
+export type { Props as IllustrationProps } from './Illustration';
+
+export { Assets } from './metadata';
+export type { IllustrationNames } from './metadata';

package/src/illustrations/metadata.ts

@@ -0,0 +1,141 @@
+/*
+ *
+ * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
+ * See: `scripts/generate-i10s-metadata.mjs`
+ *
+ */
+
+export enum Assets {
+  BELL = 'bell',
+  BRIEFCASE = 'briefcase',
+  BUSINESS_CARD = 'business-card',
+  CALENDAR = 'calendar',
+  CHECK_MARK = 'check-mark',
+  CLOSED_WINDOW = 'closed-window',
+  COIN_PILE_DOWN = 'coin-pile-down',
+  COIN_PILE_UP = 'coin-pile-up',
+  CONFETTI = 'confetti',
+  CONSTRUCTION_FENCE = 'construction-fence',
+  CONVERT = 'convert',
+  COOKIE = 'cookie',
+  DIGITAL_CARD_2 = 'digital-card-2',
+  DIGITAL_CARD = 'digital-card',
+  DOCUMENTS = 'documents',
+  DOOR = 'door',
+  ECO_CARD = 'eco-card',
+  ELECTRIC_PLUG = 'electric-plug',
+  EMAIL_SUCCESS = 'email-success',
+  EMAIL = 'email',
+  EXCLAMATION_MARK = 'exclamation-mark',
+  FLAG = 'flag',
+  FLOWER = 'flower',
+  GEAR = 'gear',
+  GLOBE = 'globe',
+  GRAPH = 'graph',
+  HEART_2 = 'heart-2',
+  HEART_3 = 'heart-3',
+  HEART_4 = 'heart-4',
+  HEART_5 = 'heart-5',
+  HEART = 'heart',
+  HOUSE = 'house',
+  ID_CARD = 'id-card',
+  INFINITE = 'infinite',
+  INVITE_LETTER = 'invite-letter',
+  JARS = 'jars',
+  KEY = 'key',
+  LIGHT_BULB = 'light-bulb',
+  LOCK = 'lock',
+  MAGNIFYING_GLASS = 'magnifying-glass',
+  MAP = 'map',
+  MARBLE_CARD_BUSINESS = 'marble-card-business',
+  MARBLE_CARD = 'marble-card',
+  MARBLE = 'marble',
+  MEGAPHONE = 'megaphone',
+  MULTI_CURRENCY = 'multi-currency',
+  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',
+  PALM_TREE = 'palm-tree',
+  PERCENTAGE = 'percentage',
+  PERSONAL_CARD = 'personal-card',
+  PHONES = 'phones',
+  PIE_CHART = 'pie-chart',
+  PLANE_2 = 'plane-2',
+  PLANE = 'plane',
+  PUZZLE_PIECES = 'puzzle-pieces',
+  QUESTION_MARK = 'question-mark',
+  RECEIVE = 'receive',
+  REMINDER_LETTER = 'reminder-letter',
+  SAND_TIMER = 'sand-timer',
+  SHOPPING_BAG = 'shopping-bag',
+  SKIP_AUTHENTICATION = 'skip-authentication',
+  SPEECH_BUBBLE = 'speech-bubble',
+  TOOL = 'tool',
+  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',
+  WALLET = 'wallet',
+}
+
+export type IllustrationNames =
+  | 'bell'
+  | 'briefcase'
+  | 'business-card'
+  | 'calendar'
+  | 'check-mark'
+  | 'closed-window'
+  | 'coin-pile-down'
+  | 'coin-pile-up'
+  | 'confetti'
+  | 'construction-fence'
+  | 'convert'
+  | 'cookie'
+  | 'digital-card-2'
+  | 'digital-card'
+  | 'documents'
+  | 'door'
+  | 'eco-card'
+  | 'electric-plug'
+  | 'email-success'
+  | 'email'
+  | 'exclamation-mark'
+  | 'flag'
+  | 'flower'
+  | 'gear'
+  | 'globe'
+  | 'graph'
+  | 'heart-2'
+  | 'heart-3'
+  | 'heart-4'
+  | 'heart-5'
+  | 'heart'
+  | 'house'
+  | 'id-card'
+  | 'infinite'
+  | 'invite-letter'
+  | 'jars'
+  | 'key'
+  | 'light-bulb'
+  | 'lock'
+  | 'magnifying-glass'
+  | 'map'
+  | 'marble-card-business'
+  | 'marble-card'
+  | 'marble'
+  | 'megaphone'
+  | 'multi-currency'
+  | 'one-invite-letter-opened'
+  | 'palm-tree'
+  | 'percentage'
+  | 'personal-card'
+  | 'phones'
+  | 'pie-chart'
+  | 'plane-2'
+  | 'plane'
+  | 'puzzle-pieces'
+  | 'question-mark'
+  | 'receive'
+  | 'reminder-letter'
+  | 'sand-timer'
+  | 'shopping-bag'
+  | 'skip-authentication'
+  | 'speech-bubble'
+  | 'tool'
+  | 'two-invite-letters-opened'
+  | 'wallet';