@westpac/ui 0.1.0 → 0.2.0

package/src/components/icon/components/ice-cream-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function IceCreamIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Ice Cream',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.408 13.9565C17.6012 13.9852 17.7989 14 18 14C20.2091 14 22 12.2091 22 10C22 8.11613 20.6977 6.53644 18.9442 6.1121C18.5079 2.66532 15.5652 0 12 0C8.43478 0 5.49209 2.66532 5.05578 6.11209C3.30232 6.53643 2 8.11613 2 10C2 12.2091 3.79086 14 6 14C6.20113 14 6.3988 13.9852 6.59196 13.9565L12 24L17.408 13.9565ZM12 14C13.2574 14 14.4374 13.6685 15.4573 13.088C15.4911 13.1159 15.5254 13.1432 15.5601 13.1699L12 19.7815L8.43992 13.1699C8.47463 13.1432 8.50888 13.1159 8.54266 13.088C9.56257 13.6685 10.7426 14 12 14Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.408 13.9565C17.6012 13.9852 17.7989 14 18 14C20.2091 14 22 12.2091 22 10C22 8.11613 20.6977 6.53644 18.9442 6.1121C18.5079 2.66532 15.5652 0 12 0C8.43478 0 5.49209 2.66532 5.05578 6.11209C3.30232 6.53643 2 8.11613 2 10C2 12.2091 3.79086 14 6 14C6.20114 14 6.3988 13.9852 6.59197 13.9565L12 24L17.408 13.9565ZM15.666 10.668L14.4681 11.3498C13.7417 11.7632 12.9015 12 12 12C11.0985 12 10.2583 11.7632 9.53191 11.3498L8.33402 10.668L7.27049 11.5448C6.92428 11.8302 6.48463 12 6 12C5.82925 12 5.66349 11.9786 5.50526 11.9383C4.63998 11.7182 4 10.9338 4 10C4 9.0607 4.64942 8.26816 5.52621 8.05598L6.86674 7.73157L7.03995 6.36326C7.35134 3.90331 9.45495 2 12 2C14.5451 2 16.6487 3.90331 16.9601 6.36326L17.1333 7.73157L18.4738 8.05598C19.3506 8.26817 20 9.0607 20 10C20 10.9492 19.3387 11.744 18.4517 11.9488C18.3065 11.9823 18.1553 12 18 12C17.5154 12 17.0757 11.8302 16.7295 11.5448L15.666 10.668ZM8.43993 13.1699C8.47463 13.1432 8.50888 13.1159 8.54266 13.088C9.56257 13.6685 10.7426 14 12 14C13.2574 14 14.4374 13.6685 15.4573 13.088C15.4911 13.1159 15.5254 13.1432 15.5601 13.1699L12 19.7815L8.43993 13.1699Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/id-card-icon.tsx

@@ -1,16 +1,44 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function IdCardIcon({ 'aria-label': ariaLabel = 'Id Card', copyrightYear = '2020', ...props }: IconProps) {
+export function IdCardIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Id Card',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,2 L22,2 C23.1045695,2 24,2.8954305 24,4 L24,20 C24,21.1045695 23.1045695,22 22,22 L2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,4 C-1.3527075e-16,2.8954305 0.8954305,2 2,2 Z M16,16 L16,18 L22,18 L22,16 L16,16 Z M16,8 L16,10 L22,10 L22,8 L16,8 Z M16,12 L16,14 L22,14 L22,12 L16,12 Z M14,18.1 L2,18.1 L2,17.1 C2,15.1 6,14 8,14 C10,14 14,15.1 14,17.1 L14,18.1 Z M8,6 C9.66,6 11,7.34 11,9 C11,10.66 9.66,12 8,12 C6.34,12 5,10.66 5,9 C5,7.34 6.34,6 8,6 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2H22C23.1046 2 24 2.89543 24 4V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V4C0 2.89543 0.89543 2 2 2ZM11.5 10.5C11.5 9.11667 10.3833 8 9 8C7.61667 8 6.5 9.11667 6.5 10.5C6.5 11.8833 7.61667 13 9 13C10.3833 13 11.5 11.8833 11.5 10.5ZM4 17.0854V18H14V17.0854C14 15.2561 10.6667 14.25 9 14.25C7.33333 14.25 4 15.2561 4 17.0854ZM14 8H20V10H14V8ZM15 12H20V14H15V12ZM20 16H16V18H20V16Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M11.5 10.5C11.5 9.11667 10.3833 8 9 8C7.61667 8 6.5 9.11667 6.5 10.5C6.5 11.8833 7.61667 13 9 13C10.3833 13 11.5 11.8833 11.5 10.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M4 17.0854V18H14V17.0854C14 15.2561 10.6667 14.25 9 14.25C7.33333 14.25 4 15.2561 4 17.0854Z"
+            fill="currentColor"
+          />
+          <path d="M14 8H20V10H14V8Z" fill="currentColor" />
+          <path d="M15 12H20V14H15V12Z" fill="currentColor" />
+          <path d="M20 16H16V18H20V16Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2H22C23.1046 2 24 2.89543 24 4V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V4C0 2.89543 0.89543 2 2 2ZM2 4H22V20H2V4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/image-square-icon.tsx

@@ -1,20 +1,38 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function ImageSquareIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Image Square',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M13.9767442,18.3255814 L16.5,14 L20,20 L14,20 L4,20 L9.5,11 L13.9767442,18.3255814 Z M24,2.4 L24,21.6 C24,22.9254834 23.1045695,24 22,24 L2,24 C0.8954305,24 -2.66453526e-15,22.9254834 -2.66453526e-15,21.6 L8.8817842e-16,2.4 C8.8817842e-16,1.0745166 0.8954305,3.6292676e-16 2,4.4408921e-16 L22,4.85281769e-15 C23.1045695,4.93398014e-15 24,1.0745166 24,2.4 Z M22,2 L2,2 L2,22 L22,22 L22,2 Z M15.5,10 C14.1192881,10 13,8.88071187 13,7.5 C13,6.11928813 14.1192881,5 15.5,5 C16.8807119,5 18,6.11928813 18,7.5 C18,8.88071187 16.8807119,10 15.5,10 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 21.6V2.4C24 1.07452 23.1046 0 22 0H2C0.89543 0 0 1.07452 0 2.4V21.6C0 22.9255 0.89543 24 2 24H22C23.1046 24 24 22.9255 24 21.6ZM18 7.5C18 8.88071 16.8807 10 15.5 10C14.1193 10 13 8.88071 13 7.5C13 6.11929 14.1193 5 15.5 5C16.8807 5 18 6.11929 18 7.5ZM13.9767 18.3256L9.5 11L4 20H20L16.5 14L13.9767 18.3256Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M13.9767 18.3256L9.5 11L4 20H20L16.5 14L13.9767 18.3256Z" fill="currentColor" />
+          <path
+            d="M15.5 10C16.8807 10 18 8.88071 18 7.5C18 6.11929 16.8807 5 15.5 5C14.1193 5 13 6.11929 13 7.5C13 8.88071 14.1193 10 15.5 10Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 2.4V21.6C24 22.9255 23.1046 24 22 24H2C0.89543 24 0 22.9255 0 21.6V2.4C0 1.07452 0.89543 0 2 0H22C23.1046 0 24 1.07452 24 2.4ZM22 2H2V22H22V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function InfoIcon({ 'aria-label': ariaLabel = 'Info', copyrightYear = '2020', ...props }: IconProps) {
+export function InfoIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Info',
+  copyrightYear = '2023',
+  ...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,18 L11,10 L13,10 L13,18 L11,18 Z M11,8 L11,6 L13,6 L13,8 L11,8 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM11 6V8H13V6H11ZM11 10V18H13V10H11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M13 18V10H11V18H13Z" fill="currentColor" />
+          <path d="M13 6V8H11V6H13Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM2 12C2 6.47714 6.47714 2 12 2C17.5229 2 22 6.47714 22 12C22 17.5229 17.5229 22 12 22C6.47714 22 2 17.5229 2 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,49 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function InstagramIcon({ 'aria-label': ariaLabel = 'Instagram', copyrightYear = '2020', ...props }: IconProps) {
+export function InstagramIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Instagram',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6,0 L18,0 C21.3137085,-6.08718376e-16 24,2.6862915 24,6 L24,18 C24,21.3137085 21.3137085,24 18,24 L6,24 C2.6862915,24 4.05812251e-16,21.3137085 0,18 L0,6 C-4.05812251e-16,2.6862915 2.6862915,6.08718376e-16 6,0 Z M6,2 C3.790861,2 2,3.790861 2,6 L2,18 C2,20.209139 3.790861,22 6,22 L18,22 C20.209139,22 22,20.209139 22,18 L22,6 C22,3.790861 20.209139,2 18,2 L6,2 Z M5.838,12 C5.838,8.5965 8.5965,5.838 12,5.838 C15.4035,5.838 18.162,8.5965 18.162,12 C18.162,15.4035 15.4035,18.162 12,18.162 C8.5965,18.162 5.838,15.4035 5.838,12 Z M8.00025,12 C8.00025,14.20875 9.79125,15.99975 12,15.99975 C14.20875,15.99975 15.99975,14.20875 15.99975,12 C15.99975,9.79125 14.20875,8.00025 12,8.00025 C9.79125,8.00025 8.00025,9.79125 8.00025,12 Z M18.405675,7.03425 C17.610675,7.03425 16.965675,6.39 16.965675,5.59425 C16.965675,4.7985 17.610675,4.15425 18.405675,4.15425 C19.201425,4.15425 19.845675,4.7985 19.845675,5.59425 C19.845675,6.39 19.201425,7.03425 18.405675,7.03425 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M12 8C9.79125 8 8.00025 9.791 8.00025 11.9998C8.00025 14.2085 9.79125 15.9995 12 15.9995C14.2087 15.9995 15.9998 14.2085 15.9998 11.9998C15.9998 9.791 14.2087 8 12 8Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6C0 2.68629 2.68629 0 6 0ZM12 18.1619C8.5965 18.1619 5.838 15.4034 5.838 11.9999C5.838 8.59639 8.5965 5.83789 12 5.83789C15.4035 5.83789 18.162 8.59639 18.162 11.9999C18.162 15.4034 15.4035 18.1619 12 18.1619ZM16.9657 5.5943C16.9657 6.39005 17.6107 7.0343 18.4057 7.0343C19.2014 7.0343 19.8457 6.39005 19.8457 5.5943C19.8457 4.79855 19.2014 4.1543 18.4057 4.1543C17.6107 4.1543 16.9657 4.79855 16.9657 5.5943Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 18.162C8.5965 18.162 5.838 15.4035 5.838 12C5.838 8.5965 8.5965 5.838 12 5.838C15.4035 5.838 18.162 8.5965 18.162 12C18.162 15.4035 15.4035 18.162 12 18.162ZM8.00025 12C8.00025 9.79125 9.79125 8.00025 12 8.00025C14.2087 8.00025 15.9998 9.79125 15.9998 12C15.9998 14.2087 14.2087 15.9998 12 15.9998C9.79125 15.9998 8.00025 14.2087 8.00025 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M16.9657 5.59425C16.9657 6.39 17.6107 7.03425 18.4057 7.03425C19.2014 7.03425 19.8457 6.39 19.8457 5.59425C19.8457 4.7985 19.2014 4.15425 18.4057 4.15425C17.6107 4.15425 16.9657 4.7985 16.9657 5.59425Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6C0 2.68629 2.68629 0 6 0ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function InventoryIcon({ 'aria-label': ariaLabel = 'Inventory', copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 4H4V22H12V24H4C2.9 24 2 23.1 2 22V4C2 2.9 2.9 2 4 2H9.18C9.6 0.84 10.7 0 12 0C13.3 0 14.4 0.84 14.82 2H20C21.1 2 22 2.9 22 4V13H20V4H18V8H6V4ZM13 3C13 2.45 12.55 2 12 2C11.45 2 11 2.45 11 3C11 3.55 11.45 4 12 4C12.55 4 13 3.55 13 3Z"
+        fill="currentColor"
+      />
+      <path d="M17 20.5L22.49 15L23.99 16.5L17 23.5L12.49 19L13.99 17.5L17 20.5Z" fill="currentColor" />
+    </Icon>
+  );
+}

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

@@ -3,14 +3,29 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function InvestIcon({ 'aria-label': ariaLabel = 'Invest', copyrightYear = '2020', ...props }: IconProps) {
+export function InvestIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Invest',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,24 L22,24 L22,10 L18,10 L18,24 Z M10,24 L14,24 L14,16 L10,16 L10,24 Z M2,24 L6,24 L6,14 L2,14 L2,24 Z M21.7309981,3.73099809 L12.2500311,13.4994066 L5.63133825,6.8807138 L0,12.512052 L8.8817842e-16,9.68362492 L5.63133825,4.05228667 L12.2287557,10.6497041 L20.3166269,2.31662686 L18,3.99680289e-15 L24,0 L24,6 L21.7309981,3.73099809 L21.7309981,3.73099809 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.25 13.4994L21.731 3.731L24 6V0H18L20.3166 2.31663L12.2288 10.6497L5.63134 4.05229L0 9.68363V12.5121L5.63134 6.88071L12.25 13.4994ZM22 24H18V10H22V24ZM14 24H10V16H14V24ZM2 24H6V14H2V24Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.25 13.4994L21.731 3.731L24 6V0H18L20.3166 2.31663L12.2288 10.6497L5.63134 4.05229L0 9.68363V12.5121L5.63134 6.88071L12.25 13.4994ZM22 24H20V10H22V24ZM13 24H11V16H13V24ZM2 24H4V14H2V24Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function InvoiceIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Invoice',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM6 15.3657H8.19127C8.29669 16.2723 9.23042 16.8666 10.4352 16.8666C11.6476 16.8666 12.4759 16.2799 12.4759 15.4723C12.4759 14.7562 11.9563 14.36 10.6461 14.0628L9.23042 13.7505C7.22741 13.3162 6.24096 12.2876 6.24096 10.68C6.24096 8.91366 7.55666 7.66818 9.5 7.37744V6H11.25V7.36611C13.2799 7.63171 14.521 8.86437 14.5542 10.6191H12.4232C12.3479 9.68959 11.5422 9.1258 10.4051 9.1258C9.28313 9.1258 8.53012 9.66674 8.53012 10.482C8.53012 11.16 9.05723 11.541 10.3072 11.8305L11.625 12.1124C13.8012 12.5848 14.75 13.5295 14.75 15.2057C14.75 17.0892 13.4175 18.361 11.25 18.6329V20H9.5V18.6404C7.37772 18.3944 6.06015 17.1981 6 15.3657ZM18 18.5C18 19.3284 17.3284 20 16.5 20C15.6716 20 15 19.3284 15 18.5C15 17.6716 15.6716 17 16.5 17C17.3284 17 18 17.6716 18 18.5Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M6 15.3657H8.19127C8.29669 16.2723 9.23042 16.8666 10.4352 16.8666C11.6476 16.8666 12.4759 16.2799 12.4759 15.4723C12.4759 14.7562 11.9563 14.36 10.6461 14.0628L9.23042 13.7505C7.22741 13.3162 6.24096 12.2876 6.24096 10.68C6.24096 8.91366 7.55666 7.66818 9.5 7.37744V6H11.25V7.36611C13.2799 7.63171 14.521 8.86437 14.5542 10.6191H12.4232C12.3479 9.68959 11.5422 9.1258 10.4051 9.1258C9.28313 9.1258 8.53012 9.66674 8.53012 10.482C8.53012 11.16 9.05723 11.541 10.3072 11.8305L11.625 12.1124C13.8012 12.5848 14.75 13.5295 14.75 15.2057C14.75 17.0892 13.4175 18.361 11.25 18.633V20H9.5V18.6404C7.37772 18.3944 6.06015 17.1981 6 15.3657Z"
+            fill="currentColor"
+          />
+          <path
+            d="M16.5 20C17.3284 20 18 19.3284 18 18.5C18 17.6716 17.3284 17 16.5 17C15.6716 17 15 17.6716 15 18.5C15 19.3284 15.6716 20 16.5 20Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H16V6H20V22H4V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

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

@@ -1,16 +1,37 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function KeyIcon({ 'aria-label': ariaLabel = 'Key', copyrightYear = '2020', ...props }: IconProps) {
+export function KeyIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Key',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,13 L13.7101213,13 C12.8495721,15.8914889 10.1710206,18 7,18 C3.13400675,18 0,14.8659932 0,11 C0,7.13400675 3.13400675,4 7,4 C10.1710206,4 12.8495721,6.10851105 13.7101213,9 L24,9 L24,13 L22,13 L22,17 L18,17 L18,13 Z M7,14 C8.65685425,14 10,12.6568542 10,11 C10,9.34314575 8.65685425,8 7,8 C5.34314575,8 4,9.34314575 4,11 C4,12.6568542 5.34314575,14 7,14 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.7101 14C12.8496 16.8915 10.171 19 7 19C3.13401 19 0 15.866 0 12C0 8.13401 3.13401 5 7 5C10.171 5 12.8496 7.10851 13.7101 10H24V14H22V18H18V14H13.7101ZM10 12C10 13.6569 8.65685 15 7 15C5.34315 15 4 13.6569 4 12C4 10.3431 5.34315 9 7 9C8.65685 9 10 10.3431 10 12Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M7 14C8.10457 14 9 13.1046 9 12C9 10.8954 8.10457 10 7 10C5.89543 10 5 10.8954 5 12C5 13.1046 5.89543 14 7 14Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16 19H22V15H24V9H13.32C12.17 6.58 9.72 5 7 5C3.14 5 0 8.14 0 12C0 15.86 3.14 19 7 19C9.72 19 12.18 17.42 13.32 15H16V19ZM20 17H18V13H11.94L11.71 13.67C11.01 15.66 9.11 17 7 17C4.24 17 2 14.76 2 12C2 9.24 4.24 7 7 7C9.11 7 11.01 8.34 11.71 10.33L11.94 11H22V13H20V17Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,37 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function KeyholeIcon({ 'aria-label': ariaLabel = 'Keyhole', copyrightYear = '2020', ...props }: IconProps) {
+export function KeyholeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Keyhole',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M13.5661739,11.5480575 L15.00015,18.0002 L9.00025,18.0002 L10.4334761,11.5480575 C9.5762404,11.0200663 9.00025,10.081082 9.00025,9.00035 C9.00025,7.34362761 10.3434776,6.0004 12.0002,6.0004 C13.6569224,6.0004 15.00015,7.34362761 15.00015,9.00035 C15.00015,10.081082 14.4234096,11.0200663 13.5661739,11.5480575 M12.0002,0.0005 C5.37256046,0.0005 0.0004,5.37266046 0.0004,12.0003 C0.0004,18.6271896 5.37256046,24.0001 12.0002,24.0001 C18.6270895,24.0001 24,18.6271896 24,12.0003 C24,5.37266046 18.6270895,0.0005 12.0002,0.0005"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 11.9998C0 5.37216 5.37216 0 11.9998 0C18.6267 0 23.9996 5.37216 23.9996 11.9998C23.9996 18.6267 18.6267 23.9996 11.9998 23.9996C5.37216 23.9996 0 18.6267 0 11.9998ZM14.9996 8.99902C14.9996 10.2243 14.2651 11.2779 13.2124 11.7438L14.9996 17.999H8.9996L10.7868 11.7438C9.73411 11.2779 8.9996 10.2243 8.9996 8.99902C8.9996 7.34217 10.3427 5.99902 11.9996 5.99902C13.6565 5.99902 14.9996 7.34217 14.9996 8.99902Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M14.9996 8.99902C14.9996 10.2243 14.2651 11.2779 13.2124 11.7438L14.9996 17.999H8.99963L10.7868 11.7438C9.73414 11.2779 8.99963 10.2243 8.99963 8.99902C8.99963 7.34217 10.3428 5.99902 11.9996 5.99902C13.6565 5.99902 14.9996 7.34217 14.9996 8.99902Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9998 0C5.37216 0 0 5.37216 0 11.9998C0 18.6267 5.37216 23.9996 11.9998 23.9996C18.6267 23.9996 23.9996 18.6267 23.9996 11.9998C23.9996 5.37216 18.6267 0 11.9998 0ZM2 11.9998C2 6.47673 6.47673 2 11.9998 2C17.5222 2 21.9996 6.47681 21.9996 11.9998C21.9996 17.5221 17.5221 21.9996 11.9998 21.9996C6.47681 21.9996 2 17.5222 2 11.9998Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function LeafIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Leaf',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22 12V2.00004L12.0288 2.00004L12 2C6.47715 2 2 6.47715 2 12C2 14.2292 2.72939 16.288 3.96252 17.9508L2.46302 19.4503C1.87723 20.0361 1.87723 20.9858 2.46302 21.5716C3.0488 22.1574 3.99855 22.1574 4.58434 21.5716L6.08906 20.0669C7.74486 21.2822 9.7886 22 12 22C17.5228 22 22 17.5229 22 12ZM17.1944 6.84038C17.5849 7.2309 17.5849 7.86407 17.1944 8.25459L9.19441 16.2546C8.80389 16.6451 8.17072 16.6451 7.7802 16.2546C7.38967 15.8641 7.38967 15.2309 7.7802 14.8404L15.7802 6.84038C16.1707 6.44985 16.8039 6.44985 17.1944 6.84038Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M17.1944 8.25447C17.585 7.86394 17.585 7.23078 17.1944 6.84025C16.8039 6.44973 16.1708 6.44973 15.7802 6.84025L7.78024 14.8403C7.38971 15.2308 7.38971 15.8639 7.78024 16.2545C8.17076 16.645 8.80392 16.645 9.19445 16.2545L17.1944 8.25447Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.0288 2.00004H22V12C22 17.5228 17.5228 22 12 22C9.7886 22 7.74486 21.2822 6.08906 20.0669L4.58434 21.5716C3.99855 22.1574 3.0488 22.1574 2.46302 21.5716C1.87723 20.9858 1.87723 20.0361 2.46302 19.4503L3.96252 17.9508C2.72939 16.288 2 14.2292 2 12C2 6.47715 6.47715 2 12 2L12.0288 2.00004ZM20 4.00004H12.0232L12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12V4.00004Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/light-bulb-icon.tsx

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function LightBulbIcon({ 'aria-label': ariaLabel = 'Light Bulb', copyrightYear = '2020', ...props }: IconProps) {
+export function LightBulbIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Light Bulb',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M9,22 L15,22 L15,23 C15,23.5522847 14.5522847,24 14,24 L10,24 C9.44771525,24 9,23.5522847 9,23 L9,22 Z M16,16.0018987 L16,18 C16,19.1045695 15.1045695,20 14,20 L10,20 C8.8954305,20 8,19.1045695 8,18 L8,16.0018987 C5.32211278,14.5710686 3.5,11.7483229 3.5,8.5 C3.5,3.80557963 7.30557963,0 12,0 C16.6944204,0 20.5,3.80557963 20.5,8.5 C20.5,11.7483229 18.6778872,14.5710686 16,16.0018987 L16,16.0018987 Z M14,14.6865006 L14,14.6865006 C16.611264,13.8429436 18.5,11.3920408 18.5,8.5 C18.5,4.91014913 15.5898509,2 12,2 C8.41014913,2 5.5,4.91014913 5.5,8.5 C5.5,11.3920408 7.38873598,13.8429436 10,14.6865006 L10,18 L14,18 L14,14.6865006 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M16 18V16.0019C18.6779 14.5711 20.5 11.7483 20.5 8.5C20.5 3.80558 16.6944 0 12 0C7.30558 0 3.5 3.80558 3.5 8.5C3.5 11.7483 5.32211 14.5711 8 16.0019V18C8 19.1046 8.89543 20 10 20H14C15.1046 20 16 19.1046 16 18Z"
+            fill="currentColor"
+          />
+          <path d="M15 23V22H9V23C9 23.5523 9.44772 24 10 24H14C14.5523 24 15 23.5523 15 23Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16 16.0019V18C16 19.1046 15.1046 20 14 20H10C8.89543 20 8 19.1046 8 18V16.0019C5.32211 14.5711 3.5 11.7483 3.5 8.5C3.5 3.80558 7.30558 0 12 0C16.6944 0 20.5 3.80558 20.5 8.5C20.5 11.7483 18.6779 14.5711 16 16.0019ZM14 18V14.6865C16.6113 13.8429 18.5 11.392 18.5 8.5C18.5 4.91015 15.5899 2 12 2C8.41015 2 5.5 4.91015 5.5 8.5C5.5 11.392 7.38874 13.8429 10 14.6865V18H14Z"
+            fill="currentColor"
+          />
+          <path d="M15 22V23C15 23.5523 14.5523 24 14 24H10C9.44772 24 9 23.5523 9 23V22H15Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,14 +3,29 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function LimitIcon({ 'aria-label': ariaLabel = 'Limit', copyrightYear = '2020', ...props }: IconProps) {
+export function LimitIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Limit',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M20.4663464,17.3242108 C21.437899,15.7825285 22,13.9569085 22,12 C22,6.47714286 17.5228571,2 12,2 C10.0430915,2 8.21747148,2.562101 6.67578925,3.53365362 L20.4663464,17.3242108 L20.4663464,17.3242108 Z M17.7016635,20.2163822 L3.78361783,6.29833646 C2.6591542,7.91570425 2,9.88087368 2,12 C2,17.5228571 6.47714286,22 12,22 C14.1191263,22 16.0842958,21.3408458 17.7016635,20.2163822 L17.7016635,20.2163822 Z M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 -8.8817842e-16,18.627 -8.8817842e-16,12 C-8.8817842e-16,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 12C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12C0 5.373 5.37225 0 12 0C18.6278 0 24 5.373 24 12ZM3.8557 6.36994L17.6301 20.1443C18.7358 19.3785 19.678 18.3933 20.3938 17.2517L6.74833 3.6062C5.6067 4.32199 4.62151 5.26423 3.8557 6.36994Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM20.4663 17.3242C21.4379 15.7825 22 13.9569 22 12C22 6.47714 17.5229 2 12 2C10.0431 2 8.21747 2.5621 6.67579 3.53365L20.4663 17.3242ZM17.7017 20.2164L3.78362 6.29834C2.65915 7.9157 2 9.88087 2 12C2 17.5229 6.47714 22 12 22C14.1191 22 16.0843 21.3408 17.7017 20.2164Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -3,14 +3,18 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function LinkIcon({ 'aria-label': ariaLabel = 'Link', copyrightYear = '2020', ...props }: IconProps) {
+export function LinkIcon({ 'aria-label': ariaLabel = 'Link', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M11 18H6C2.68629 18 0 15.3137 0 12C0 8.68629 2.68629 6 6 6H11V8H6C3.79086 8 2 9.79086 2 12C2 14.2091 3.79086 16 6 16H11V18Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M13,18 L13,16 L18,16 C20.209139,16 22,14.209139 22,12 C22,9.790861 20.209139,8 18,8 L13,8 L13,6 L18,6 C21.3137085,6 24,8.6862915 24,12 C24,15.3137085 21.3137085,18 18,18 L13,18 Z M11,18 L6,18 C2.6862915,18 -1.77635684e-15,15.3137085 -1.77635684e-15,12 C-1.77635684e-15,8.6862915 2.6862915,6 6,6 L11,6 L11,8 L6,8 C3.790861,8 2,9.790861 2,12 C2,14.209139 3.790861,16 6,16 L11,16 L11,18 L11,18 Z M8,11 L16,11 L16,13 L8,13 L8,11 Z"
       />
+      <path
+        d="M13 18H18C21.3137 18 24 15.3137 24 12C24 8.68629 21.3137 6 18 6H13V8H18C20.2091 8 22 9.79086 22 12C22 14.2091 20.2091 16 18 16H13V18Z"
+        fill="currentColor"
+      />
+      <path d="M16 11H8V13H16V11Z" fill="currentColor" />
     </Icon>
   );
 }

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

@@ -1,16 +1,42 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function LinkedinIcon({ 'aria-label': ariaLabel = 'Linkedin', copyrightYear = '2020', ...props }: IconProps) {
+export function LinkedinIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Linkedin',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18.75,12.75 C18.75,10.6785 17.61375,9 15.75,9 C14.25,9 13.5,10.0125 12.75,10.8615 L12.75,9 L9.75,9 L9.75,19.5 L12.75,19.5 L12.75,13.5 C12.75,12.67125 13.42125,12 14.25,12 C15.07875,12 15.75,12.67125 15.75,13.5 L15.75,19.5 L18.75,19.5 L18.75,12.75 Z M8.25,6 C8.25,5.17125 7.57875,4.5 6.75,4.5 C5.92125,4.5 5.25,5.17125 5.25,6 C5.25,6.82875 5.92125,7.5 6.75,7.5 C7.57875,7.5 8.25,6.82875 8.25,6 L8.25,6 Z M5.25,19.5 L8.25,19.5 L8.25,9 L5.25,9 L5.25,19.5 Z M1.5,0 L22.5,0 L22.5,0 C23.3284271,-1.52179594e-16 24,0.671572875 24,1.5 L24,22.5 L24,22.5 C24,23.3284271 23.3284271,24 22.5,24 L1.5,24 L1.5,24 C0.671572875,24 1.01453063e-16,23.3284271 0,22.5 L0,1.5 L0,1.5 C-1.01453063e-16,0.671572875 0.671572875,1.52179594e-16 1.5,0 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM6.75 4.5C7.57875 4.5 8.25 5.17125 8.25 6C8.25 6.82875 7.57875 7.5 6.75 7.5C5.92125 7.5 5.25 6.82875 5.25 6C5.25 5.17125 5.92125 4.5 6.75 4.5ZM15.75 9C17.6138 9 18.75 10.6785 18.75 12.75V19.5H15.75V13.5C15.75 12.6713 15.0787 12 14.25 12C13.4213 12 12.75 12.6713 12.75 13.5V19.5H9.75V9H12.75V10.8615C12.8102 10.7934 12.8703 10.7243 12.9309 10.6547C13.6251 9.8566 14.3703 9 15.75 9ZM5.25 19.5H8.25V9H5.25V19.5Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M6.75 4.5C7.57875 4.5 8.25 5.17125 8.25 6C8.25 6.82875 7.57875 7.5 6.75 7.5C5.92125 7.5 5.25 6.82875 5.25 6C5.25 5.17125 5.92125 4.5 6.75 4.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.75 9C17.6138 9 18.75 10.6785 18.75 12.75V19.5H15.75V13.5C15.75 12.6713 15.0787 12 14.25 12C13.4213 12 12.75 12.6713 12.75 13.5V19.5H9.75V9H12.75V10.8615C12.8102 10.7934 12.8703 10.7243 12.9309 10.6547C13.6251 9.8566 14.3703 9 15.75 9Z"
+            fill="currentColor"
+          />
+          <path d="M5.25 19.5H8.25V9H5.25V19.5Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }