npm - @westpac/ui - Versions diffs - 0.1.0 - Mend

@westpac/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (715) hide show

package/.eslintrc.cjs ADDED Viewed

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  extends: ['@westpac/eslint-config'],
+  overrides: [
+    {
+      files: ['**/*.stories.tsx', '**/*.stories.ts'],
+      extends: ['plugin:storybook/recommended'],
+    },
+  ],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: ['packages/*/tsconfig.json', 'apps/*/tsconfig.json'],
+      },
+    },
+  },
+};

package/.storybook/global.css ADDED Viewed

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/.storybook/main.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      define: {
+        'process.env': {},
+      },
+    });
+  },
+};
+export default config;

package/.storybook/preview.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import type { Preview } from '@storybook/react';
+import './global.css';
+import * as React from 'react';
+const withThemeProvider = (Story, context) => {
+  const theme = context.globals?.theme || 'WBC';
+  return (
+    <div data-theme={theme.toLowerCase()}>
+      <Story />
+    </div>
+  );
+};
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'WBC',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'paintbrush',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['BOM', 'BSA', 'BTFG', 'RAMS', 'STG', 'WBC', 'WBG'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [withThemeProvider],
+};
+export default preview;

package/.swcrc ADDED Viewed

@@ -0,0 +1,17 @@
+{
+	"jsc": {
+		"parser": {
+			"syntax": "typescript",
+            "jsx": true
+		},
+		"target": "es2018",
+		"loose": false,
+		"minify": {
+			"compress": false,
+			"mangle": false
+		}
+	},
+	"minify": false,
+	"isModule": true,
+	"exclude": [".*\\.spec|test\\.(j|t)s$", ".*\\.d\\.ts$"]
+}

package/README.md ADDED Viewed

@@ -0,0 +1,59 @@
+# @westpac/ui
+### Basic Usage (with NextJS)
+Following example is to use the `wbc` theme.
+1. Use `withGEL` with your config in the `tailwind.config.ts`
+```tsx
+// tailwind.config.ts
+import { withGEL } from '@westpac/ui/tailwind';
+import { type Config } from 'tailwindcss';
+const config: Config = withGEL({
+  relative: true,
+  mode: 'jit',
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
+});
+export default config;
+```
+2. Define the font-faces of the theme you are using
+```css
+/* globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* WBC fonts */
+@font-face {
+  src: url('/path-to-the-font/Westpac-Bold-v2.007.woff2') format('woff2'), url('/path-to-the-font/Westpac-Bold-v2.007.woff')
+      format('woff');
+  font-family: 'Westpac';
+  font-weight: 400;
+  font-style: normal;
+}
+```
+3. Add the data-theme attribute with the theme/brand of your choice
+```ts
+// _document.tsx
+import { Head, Html, Main, NextScript } from 'next/document';
+export default function Document() {
+  return (
+    // e.g: in this case theme wbc is applied
+    <Html lang="en" data-theme="wbc">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+```

package/dist/components/button/button.component.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react';
+export declare const Button: React.ForwardRefExoticComponent<{
+    tag?: "a" | "button" | "div" | "span" | undefined;
+} & Omit<React.AnchorHTMLAttributes<Element>, "color" | "type"> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        hero: string;
+        primary: string;
+        link: string;
+        faint: string;
+        'hero-soft': string;
+        'primary-soft': string;
+        'faint-soft': string;
+    };
+}, undefined, "inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        hero: string;
+        primary: string;
+        link: string;
+        faint: string;
+        'hero-soft': string;
+        'primary-soft': string;
+        'faint-soft': string;
+    };
+}, undefined>> & React.RefAttributes<unknown>>;

package/dist/components/button/button.component.js ADDED Viewed

@@ -0,0 +1,27 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { forwardRef } from 'react';
+import { styles } from './button.styles.js';
+function BaseButton({ size ='medium' , color ='hero' , className , tag: Tag = 'button' , children , ...props }, ref) {
+    return React.createElement(Tag, _extends({
+        ref: ref,
+        className: styles({
+            size,
+            color,
+            className
+        })
+    }, props), children);
+}
+export const Button = forwardRef(BaseButton);

package/dist/components/button/button.stories.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Button } from './button.component.js';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Responsive size
+ */
+export declare const ResponsiveSizeStory: Story;

package/dist/components/button/button.stories.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { Button } from './button.component.js';
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                style: {
+                    padding: '3rem'
+                }
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: 'Button text'
+    }
+};
+export const ResponsiveSizeStory = {
+    args: {
+        children: 'Button text',
+        size: {
+            initial: 'small',
+            md: 'large',
+            lg: 'xlarge'
+        }
+    }
+};

package/dist/components/button/button.styles.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        hero: string;
+        primary: string;
+        link: string;
+        faint: string;
+        'hero-soft': string;
+        'primary-soft': string;
+        'faint-soft': string;
+    };
+}, undefined, "inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        hero: string;
+        primary: string;
+        link: string;
+        faint: string;
+        'hero-soft': string;
+        'primary-soft': string;
+        'faint-soft': string;
+    };
+}, undefined>;

package/dist/components/button/button.styles.js ADDED Viewed

@@ -0,0 +1,29 @@
+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/dist/components/button/button.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+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/dist/components/button/button.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

package/dist/components/button/index.d.ts ADDED Viewed

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

package/dist/components/button/index.js ADDED Viewed

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

package/dist/components/icon/components/accessibility-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AccessibilityIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/accessibility-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AccessibilityIcon({ 'aria-label': ariaLabel = 'Accessibility' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/account-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AccountIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/account-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AccountIcon({ 'aria-label': ariaLabel = 'Account' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/add-circle-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AddCircleIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/add-circle-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AddCircleIcon({ 'aria-label': ariaLabel = 'Add' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/add-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AddIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/add-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AddIcon({ 'aria-label': ariaLabel = 'Add' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/alert-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AlertIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/alert-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AlertIcon({ 'aria-label': ariaLabel = 'Alert' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/android-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AndroidIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/android-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AndroidIcon({ 'aria-label': ariaLabel = 'Android' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/apple-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function AppleIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/apple-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function AppleIcon({ 'aria-label': ariaLabel = 'Apple' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("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"
+    }));
+}

package/dist/components/icon/components/arrow-left-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function ArrowLeftIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/arrow-left-icon.js ADDED Viewed

@@ -0,0 +1,26 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowLeftIcon({ 'aria-label': ariaLabel = 'Arrow Left' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("polygon", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        points: "9.824 12 16.412 18.588 15 20 7 12 15 4 16.412 5.412"
+    }));
+}

package/dist/components/icon/components/arrow-right-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type IconProps } from '../icon.types.js';
2	+ export declare function ArrowRightIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;