@wise/art 2.5.0 → 2.6.0

package/dist/index.mjs

@@ -0,0 +1,159 @@
+import { useState, useEffect, forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+const unknownFlagName = 'wise';
+const Flag = ({
+  code,
+  intrinsicSize = 64
+}) => {
+  const [fallback, setFallback] = useState(null);
+  useEffect(() => {
+    setFallback(null);
+  }, [code]);
+  const detailed = intrinsicSize >= 150;
+  const name = fallback !== 'unknown' ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}` : unknownFlagName;
+  return /*#__PURE__*/jsx("img", {
+    src: `https://wise.com/web-art/assets/flags/${name}.svg`,
+    alt: "",
+    width: intrinsicSize,
+    height: intrinsicSize,
+    onError: () => {
+      setFallback(prev => prev == null && detailed ? 'simple' : 'unknown');
+    }
+  });
+};
+
+var Sizes;
+(function (Sizes) {
+  Sizes["SMALL"] = "small";
+  Sizes["MEDIUM"] = "medium";
+  Sizes["LARGE"] = "large";
+})(Sizes || (Sizes = {}));
+
+const imageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500
+};
+const Illustration = /*#__PURE__*/forwardRef(({
+  id,
+  name,
+  alt,
+  loading = 'eager',
+  className,
+  size = Sizes.MEDIUM,
+  disablePadding = false
+}, ref) => {
+  const {
+    SMALL,
+    MEDIUM
+  } = Sizes;
+  return name ? /*#__PURE__*/jsxs("picture", {
+    children: [size === Sizes.LARGE || size === Sizes.MEDIUM ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("source", {
+        width: imageSizes[SMALL],
+        height: imageSizes[SMALL],
+        media: "(max-width: 575px)",
+        srcSet: `${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`
+      }), size !== Sizes.MEDIUM ? /*#__PURE__*/jsx("source", {
+        width: imageSizes[MEDIUM],
+        height: imageSizes[MEDIUM],
+        media: "(max-width: 992px)",
+        srcSet: `${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`
+      }) : null]
+    }) : null, /*#__PURE__*/jsx("img", {
+      id: id,
+      ref: ref,
+      alt: alt ?? name.replace('-', ' '),
+      "data-testid": `wds-${name}-illustration`,
+      className: clsx(`wds-illustration wds-illustration-${name}`, className, !disablePadding && 'wds-illustration-padding'),
+      loading: loading,
+      src: defineSrc(name, size, '1x'),
+      srcSet: `${defineSrc(name, size, '2x')} 2x`,
+      width: imageSizes[size],
+      height: imageSizes[size]
+    })]
+  }) : null;
+});
+function defineSrc(illustration, size, descriptor) {
+  return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
+}
+
+/*
+ *
+ * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
+ * See: `scripts/generate-i10s-metadata.mjs`
+ *
+ */
+var Assets;
+(function (Assets) {
+  Assets["BELL"] = "bell";
+  Assets["BRIEFCASE"] = "briefcase";
+  Assets["BUSINESS_CARD"] = "business-card";
+  Assets["CALENDAR"] = "calendar";
+  Assets["CHECK_MARK"] = "check-mark";
+  Assets["CLOSED_WINDOW"] = "closed-window";
+  Assets["COIN_PILE_DOWN"] = "coin-pile-down";
+  Assets["COIN_PILE_UP"] = "coin-pile-up";
+  Assets["CONFETTI"] = "confetti";
+  Assets["CONSTRUCTION_FENCE"] = "construction-fence";
+  Assets["CONVERT"] = "convert";
+  Assets["COOKIE"] = "cookie";
+  Assets["DIGITAL_CARD_2"] = "digital-card-2";
+  Assets["DIGITAL_CARD"] = "digital-card";
+  Assets["DOCUMENTS"] = "documents";
+  Assets["DOOR"] = "door";
+  Assets["ECO_CARD"] = "eco-card";
+  Assets["ELECTRIC_PLUG"] = "electric-plug";
+  Assets["EMAIL_SUCCESS"] = "email-success";
+  Assets["EMAIL"] = "email";
+  Assets["EXCLAMATION_MARK"] = "exclamation-mark";
+  Assets["FLAG"] = "flag";
+  Assets["FLOWER"] = "flower";
+  Assets["GEAR"] = "gear";
+  Assets["GLOBE"] = "globe";
+  Assets["GRAPH"] = "graph";
+  Assets["HEART_2"] = "heart-2";
+  Assets["HEART_3"] = "heart-3";
+  Assets["HEART_4"] = "heart-4";
+  Assets["HEART_5"] = "heart-5";
+  Assets["HEART"] = "heart";
+  Assets["HOUSE"] = "house";
+  Assets["ID_CARD"] = "id-card";
+  Assets["INFINITE"] = "infinite";
+  Assets["INVITE_LETTER"] = "invite-letter";
+  Assets["JARS"] = "jars";
+  Assets["KEY"] = "key";
+  Assets["LIGHT_BULB"] = "light-bulb";
+  Assets["LOCK"] = "lock";
+  Assets["MAGNIFYING_GLASS"] = "magnifying-glass";
+  Assets["MAP"] = "map";
+  Assets["MARBLE_CARD_BUSINESS"] = "marble-card-business";
+  Assets["MARBLE_CARD"] = "marble-card";
+  Assets["MARBLE"] = "marble";
+  Assets["MEGAPHONE"] = "megaphone";
+  Assets["MULTI_CURRENCY"] = "multi-currency";
+  Assets["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
+  Assets["PALM_TREE"] = "palm-tree";
+  Assets["PERCENTAGE"] = "percentage";
+  Assets["PERSONAL_CARD"] = "personal-card";
+  Assets["PHONES"] = "phones";
+  Assets["PIE_CHART"] = "pie-chart";
+  Assets["PLANE_2"] = "plane-2";
+  Assets["PLANE"] = "plane";
+  Assets["PUZZLE_PIECES"] = "puzzle-pieces";
+  Assets["QUESTION_MARK"] = "question-mark";
+  Assets["RECEIVE"] = "receive";
+  Assets["REMINDER_LETTER"] = "reminder-letter";
+  Assets["SAND_TIMER"] = "sand-timer";
+  Assets["SHOPPING_BAG"] = "shopping-bag";
+  Assets["SKIP_AUTHENTICATION"] = "skip-authentication";
+  Assets["SPEECH_BUBBLE"] = "speech-bubble";
+  Assets["TOOL"] = "tool";
+  Assets["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
+  Assets["WALLET"] = "wallet";
+})(Assets || (Assets = {}));
+
+export { Assets, Flag, Illustration, Sizes };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/flags/Flag.tsx","../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":[null,null,null,null],"names":["unknownFlagName","Flag","code","intrinsicSize","useEffect","setFallback","name","fallback","toLowerCase","detailed","_jsx","src","height","onError","Sizes","imageSizes","SMALL","MEDIUM","Illustration","forwardRef","id","alt","loading","className","size","disablePadding","ref","_jsxs","children","LARGE","_Fragment","width","media","srcSet","defineSrc","descriptor","Assets"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -8,13 +8,22 @@
     "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",
@@ -26,44 +35,51 @@
     "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",
     "start": "storybook dev -p 3001",
     "dev": "yarn start",
     "test": "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"
   },
   "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",
+    "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",
     "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",
@@ -75,12 +91,14 @@
     "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#bb7a63aa66453af9c77e754586381ac5b996a176"
   },
   "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,11 @@
+export enum Sizes {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+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,8 @@
+/* Prevent image overflow viewport or container element */
+img.wds-illustration {
+  max-width: 100%;
+}
+
+.wds-illustration-padding {
+  padding: 24px;
+}

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';

package/src/index.ts

@@ -0,0 +1,7 @@
+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';

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;