@westpac/ui 0.1.0

package/dist/components/icon/components/warning-icon.js

@@ -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 WarningIcon({ 'aria-label': ariaLabel = 'Warning' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "nonzero",
+        d: "M12.708.293l10.999 11c.39.39.39 1.024 0 1.415l-11 10.999c-.39.39-1.024.39-1.415 0l-10.999-11a1.001 1.001 0 010-1.415l11-10.999c.39-.39 1.024-.39 1.415 0zm-.709 2.124L2.416 12l9.583 9.583L21.583 12l-9.584-9.583zM13 16v2h-2v-2h2zm0-10v8h-2V6h2z"
+    }));
+}

package/dist/components/icon/components/watch-icon.d.ts

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

package/dist/components/icon/components/watch-icon.js

@@ -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 WatchIcon({ 'aria-label': ariaLabel = 'Watch' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M20,12 C20,9.46 18.81,7.19 16.96,5.73 L16,0 L8,0 L7.05,5.73 C5.19,7.19 4,9.45 4,12 C4,14.55 5.19,16.81 7.05,18.27 L8,24 L16,24 L16.96,18.27 C18.81,16.81 20,14.54 20,12 Z M6,12 C6,8.69 8.69,6 12,6 C15.31,6 18,8.69 18,12 C18,15.31 15.31,18 12,18 C8.69,18 6,15.31 6,12 Z"
+    }));
+}

package/dist/components/icon/components/wearable-icon.d.ts

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

package/dist/components/icon/components/wearable-icon.js

@@ -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 WearableIcon({ 'aria-label': ariaLabel = 'Wearable' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M14,22 L14,22 L14,19 L17,19 C19.209139,19 21,17.209139 21,15 C21,12.790861 19.209139,11 17,11 L7,11 C4.790861,11 3,12.790861 3,15 C3,17.209139 4.790861,19 7,19 L10,19 L10,22 L7,22 C3.13400675,22 0,18.8659932 0,15 C0,11.1340068 3.13400675,8 7,8 L17,8 C20.8659932,8 24,11.1340068 24,15 C24,18.8659932 20.8659932,22 17,22 L14,22 Z M7,2 L17,2 C17.5522847,2 18,2.44771525 18,3 L18,6 L6,6 L6,3 L6,3 C6,2.44771525 6.44771525,2 7,2 Z"
+    }));
+}

package/dist/components/icon/components/wheelchair-icon.d.ts

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

package/dist/components/icon/components/wheelchair-icon.js

@@ -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 WheelchairIcon({ 'aria-label': ariaLabel = 'Wheelchair' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M8,13.2070325 C5.6914952,13.8599614 4,15.9824458 4,18.5 C4,21.5375661 6.46243388,24 9.5,24 C12.0175542,24 14.1400386,22.3085048 14.7929675,20 L12.6631844,20 C12.1014525,21.1824737 10.896198,22 9.5,22 C7.56700338,22 6,20.4329966 6,18.5 C6,17.103802 6.81752633,15.8985475 8,15.3368156 L8,13.2070325 L8,13.2070325 Z M20,13.5 C18,13.5 15.423,12.677 14.004,11.5 L14.004,15 L17.5,15 C19.5,15 20,16 20,17.5 L20,23 L18,23 L18,17.9875609 L12.2,17.9875609 C10.99,17.9875609 10,17 10,16 L10,9.5 C10,8 11.0000088,7 12,7 C12.5,7 13.0709844,7 14.004,8 C14.9370156,9 14.9227264,9.34205666 16.0193557,10.1324001 C17.1159849,10.9227436 18.5,11.5 20,11.5 L20,13.5 Z M12.25,6.5 C11.0073593,6.5 10,5.49264069 10,4.25 C10,3.00735931 11.0073593,2 12.25,2 C13.4926407,2 14.5,3.00735931 14.5,4.25 C14.5,5.49264069 13.4926407,6.5 12.25,6.5 Z"
+    }));
+}

package/dist/components/icon/components/windows-new-icon.d.ts

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

package/dist/components/icon/components/windows-new-icon.js

@@ -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 WindowsNewIcon({ 'aria-label': ariaLabel = 'Windows New' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M23.9968,0 L11.2,1.8616 L11.2,11.1992 L23.9968,11.1992 L23.9968,0 Z M0,3.3984 L0.0088,11.1992 L9.6,11.1992 L9.6,2.0944 L0,3.3984 Z M11.2,12.7992 L11.2,22.2 L23.9968,24 L24,12.7992 L11.2,12.7992 Z M0.0072,12.7992 L0.008,20.6816 L9.6,21.996 L9.6,12.7992 L0.0072,12.7992 Z"
+    }));
+}

package/dist/components/icon/components/word-file-icon.d.ts

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

package/dist/components/icon/components/word-file-icon.js

@@ -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 WordFileIcon({ 'aria-label': ariaLabel = 'Word File' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M4,0 L16,0 L22,6 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M14.5697731,10 L18,10 L15.3919202,20 L13.3722839,20 L11.9990343,14.0870163 L10.4648318,20 L8.27458555,20 L6,10 L8.24110736,10 L9.40318687,16.2124148 L10.9547723,10 L13.0986641,10 L14.4339289,16.2124148 L15.4595204,11.7940864 L14.5697731,11.7940864 L14.5697731,10 Z"
+    }));
+}

package/dist/components/icon/components/write-icon.d.ts

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

package/dist/components/icon/components/write-icon.js

@@ -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 WriteIcon({ 'aria-label': ariaLabel = 'Write' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M0,22 L24,22 L24,24 L0,24 L0,22 Z M2,15.0006943 L2,20 L6.99930565,20 L17.7439245,9.2553812 L12.7446188,4.25607555 L2,15.0006943 Z M21.6100542,5.38925149 C22.1299819,4.86932371 22.1299819,4.02944036 21.6100542,3.50951257 L18.4904874,0.389945841 C17.9705596,-0.129981947 17.1306763,-0.129981947 16.6107485,0.389945841 L14.1710873,2.829607 L19.170393,7.82891265 L21.6100542,5.38925149 Z"
+    }));
+}

package/dist/components/icon/components/yammer-icon.d.ts

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

package/dist/components/icon/components/yammer-icon.js

@@ -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 YammerIcon({ 'aria-label': ariaLabel = 'Yammer' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M1.5,0 L22.5,0 C23.3284271,-1.52179594e-16 24,0.671572875 24,1.5 L24,22.5 C24,23.3284271 23.3284271,24 22.5,24 L1.5,24 C0.671572875,24 1.8778099e-15,23.3284271 1.77635684e-15,22.5 L1.77635684e-15,1.5 L1.77635684e-15,1.5 C1.67490378e-15,0.671572875 0.671572875,1.52179594e-16 1.5,0 L1.5,0 Z M20.9625,13.4955 C21.4365,13.413 21.78,12.984 21.74775,12.49425 C21.717,12.06375 21.405,11.72025 21.0045,11.63175 C20.96475,11.6295 20.92425,11.6295 20.8815,11.6295 C20.16375,11.631 15.00675,12.1965 15.26475,12.72225 C15.52275,13.242 18.699,13.49475 20.9625,13.4955 Z M19.46175,18.342 C19.7265,17.92875 19.63125,17.3865 19.2555,17.0865 C17.27025,15.999 14.36475,14.691 13.88775,15.02475 C13.4085,15.36 17.65725,18.3375 18.28575,18.68325 C18.324,18.70425 18.36,18.723 18.3945,18.74175 C18.78975,18.8565 19.22775,18.705 19.46175,18.342 Z M18.28575,6.537 C17.65725,6.8835 13.4085,9.86025 13.88775,10.197 C14.36475,10.52925 17.27025,9.222 19.2555,8.1345 C19.63125,7.83375 19.7265,7.29225 19.46175,6.879 C19.22775,6.51525 18.78975,6.36525 18.3945,6.48 C18.36,6.49725 18.324,6.51675 18.28575,6.537 Z M13.44375,5.7795 C13.6065,5.26875 13.323,4.71375 12.81525,4.551 C12.3165,4.392 11.7885,4.6455 11.61,5.13 L8.43525,13.5 L8.38575,13.5 L5.04675,5.067 C4.821,4.58925 4.2615,4.37625 3.7575,4.56525 C3.24075,4.7595 2.97525,5.325 3.14475,5.8455 L7.35,16.10475 C6.75975,17.77275 6.21225,18.55425 4.956,18.55425 C4.83525,18.55425 4.41225,18.52875 4.3845,18.5265 C3.9795,18.5055 3.6015,18.7695 3.492,19.17675 C3.36675,19.6395 3.63825,20.1165 4.09875,20.2485 C4.43175,20.307 4.77375,20.32875 5.0805,20.32875 C7.3965,20.32875 8.1615,18.99525 8.9265,17.049 L13.44375,5.7795 Z"
+    }));
+}

package/dist/components/icon/components/youtube-icon.d.ts

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

package/dist/components/icon/components/youtube-icon.js

@@ -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 YoutubeIcon({ 'aria-label': ariaLabel = 'Youtube' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M2,0 L22,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,22 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M11.9960967,6 L12.0039033,6 C12.0039033,6 15.7822946,6 18.3011516,6.1725947 C18.6529753,6.21236514 19.4202207,6.2157392 20.1046778,6.89527757 C20.6443523,7.41302826 20.8202377,8.58875342 20.8202377,8.58875342 C20.8202377,8.58875342 21,9.96944419 21,11.3501015 L21,12.6445033 C21,14.0251607 20.8202377,15.4058347 20.8202377,15.4058347 C20.8202377,15.4058347 20.6443523,16.5815766 20.1046778,17.0993273 C19.4202207,17.7788824 18.6529753,17.7822397 18.3011516,17.8220269 C15.7822946,17.9946048 12.0000088,18 12.0000088,18 C12.0000088,18 7.32010996,17.9594946 5.88007331,17.8286079 C5.47945419,17.757402 4.58004364,17.7788824 3.89532223,17.0993273 C3.35564771,16.5815766 3.18000899,15.4058347 3.18000899,15.4058347 C3.18000899,15.4058347 3,14.0251607 3,12.6445033 L3,11.3501015 C3,9.96944419 3.18000899,8.58875342 3.18000899,8.58875342 C3.18000899,8.58875342 3.35564771,7.41302826 3.89532223,6.89527757 C4.58004364,6.2157392 5.34698942,6.21236514 5.6988484,6.1725947 C8.21779355,6 11.9960967,6 11.9960967,6 Z M10,9 L10,15 L15,12 L10,9 Z"
+    }));
+}

package/dist/components/icon/components/zip-file-icon.d.ts

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

package/dist/components/icon/components/zip-file-icon.js

@@ -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 ZipFileIcon({ 'aria-label': ariaLabel = 'Zip File' , copyrightYear ='2020' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M4,0 L16,0 L22,6 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M7,20 L11,20 L11,18 L7,18 L7,20 Z M9,16 L12,16 L12,14 L9,14 L9,16 Z M6,14 L9,14 L9,12 L6,12 L6,14 Z M9,12 L12,12 L12,10 L9,10 L9,12 Z M6,10 L9,10 L9,8 L6,8 L6,10 Z M9,8 L12,8 L12,6 L9,6 L9,8 Z M6,6 L6,4 L9,4 L9,6 L6,6 Z M6,16 L12,16 L12,20 C12,20.5522847 11.5522847,21 11,21 L7,21 C6.44771525,21 6,20.5522847 6,20 L6,16 Z"
+    }));
+}

package/dist/components/icon/icon.component.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from './icon.types.js';
+export declare function Icon({ copyrightYear, xmlns, viewBox, role, focusable, children, className, size, color, ...props }: IconProps): JSX.Element;

package/dist/components/icon/icon.component.js

@@ -0,0 +1,29 @@
+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 { styles } from './icon.styles.js';
+export function Icon({ copyrightYear ='' , xmlns ='http://www.w3.org/2000/svg' , viewBox ='0 0 24 24' , role ='img' , focusable ='false' , children , className , size ='medium' , color , ...props }) {
+    return React.createElement("svg", _extends({
+        xmlns: xmlns,
+        viewBox: viewBox,
+        role: role,
+        focusable: focusable,
+        className: styles({
+            size,
+            color,
+            className
+        })
+    }, props), copyrightYear && React.createElement("metadata", null, `Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`), children);
+}

package/dist/components/icon/icon.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Icon } from './icon.component.js';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > With primary color example
+ */
+export declare const WithPrimaryColorStory: Story;
+/**
+ * > With large size example
+ */
+export declare const WithDifferentSizeStory: Story;

package/dist/components/icon/icon.stories.js

@@ -0,0 +1,149 @@
+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 { useCallback, useMemo, useState } from 'react';
+import * as AllIcons from './index.js';
+const AllIconsExample = (props)=>{
+    const [search, setSearch] = useState('');
+    const filteredIcons = useMemo(()=>{
+        return Object.entries(AllIcons).reduce((acc, [iconName, Icon])=>{
+            if (iconName.toUpperCase().indexOf(search.toUpperCase()) === -1) {
+                return acc;
+            }
+            return [
+                ...acc,
+                {
+                    key: iconName,
+                    Icon
+                }
+            ];
+        }, []);
+    }, [
+        search
+    ]);
+    const handleOnChange = useCallback(({ target: { value  }  })=>{
+        setSearch(value);
+    }, []);
+    const handleOnClick = useCallback(async (key)=>{
+        try {
+            await navigator.clipboard.writeText(`<${key} />`);
+            console.log('Content copied to clipboard');
+        } catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    }, [
+        props.className
+    ]);
+    return React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, React.createElement("input", {
+        className: "rounded-sm border border-border px-3 py-2",
+        onChange: handleOnChange,
+        placeholder: "e.g: Accessibiliy"
+    }), React.createElement("div", {
+        className: "flex flex-row flex-wrap justify-center gap-2"
+    }, filteredIcons.map(({ key , Icon  })=>React.createElement("button", {
+            onClick: ()=>handleOnClick(key),
+            className: "flex h-15 w-23 flex-col items-center justify-center gap-2 border border-border",
+            key: key
+        }, React.createElement(Icon, _extends({}, props)), React.createElement("span", {
+            className: "whitespace-pre-wrap text-xs"
+        }, `<${key} />`)))));
+};
+const meta = {
+    title: 'Example/Icon',
+    component: AllIconsExample,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                style: {
+                    padding: '3rem'
+                }
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    argTypes: {
+        children: {
+            description: 'Children',
+            type: {
+                name: 'string'
+            }
+        },
+        copyrightYear: {
+            description: 'CopyrightYear',
+            type: {
+                name: 'string'
+            }
+        },
+        size: {
+            description: 'size',
+            type: {
+                name: 'enum',
+                value: [
+                    'xsmall',
+                    'small',
+                    'medium',
+                    'large',
+                    'xlarge'
+                ]
+            }
+        },
+        color: {
+            description: 'color',
+            type: {
+                name: 'enum',
+                value: [
+                    'success',
+                    'info',
+                    'warning',
+                    'danger',
+                    'system',
+                    'white',
+                    'black',
+                    'background',
+                    'border',
+                    'borderDark',
+                    'focus',
+                    'heading',
+                    'hero',
+                    'light',
+                    'link',
+                    'muted',
+                    'neutral',
+                    'pop',
+                    'primary',
+                    'text'
+                ]
+            }
+        }
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const WithPrimaryColorStory = {
+    args: {
+        color: 'primary'
+    }
+};
+export const WithDifferentSizeStory = {
+    args: {
+        size: 'xlarge'
+    }
+};

package/dist/components/icon/icon.styles.d.ts

@@ -0,0 +1,63 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        success: string;
+        info: string;
+        warning: string;
+        danger: string;
+        system: string;
+        white: string;
+        black: string;
+        background: string;
+        border: string;
+        borderDark: string;
+        focus: string;
+        heading: string;
+        hero: string;
+        light: string;
+        link: string;
+        muted: string;
+        neutral: string;
+        pop: string;
+        primary: string;
+        text: string;
+    };
+}, undefined, "rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    color: {
+        success: string;
+        info: string;
+        warning: string;
+        danger: string;
+        system: string;
+        white: string;
+        black: string;
+        background: string;
+        border: string;
+        borderDark: string;
+        focus: string;
+        heading: string;
+        hero: string;
+        light: string;
+        link: string;
+        muted: string;
+        neutral: string;
+        pop: string;
+        primary: string;
+        text: string;
+    };
+}, undefined>;

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,43 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+        size: {
+            xsmall: 'h-2 w-2',
+            small: 'h-3 w-3',
+            medium: 'h-4 w-4',
+            large: 'h-6 w-6',
+            xlarge: 'h-8 w-8'
+        },
+        color: {
+            success: 'text-success',
+            info: 'text-info',
+            warning: 'text-warning',
+            danger: 'text-danger',
+            system: 'text-system',
+            white: 'text-white',
+            black: 'text-black',
+            background: 'text-background',
+            border: 'text-border',
+            borderDark: 'text-borderDark',
+            focus: 'text-focus',
+            heading: 'text-heading',
+            hero: 'text-hero',
+            light: 'text-light',
+            link: 'text-link',
+            muted: 'text-muted',
+            neutral: 'text-neutral',
+            pop: 'text-pop',
+            primary: 'text-primary',
+            text: 'text-text'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/icon/icon.types.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './icon.styles.js';
+export type IconProps = SVGAttributes<SVGElement> & {
+    /**
+     * children prop
+     */
+    children?: ReactNode;
+    /**
+     * The icon SVG metadata copyright year text
+     */
+    copyrightYear?: string;
+} & VariantProps<typeof styles>;

package/dist/components/icon/icon.types.js

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