@westpac/ui 0.1.0 → 0.2.0

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

@@ -1,16 +1,29 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TransferIcon({ 'aria-label': ariaLabel = 'Transfer', copyrightYear = '2020', ...props }: IconProps) {
+export function TransferIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Transfer',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,12 L16,12 L16,8 L24,16 L16,24 L16,20 L12,20 L12,12 Z M0,8 L8,0 L8,4 L12,4 L12,12 L8,12 L8,16 L0,8 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 16L0 8L8 0V4H12V12H8V16ZM12 12V20H16V24L24 16L16 8V12H12Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M8 0L0 8L8 16V13.1719L2.82837 8L6 4.82812V6H11V10H13V4H8V0Z" fill="currentColor" />
+          <path d="M16 20V24L24 16L16 8V12H10V20H16Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/transport-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 TransportIcon({ 'aria-label': ariaLabel = 'Transport', copyrightYear = '2020', ...props }: IconProps) {
+export function TransportIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Transport',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M16,22 L8,22 L8,23 C8,23.5522847 7.55228475,24 7,24 L5,24 C4.44771525,24 4,23.5522847 4,23 L4,22 L3,22 C2.44771525,22 2,21.5522847 2,21 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L20,0 C21.1045695,-2.02906125e-16 22,0.8954305 22,2 L22,21 C22,21.5522847 21.5522847,22 21,22 L20,22 L20,23 C20,23.5522847 19.5522847,24 19,24 L17,24 C16.4477153,24 16,23.5522847 16,23 L16,22 L16,22 Z M6,18 C7.1045695,18 8,17.1045695 8,16 C8,14.8954305 7.1045695,14 6,14 C4.8954305,14 4,14.8954305 4,16 C4,17.1045695 4.8954305,18 6,18 Z M18,18 C19.1045695,18 20,17.1045695 20,16 C20,14.8954305 19.1045695,14 18,14 C16.8954305,14 16,14.8954305 16,16 C16,17.1045695 16.8954305,18 18,18 Z M4,4 L4,12 L20,12 L20,4 L4,4 Z M9,2 L9,3 L15,3 L15,2 L9,2 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16 22H8V23C8 23.5523 7.55228 24 7 24H5C4.44772 24 4 23.5523 4 23V22H3C2.44772 22 2 21.5523 2 21V2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.89543 22 2V21C22 21.5523 21.5523 22 21 22H20V23C20 23.5523 19.5523 24 19 24H17C16.4477 24 16 23.5523 16 23V22ZM9 17C9 18.1046 8.10457 19 7 19C5.89543 19 5 18.1046 5 17C5 15.8954 5.89543 15 7 15C8.10457 15 9 15.8954 9 17ZM17 19C18.1046 19 19 18.1046 19 17C19 15.8954 18.1046 15 17 15C15.8954 15 15 15.8954 15 17C15 18.1046 15.8954 19 17 19ZM4 4H20V12H4V4ZM15 2H9V3H15V2Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M9 17C9 18.1046 8.10457 19 7 19C5.89543 19 5 18.1046 5 17C5 15.8954 5.89543 15 7 15C8.10457 15 9 15.8954 9 17Z"
+            fill="currentColor"
+          />
+          <path
+            d="M19 17C19 18.1046 18.1046 19 17 19C15.8954 19 15 18.1046 15 17C15 15.8954 15.8954 15 17 15C18.1046 15 19 15.8954 19 17Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16 22H8V23C8 23.5523 7.55228 24 7 24H5C4.44772 24 4 23.5523 4 23V22H3C2.44772 22 2 21.5523 2 21V2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.89543 22 2V21C22 21.5523 21.5523 22 21 22H20V23C20 23.5523 19.5523 24 19 24H17C16.4477 24 16 23.5523 16 23V22ZM4 4H20V12H4V4ZM15 2H9V3H15V2ZM4 14H20V20H4V14Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/travel-explore-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TravelExploreIcon({
+  'aria-label': ariaLabel = 'Travel Explore',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M12 0C18.6274 0 24 5.37258 24 12H22C22 10.5778 21.7031 9.22493 21.1679 8H19C18.4477 8 18 7.55228 18 7V3.99927C17.1047 3.32674 16.0927 2.80101 15 2.4578V4C15 5.10457 14.1046 6 13 6H11V9C11 9.55229 10.5523 10 10 10H8V12H10V15H8L2.35385 9.35385C2.12317 10.1967 2 11.084 2 12C2 17.5228 6.47715 22 12 22V24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.5355 12.4645C21.246 14.1749 21.4581 16.8163 20.1719 18.7577L23.7782 22.364L22.364 23.7782L18.7577 20.1719C16.8163 21.4581 14.1749 21.246 12.4645 19.5355C10.5118 17.5829 10.5118 14.4171 12.4645 12.4645C14.4171 10.5118 17.5829 10.5118 19.5355 12.4645ZM18.1213 18.1213C19.2929 16.9497 19.2929 15.0503 18.1213 13.8787C16.9497 12.7071 15.0503 12.7071 13.8787 13.8787C12.7071 15.0503 12.7071 16.9497 13.8787 18.1213C15.0503 19.2929 16.9497 19.2929 18.1213 18.1213Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TuneIcon({ 'aria-label': ariaLabel = 'Tune', copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M16 3C16 2.44772 15.5523 2 15 2C14.4477 2 14 2.44772 14 3V7C14 7.55228 14.4477 8 15 8C15.5523 8 16 7.55228 16 7V6H23C23.5523 6 24 5.55228 24 5C24 4.44772 23.5523 4 23 4H16V3Z"
+        fill="currentColor"
+      />
+      <path d="M0 5C0 4.44772 0.447715 4 1 4H12V6H1C0.447715 6 0 5.55228 0 5Z" fill="currentColor" />
+      <path
+        d="M0 12C0 11.4477 0.447715 11 1 11H6V10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10V14C8 14.5523 7.55228 15 7 15C6.44772 15 6 14.5523 6 14V13H1C0.447715 13 0 12.5523 0 12Z"
+        fill="currentColor"
+      />
+      <path d="M1 18C0.447715 18 0 18.4477 0 19C0 19.5523 0.447715 20 1 20H10V18H1Z" fill="currentColor" />
+      <path d="M23 11H10V13H23C23.5523 13 24 12.5523 24 12C24 11.4477 23.5523 11 23 11Z" fill="currentColor" />
+      <path
+        d="M14 18H23C23.5523 18 24 18.4477 24 19C24 19.5523 23.5523 20 23 20H14V21C14 21.5523 13.5523 22 13 22C12.4477 22 12 21.5523 12 21V17C12 16.4477 12.4477 16 13 16C13.5523 16 14 16.4477 14 17V18Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/twitter-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 TwitterIcon({ 'aria-label': ariaLabel = 'Twitter', copyrightYear = '2020', ...props }: IconProps) {
+export function TwitterIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Twitter',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <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 M21.609,5.9355 C20.9025,6.255 20.142,6.47025 19.344,6.567 C20.15775,6.0705 20.7825,5.28375 21.078,4.34775 C20.316,4.80675 19.47225,5.13975 18.57375,5.3205 C17.8545,4.54125 16.83,4.05375 15.69525,4.05375 C13.51875,4.05375 11.7525,5.85075 11.7525,8.0655 C11.7525,8.3805 11.787,8.6865 11.8545,8.9805 C8.57775,8.81325 5.673,7.21575 3.7275,4.78875 C3.38775,5.38125 3.1935,6.0705 3.1935,6.8055 C3.1935,8.1975 3.80925,9.426 4.86675,10.14525 C4.221,10.12425 3.75,9.94425 3,9.64275 L3,9.69375 C3,11.637 4.44,13.2585 6.243,13.6275 C5.913,13.719 5.60475,13.76775 5.24475,13.76775 C4.99125,13.76775 4.76475,13.743 4.52325,13.6965 C5.02575,15.29025 6.492,16.4505 8.217,16.48275 C6.86775,17.559 5.17275,18.20025 3.3255,18.20025 C3.00675,18.20025 2.6955,18.18075 2.388,18.14325 C4.1325,19.28175 6.20625,19.947 8.433,19.947 C15.6855,19.947 19.65225,13.83225 19.65225,8.5305 C19.65225,8.35725 19.6485,8.18325 19.641,8.0115 C20.41125,7.446 21.081,6.7395 21.609,5.9355 L21.609,5.9355 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 0H2ZM18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z"
+            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>
   );
 }

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

@@ -3,14 +3,27 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function UmbrellaIcon({ 'aria-label': ariaLabel = 'Umbrella', copyrightYear = '2020', ...props }: IconProps) {
+export function UmbrellaIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Umbrella',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M9,22 C7.8954305,22 7,21.1045695 7,20 L5,20 C5,22.209139 6.790861,24 9,24 C11.209139,24 13,22.209139 13,20 L13,12 L23.9178524,12 C23.4380073,6.18357693 18.8100281,1.54335515 12.9990298,1.04444955 C13,0.44771525 12.5522847,0 12,0 C11.4477153,0 11,0.44771525 11,1 C5.15134535,1.49983643 0.482096586,6.15628579 0,12 L11,12 L11,20 C11,21.1045695 10.1045695,22 9,22 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          d="M9 22C7.89543 22 7 21.1046 7 20H5C5 22.2091 6.79086 24 9 24C11.2091 24 13 22.2091 13 20V12H23.9179C23.438 6.18358 18.81 1.54336 12.999 1.04445C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1C5.15135 1.49984 0.482097 6.15629 0 12H11V20C11 21.1046 10.1046 22 9 22Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13 1C13 1.01489 12.9997 1.02971 12.999 1.04445C18.1262 1.48463 22.3322 5.14887 23.5809 10C23.7475 10.6472 23.8615 11.3154 23.918 12H13V20C13 22.2091 11.2091 24 9 24C6.79086 24 5 22.2091 5 20H7C7 21.1046 7.89543 22 9 22C10.1046 22 11 21.1046 11 20V12H0C0.0564953 11.3154 0.170453 10.6472 0.33704 10C1.59242 5.1231 5.83656 1.44575 11.0007 1.03771C11.0002 1.0252 11 1.01262 11 1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM21.5015 10C20.2275 5.94362 16.4363 3 11.959 3C7.48169 3 3.69045 5.94362 2.41643 10H21.5015Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,34 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function UploadIcon({ 'aria-label': ariaLabel = 'Upload', copyrightYear = '2021', ...props }: IconProps) {
+export function UploadIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Upload',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12 2a7 7 0 016.919 8.071A6 6 0 0118 22H7A7 7 0 015.036 8.28 7.002 7.002 0 0112 2zm0 7l-5 5h3v4h4v-4h3l-5-5z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.9188 10.0699C18.9722 9.72108 19 9.36378 19 9C19 5.13401 15.866 2 12 2C8.37742 2 5.39755 4.75178 5.03667 8.27907C2.12636 9.12781 0 11.8156 0 15C0 18.866 3.13401 22 7 22H18C21.3137 22 24 19.3137 24 16C24 12.9987 21.7963 10.5121 18.9188 10.0699ZM14 18V14H17L12 9L7 14H10V18H14Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M14 18V14H17L12 9L7 14H10V18H14Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 15C0 11.8156 2.12636 9.12781 5.03667 8.27907C5.39755 4.75178 8.37742 2 12 2C15.866 2 19 5.13401 19 9C19 9.36378 18.9722 9.72108 18.9188 10.0699C21.7963 10.5121 24 12.9987 24 16C24 19.3137 21.3137 22 18 22H7C3.13401 22 0 18.866 0 15ZM16.9419 9.7667L16.6388 11.743L18.615 12.0467C20.5316 12.3412 22 14.001 22 16C22 18.2091 20.2091 20 18 20H7C4.23858 20 2 17.7614 2 15C2 12.7284 3.51654 10.8057 5.59661 10.1991L6.88924 9.82212L7.02629 8.48263C7.28384 5.96527 9.41368 4 12 4C14.7614 4 17 6.23858 17 9C17 9.26193 16.98 9.51787 16.9419 9.7667Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/verified-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 VerifiedIcon({ 'aria-label': ariaLabel = 'Verified', copyrightYear = '2020', ...props }: IconProps) {
+export function VerifiedIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Verified',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,8.8817842e-16 L22,4.5 L22,11 C22,17.0545455 17.7333333,22.6254545 12,24 C6.26666667,22.6254545 2,17.0545455 2,11 L2,4.5 L12,8.8817842e-16 Z M7.4,12.1426407 L6,13.5426407 L10.136039,17.6786797 L19.4147186,8.4 L18.0147186,7 L10.136039,14.8786797 L7.4,12.1426407 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 4.5L12 0L22 4.5V11C22 17.0545 17.7333 22.6255 12 24C6.26667 22.6255 2 17.0545 2 11V4.5ZM9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 4.5L12 0L22 4.5V11C22 17.0545 17.7333 22.6255 12 24C6.26667 22.6255 2 17.0545 2 11V4.5ZM4 11V5.79317L12 2.19317L20 5.79317V11C20 16.0039 16.5623 20.5963 12 21.9311C7.43769 20.5963 4 16.0039 4 11Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,14 +3,27 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function VideoIcon({ 'aria-label': ariaLabel = 'Video', copyrightYear = '2020', ...props }: IconProps) {
+export function VideoIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Video',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,10.375 L24,5.5 L24,18.5 L18,13.625 L18,18 C18,19.1045695 17.1045695,20 16,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,6 L0,6 C-1.3527075e-16,4.8954305 0.8954305,4 2,4 L2,4 L16,4 C17.1045695,4 18,4.8954305 18,6 L18,10.375 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          d="M16 4C17.1046 4 18 4.89543 18 6V9.5L24 5V19L18 14.5V18C18 19.1046 17.1046 20 16 20H2C0.89543 20 0 19.1046 0 18V6C0 4.89543 0.895431 4 2 4H16Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 6C0 4.89543 0.895431 4 2 4H16C17.1046 4 18 4.89543 18 6V9.5L24 5V19L18 14.5V18C18 19.1046 17.1046 20 16 20H2C0.89543 20 0 19.1046 0 18V6ZM2 6H16V18H2L2 6Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -1,20 +1,39 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function VisibilityIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Visibility',
-  copyrightYear = '2021',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12 4C6.545 4 1.887 7.317 0 12c1.887 4.683 6.545 8 12 8s10.113-3.317 12-8c-1.887-4.683-6.545-8-12-8zm0 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 4C6.545 4 1.887 7.317 0 12C1.887 16.683 6.545 20 12 20C17.455 20 22.113 16.683 24 12C22.113 7.317 17.455 4 12 4ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 20C17.455 20 22.113 16.683 24 12C22.113 7.317 17.455 4 12 4C6.545 4 1.887 7.317 0 12C1.887 16.683 6.545 20 12 20ZM12 18C7.66904 18 3.9508 15.5387 2.19096 12C3.9508 8.46132 7.66904 6 12 6C16.331 6 20.0492 8.46132 21.809 12C20.0492 15.5387 16.331 18 12 18Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/visibility-off-icon.tsx

@@ -1,20 +1,51 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function VisibilityOffIcon({
-  'aria-label': ariaLabel = 'Visibility off',
-  copyrightYear = '2021',
+  look = 'filled',
+  'aria-label': ariaLabel = 'Visibility Off',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2.21 1.936L18.534 18.26l3.475 3.475-1.414 1.414-3.982-3.982A13.097 13.097 0 0112 20c-5.455 0-10.113-3.317-12-8a12.708 12.708 0 014.097-5.35l-3.3-3.3L2.21 1.936zM12 4c5.455 0 10.113 3.317 12 8a12.693 12.693 0 01-3.79 5.108l-3.481-3.48a5.002 5.002 0 00-6.356-6.356L7.79 4.688A13.115 13.115 0 0112 4zM7.425 9.98a5.002 5.002 0 006.595 6.595l-1.604-1.603a2.996 2.996 0 01-3.387-3.388zm4.68-.978A2.996 2.996 0 0115 12l-.004-.106z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.41421 2.41406L1 3.82828L3.94205 6.77032C2.20226 8.1367 0.831869 9.93569 0 12.0002C1.887 16.6832 6.545 20.0002 12 20.0002C13.5504 20.0002 15.0365 19.7322 16.4128 19.2411L20.7266 23.5548L22.1408 22.1406L2.41421 2.41406ZM13.8274 16.6557L12.1673 14.9956C12.1119 14.9986 12.0561 15.0002 12 15.0002C10.3431 15.0002 9 13.657 9 12.0002C9 11.944 9.00154 11.8882 9.00459 11.8329L7.34447 10.1727C7.12211 10.7388 7 11.3552 7 12.0002C7 14.7616 9.23858 17.0002 12 17.0002C12.6449 17.0002 13.2614 16.878 13.8274 16.6557Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11.8332 9.00471L14.9954 12.1669C14.9985 12.1117 15 12.0561 15 12.0002C15 10.3433 13.6569 9.00015 12 9.00015C11.944 9.00015 11.8884 9.00168 11.8332 9.00471Z"
+            fill="currentColor"
+          />
+          <path
+            d="M17 12.0002C17 12.6449 16.8779 13.2612 16.6557 13.8272L20.0583 17.2297C21.7979 15.8634 23.1682 14.0645 24 12.0002C22.113 7.31715 17.455 4.00015 12 4.00015C10.4497 4.00015 8.96382 4.26805 7.58759 4.75907L10.173 7.34447C10.7389 7.1222 11.3552 7.00015 12 7.00015C14.7614 7.00015 17 9.23873 17 12.0002Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.41421 2.41406L1 3.82828L3.94205 6.77032C2.20226 8.1367 0.831869 9.93569 0 12.0002C1.887 16.6832 6.545 20.0002 12 20.0002C13.5504 20.0002 15.0365 19.7322 16.4128 19.2411L20.7266 23.5548L22.1408 22.1406L2.41421 2.41406ZM14.8141 17.6423L13.8274 16.6557C13.2614 16.878 12.6449 17.0002 12 17.0002C9.23858 17.0002 7 14.7616 7 12.0002C7 11.3552 7.12211 10.7388 7.34447 10.1727L5.36831 8.19659C4.02733 9.20262 2.93439 10.5053 2.19096 12.0002C3.9508 15.5388 7.66904 18.0002 12 18.0002C12.9741 18.0002 13.9173 17.8756 14.8141 17.6423ZM9.00459 11.8329C9.00154 11.8882 9 11.944 9 12.0002C9 13.657 10.3431 15.0002 12 15.0002C12.0561 15.0002 12.1119 14.9986 12.1673 14.9956L9.00459 11.8329Z"
+            fill="currentColor"
+          />
+          <path
+            d="M21.809 12.0002C21.0657 13.4949 19.9728 14.7975 18.632 15.8035L20.0583 17.2297C21.7979 15.8634 23.1682 14.0645 24 12.0002C22.113 7.31715 17.455 4.00015 12 4.00015C10.4497 4.00015 8.96382 4.26805 7.58759 4.75907L9.18636 6.35784C10.0831 6.12463 11.026 6.00015 12 6.00015C16.331 6.00015 20.0492 8.46148 21.809 12.0002Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11.8332 9.00471L10.173 7.34447C10.7389 7.1222 11.3552 7.00015 12 7.00015C14.7614 7.00015 17 9.23873 17 12.0002C17 12.6449 16.8779 13.2612 16.6557 13.8272L14.9954 12.1669C14.9985 12.1117 15 12.0561 15 12.0002C15 10.3433 13.6569 9.00015 12 9.00015C11.944 9.00015 11.8884 9.00168 11.8332 9.00471Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/voice-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 VoiceIcon({ 'aria-label': ariaLabel = 'Voice', copyrightYear = '2020', ...props }: IconProps) {
+export function VoiceIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Voice',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M10,19.7769836 C6.30831435,18.9392957 3.47856125,15.8322384 3.05492878,12 L5.07088886,12 C5.55611852,15.3922941 8.47352809,18 12,18 C15.5264719,18 18.4438815,15.3922941 18.9291111,12 L20.9450712,12 C20.5214388,15.8322384 17.6916857,18.9392957 14,19.7769836 L14,24 L10,24 L10,19.7769836 Z M16,4 L16,11 C16,13.209139 14.209139,15 12,15 C9.790861,15 8,13.209139 8,11 L8,4 C8,1.790861 9.790861,0 12,0 C14.209139,0 16,1.790861 16,4 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M16 11V4C16 1.79086 14.2091 0 12 0C9.79086 0 8 1.79086 8 4V11C8 13.2091 9.79086 15 12 15C14.2091 15 16 13.2091 16 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M3.05493 12C3.47856 15.8322 6.30832 18.9393 10 19.777V24H14V19.777C17.6917 18.9393 20.5214 15.8322 20.9451 12H18.9291C18.4439 15.3923 15.5265 18 12 18C8.47353 18 5.55612 15.3923 5.07089 12H3.05493Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16 4V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V4C8 1.79086 9.79086 0 12 0C14.2091 0 16 1.79086 16 4ZM14 4V11C14 12.1046 13.1046 13 12 13C10.8954 13 10 12.1046 10 11V4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z"
+            fill="currentColor"
+          />
+          <path
+            d="M3.05493 12C3.47856 15.8322 6.30832 18.9393 10 19.777V24H14V19.777C17.6917 18.9393 20.5214 15.8322 20.9451 12H18.9291C18.4439 15.3923 15.5265 18 12 18C8.47353 18 5.55612 15.3923 5.07089 12H3.05493Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,16 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function WalkIcon({ 'aria-label': ariaLabel = 'Walk', copyrightYear = '2020', ...props }: IconProps) {
+export function WalkIcon({ 'aria-label': ariaLabel = 'Walk', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M15.5 2.25C15.5 3.4875 14.4875 4.5 13.25 4.5C12.0125 4.5 11 3.4875 11 2.25C11 1.0125 12.0125 0 13.25 0C14.4875 0 15.5 1.0125 15.5 2.25Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.5 24H5.5L8.5 8L6 9V13H4V7.5C4 7.5 9.1383 5.43006 9.46977 5.31078C9.80123 5.19151 10.3628 5.02326 10.6977 5.02326C11.4791 5.02326 12.1488 5.46977 12.5953 6.13953L13.7116 7.92558C14.6047 9.48837 16.3907 11 18.5116 11V13C16.0558 13 13.9512 11.6744 12.5 10L12 13.5L14 16L14.0465 24H12V17L9.5 15L7.5 24Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M5.5,24 L8.5,8 L6,9 L6,13 L4,13 L4,7.5 C7.42553417,6.12003774 9.24878998,5.39029878 9.46976744,5.31078313 C9.80123363,5.19150966 10.3627907,5.02325581 10.6976744,5.02325581 C11.4790698,5.02325581 12.1488372,5.46976744 12.5953488,6.13953488 L13.7116279,7.9255814 C14.6046512,9.48837209 16.3906977,11 18.5116279,11 L18.5116279,13 C16.055814,13 13.9511628,11.6744186 12.5,10 L12,13.5 L14,16 L14.0465116,24 L12,24 L12,17 L9.5,15 L7.5,24 L5.5,24 Z M13.25,4.5 C12.0125,4.5 11,3.4875 11,2.25 C11,1.0125 12.0125,0 13.25,0 C14.4875,0 15.5,1.0125 15.5,2.25 C15.5,3.4875 14.4875,4.5 13.25,4.5 Z"
       />
     </Icon>
   );

package/src/components/icon/components/wallet-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 WalletIcon({ 'aria-label': ariaLabel = 'Wallet', copyrightYear = '2020', ...props }: IconProps) {
+export function WalletIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Wallet',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M21.4142136,2.58578644 C21.7761424,2.94771525 22,3.44771525 22,4 L22,6 L14,6 C12.8954305,6 12,6.8954305 12,8 L12,16 C12,17.1045695 12.8954305,18 14,18 L22,18 L22,20 C22,21.1045695 21.1045695,22 20,22 L2,22 C0.8954305,22 1.52655666e-16,21.1045695 0,20 L0,4 C-3.05311332e-16,2.8954305 0.8954305,2 2,2 L20,2 C20.5522847,2 21.0522847,2.22385763 21.4142136,2.58578644 Z M14,8 L23,8 C23.5522847,8 24,8.44771525 24,9 L24,15 C24,15.5522847 23.5522847,16 23,16 L14,16 L14,8 Z M18.5,13.5 C19.3284271,13.5 20,12.8284271 20,12 C20,11.1715729 19.3284271,10.5 18.5,10.5 C17.6715729,10.5 17,11.1715729 17,12 C17,12.8284271 17.6715729,13.5 18.5,13.5 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M22 4C22 3.44772 21.7761 2.94772 21.4142 2.58579C21.0523 2.22386 20.5523 2 20 2H2C0.89543 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H20C21.1046 22 22 21.1046 22 20V18H14C12.8954 18 12 17.1046 12 16V8C12 6.89543 12.8954 6 14 6H22V4Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 9C14 8.44772 14.4477 8 15 8H23C23.5523 8 24 8.44772 24 9V15C24 15.5523 23.5523 16 23 16H15C14.4477 16 14 15.5523 14 15V9ZM20 12C20 12.8284 19.3284 13.5 18.5 13.5C17.6716 13.5 17 12.8284 17 12C17 11.1716 17.6716 10.5 18.5 10.5C19.3284 10.5 20 11.1716 20 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22 16V20C22 21.1046 21.1046 22 20 22H2C0.89543 22 0 21.1046 0 20V4C0 2.89543 0.895431 2 2 2H20C21.1046 2 22 2.89543 22 4V8H23C23.5523 8 24 8.44772 24 9V15C24 15.5523 23.5523 16 23 16H22ZM2 4H20V8H15C14.4477 8 14 8.44772 14 9V15C14 15.5523 14.4477 16 15 16H20V20H2L2 4ZM20 12C20 11.1716 19.3284 10.5 18.5 10.5C17.6716 10.5 17 11.1716 17 12C17 12.8284 17.6716 13.5 18.5 13.5C19.3284 13.5 20 12.8284 20 12Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/warning-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 WarningIcon({ 'aria-label': ariaLabel = 'Warning', copyrightYear = '2020', ...props }: IconProps) {
+export function WarningIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Warning',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <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"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.7078 0.293176C12.3169 -0.0977248 11.6831 -0.0977256 11.2922 0.293175L0.293176 11.2922C-0.0977252 11.6831 -0.0977252 12.3169 0.293176 12.7078L11.2922 23.7068C11.6831 24.0977 12.3169 24.0977 12.7078 23.7068L23.7068 12.7078C24.0977 12.3169 24.0977 11.6831 23.7068 11.2922L12.7078 0.293176ZM10.9999 14H12.9999V6H10.9999V14ZM10.9999 18H12.9999V16H10.9999V18Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M11 14H13V6H11V14Z" fill="currentColor" />
+          <path d="M11 18H13V16H11V18Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.2922 0.293175C11.6831 -0.0977256 12.3169 -0.0977248 12.7078 0.293176L23.7068 11.2922C24.0977 11.6831 24.0977 12.3169 23.7068 12.7078L12.7078 23.7068C12.3169 24.0977 11.6831 24.0977 11.2922 23.7068L0.293176 12.7078C-0.0977252 12.3169 -0.0977252 11.6831 0.293176 11.2922L11.2922 0.293175ZM11.9995 2.41654L2.41602 12L11.9995 21.5835L21.5829 12L11.9995 2.41654Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }