@westpac/ui 0.1.0 → 0.2.0

package/src/components/icon/components/cardless-cash-icon.tsx

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CardlessCashIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cardless Cash',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M10.5026 15.4898H9C9.04124 16.7595 9.94472 17.5885 11.4 17.759V18.7011H12.6V17.7538C14.0863 17.5653 15 16.6841 15 15.3789C15 14.2174 14.3494 13.5628 12.8571 13.2355L11.9535 13.0401C11.0964 12.8395 10.7349 12.5756 10.7349 12.1057C10.7349 11.5408 11.2513 11.166 12.0207 11.166C12.8003 11.166 13.3528 11.5566 13.4045 12.2007H14.8657C14.843 10.9848 13.9919 10.1307 12.6 9.94662V9H11.4V9.95448C10.0674 10.1559 9.16523 11.019 9.16523 12.243C9.16523 13.3569 9.84165 14.0696 11.2151 14.3705L12.1859 14.587C13.0843 14.7929 13.4406 15.0674 13.4406 15.5637C13.4406 16.1233 12.8726 16.5298 12.0413 16.5298C11.2151 16.5298 10.5749 16.118 10.5026 15.4898Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M1 0C0.447715 0 0 0.447716 0 1V9C0 9.55229 0.447716 10 1 10H3.89978L2.08496 24H21.9151L20.1003 10H23C23.5523 10 24 9.55228 24 9V1C24 0.447715 23.5523 0 23 0H1ZM19.6391 22L17.565 6H6.43503L4.36095 22H19.6391Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M10.5026 15.4898H9C9.04124 16.7595 9.94472 17.5885 11.4 17.759V18.7011H12.6V17.7538C14.0863 17.5653 15 16.6841 15 15.3789C15 14.2174 14.3494 13.5628 12.8571 13.2355L11.9535 13.0401C11.0964 12.8395 10.7349 12.5756 10.7349 12.1057C10.7349 11.5408 11.2513 11.166 12.0207 11.166C12.8003 11.166 13.3528 11.5566 13.4045 12.2007H14.8657C14.843 10.9848 13.9919 10.1307 12.6 9.94662V9H11.4V9.95448C10.0674 10.1559 9.16523 11.019 9.16523 12.243C9.16523 13.3569 9.84165 14.0696 11.2151 14.3705L12.1859 14.587C13.0843 14.7929 13.4406 15.0674 13.4406 15.5637C13.4406 16.1233 12.8726 16.5298 12.0413 16.5298C11.2151 16.5298 10.5749 16.118 10.5026 15.4898Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 1C0 0.447716 0.447715 0 1 0H23C23.5523 0 24 0.447715 24 1V9C24 9.55228 23.5523 10 23 10H20.1003L21.9151 24H2.08496L3.89978 10H1C0.447716 10 0 9.55229 0 9V1ZM22 8H19.841L19.3225 4H4.67755L4.15903 8H2V2H22V8ZM19.6391 22L17.565 6H6.43503L4.36095 22H19.6391Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

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

@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CartIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cart',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M0 2H1.41597C1.88002 2 2.2831 2.31925 2.38939 2.77096L5.66378 16.6871C5.98264 18.0423 7.19187 19 8.58403 19H21V17H8.58403C8.11998 17 7.7169 16.6808 7.61061 16.229L7.32143 15H20.3604C21.3138 15 22.1346 14.3271 22.3216 13.3922L24 5H4.96849L4.33622 2.31288C4.01736 0.957735 2.80813 0 1.41597 0H0V2Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11 22C11 23.1046 10.1046 24 9 24C7.89543 24 7 23.1046 7 22C7 20.8954 7.89543 20 9 20C10.1046 20 11 20.8954 11 22Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18 24C19.1046 24 20 23.1046 20 22C20 20.8954 19.1046 20 18 20C16.8954 20 16 20.8954 16 22C16 23.1046 16.8954 24 18 24Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2H1.41597C1.88002 2 2.2831 2.31925 2.38939 2.77096L5.66378 16.6871C5.98264 18.0423 7.19187 19 8.58403 19H21V17H8.58403C8.11998 17 7.7169 16.6808 7.61061 16.229L7.32143 15H20.3604C21.3138 15 22.1346 14.3271 22.3216 13.3922L24 5H4.96849L4.33622 2.31288C4.01736 0.957735 2.80813 0 1.41597 0H0V2ZM5.43907 7L6.85084 13L20.3604 13L21.5604 7H5.43907Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11 22C11 23.1046 10.1046 24 9 24C7.89543 24 7 23.1046 7 22C7 20.8954 7.89543 20 9 20C10.1046 20 11 20.8954 11 22Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18 24C19.1046 24 20 23.1046 20 22C20 20.8954 19.1046 20 18 20C16.8954 20 16 20.8954 16 22C16 23.1046 16.8954 24 18 24Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

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

@@ -1,16 +1,36 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ChatIcon({ 'aria-label': ariaLabel = 'Chat', copyrightYear = '2020', ...props }: IconProps) {
+export function ChatIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Chat',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,16 C24,17.1045695 23.1045695,18 22,18 L6,18 L0,24 L0,2 Z M4,4 L4,6 L20,6 L20,4 L4,4 Z M4,8 L4,10 L20,10 L20,8 L4,8 Z M4,12 L4,14 L14,14 L14,12 L4,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 0C0.89543 0 0 0.89543 0 2V24L6 18H22C23.1046 18 24 17.1046 24 16V2C24 0.89543 23.1046 0 22 0H2ZM20 4H4V6H20V4ZM4 8H16V10H4V8ZM12 12H4V14H12V12Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M20 4H4V6H20V4Z" fill="currentColor" />
+          <path d="M4 8H16V10H4V8Z" fill="currentColor" />
+          <path d="M12 12H4V14H12V12Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2V24L6 18H22C23.1046 18 24 17.1046 24 16V2C24 0.89543 23.1046 0 22 0H2C0.89543 0 0 0.89543 0 2ZM22 16H5.17157L2 19.1716V2H22V16Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CheckIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Check',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 4C0.895431 4 0 4.89543 0 6V18C0 19.1046 0.89543 20 2 20H22C23.1046 20 24 19.1046 24 18V6C24 4.89543 23.1046 4 22 4H2ZM3.5 13.6898H5.06519C5.14049 14.3374 5.80744 14.7618 6.66803 14.7618C7.53399 14.7618 8.12564 14.3428 8.12564 13.7659C8.12564 13.2544 7.75452 12.9714 6.81863 12.7592L5.80744 12.536C4.37672 12.2258 3.67212 11.4912 3.67212 10.3429C3.67212 9.08119 4.6119 8.19156 6 7.98389V7H7.25V7.97579C8.69992 8.16551 9.58642 9.04598 9.61016 10.2994H8.08799C8.03421 9.63542 7.45869 9.23271 6.64651 9.23271C5.84509 9.23271 5.30723 9.6191 5.30723 10.2014C5.30723 10.6857 5.68373 10.9578 6.57659 11.1646L7.51786 11.366C9.07229 11.7034 9.75 12.3782 9.75 13.5755C9.75 14.9209 8.7982 15.8293 7.25 16.0235V17H6V16.0289C4.48408 15.8532 3.54296 14.9987 3.5 13.6898ZM18 10H12V12H18V10ZM20 14H12V16H20V14Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M20 14H12V16H20V14Z" fill="currentColor" />
+          <path d="M12 10H18V12H12V10Z" fill="currentColor" />
+          <path
+            d="M5.06519 13.6898H3.5C3.54296 14.9987 4.48408 15.8532 6 16.0289V17H7.25V16.0235C8.7982 15.8293 9.75 14.9209 9.75 13.5755C9.75 12.3782 9.07229 11.7034 7.51786 11.366L6.57659 11.1646C5.68373 10.9578 5.30723 10.6857 5.30723 10.2014C5.30723 9.6191 5.84509 9.23271 6.64651 9.23271C7.45869 9.23271 8.03421 9.63542 8.08799 10.2994H9.61016C9.58642 9.04598 8.69992 8.16551 7.25 7.97579V7H6V7.98389C4.6119 8.19156 3.67212 9.08119 3.67212 10.3429C3.67212 11.4912 4.37672 12.2258 5.80744 12.536L6.81863 12.7592C7.75452 12.9714 8.12565 13.2544 8.12565 13.7659C8.12565 14.3428 7.53399 14.7618 6.66803 14.7618C5.80744 14.7618 5.14049 14.3374 5.06519 13.6898Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 6C0 4.89543 0.895431 4 2 4H22C23.1046 4 24 4.89543 24 6V18C24 19.1046 23.1046 20 22 20H2C0.89543 20 0 19.1046 0 18V6ZM2 6H22V18H2L2 6Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/clear-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 ClearIcon({ 'aria-label': ariaLabel = 'Clear', copyrightYear = '2020', ...props }: IconProps) {
+export function ClearIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Clear',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0zm4.95 5.636L12 10.586l-4.95-4.95L5.636 7.05l4.95 4.95-4.95 4.95 1.414 1.414 4.95-4.95 4.95 4.95 1.414-1.414-4.95-4.95 4.95-4.95-1.414-1.414z"
-      />
+      {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 24ZM8.46447 7.05018L12 10.5857L15.5355 7.05018L16.9497 8.4644L13.4142 11.9999L16.9497 15.5355L15.5355 16.9497L12 13.4141L8.46447 16.9497L7.05025 15.5355L10.5858 11.9999L7.05025 8.4644L8.46447 7.05018Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M8.46447 7.05018L12 10.5857L15.5355 7.05018L16.9497 8.4644L13.4142 11.9999L16.9497 15.5355L15.5355 16.9497L12 13.4141L8.46447 16.9497L7.05025 15.5355L10.5858 11.9999L7.05025 8.4644L8.46447 7.05018Z"
+            fill="currentColor"
+          />
+          <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 12ZM22 12C22 17.5225 17.5231 22 12 22C6.4769 22 2 17.5225 2 12C2 6.47749 6.4769 2 12 2C17.5231 2 22 6.47749 22 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/clock-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 ClockIcon({ 'aria-label': ariaLabel = 'Clock', copyrightYear = '2020', ...props }: IconProps) {
+export function ClockIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Clock',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="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 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 M18,13 L18,15 L10,15 L10,5 L12,5 L12,13 L18,13 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 24ZM18 15V13H12V5H10V15H18Z"
+          fill="currentColor"
+        />
+      ) : (
+        <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 12ZM12 2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47714 17.5229 2 12 2ZM18 15V13H12V5H10V15H18Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,12 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function CloseIcon({ 'aria-label': ariaLabel = 'Close', copyrightYear = '2020', ...props }: IconProps) {
+export function CloseIcon({ 'aria-label': ariaLabel = 'Close', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon
+      <path
+        d="M5.41421 4L12 10.5858L18.5858 4L20 5.41421L13.4142 12L20 18.5858L18.5858 20L12 13.4142L5.41421 20L4 18.5858L10.5858 12L4 5.41421L5.41421 4Z"
         fill="currentColor"
-        fillRule="evenodd"
-        points="5.414 4 12 10.586 18.586 4 20 5.414 13.414 12 20 18.586 18.586 20 12 13.414 5.414 20 4 18.586 10.586 12 4 5.414"
       />
     </Icon>
   );

package/src/components/icon/components/cocktail-glass-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 CocktailGlassIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cocktail Glass',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 2L11 15.1818V22H6V24H18V22H13V15.1818L23 2H1ZM7.30349 7H16.6965L18.9724 4H5.02762L7.30349 7Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 2L11 15.1818V22H6V24H18V22H13V15.1818L23 2H1ZM8.82073 9L12 13.1909L15.1793 9H8.82073ZM7.30349 7H16.6965L18.9724 4H5.02762L7.30349 7Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

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

@@ -1,16 +1,45 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function CompassIcon({ 'aria-label': ariaLabel = 'Compass', copyrightYear = '2020', ...props }: IconProps) {
+export function CompassIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Compass',
+  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 M14.25,9.75 L18,18 L9.75,14.25 L6,6 L14.25,9.75 Z M12,13.5 C12.82875,13.5 13.5,12.82875 13.5,12 C13.5,11.17125 12.82875,10.5 12,10.5 C11.17125,10.5 10.5,11.17125 10.5,12 C10.5,12.82875 11.17125,13.5 12,13.5 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M12 13.5C11.1712 13.5 10.5 12.8288 10.5 12C10.5 11.1712 11.1712 10.5 12 10.5C12.8288 10.5 13.5 11.1712 13.5 12C13.5 12.8288 12.8288 13.5 12 13.5Z"
+            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 24ZM14.25 9.75L6 6L9.75 14.25L18 18L14.25 9.75Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14.25 9.75L6 6L9.75 14.25L18 18L14.25 9.75ZM10.5 12C10.5 12.8287 11.1713 13.5 12 13.5C12.8287 13.5 13.5 12.8287 13.5 12C13.5 11.1713 12.8287 10.5 12 10.5C11.1713 10.5 10.5 11.1713 10.5 12Z"
+            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/contact-icon.tsx

@@ -1,16 +1,41 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ContactIcon({ 'aria-label': ariaLabel = 'Contact', copyrightYear = '2020', ...props }: IconProps) {
+export function ContactIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Contact',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,2 L20,2 C21.1045695,2 22,2.8954305 22,4 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,4 C2,2.8954305 2.8954305,2 4,2 L6,2 L6,0 L8,0 L8,2 L16,2 L16,0 L18,0 L18,2 Z M6,18.6666667 L6,20 L18,20 L18,18.6666667 C18,16.8933333 14.0025,16 12,16 C9.9975,16 6,16.8933333 6,18.6666667 Z M12,14 C13.6575,14 15,12.6575 15,11 C15,9.3425 13.6575,8 12,8 C10.3425,8 9,9.3425 9,11 C9,12.6575 10.3425,14 12,14 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 2H18V0H16V2H8V0H6V2H4C2.89543 2 2 2.89543 2 4V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V4C22 2.89543 21.1046 2 20 2ZM6 18.46C6 15.96 9.97 14.88 12 14.88C14.03 14.88 18 15.96 18 18.47V20H6V18.46ZM15 11C15 12.65 13.65 14 12 14C10.35 14 9 12.65 9 11C9 9.35 10.35 8 12 8C13.65 8 15 9.35 15 11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M6 18.46C6 15.96 9.97 14.88 12 14.88C14.03 14.88 18 15.96 18 18.47V20H6V18.46Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15 11C15 12.65 13.65 14 12 14C10.35 14 9 12.65 9 11C9 9.35 10.35 8 12 8C13.65 8 15 9.35 15 11Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18 2H20C21.1046 2 22 2.89543 22 4V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V4C2 2.89543 2.89543 2 4 2H6V0H8V2H16V0H18V2ZM4 4H20V22H4V4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/content-copy-icon.tsx

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ContentCopyIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Content Copy',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M5 0C3.34315 0 2 1.34315 2 3V18H4V3C4 2.44772 4.44772 2 5 2H16V0H5Z" fill="currentColor" />
+          <path
+            d="M8 4C6.89543 4 6 4.89543 6 6V22C6 23.1046 6.89543 24 8 24H20C21.1046 24 22 23.1046 22 22V6C22 4.89543 21.1046 4 20 4H8Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16 0H4C2.9 0 2 0.9 2 2V18H4V2H16V0ZM19.8667 4H8.13333C6.96 4 6 5 6 6.22222V21.7778C6 23 6.96 24 8.13333 24H19.8667C21.04 24 22 23 22 21.7778V6.22222C22 5 21.04 4 19.8667 4ZM8 22H20V6H8V22Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

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

@@ -4,17 +4,28 @@ import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function CreditCardIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Credit Card',
-  copyrightYear = '2020',
+  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 M2,6 L2,10 L22,10 L22,6 L2,6 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22 2H2C0.89543 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V4C24 2.89543 23.1046 2 22 2ZM23 8H1V12H23V8Z"
+          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 12V20H22V12H2ZM22 8H2V4H22V8Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +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 CubeIcon({ 'aria-label': ariaLabel = 'Cube', copyrightYear = '2020', ...props }: IconProps) {
+export function CubeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cube',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,13 L24,7 L24,18 L12,24 L0,18 L0,7 L12,13 Z M12,0 L24,5 L12,11 L0,5 L12,0 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M0 5L12 0L24 5L12 11L0 5Z" fill="currentColor" />
+          <path d="M0 7L11 13V24L0 18V7Z" fill="currentColor" />
+          <path d="M24 18L13 24L13 13L24 7V18Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 5L12 11L24 5L12 0L0 5ZM4.80298 5.16542L12 8.76393L19.197 5.16542L12 2.16667L4.80298 5.16542Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 7V17.5L12 24L0 17.5V7L12 13L24 7ZM11 14.7829L2 10.3579V16.3088L11 21.1838V14.7829ZM13 14.7829V21.1838L22 16.3088V10.3579L13 14.7829Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/cursor-arrow-click-icon.tsx

@@ -1,20 +1,53 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function CursorArrowClickIcon({
-  'aria-label': ariaLabel = 'Cube',
-  copyrightYear = '2021',
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cursor Arrow Click',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="m11 10 8.167 7.524-3.675.107 2.45 5.563-1.878.806-2.45-5.562L11 21.018V10Zm1-10c6.627 0 12 5.373 12 12 0 1.327-.215 2.604-.613 3.797l-1.898-.633A9.99 9.99 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.995 9.995 0 0 0 5.528 8.947l-.895 1.789A11.996 11.996 0 0 1 0 12C0 5.373 5.373 0 12 0Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3570)">
+            <path
+              d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.234 22 12.4661 21.992 12.6961 21.9761L13.283 23.9322C12.8614 23.977 12.4334 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 12.433 23.9771 12.8607 23.9323 13.2819L21.9762 12.6951C21.992 12.4654 22 12.2336 22 12C22 6.47715 17.5228 2 12 2Z"
+              fill="currentColor"
+            />
+            <path
+              d="M23.4032 15.2117L18.9917 16.6861L24 21.6709L21.6831 23.9879L16.6865 18.9913L15.2121 23.4028L11.7016 11.7012L23.4032 15.2117Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3570">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3569)">
+            <path
+              d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.234 22 12.4661 21.992 12.6961 21.9761L13.283 23.9322C12.8614 23.977 12.4334 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 12.433 23.9771 12.8607 23.9323 13.2819L21.9762 12.6951C21.992 12.4654 22 12.2336 22 12C22 6.47715 17.5228 2 12 2Z"
+              fill="currentColor"
+            />
+            <path
+              d="M23.4032 15.2117L18.9917 16.6861L24 21.6709L21.6831 23.9879L16.6865 18.9913L15.2121 23.4028L11.7016 11.7012L23.4032 15.2117Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3569">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      )}
     </Icon>
   );
 }