@westpac/ui 0.1.0 → 0.2.0

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

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ListIcon({ 'aria-label': ariaLabel = 'List', copyrightYear = '2020', ...props }: IconProps) {
+export function ListIcon({ 'aria-label': ariaLabel = 'List', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M2,13 L4,13 L4,11 L2,11 L2,13 Z M2,17 L4,17 L4,15 L2,15 L2,17 Z M2,9 L4,9 L4,7 L2,7 L2,9 Z M6,13 L22,13 L22,11 L6,11 L6,13 Z M6,17 L22,17 L22,15 L6,15 L6,17 Z M6,7 L6,9 L22,9 L22,7 L6,7 Z"
+        clipRule="evenodd"
+        d="M2 9H4V7H2V9ZM4 13H2V11H4V13ZM4 17H2V15H4V17ZM22 13H6V11H22V13ZM6 17H22V15H6V17ZM6 9V7H22V9H6Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/live-chat-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 LiveChatIcon({ 'aria-label': ariaLabel = 'Live Chat', copyrightYear = '2020', ...props }: IconProps) {
+export function LiveChatIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Live Chat',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M20,6 L23,6 C23.5522847,6 24,6.44771525 24,7 L24,24 L20,20 L7,20 C6.44771525,20 6,19.5522847 6,19 L6,16 L20,16 L20,6 Z M5,14 L0,20 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L17,0 C17.5522847,-1.01453063e-16 18,0.44771525 18,1 L18,13 C18,13.5522847 17.5522847,14 17,14 L5,14 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M17 14H5L0 20V1C0 0.447715 0.447715 0 1 0H17C17.5523 0 18 0.447715 18 1V13C18 13.5523 17.5523 14 17 14Z"
+            fill="currentColor"
+          />
+          <path
+            d="M23 6H20V16H6V19C6 19.5523 6.44772 20 7 20H20L24 24V7C24 6.44772 23.5523 6 23 6Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 1V20L5 14H17C17.5523 14 18 13.5523 18 13V1C18 0.447715 17.5523 0 17 0H1C0.447715 0 0 0.447715 0 1ZM16 12H4.06325L2 14.4759V2H16V12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M6 19V16H8V18H19.7016L22 19.8387V8H20V6H23C23.5523 6 24 6.44772 24 7V24L19 20H7C6.44772 20 6 19.5523 6 19Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function LuggageIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Luggage',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 4V2C8 0.895431 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V4H20C21.1046 4 22 4.89543 22 6V20C22 21.1046 21.1046 22 20 22C20 23.1046 19.1046 24 18 24C16.8954 24 16 23.1046 16 22H8C8 23.1046 7.10457 24 6 24C4.89543 24 4 23.1046 4 22C2.89543 22 2 21.1046 2 20V6C2 4.89543 2.89543 4 4 4H8ZM10 2H14V4H10V2ZM7 18V8H9V18H7ZM11 8H13V18H11V8ZM17 18V8H15V18H17Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M7 18V8H9V18H7Z" fill="currentColor" />
+          <path d="M13 8H11V18H13V8Z" fill="currentColor" />
+          <path d="M15 18V8H17V18H15Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 4V2C8 0.895431 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V4H20C21.1046 4 22 4.89543 22 6V20C22 21.1046 21.1046 22 20 22C20 23.1046 19.1046 24 18 24C16.8954 24 16 23.1046 16 22H8C8 23.1046 7.10457 24 6 24C4.89543 24 4 23.1046 4 22C2.89543 22 2 21.1046 2 20V6C2 4.89543 2.89543 4 4 4H8ZM10 2H14V4H10V2ZM4 6V20H20V6H4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/map-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 MapIcon({ 'aria-label': ariaLabel = 'Map', copyrightYear = '2020', ...props }: IconProps) {
+export function MapIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Map',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M21.4444444,2 C21.7555556,2 22,2.24444444 22,2.55555556 L22,19.3555556 C22,19.6111111 21.8333333,19.8111111 21.6,19.8888889 L15,22 L9,19 L2.73333333,21.9666667 L2.55555556,22 C2.24444444,22 2,21.7555556 2,21.4444444 L2,4.64444444 C2,4.38888889 2.16666667,4.18888889 2.4,4.11111111 L9,2 L15,4 L21.2666667,2.03333333 L21.4444444,2 Z M15,20 L15,6 L9,4 L9,17 L15,20 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.52 19.4667C23.8 19.3733 24 19.1333 24 18.8267V2.66667C24 2.29333 23.7067 2 23.3333 2L23.12 2.04L16 5L8 2L0.48 4.53333C0.2 4.62667 0 4.86667 0 5.17333V21.3333C0 21.7067 0.293333 22 0.666667 22L0.88 21.96L8 19L16 22L23.52 19.4667ZM16 19.864L8 16.864V4.136L16 7.136V19.864Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.52 19.4667C23.8 19.3733 24 19.1333 24 18.8267V2.66667C24 2.29333 23.7067 2 23.3333 2L23.12 2.04L16 5L8 2L0.48 4.53333C0.2 4.62667 0 4.86667 0 5.17333V21.3333C0 21.7067 0.293333 22 0.666667 22L0.88 21.96L8 19L16 22L23.52 19.4667ZM18 19.2158L22 17.8683V4.67157L18 6.33449V19.2158ZM16 7.136V19.864L8 16.864V4.136L16 7.136ZM2 6.13172L6 4.7842V17.6655L2 19.3284V6.13172Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/map-pin-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 MapPinIcon({ 'aria-label': ariaLabel = 'Map Pin', copyrightYear = '2020', ...props }: IconProps) {
+export function MapPinIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Map Pin',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,24 C6.66666667,16.278852 4,10.9455187 4,8 C4,3.581722 7.581722,0 12,0 C16.418278,0 20,3.581722 20,8 C20,10.9455187 17.3333333,16.278852 12,24 Z M12,14 C15.3137085,14 18,11.3137085 18,8 C18,4.6862915 15.3137085,2 12,2 C8.6862915,2 6,4.6862915 6,8 C6,11.3137085 8.6862915,14 12,14 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 8C4 12.4183 12 24 12 24C12 24 20 12.4183 20 8C20 3.58172 16.4183 0 12 0C7.58172 0 4 3.58172 4 8ZM12 11C13.6569 11 15 9.65685 15 8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8C9 9.65685 10.3431 11 12 11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5C13.6569 5 15 6.34315 15 8Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.8022 22.2016C11.5231 23.3096 12 24 12 24C12 24 12.4769 23.3096 13.1978 22.2016C15.4296 18.7715 20 11.3395 20 8C20 3.58172 16.4183 0 12 0C7.58172 0 4 3.58172 4 8C4 11.3395 8.5704 18.7715 10.8022 22.2016ZM14.27 16.6533C13.4705 18.0315 12.6691 19.3227 12 20.3689C11.3309 19.3227 10.5295 18.0315 9.72999 16.6533C8.748 14.9605 7.78881 13.1704 7.08108 11.5595C6.33726 9.86647 6 8.65032 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 8.65032 17.6627 9.86647 16.9189 11.5595C16.2112 13.1704 15.252 14.9605 14.27 16.6533Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function MedicalIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Medical',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {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 0H2ZM10.5 5.5H13.5V10.5H18.5V13.5H13.5V18.5H10.5V13.5H5.5V10.5H10.5V5.5Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M10.5 5.5H13.5V10.5H18.5V13.5H13.5V18.5H10.5V13.5H5.5V10.5H10.5V5.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 2H22V22H2L2 2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/megaphone-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 MegaphoneIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Megaphone',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M6 7.52395L19.6286 2.07251C20.2855 1.80976 21 2.29352 21 3.00099V20.0469C21 20.7544 20.2855 21.2381 19.6286 20.9754L8 16.324V21.524C8 22.0762 7.55228 22.524 7 22.524C6.44772 22.524 6 22.0762 6 21.524V7.52395Z"
+            fill="currentColor"
+          />
+          <path
+            d="M2 7.52395C0.895431 7.52395 0 8.41938 0 9.52395V13.524C0 14.6285 0.895431 15.524 2 15.524H4V7.52395H2Z"
+            fill="currentColor"
+          />
+          <path
+            d="M23 9.52395H22V13.524H23C23.5523 13.524 24 13.0762 24 12.524V10.524C24 9.97167 23.5523 9.52395 23 9.52395Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 14.1699L19 18.5699V4.47802L8 8.87802V14.1699ZM8 21.524C8 22.0762 7.55228 22.524 7 22.524C6.44772 22.524 6 22.0762 6 21.524V7.52395L19.6286 2.07251C20.2855 1.80976 21 2.29352 21 3.00099V20.0469C21 20.7544 20.2855 21.2381 19.6286 20.9754L8 16.324V21.524ZM2 7.52393C0.895431 7.52393 0 8.41936 0 9.52393V13.5239C0 14.6285 0.895431 15.5239 2 15.5239H4V7.52393H2ZM22 9.52393H23C23.5523 9.52393 24 9.97164 24 10.5239V12.5239C24 13.0762 23.5523 13.5239 23 13.5239H22V9.52393Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/message-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 MessageIcon({ 'aria-label': ariaLabel = 'Message', copyrightYear = '2020', ...props }: IconProps) {
+export function MessageIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Message',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M10.5,15.633 L19.725,18.97725 L24,0 L10.5,15.633 Z M0,11.99925 L7.49925,14.5845 L24,0 L0,11.99925 Z M10.5,23.25 L14.853,18.82875 L10.5,17.24925 L10.5,23.25 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          d="M3.63636 13L0 23L24 12L0 1L3.63636 11H12C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13H3.63636Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 23L4 12L0 1L24 12L0 23ZM5.76449 11L3.51378 4.81055L19.1999 12L3.51378 19.1895L5.76449 13H12C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11H5.76449Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/mobile-pay-icon.tsx

@@ -1,16 +1,43 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function MobilePayIcon({ 'aria-label': ariaLabel = 'Mobile Pay', copyrightYear = '2020', ...props }: IconProps) {
+export function MobilePayIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Mobile Pay',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6,0 C4.8954305,2.02906125e-16 4,0.8954305 4,2 L4,22 C4,23.1045695 4.8954305,24 6,24 L16,24 C17.1045695,24 18,23.1045695 18,22 L18,14 L16,14 L16,20 L6,20 L6,4 L10,4 L10,0 L6,0 Z M12,9 C13.66,9 15,10.34 15,12 L12,12 L12,9 Z M12,5 C15.87,5 19,8.13 19,12 L17,12 C17,9.24 14.76,7 12,7 L12,5 Z M12,1 C18.08,1 23,5.92 23,12 L21,12 C21,7.03 16.97,3 12,3 L12,1 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M6 0C4.89543 0 4 0.89543 4 2V22C4 23.1046 4.89543 24 6 24H16C17.1046 24 18 23.1046 18 22V13H15.584C14.8124 14.7659 13.0503 16 11 16C8.23858 16 6 13.7614 6 11C6 8.94968 7.2341 7.1876 9 6.41604V0H6Z"
+            fill="currentColor"
+          />
+          <path d="M11 2V0C17.08 0 22 4.92 22 11H20C20 6.03 15.97 2 11 2Z" fill="currentColor" />
+          <path d="M11 6V4C14.87 4 18 7.13 18 11H16C16 8.24 13.76 6 11 6Z" fill="currentColor" />
+          <path
+            d="M14 11C14 12.6569 12.6569 14 11 14C9.34315 14 8 12.6569 8 11C8 9.34315 9.34315 8 11 8C12.6569 8 14 9.34315 14 11Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M4 2C4 0.89543 4.89543 0 6 0H9V2H6V22H16V13H18V22C18 23.1046 17.1046 24 16 24H6C4.89543 24 4 23.1046 4 22V2Z"
+            fill="currentColor"
+          />
+          <path d="M11 2V0C17.08 0 22 4.92 22 11H20C20 6.03 15.97 2 11 2Z" fill="currentColor" />
+          <path d="M11 4V6C13.76 6 16 8.24 16 11H18C18 7.13 14.87 4 11 4Z" fill="currentColor" />
+          <path
+            d="M14 11C14 9.34 12.66 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14C12.6569 14 14 12.6569 14 11Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/money-bag-icon.tsx

@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function MoneyBagIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Money Bag',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M7.7217 4.66577C9.07026 4.23343 10.5079 4 12 4C13.4921 4 14.9297 4.23343 16.2783 4.66577L19 0H5L7.7217 4.66577Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M21.241 24C21.955 24 22.627 23.6247 22.9233 22.9752C23.6147 21.4595 24 19.7747 24 18C24 11.3726 18.6274 6 12 6C5.37258 6 0 11.3726 0 18C0 19.7747 0.385266 21.4595 1.07673 22.9752C1.37304 23.6247 2.04504 24 2.75897 24H21.241ZM10.2842 17.3587H8.5625C8.60976 18.7985 9.64499 19.7385 11.3125 19.9318V21H12.6875V19.9259C14.3905 19.7122 15.4375 18.7129 15.4375 17.233C15.4375 15.916 14.692 15.1737 12.9821 14.8026L11.9468 14.5811C10.9646 14.3536 10.5505 14.0543 10.5505 13.5215C10.5505 12.881 11.1421 12.456 12.0237 12.456C12.9171 12.456 13.5501 12.899 13.6093 13.6293H15.2837C15.2576 12.2506 14.2824 11.2821 12.6875 11.0734V10H11.3125V11.0823C9.78559 11.3107 8.75183 12.2893 8.75183 13.6772C8.75183 14.9403 9.52689 15.7484 11.1007 16.0896L12.213 16.3351C13.2425 16.5685 13.6507 16.8798 13.6507 17.4425C13.6507 18.0771 12.9999 18.538 12.0473 18.538C11.1007 18.538 10.367 18.0711 10.2842 17.3587Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M14.2467 4.17931L15.5179 2H8.48207L9.75334 4.17931C9.05763 4.29153 8.37909 4.45502 7.7217 4.66577L5 0H19L16.2783 4.66577C15.6209 4.45502 14.9424 4.29153 14.2467 4.17931Z"
+            fill="currentColor"
+          />
+          <path
+            d="M10.2842 17.3587H8.5625C8.60976 18.7985 9.64499 19.7385 11.3125 19.9318V21H12.6875V19.9259C14.3905 19.7122 15.4375 18.7129 15.4375 17.233C15.4375 15.916 14.692 15.1737 12.9821 14.8026L11.9468 14.5811C10.9646 14.3536 10.5505 14.0543 10.5505 13.5215C10.5505 12.881 11.1421 12.456 12.0237 12.456C12.9171 12.456 13.5501 12.899 13.6093 13.6293H15.2837C15.2576 12.2506 14.2824 11.2821 12.6875 11.0734V10H11.3125V11.0823C9.78559 11.3107 8.75183 12.2893 8.75183 13.6772C8.75183 14.9403 9.52689 15.7484 11.1007 16.0896L12.213 16.3351C13.2425 16.5685 13.6507 16.8798 13.6507 17.4425C13.6507 18.0771 12.9999 18.538 12.0473 18.538C11.1007 18.538 10.367 18.0711 10.2842 17.3587Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22.9233 22.9752C22.627 23.6247 21.955 24 21.241 24H2.75897C2.04504 24 1.37304 23.6247 1.07673 22.9752C0.385266 21.4595 0 19.7747 0 18C0 11.3726 5.37258 6 12 6C18.6274 6 24 11.3726 24 18C24 19.7747 23.6147 21.4595 22.9233 22.9752ZM21.1685 22C21.7027 20.7775 22 19.426 22 18C22 12.4772 17.5228 8 12 8C6.47715 8 2 12.4772 2 18C2 19.426 2.29727 20.7775 2.83153 22H21.1685Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/money-in-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 MoneyInIcon({ 'aria-label': ariaLabel = 'Money In', copyrightYear = '2020', ...props }: IconProps) {
+export function MoneyInIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Money In',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2.14761501,18.852385 L2.14761501,18.852385 L3.58898664,17.4110134 C5.36880523,20.1718994 8.47091473,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C8.47091473,2 5.36880523,3.82810059 3.58898664,6.58898664 L2.14761501,5.14761501 C4.31568302,2.03618125 7.91994596,0 12,0 C18.62775,0 24,5.373 24,12 C24,18.627 18.62775,24 12,24 C7.91994596,24 4.31568302,21.9638188 2.14761501,18.852385 Z M0,18 L0,6 L6,12 L0,18 Z M11,18.4461876 C8.57453187,18.1650794 7.06873973,16.7978464 7,14.7036169 L9.50430293,14.7036169 C9.62478485,15.7397857 10.6919105,16.4189551 12.0688468,16.4189551 C13.454389,16.4189551 14.4010327,15.748493 14.4010327,14.8255191 C14.4010327,14.0070328 13.8072289,13.5542532 12.3098107,13.2146685 L10.6919105,12.8576691 C8.40275387,12.361353 7.27538726,11.1858674 7.27538726,9.34862693 C7.27538726,7.32989847 8.77903863,5.90649143 11,5.57422136 L11,4 L13,4 L13,5.56126841 C15.3198703,5.86481374 16.7382778,7.27356464 16.7762478,9.27896852 L14.3407917,9.27896852 C14.2547332,8.21667783 13.3339071,7.57233758 12.0344234,7.57233758 C10.7521515,7.57233758 9.89156627,8.19055593 9.89156627,9.12223711 C9.89156627,9.89718687 10.4939759,10.3325519 11.9225473,10.6634293 L13.4285714,10.9855995 C15.9156627,11.5254521 17,12.6051574 17,14.5207636 C17,16.6733683 15.4771218,18.1268298 13,18.4376583 L13,20 L11,20 L11,18.4461876 L11,18.4461876 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M2.14761 18.8524C4.31568 21.9638 7.91995 24 12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C7.91995 0 4.31568 2.03618 2.14761 5.14761L3.58899 6.58899C5.3688 3.8281 8.47091 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.47091 22 5.3688 20.1719 3.58899 17.411L2.14761 18.8524Z"
+            fill="currentColor"
+          />
+          <path d="M0 6L6 12L0 18V6Z" fill="currentColor" />
+          <path
+            d="M7 14.7036C7.06874 16.7978 8.57453 18.1651 11 18.4462V20H13V18.4377C15.4771 18.1268 17 16.6734 17 14.5208C17 12.6052 15.9157 11.5255 13.4286 10.9856L11.9225 10.6634C10.494 10.3326 9.89157 9.89719 9.89157 9.12224C9.89157 8.19056 10.7522 7.57234 12.0344 7.57234C13.3339 7.57234 14.2547 8.21668 14.3408 9.27897H16.7762C16.7383 7.27356 15.3199 5.86481 13 5.56127V4H11V5.57422C8.77904 5.90649 7.27539 7.3299 7.27539 9.34863C7.27539 11.1859 8.40275 12.3614 10.6919 12.8577L12.3098 13.2147C13.8072 13.5543 14.401 14.007 14.401 14.8255C14.401 15.7485 13.4544 16.419 12.0688 16.419C10.6919 16.419 9.62478 15.7398 9.5043 14.7036H7Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M24 12C24 18.6274 18.6274 24 12 24C8.16386 24 4.74813 22.1999 2.5514 19.3984L3.9781 17.9717C5.80116 20.4167 8.71569 22 12 22C17.5229 22 22 17.5228 22 12C22 6.47715 17.5229 2 12 2C8.71569 2 5.80116 3.58333 3.97809 6.02833L2.55139 4.60163C4.74812 1.80007 8.16386 0 12 0C18.6274 0 24 5.37258 24 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11.0001 18.4462C8.57459 18.1651 7.0688 16.7978 7.00006 14.7036H9.50436C9.62485 15.7398 10.692 16.419 12.0689 16.419C13.4544 16.419 14.4011 15.7485 14.4011 14.8255C14.4011 14.007 13.8073 13.5543 12.3099 13.2147L10.692 12.8577C8.40281 12.3614 7.27545 11.1859 7.27545 9.34863C7.27545 7.3299 8.7791 5.90649 11.0001 5.57422V4H13.0001V5.56127C15.3199 5.86481 16.7383 7.27356 16.7763 9.27897H14.3409C14.2548 8.21668 13.334 7.57234 12.0345 7.57234C10.7522 7.57234 9.89163 8.19056 9.89163 9.12224C9.89163 9.89719 10.494 10.3326 11.9226 10.6634L13.4286 10.9856C15.9157 11.5255 17.0001 12.6052 17.0001 14.5208C17.0001 16.6734 15.4772 18.1268 13.0001 18.4377V20H11.0001V18.4462Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0 7.70712L4.29289 12L0 16.2929L1.41421 17.7071L7.12132 12L1.41421 6.29291L0 7.70712Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/money-notes-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 MoneyNotesIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Money Notes',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 6C0 4.89543 0.895431 4 2 4H18C19.1046 4 20 4.89543 20 6V15C20 16.1046 19.1046 17 18 17H2C0.895431 17 0 16.1046 0 15V6ZM13.5 10.5C13.5 12.433 11.933 14 10 14C8.067 14 6.5 12.433 6.5 10.5C6.5 8.567 8.067 7 10 7C11.933 7 13.5 8.567 13.5 10.5Z"
+            fill="currentColor"
+          />
+          <path d="M2 19V21H22C23.1046 21 24 20.1046 24 19V6H22V19H2Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M10 14C11.933 14 13.5 12.433 13.5 10.5C13.5 8.567 11.933 7 10 7C8.067 7 6.5 8.567 6.5 10.5C6.5 12.433 8.067 14 10 14Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 4C0.895431 4 0 4.89543 0 6V15C0 16.1046 0.895431 17 2 17H18C19.1046 17 20 16.1046 20 15V6C20 4.89543 19.1046 4 18 4H2ZM18 6H2V15H18V6Z"
+            fill="currentColor"
+          />
+          <path d="M2 21V19H22V6H24V19C24 20.1046 23.1046 21 22 21H2Z" fill="currentColor" />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/money-out-icon.tsx

@@ -1,16 +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 MoneyOutIcon({ 'aria-label': ariaLabel = 'Money Out', copyrightYear = '2020', ...props }: IconProps) {
+export function MoneyOutIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Money Out',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M21.852385,18.852385 C19.684317,21.9638188 16.080054,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 C16.080054,0 19.684317,2.03618125 21.852385,5.14761501 L20.4110134,6.58898664 C18.6311948,3.82810059 15.5290853,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C15.5290853,22 18.6311948,20.1718994 20.4110134,17.4110134 L21.852385,18.852385 L21.852385,18.852385 Z M18,18 L18,6 L24,12 L18,18 Z M10,18.4461876 C7.57453187,18.1650794 6.06873973,16.7978464 6,14.7036169 L8.50430293,14.7036169 C8.62478485,15.7397857 9.6919105,16.4189551 11.0688468,16.4189551 C12.454389,16.4189551 13.4010327,15.748493 13.4010327,14.8255191 C13.4010327,14.0070328 12.8072289,13.5542532 11.3098107,13.2146685 L9.6919105,12.8576691 C7.40275387,12.361353 6.27538726,11.1858674 6.27538726,9.34862693 C6.27538726,7.32989847 7.77903863,5.90649143 10,5.57422136 L10,4 L12,4 L12,5.56126841 C14.3198703,5.86481374 15.7382778,7.27356464 15.7762478,9.27896852 L13.3407917,9.27896852 C13.2547332,8.21667783 12.3339071,7.57233758 11.0344234,7.57233758 C9.75215146,7.57233758 8.89156627,8.19055593 8.89156627,9.12223711 C8.89156627,9.89718687 9.4939759,10.3325519 10.9225473,10.6634293 L12.4285714,10.9855995 C14.9156627,11.5254521 16,12.6051574 16,14.5207636 C16,16.6733683 14.4771218,18.1268298 12,18.4376583 L12,20 L10,20 L10,18.4461876 L10,18.4461876 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.8524 18.8524C19.6843 21.9638 16.0801 24 12 24C5.37225 24 0 18.627 0 12C0 5.373 5.37225 0 12 0C16.0801 0 19.6843 2.03618 21.8524 5.14761L20.411 6.58899C18.6312 3.8281 15.5291 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C15.5291 22 18.6312 20.1719 20.411 17.411L21.8524 18.8524ZM18 6L24 12L18 18V6ZM6 14.7036C6.06874 16.7978 7.57453 18.1651 10 18.4462V20H12V18.4377C14.4771 18.1268 16 16.6734 16 14.5208C16 12.6052 14.9157 11.5255 12.4286 10.9856L10.9225 10.6634C9.49398 10.3326 8.89157 9.89719 8.89157 9.12224C8.89157 8.19056 9.75215 7.57234 11.0344 7.57234C12.3339 7.57234 13.2547 8.21668 13.3408 9.27897H15.7762C15.7383 7.27356 14.3199 5.86481 12 5.56127V4H10V5.57422C7.77904 5.90649 6.27539 7.3299 6.27539 9.34863C6.27539 11.1859 7.40275 12.3614 9.69191 12.8577L11.3098 13.2147C12.8072 13.5543 13.401 14.007 13.401 14.8255C13.401 15.7485 12.4544 16.419 11.0688 16.419C9.69191 16.419 8.62478 15.7398 8.5043 14.7036H6Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M21.6432 19.1432C19.4567 22.0902 15.9514 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C15.9514 0 19.4567 1.90982 21.6432 4.85675L20.2103 6.28966C18.4036 3.69674 15.3999 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C15.3999 22 18.4036 20.3033 20.2103 17.7103L21.6432 19.1432Z"
+            fill="currentColor"
+          />
+          <path
+            d="M10 18.4462C7.57453 18.1651 6.06874 16.7978 6 14.7036H8.5043C8.62478 15.7398 9.69191 16.419 11.0688 16.419C12.4544 16.419 13.401 15.7485 13.401 14.8255C13.401 14.007 12.8072 13.5543 11.3098 13.2147L9.69191 12.8577C7.40275 12.3614 6.27539 11.1859 6.27539 9.34863C6.27539 7.3299 7.77904 5.90649 10 5.57422V4H12V5.56127C14.3199 5.86481 15.7383 7.27356 15.7762 9.27897H13.3408C13.2547 8.21668 12.3339 7.57234 11.0344 7.57234C9.75215 7.57234 8.89157 8.19056 8.89157 9.12224C8.89157 9.89719 9.49398 10.3326 10.9225 10.6634L12.4286 10.9856C14.9157 11.5255 16 12.6052 16 14.5208C16 16.6734 14.4771 18.1268 12 18.4377V20H10V18.4462Z"
+            fill="currentColor"
+          />
+          <path
+            d="M16.8787 7.70712L21.1716 12L16.8787 16.2929L18.2929 17.7071L24 12L18.2929 6.29291L16.8787 7.70712Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/more-horiz-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function MoreHorizIcon({ 'aria-label': ariaLabel = 'More Horiz', copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 9.5C3.125 9.5 2 10.625 2 12C2 13.375 3.125 14.5 4.5 14.5C5.875 14.5 7 13.375 7 12C7 10.625 5.875 9.5 4.5 9.5ZM19.5 9.5C18.125 9.5 17 10.625 17 12C17 13.375 18.125 14.5 19.5 14.5C20.875 14.5 22 13.375 22 12C22 10.625 20.875 9.5 19.5 9.5ZM9.5 12C9.5 10.625 10.625 9.5 12 9.5C13.375 9.5 14.5 10.625 14.5 12C14.5 13.375 13.375 14.5 12 14.5C10.625 14.5 9.5 13.375 9.5 12Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/more-vert-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function MoreVertIcon({ 'aria-label': ariaLabel = 'More Vert', copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 7C13.375 7 14.5 5.875 14.5 4.5C14.5 3.125 13.375 2 12 2C10.625 2 9.5 3.125 9.5 4.5C9.5 5.875 10.625 7 12 7ZM12 9.5C10.625 9.5 9.5 10.625 9.5 12C9.5 13.375 10.625 14.5 12 14.5C13.375 14.5 14.5 13.375 14.5 12C14.5 10.625 13.375 9.5 12 9.5ZM9.5 19.5C9.5 18.125 10.625 17 12 17C13.375 17 14.5 18.125 14.5 19.5C14.5 20.875 13.375 22 12 22C10.625 22 9.5 20.875 9.5 19.5Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/move-from-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 MoveFromIcon({ 'aria-label': ariaLabel = 'Move From', copyrightYear = '2020', ...props }: IconProps) {
+export function MoveFromIcon({ 'aria-label': ariaLabel = 'Move From', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M20 0H4C2.9 0 2 0.9 2 2V22C2 23.1 2.9 24 4 24H20C21.11 24 22 23.1 22 22V16.2427L20 18.2427V22H4V2H20V5.75735L22 7.75735V2C22 0.9 21.11 0 20 0Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2929 7.70712L19.5858 11H11V13H19.5858L16.2929 16.2929L17.7071 17.7071L23.4142 12L17.7071 6.29291L16.2929 7.70712Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M2,0 L20,0 C21.11,0 22,0.9 22,2 L22,7 L20,5 L20,2 L2,2 L2,22 L20,22 L20,19 L22,17 L22,22 C22,23.1 21.11,24 20,24 L2,24 C0.9,24 0,23.1 0,22 L0,2 C0,0.9 0.9,0 2,0 Z M24,12 L18.015,18 L18.015,14 L10,14 L10,10 L18.015,10 L18.015,6 L24,12 Z"
       />
     </Icon>
   );

package/src/components/icon/components/move-to-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 MoveToIcon({ 'aria-label': ariaLabel = 'Move To', copyrightYear = '2020', ...props }: IconProps) {
+export function MoveToIcon({ 'aria-label': ariaLabel = 'Move To', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M20 0H4C2.9 0 2 0.9 2 2V6H4V2H20V22H4V18H2V22C2 23.1 2.9 24 4 24H20C21.11 24 22 23.1 22 22V2C22 0.9 21.11 0 20 0Z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.29291 7.70712L8.58579 11H0V13H8.58582L5.29291 16.2929L6.70712 17.7071L12.4142 12L6.70712 6.29291L5.29291 7.70712Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M22,0 C23.1,0 24,0.9 24,2 L24,22 C24,23.1 23.1,24 22,24 L4,24 C2.89,24 2,23.1 2,22 L2,18 L4,18 L4,22 L22,22 L22,2 L4,2 L4,6 L2,6 L2,2 C2,0.9 2.89,0 4,0 L22,0 Z M14,12 L8.015,18 L8.015,14 L0,14 L0,10 L8.015,10 L8.015,6 L14,12 Z"
       />
     </Icon>
   );