@westpac/ui 0.1.0

package/dist/tailwind/utils/generate-font-components.js

@@ -0,0 +1,17 @@
+export const generateFontComponents = (typographySizes, theme)=>{
+    return Object.entries(typographySizes).reduce((acc, [size, value])=>{
+        return {
+            ...acc,
+            [`.typography-body-${size}`]: {
+                fontSize: theme(`fontSize.body-${size}`),
+                lineHeight: theme(`lineHeight.${value.lineHeight}`),
+                fontFamily: theme(`fontFamily.sans`)
+            },
+            [`.typography-brand-${size}`]: {
+                fontSize: theme(`fontSize.brand-${size}`),
+                lineHeight: theme(`lineHeight.${value.lineHeight}`),
+                fontFamily: theme(`fontFamily.brand`)
+            }
+        };
+    }, {});
+};

package/dist/tailwind/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { createSpacing } from './create-spacing.js';
+export { generateColorShades } from './generate-color-shades.js';
+export { createFontSizes } from './create-font-sizes.js';
+export { generateFontComponents } from './generate-font-components.js';

package/dist/tailwind/utils/index.js

@@ -0,0 +1,4 @@
+export { createSpacing } from './create-spacing.js';
+export { generateColorShades } from './generate-color-shades.js';
+export { createFontSizes } from './create-font-sizes.js';
+export { generateFontComponents } from './generate-font-components.js';

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@westpac/ui",
+  "version": "0.1.0",
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/*/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "default": "./dist/index.js"
+    },
+    "./css": {
+      "default": "./dist/css/westpac-ui.min.css"
+    },
+    "./tailwind": {
+      "default": "./dist/tailwind/index.js"
+    }
+  },
+  "files": [
+    "*",
+    "!coverage",
+    "!stories",
+    "!vitest.setup.ts",
+    "!vitest.config.ts",
+    "!**/*.{test,spec}.{ts,tsx,js,jsx}"
+  ],
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.21",
+    "@storybook/addon-interactions": "^7.0.21",
+    "@storybook/addon-links": "^7.0.21",
+    "@storybook/addon-styling": "~1.3.2",
+    "@storybook/blocks": "^7.0.21",
+    "@storybook/react": "^7.0.21",
+    "@storybook/react-vite": "^7.0.21",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.35",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "~14.4.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.2.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react-swc": "^3.3.0",
+    "@vitest/coverage-c8": "^0.31.0",
+    "chokidar": "^3.5.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-storybook": "~0.6.12",
+    "jsdom": "^22.0.0",
+    "plop": "~3.1.2",
+    "postcss": "~8.4.24",
+    "postcss-cli": "~10.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "shx": "^0.3.4",
+    "storybook": "^7.0.21",
+    "tailwind-variants": "~0.1.13",
+    "tailwindcss": "~3.3.2",
+    "tailwindcss-themer": "~3.1.0",
+    "typescript": "^5.1.6",
+    "values.js": "~2.1.1",
+    "vite": "^4.3.4",
+    "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1",
+    "framer-motion": "~10.12.16",
+    "react-aria": "~3.25.0",
+    "react-stately": "~3.23.0",
+    "@westpac/eslint-config": "~0.0.0",
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
+  },
+  "scripts": {
+    "dev": "pnpm build:watch",
+    "clean": "shx rm -rf dist",
+    "build:css:min": "shx mkdir -p dist/css && NPM_ENV=production postcss src/css/global.css  > dist/css/westpac-ui.min.css",
+    "build:css": "shx mkdir -p dist/css && NPM_ENV=development postcss src/css/global.css  > dist/css/westpac-ui.css",
+    "build:css:all": "pnpm build:css && pnpm build:css:min",
+    "build:types": "tsc --project tsconfig.build.json",
+    "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
+    "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
+    "build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all",
+    "check-types": "tsc --noemit --emitDeclarationOnly false",
+    "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "lint:fix": "eslint \"./src/**/*.{ts,tsx,js,jsx}\" --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "generate:component": "plop"
+  }
+}

package/plopfile.js

@@ -0,0 +1,48 @@
+export default function (
+  /** @type {import('plop').NodePlopAPI} */
+  plop,
+) {
+  // create your generators here
+  plop.setGenerator('basics', {
+    description: 'this is a skeleton plopfile',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'type component name please in PascalCase',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/index.ts',
+        templateFile: './scaffold/component/scaffold.index.hbs',
+      },
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/{{kebabCase name}}.component.tsx',
+        templateFile: './scaffold/component/scaffold.component.hbs',
+      },
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/{{kebabCase name}}.spec.tsx',
+        templateFile: './scaffold/component/scaffold.spec.hbs',
+      },
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/{{kebabCase name}}.stories.tsx',
+        templateFile: './scaffold/component/scaffold.stories.hbs',
+      },
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/{{kebabCase name}}.styles.ts',
+        templateFile: './scaffold/component/scaffold.styles.hbs',
+      },
+      {
+        type: 'add',
+        path: './src/components/{{kebabCase name}}/{{kebabCase name}}.types.ts',
+        templateFile: './scaffold/component/scaffold.types.hbs',
+      },
+    ],
+  });
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-import': {},
+  },
+};

package/scaffold/component/scaffold.component.hbs

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './{{kebabCase name}}.styles.js';
+import { type {{name}}Props } from './{{kebabCase name}}.types.js';
+
+export function {{name}}({ className, tag: Tag = 'div', children, ...props }: {{name}}Props) {
+  return (
+    <Tag className={styles({ className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/scaffold/component/scaffold.index.hbs

@@ -0,0 +1,2 @@
+export { {{name}} } from './{{kebabCase name}}.component.js';
+export { type {{name}}Props } from './{{kebabCase name}}.types.js';

package/scaffold/component/scaffold.spec.hbs

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+
+import { {{name}} } from './{{kebabCase name}}.component.js';
+import { styles } from './{{kebabCase name}}.styles.js';
+
+describe('{{name}}', () => {
+  it('renders the component', () => {
+    const { container } = render(<{{name}} />);
+    expect(container).toBeInTheDocument();
+  });
+  it('renders the style correctly', () => {
+    const style = styles();
+    // TODO: use some variants for test
+    expect(style).toBe('');
+  });
+});

package/scaffold/component/scaffold.stories.hbs

@@ -0,0 +1,23 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { {{name}} } from './{{kebabCase name}}.component.js';
+
+const meta: Meta<typeof {{name}}> = {
+  title: 'Example/{{name}}',
+  component: {{name}},
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};

package/scaffold/component/scaffold.styles.hbs

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/scaffold/component/scaffold.types.hbs

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './{{kebabCase name}}.styles.js';
+
+export type {{name}}Props = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/@types/testing-library.d.ts

@@ -0,0 +1,27 @@
+declare module '@testing-library/user-event' {
+  import userEvent, { directApi } from '@testing-library/user-event';
+
+  declare function setup(): typeof userEvent;
+
+  export const event: {
+    readonly clear: typeof directApi.clear;
+    readonly click: typeof directApi.click;
+    readonly copy: typeof directApi.copy;
+    readonly cut: typeof directApi.cut;
+    readonly dblClick: typeof directApi.dblClick;
+    readonly deselectOptions: typeof directApi.deselectOptions;
+    readonly hover: typeof directApi.hover;
+    readonly keyboard: typeof directApi.keyboard;
+    readonly paste: typeof directApi.paste;
+    readonly pointer: typeof directApi.pointer;
+    readonly selectOptions: typeof directApi.selectOptions;
+    readonly setup: typeof setup;
+    readonly tab: typeof directApi.tab;
+    readonly tripleClick: typeof directApi.tripleClick;
+    readonly type: typeof directApi.type;
+    readonly unhover: typeof directApi.unhover;
+    readonly upload: typeof directApi.upload;
+  };
+
+  export default event;
+}

package/src/components/button/button.component.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+
+import { styles } from './button.styles.js';
+import { type ButtonProps } from './button.types.js';
+
+function BaseButton(
+  { size = 'medium', color = 'hero', className, tag: Tag = 'button', children, ...props }: ButtonProps,
+  ref: any,
+) {
+  return (
+    <Tag ref={ref} className={styles({ size, color, className })} {...props}>
+      {children}
+    </Tag>
+  );
+}
+
+export const Button = forwardRef(BaseButton);

package/src/components/button/button.stories.tsx

@@ -0,0 +1,45 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Button } from './button.component.js';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ padding: '3rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'Button text',
+  },
+};
+
+/**
+ * > Responsive size
+ */
+export const ResponsiveSizeStory: Story = {
+  args: {
+    children: 'Button text',
+    size: {
+      initial: 'small',
+      md: 'large',
+      lg: 'xlarge',
+    },
+  },
+};

package/src/components/button/button.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+      size: {
+        small: 'typography-body-10 px-1',
+        medium: 'typography-body-9 px-2 py-1',
+        large: 'typography-body-9 px-3 py-1',
+        xlarge: 'typography-body-8 px-4 py-2',
+      },
+      color: {
+        hero: 'border border-hero bg-hero text-white hover:bg-hero-300 active:bg-hero-200',
+        primary: 'border border-primary bg-primary text-white hover:bg-primary-300 active:bg-primary-200',
+        link: 'text-link underline',
+        faint: 'border border-border bg-light text-text hover:bg-white active:bg-white',
+        'hero-soft': 'border border-hero bg-white text-text hover:bg-hero-300 hover:text-white active:bg-hero-200',
+        'primary-soft':
+          'border border-primary bg-white text-text hover:bg-primary-300 hover:text-white active:bg-primary-200',
+        'faint-soft': 'border border-border bg-white text-text hover:bg-light active:bg-light',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/button/button.types.ts

@@ -0,0 +1,12 @@
+import { AnchorHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './button.styles.js';
+
+export type ButtonProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
+} & Omit<AnchorHTMLAttributes<Element>, 'type' | 'color'> &
+  VariantProps<typeof styles>;

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button.component.js';
+export { type ButtonProps } from './button.types.js';

package/src/components/icon/components/accessibility-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AccessibilityIcon({
+  'aria-label': ariaLabel = 'Accessibility',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12,0 C13.375,0 14.5,1.125 14.5,2.5 C14.5,3.875 13.375,5 12,5 C10.625,5 9.5,3.875 9.5,2.5 C9.5,1.125 10.625,0 12,0 Z M22,8 L16,8 L16,24 L13,24 L13,16 L11,16 L11,24 L8,24 L8,8 L2,8 L2,6 L22,6 L22,8 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/account-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AccountIcon({ 'aria-label': ariaLabel = 'Account', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24,9.85324138 C22.5,11.5084138 17.373,13.2413793 12,13.2413793 C6.62625,13.2413793 1.5,11.5084138 0,9.85324138 L0,13.1635862 C0,14.8187586 5.25,17.3793103 12,17.3793103 C18.75,17.3793103 24,14.8187586 24,13.1635862 L24,9.85324138 Z M24,16.473931 C22.5,18.1291034 17.373,19.862069 12,19.862069 C6.62625,19.862069 1.5,18.1291034 0,16.473931 L0,19.7842759 C0,21.4394483 5.25,24 12,24 C18.75,24 24,21.4394483 24,19.7842759 L24,16.473931 Z M12,0 C18.62775,0 24,2.48275862 24,4.13793103 L24,6.62068966 C24,8.27586207 18.62775,10.7586207 12,10.7586207 C5.37225,10.7586207 0,8.27586207 0,6.62068966 L0,4.13793103 C0,2.48275862 5.37225,0 12,0 L12,0 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/add-circle-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AddCircleIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M11,11 L11,6 L13,6 L13,11 L18,11 L18,13 L13,13 L13,18 L11,18 L11,13 L6,13 L6,11 L11,11 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/add-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon
+        fill="currentColor"
+        fillRule="evenodd"
+        points="11 11 4 11 4 13 11 13 11 20 13 20 13 13 20 13 20 11 13 11 13 4 11 4"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/alert-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AlertIcon({ 'aria-label': ariaLabel = 'Alert', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.0004095,24 C0.653409497,24 0.332409497,23.8196664 0.149409497,23.5241196 C-0.0325905031,23.2285729 -0.0495905031,22.8598908 0.105409497,22.5503181 L11.1054095,0.509542654 C11.4454095,-0.169713971 12.5554095,-0.169713971 12.8944095,0.509542654 L23.8944095,22.5503181 C24.0504095,22.8598908 24.0334095,23.2285729 23.8504095,23.5241196 C23.6684095,23.8196664 23.3474095,24 23.0004095,24 L1.0004095,24 Z M2.6184095,22.0001002 L21.3824095,22.0001002 L12.0004095,3.1975154 L2.6184095,22.0001002 Z M11,20 L11,18 L13,18 L13,20 L11,20 Z M11,16 L11,10 L13,10 L13,16 L11,16 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/android-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AndroidIcon({ 'aria-label': ariaLabel = 'Android', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6,18 C6,18.55 6.45,19 7,19 L8,19 L8,22.5 C8,23.33 8.67,24 9.5,24 C10.33,24 11,23.33 11,22.5 L11,19 L13,19 L13,22.5 C13,23.33 13.67,24 14.5,24 C15.33,24 16,23.33 16,22.5 L16,19 L17,19 C17.55,19 18,18.55 18,18 L18,8 L6,8 L6,18 Z M3.5,8 C2.67,8 2,8.67 2,9.5 L2,16.5 C2,17.33 2.67,18 3.5,18 C4.33,18 5,17.33 5,16.5 L5,9.5 C5,8.67 4.33,8 3.5,8 Z M20.5,8 C19.67,8 19,8.67 19,9.5 L19,16.5 C19,17.33 19.67,18 20.5,18 C21.33,18 22,17.33 22,16.5 L22,9.5 C22,8.67 21.33,8 20.5,8 Z M15.53,2.16 L16.83,0.86 C17.03,0.66 17.03,0.35 16.83,0.15 C16.63,-0.05 16.32,-0.05 16.12,0.15 L14.64,1.63 C13.85,1.23 12.95,1 12,1 C11.04,1 10.14,1.23 9.34,1.63 L7.85,0.15 C7.65,-0.05 7.34,-0.05 7.14,0.15 C6.94,0.35 6.94,0.66 7.14,0.86 L8.45,2.17 C6.97,3.26 6,5.01 6,7 L18,7 C18,5.01 17.03,3.25 15.53,2.16 L15.53,2.16 Z M10,5 L9,5 L9,4 L10,4 L10,5 Z M15,5 L14,5 L14,4 L15,4 L15,5 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/apple-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AppleIcon({ 'aria-label': ariaLabel = 'Apple', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M15.6117278,3.83174638 C16.4690749,2.81624734 17.0478034,1.40624867 16.8896892,0 C15.6547103,0.0494999532 14.1572311,0.80399924 13.2722524,1.81649828 C12.4770764,2.71649743 11.7816811,4.15124607 11.9681944,5.53049477 C13.3467042,5.63624467 14.7536131,4.84649542 15.6117278,3.83174638 M18.7041643,12.7522379 C18.6734625,9.71174082 21.2408986,8.2544922 21.3552627,8.18249226 C19.9122792,6.11924421 17.6649091,5.83724448 16.8643603,5.80424451 C14.9516396,5.61524469 13.1325593,6.90449347 12.1616156,6.90449347 C11.1929746,6.90449347 9.69549539,5.83124449 8.10898107,5.86049446 C6.02433043,5.88974443 4.10163165,7.04399334 3.02783701,8.86949161 C0.862594198,12.5414881 2.47366994,17.981983 4.58518464,20.9617302 C5.61676434,22.4189788 6.84713805,24.0569773 8.46205151,23.9984773 C10.0170965,23.9377274 10.6058031,23.0152282 12.4855194,23.0152282 C14.3660032,23.0152282 14.8933062,23.9984773 16.5404565,23.9684773 C18.2137034,23.9377274 19.2736822,22.4819787 20.2991216,21.0202301 C21.4834426,19.3282317 21.9716009,17.6909833 22,17.6069834 C21.9631579,17.5904834 18.7364011,16.3814845 18.7041643,12.7522379"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-left-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowLeftIcon({ 'aria-label': ariaLabel = 'Arrow Left', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon fill="currentColor" fillRule="evenodd" points="9.824 12 16.412 18.588 15 20 7 12 15 4 16.412 5.412" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-right-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowRightIcon({
+  'aria-label': ariaLabel = 'Arrow Right',
+  copyrightYear = '2020',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <polygon fill="currentColor" fillRule="evenodd" points="14.588 12 8 18.588 9.412 20 17.412 12 9.412 4 8 5.412" />
+    </Icon>
+  );
+}

package/src/components/icon/components/atm-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AtmIcon({ 'aria-label': ariaLabel = 'Atm', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2,24 L2,22 L22,22 L22,24 L2,24 Z M23,10 L20.3333333,10 L22,20 L2,20 L3.66666667,10 L1,10 C0.44771525,10 0,9.55228475 0,9 L0,1 C0,0.44771525 0.44771525,0 1,0 L23,0 C23.5522847,0 24,0.44771525 24,1 L24,9 C24,9.55228475 23.5522847,10 23,10 Z M19.6390792,18 L17.3057458,4 L6.69425418,4 L4.36092084,18 L19.6390792,18 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/australia-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function AustraliaIcon({ 'aria-label': ariaLabel = 'Australia', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M23.95125,12.8562667 L24,14.3317333 L22.94325,17.0472667 L22.368,17.3802 L21.12,20.1903333 L19.056,21.0476 L18.528,20.4286667 L17.52,20.7616 L15.55125,19.4291333 L15.21675,18.3812 L14.06325,18.1421333 L14.64,16.6681333 L13.632,17.9991333 L13.1025,17.6669333 L12.62325,16.3352 L10.94325,15.7155333 L8.016,16.3352 L7.056,16.9057333 L6.72,17.5239333 L4.656,17.7615333 L3.74325,18.6188 L2.01525,18.2858667 L2.208,16.6681333 L1.53525,15.1428 L0.192,13.1899333 L0.28725,12.6670667 L0.04875,11.9528 L0,10.7142 L0.28725,10.1429333 L2.16,9.14266667 L5.04,7.09593333 L5.47125,5.90573333 L6.24,5.80893333 L7.248,4.09586667 L7.87125,3.95286667 L8.78325,4.7148 L9.64725,4.76173333 L9.45525,4.3342 L10.99125,2.23906667 L13.82475,2.81033333 L14.30325,2.66733333 L14.54475,2.95186667 L13.488,4.61873333 L16.8945,6.4286 L17.47125,4.90546667 L17.56725,3.1902 L18.28725,2 L18.76875,2.90566667 L19.0065,4.5718 L19.96725,5.00006667 L20.35125,7.6672 L21.88875,8.95273333 L22.17525,10.1429333 L22.79925,10.1913333 L23.95125,12.8562667 Z M18.57525,23.9530667 L18.23925,22.9044 L18.048,21.9525333 L18.91125,22.3331333 L19.87125,22.1424667 L19.87125,23.2857333 L19.63125,23.8562667 L19.3425,23.6656 L19.056,24 L18.57525,23.9530667 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/backspace-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function BackspaceIcon({ 'aria-label': ariaLabel = 'Backspace', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M22,2 L7,2 C6.31,2 5.77,2.35 5.41,2.88 L0,12 L5.41,21.11 C5.77,21.64 6.31,22 7,22 L22,22 C23.1,22 24,21.1 24,20 L24,4 C24,2.9 23.1,2 22,2 Z M19,15.59 L17.59,17 L14,13.41 L10.41,17 L9,15.59 L12.59,12 L9,8.41 L10.41,7 L14,10.59 L17.59,7 L19,8.41 L15.41,12 L19,15.59 Z"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/bank-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function BankIcon({ 'aria-label': ariaLabel = 'Bank', copyrightYear = '2020', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4,10 L8,10 L8,20 L4,20 L4,10 Z M2,24 L2,22 L22,22 L22,24 L2,24 Z M16,10 L20,10 L20,20 L16,20 L16,10 Z M10,10 L14,10 L14,20 L10,20 L10,10 Z M12,0 L22,6 L22,8 L2,8 L2,6 L12,0 Z"
+      />
+    </Icon>
+  );
+}