@westpac/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,61 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CursorArrowDoubleclickIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cursor Arrow Doubleclick',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3568)">
+            <path
+              d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 12.2336 21.992 12.4654 21.9762 12.6951L23.9323 13.2819C23.9771 12.8607 24 12.433 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C12.4334 24 12.8614 23.977 13.283 23.9322L12.6961 21.9761C12.4661 21.992 12.234 22 12 22C6.47715 22 2 17.5228 2 12Z"
+              fill="currentColor"
+            />
+            <path
+              d="M12 5C15.7996 5 18.8921 8.02722 18.9972 11.8014L16.9335 11.1822C16.5431 8.80981 14.4829 7 12 7C9.23858 7 7 9.23858 7 12C7 14.4833 8.81041 16.5438 11.1834 16.9336L11.8025 18.9973C8.02782 18.8927 5 15.7999 5 12C5 8.13401 8.13401 5 12 5Z"
+              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_3568">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3567)">
+            <path
+              d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 12.2336 21.992 12.4654 21.9762 12.6951L23.9323 13.2819C23.9771 12.8607 24 12.433 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C12.4334 24 12.8614 23.977 13.283 23.9322L12.6961 21.9761C12.4661 21.992 12.234 22 12 22C6.47715 22 2 17.5228 2 12Z"
+              fill="currentColor"
+            />
+            <path
+              d="M12 5C15.7996 5 18.8921 8.02722 18.9972 11.8014L16.9335 11.1822C16.5431 8.80981 14.4829 7 12 7C9.23858 7 7 9.23858 7 12C7 14.4833 8.81041 16.5438 11.1834 16.9336L11.8025 18.9973C8.02782 18.8927 5 15.7999 5 12C5 8.13401 8.13401 5 12 5Z"
+              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_3567">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

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

@@ -4,16 +4,15 @@ import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function CursorArrowIcon({
-  'aria-label': ariaLabel = 'Cursor arrow',
-  copyrightYear = '2021',
+  'aria-label': ariaLabel = 'Cursor Arrow',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M6 18.8885V1L20.3228 11.7571L13.6146 11.7459L18.0717 20.6976L14.491 22.4805L10.0339 13.5287L6 18.8885Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="m6 1 12.67 11.823-5.701.169 3.801 8.741L13.856 23l-3.801-8.741L6 18.313z"
       />
     </Icon>
   );

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

@@ -1,20 +1,85 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function CursorArrowRaysIcon({
-  'aria-label': ariaLabel = 'Cursor arrow rays',
-  copyrightYear = '2021',
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cursor Arrow Rays',
+  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.018V10Zm-4.851 3.328a1 1 0 0 1-.75 1.2l-3.897.899a1 1 0 0 1-.45-1.949l3.897-.9a1 1 0 0 1 1.2.75ZM21.368 4.5a1 1 0 0 1-.148 1.406l-3.108 2.517a1 1 0 1 1-1.26-1.554l3.11-2.517a1 1 0 0 1 1.406.148Zm-17.33-.148 3.11 2.517a1 1 0 0 1-1.26 1.554L2.78 5.907a1 1 0 0 1 1.259-1.554ZM12 0a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3564)">
+            <path
+              d="M13.2935 0.072621C13.5571 0.102135 13.7981 0.235143 13.9636 0.442385C14.1291 0.649626 14.2055 0.914124 14.176 1.17769L13.7309 5.15285C13.7014 5.41642 13.5684 5.65747 13.3611 5.82297C13.1539 5.98847 12.8894 6.06487 12.6258 6.03535C12.3623 6.00584 12.1212 5.87283 11.9557 5.66559C11.7902 5.45835 11.7138 5.19385 11.7433 4.93028L12.1885 0.955126C12.218 0.691557 12.351 0.450507 12.5582 0.285006C12.7655 0.119504 13.03 0.0431067 13.2935 0.072621Z"
+              fill="currentColor"
+            />
+            <path
+              d="M4.1739 3.22502C3.90868 3.2252 3.6544 3.33073 3.46699 3.51839C3.27959 3.70606 3.1744 3.96049 3.17458 4.2257C3.17477 4.49092 3.2803 4.7452 3.46796 4.93261L6.29833 7.7591C6.48599 7.9465 6.74042 8.05169 7.00563 8.05151C7.27085 8.05132 7.52513 7.94579 7.71254 7.75813C7.89995 7.57046 8.00513 7.31604 8.00495 7.05082C8.00477 6.7856 7.89924 6.53132 7.71157 6.34391L4.88121 3.51743C4.69354 3.33002 4.43912 3.22484 4.1739 3.22502Z"
+              fill="currentColor"
+            />
+            <path
+              d="M0.245821 12.6149C0.0806036 12.8224 0.00456904 13.087 0.0344444 13.3505C0.0643197 13.614 0.197658 13.8549 0.405126 14.0201C0.612593 14.1853 0.877196 14.2614 1.14072 14.2315L5.11527 13.7809C5.37879 13.751 5.61966 13.6177 5.78488 13.4102C5.9501 13.2028 6.02613 12.9382 5.99626 12.6746C5.96638 12.4111 5.83304 12.1702 5.62558 12.005C5.41811 11.8398 5.1535 11.7638 4.88998 11.7937L0.915435 12.2442C0.651906 12.2741 0.411039 12.4074 0.245821 12.6149Z"
+              fill="currentColor"
+            />
+            <path
+              d="M5.5807 22.1623C5.35604 22.0214 5.19657 21.7969 5.13738 21.5384C5.07819 21.2799 5.12412 21.0084 5.26507 20.7838L7.39087 17.3954C7.53182 17.1708 7.75625 17.0113 8.01477 16.9521C8.2733 16.8929 8.54475 16.9388 8.76941 17.0798C8.99408 17.2207 9.15354 17.4452 9.21274 17.7037C9.27193 17.9622 9.226 18.2337 9.08505 18.4583L6.95924 21.8467C6.81829 22.0713 6.59387 22.2308 6.33534 22.29C6.07682 22.3492 5.80536 22.3033 5.5807 22.1623Z"
+              fill="currentColor"
+            />
+            <path
+              d="M22.2431 6.36099C22.302 6.10238 22.2557 5.83099 22.1144 5.60652C21.9731 5.38206 21.7485 5.2229 21.4899 5.16406C21.2313 5.10522 20.9599 5.15152 20.7354 5.29278L17.35 7.42322C17.1255 7.56448 16.9664 7.78912 16.9075 8.04773C16.8487 8.30634 16.895 8.57773 17.0362 8.8022C17.1775 9.02666 17.4021 9.18583 17.6607 9.24466C17.9193 9.3035 18.1907 9.2572 18.4152 9.11594L21.8006 6.9855C22.0251 6.84424 22.1843 6.6196 22.2431 6.36099Z"
+              fill="currentColor"
+            />
+            <path
+              d="M23.4033 15.2117L18.9918 16.6861L24.0001 21.6709L21.6831 23.9879L16.6865 18.9913L15.2121 23.4028L11.7017 11.7012L23.4033 15.2117Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3564">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3563)">
+            <path
+              d="M13.2935 0.072621C13.5571 0.102135 13.7981 0.235143 13.9636 0.442385C14.1291 0.649626 14.2055 0.914124 14.176 1.17769L13.7309 5.15285C13.7014 5.41642 13.5684 5.65747 13.3611 5.82297C13.1539 5.98847 12.8894 6.06487 12.6258 6.03535C12.3623 6.00584 12.1212 5.87283 11.9557 5.66559C11.7902 5.45835 11.7138 5.19385 11.7433 4.93028L12.1885 0.955126C12.218 0.691557 12.351 0.450507 12.5582 0.285006C12.7655 0.119504 13.03 0.0431067 13.2935 0.072621Z"
+              fill="currentColor"
+            />
+            <path
+              d="M4.1739 3.22502C3.90868 3.2252 3.6544 3.33073 3.46699 3.51839C3.27959 3.70606 3.1744 3.96049 3.17458 4.2257C3.17477 4.49092 3.2803 4.7452 3.46796 4.93261L6.29833 7.7591C6.48599 7.9465 6.74042 8.05169 7.00563 8.05151C7.27085 8.05132 7.52513 7.94579 7.71254 7.75813C7.89995 7.57046 8.00513 7.31604 8.00495 7.05082C8.00477 6.7856 7.89924 6.53132 7.71157 6.34391L4.88121 3.51743C4.69354 3.33002 4.43912 3.22484 4.1739 3.22502Z"
+              fill="currentColor"
+            />
+            <path
+              d="M0.245821 12.6149C0.0806036 12.8224 0.00456904 13.087 0.0344444 13.3505C0.0643197 13.614 0.197658 13.8549 0.405126 14.0201C0.612593 14.1853 0.877196 14.2614 1.14072 14.2315L5.11527 13.7809C5.37879 13.751 5.61966 13.6177 5.78488 13.4102C5.9501 13.2028 6.02613 12.9382 5.99626 12.6746C5.96638 12.4111 5.83304 12.1702 5.62558 12.005C5.41811 11.8398 5.1535 11.7638 4.88998 11.7937L0.915435 12.2442C0.651906 12.2741 0.411039 12.4074 0.245821 12.6149Z"
+              fill="currentColor"
+            />
+            <path
+              d="M5.5807 22.1623C5.35604 22.0214 5.19657 21.7969 5.13738 21.5384C5.07819 21.2799 5.12412 21.0084 5.26507 20.7838L7.39087 17.3954C7.53182 17.1708 7.75625 17.0113 8.01477 16.9521C8.2733 16.8929 8.54475 16.9388 8.76941 17.0798C8.99408 17.2207 9.15354 17.4452 9.21274 17.7037C9.27193 17.9622 9.226 18.2337 9.08505 18.4583L6.95924 21.8467C6.81829 22.0713 6.59387 22.2308 6.33534 22.29C6.07682 22.3492 5.80536 22.3033 5.5807 22.1623Z"
+              fill="currentColor"
+            />
+            <path
+              d="M22.2431 6.36099C22.302 6.10238 22.2557 5.83099 22.1144 5.60652C21.9731 5.38206 21.7485 5.2229 21.4899 5.16406C21.2313 5.10522 20.9599 5.15152 20.7354 5.29278L17.35 7.42322C17.1255 7.56448 16.9664 7.78912 16.9075 8.04773C16.8487 8.30634 16.895 8.57773 17.0362 8.8022C17.1775 9.02666 17.4021 9.18583 17.6607 9.24466C17.9193 9.3035 18.1907 9.2572 18.4152 9.11594L21.8006 6.9855C22.0251 6.84424 22.1843 6.6196 22.2431 6.36099Z"
+              fill="currentColor"
+            />
+            <path
+              d="M23.4033 15.2117L18.9918 16.6861L24.0001 21.6709L21.6831 23.9879L16.6865 18.9913L15.2121 23.4028L11.7017 11.7012L23.4033 15.2117Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3563">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/delete-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 DeleteIcon({ 'aria-label': ariaLabel = 'Delete', copyrightYear = '2020', ...props }: IconProps) {
+export function DeleteIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Delete',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,6 L20,6 L20,22 C20,23.1045695 19.1045695,24 18,24 L6,24 C4.8954305,24 4,23.1045695 4,22 L4,6 Z M17,2 L7,2 L8,0 L16,0 L17,2 Z M4,2 L20,2 C20.5522847,2 21,2.44771525 21,3 L21,4 L3,4 L3,3 C3,2.44771525 3.44771525,2 4,2 L4,2 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M7 2L8 0H16L17 2H20C20.5523 2 21 2.44772 21 3V4H3V3C3 2.44772 3.44772 2 4 2H7Z"
+            fill="currentColor"
+          />
+          <path d="M20 6H4V22C4 23.1046 4.89543 24 6 24H18C19.1046 24 20 23.1046 20 22V6Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M7 2L8 0H16L17 2H20C20.5523 2 21 2.44772 21 3V4H3V3C3 2.44772 3.44772 2 4 2H7Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 22V6H20V22C20 23.1046 19.1046 24 18 24H6C4.89543 24 4 23.1046 4 22ZM6 8H18V22H6V8Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/delivery-truck-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 DeliveryTruckIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Delivery Truck',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 4C0 2.89543 0.895431 2 2 2H17V5H19.5554C20.2237 5 20.8478 5.33376 21.2188 5.88955L23.6634 9.55134C23.8829 9.8801 24 10.2665 24 10.6618V19H21.9646C21.7219 20.6961 20.2632 22 18.5 22C16.7368 22 15.2781 20.6961 15.0354 19H8.96456C8.72194 20.6961 7.26324 22 5.5 22C3.73676 22 2.27806 20.6961 2.03544 19H0V4ZM17 11H22V10.6618L19.5554 7H17V11ZM5.5 20C6.32843 20 7 19.3284 7 18.5C7 17.6716 6.32843 17 5.5 17C4.67157 17 4 17.6716 4 18.5C4 19.3284 4.67157 20 5.5 20ZM18.5 20C19.3284 20 20 19.3284 20 18.5C20 17.6716 19.3284 17 18.5 17C17.6716 17 17 17.6716 17 18.5C17 19.3284 17.6716 20 18.5 20Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17 5V2H2C0.895431 2 0 2.89543 0 4V19H2.03544C2.27806 20.6961 3.73676 22 5.5 22C7.26324 22 8.72194 20.6961 8.96456 19H15.0354C15.2781 20.6961 16.7368 22 18.5 22C20.2632 22 21.7219 20.6961 21.9646 19H24V10.6618C24 10.2665 23.8829 9.8801 23.6634 9.55134L21.2188 5.88955C20.8478 5.33376 20.2237 5 19.5554 5H17ZM15 4H2V11H15V4ZM21.6632 17H22V13H2V17H2.33682C2.89855 15.8175 4.1038 15 5.5 15C6.8962 15 8.10145 15.8175 8.66318 17H15.3368C15.8985 15.8175 17.1038 15 18.5 15C19.8962 15 21.1015 15.8175 21.6632 17ZM17 7V11H22V10.6618L19.5554 7H17ZM5.5 20C6.32843 20 7 19.3284 7 18.5C7 17.6716 6.32843 17 5.5 17C4.67157 17 4 17.6716 4 18.5C4 19.3284 4.67157 20 5.5 20ZM18.5 20C19.3284 20 20 19.3284 20 18.5C20 17.6716 19.3284 17 18.5 17C17.6716 17 17 17.6716 17 18.5C17 19.3284 17.6716 20 18.5 20Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/desktop-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 DesktopIcon({ 'aria-label': ariaLabel = 'Desktop', copyrightYear = '2020', ...props }: IconProps) {
+export function DesktopIcon({ 'aria-label': ariaLabel = 'Desktop', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M15.5,22 L18,23.5 L18,24 L6,24 L6,23.5 L8.5,22 L9.16666667,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,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,18 C24,19.1045695 23.1045695,20 22,20 L14.8333333,20 L15.5,22 Z M2,16 L22,16 L22,2 L2,2 L2,16 Z"
+        clipRule="evenodd"
+        d="M18 23.5L15.5 22L14.8333 20H22C23.1046 20 24 19.1046 24 18V2C24 0.89543 23.1046 0 22 0H2C0.89543 0 0 0.89543 0 2V18C0 19.1046 0.89543 20 2 20H9.16667L8.5 22L6 23.5V24H18V23.5ZM22 16H2V2H22V16Z"
+        fill="currentColor"
       />
     </Icon>
   );

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

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function DiamondIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Diamond',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M9.74479 2H4.0001L0.571533 8H6.41146L9.74479 2Z" fill="currentColor" />
+          <path d="M8.69938 8H15.3003L11.9998 2.05917L8.69938 8Z" fill="currentColor" />
+          <path d="M17.5882 8L14.2549 2H20.0001L23.4287 8H17.5882Z" fill="currentColor" />
+          <path d="M0.857248 10L12.0001 23L23.143 10H13V18.8402L12 20L11 18.8402V10H0.857248Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 2H20L24 9L12 23L0 9L4 2ZM2.87493 8L5.16065 4H8.63368L6.41146 8H2.87493ZM8.69938 8H15.3003L13.0781 4H10.9216L8.69938 8ZM15.366 4L17.5882 8H21.1251L18.8394 4H15.366ZM3.4913 10L11 18.7602V10H3.4913ZM20.5087 10L13 18.7602V10H20.5087Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/dollar-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 DollarIcon({ 'aria-label': ariaLabel = 'Dollar', copyrightYear = '2020', ...props }: IconProps) {
+export function DollarIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Dollar',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M11,18.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' ? (
+        <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 24ZM7 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"
+        />
+      ) : (
+        <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 2ZM7 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"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/dollar-sign-icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function DollarSignIcon({
+  'aria-label': ariaLabel = 'Dollar Sign',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 15.3849H9.00516C9.14974 16.679 10.4303 17.5273 12.0826 17.5273C13.7453 17.5273 14.8812 16.6899 14.8812 15.5371C14.8812 14.5149 14.1687 13.9493 12.3718 13.5252L10.4303 13.0793C7.6833 12.4594 6.33046 10.9912 6.33046 8.69655C6.33046 6.17518 8.33485 4.38119 11 3.96618V2L13 2.01618V3.96618C15.7838 4.34531 17.6859 6.10482 17.7315 8.60955H14.809C14.7057 7.28276 13.6007 6.47799 12.0413 6.47799C10.5026 6.47799 9.46988 7.25014 9.46988 8.4138C9.46988 9.3817 10.1928 9.92547 11.9071 10.3387L13.7143 10.7411C16.6988 11.4154 18 12.7639 18 15.1565C18 17.8451 15.9725 19.6604 13 20.0487V22H11V20.0593C8.08944 19.7082 6.08249 18.0005 6 15.3849Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/download-file-icon.tsx

@@ -4,17 +4,28 @@ import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function DownloadFileIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Download File',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,0 L16,0 L22,6 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M10,10 L10,14 L7,14 L12,20 L17,14 L14,14 L14,10 L10,10 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM10 10V14H7L12 20L17 14H14V10H10Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H16V6H20V22H4V2ZM10 14V10H14V14H17L12 20L7 14H10Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/download-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 DownloadIcon({ 'aria-label': ariaLabel = 'Download', copyrightYear = '2021', ...props }: IconProps) {
+export function DownloadIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Download',
+  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 2zm2 8h-4v4H7l5 5 5-5h-3v-4z"
-      />
+      {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.0699ZM12 19L17 14H14V10H10V14H7L12 19Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M12 19L17 14H14V10H10V14H7L12 19Z" 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/drag-icon.tsx

@@ -3,14 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DragIcon({ 'aria-label': ariaLabel = 'Drag', copyrightYear = '2020', ...props }: IconProps) {
+export function DragIcon({ 'aria-label': ariaLabel = 'Drag', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M20,9 L4,9 L4,11 L20,11 L20,9 Z M4,15 L20,15 L20,13 L4,13 L4,15 Z"
-      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M4 9H20V11H4V9ZM20 15H4V13H20V15Z" fill="currentColor" />
     </Icon>
   );
 }

package/src/components/icon/components/drop-down-icon.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DropDownIcon({ 'aria-label': ariaLabel = 'Drop Down', copyrightYear = '2020', ...props }: IconProps) {
+export function DropDownIcon({ 'aria-label': ariaLabel = 'Drop Down', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="5 8 12 16 19 8" />
+      <path d="M5 8L12 16L19 8H5Z" fill="currentColor" />
     </Icon>
   );
 }

package/src/components/icon/components/drop-up-icon.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DropUpIcon({ 'aria-label': ariaLabel = 'Drop Up', copyrightYear = '2020', ...props }: IconProps) {
+export function DropUpIcon({ 'aria-label': ariaLabel = 'Drop Up', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="5 8 12 16 19 8" transform="rotate(-180 12 12)" />
+      <path d="M19 16L12 8L5 16L19 16Z" fill="currentColor" />
     </Icon>
   );
 }

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

@@ -3,13 +3,23 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DropboxIcon({ 'aria-label': ariaLabel = 'Dropbox', copyrightYear = '2020', ...props }: IconProps) {
+export function DropboxIcon({ 'aria-label': ariaLabel = 'Dropbox', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M7.05975881,19.0540557 L4.93952869,17.6598188 L4.93952869,19.2228042 L12.0142124,23.4992641 L19.088896,19.2228042 L19.088896,17.6598188 L16.9686659,19.0540557 L12.0142124,14.9103446 L7.05975881,19.0540557 Z M16.9403162,1 L12.0001125,5.15496105 L19.1182958,9.58591951 L24,5.64620644 L16.9403162,1 Z M12.0000375,14.016578 L16.9402412,18.172289 L23.999925,13.5268326 L19.1182208,9.58561951 L12.0000375,14.016578 Z M0,13.5265326 L4.88170423,9.58606951 L11.9998875,14.016278 L7.05968382,18.172739 L0,13.5265326 Z M7.05975881,1 L11.9999625,5.15496105 L4.88177923,9.58591951 L7.49992969e-05,5.64620644 L7.05975881,1 Z"
+        clipRule="evenodd"
+        d="M16.9403 1L12.0001 5.15496L19.118 9.58574L12 14.0166L16.9402 18.1723L23.9999 13.5268L19.118 9.58574L24 5.64621L16.9403 1Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.05976 19.0541L4.93953 17.6598V19.2228L12.0142 23.4993L19.0889 19.2228V17.6598L16.9687 19.0541L12.0142 14.9103L7.05976 19.0541Z"
+        fill="currentColor"
+      />
+      <path d="M0 13.5265L7.05968 18.1727L12 14.0166L4.8817 9.58607L0 13.5265Z" fill="currentColor" />
+      <path
+        d="M7.49993e-05 5.64621L7.05976 1L12.0001 5.15496L4.8817 9.58607L7.49993e-05 5.64621Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/edit-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 EditIcon({ 'aria-label': ariaLabel = 'Edit', copyrightYear = '2020', ...props }: IconProps) {
+export function EditIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Edit',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M0,19.0006943 L0,24 L4.99930565,24 L19.7439245,9.2553812 L14.7446188,4.25607555 L0,19.0006943 Z M23.6100542,5.38925149 C24.1299819,4.86932371 24.1299819,4.02944036 23.6100542,3.50951257 L20.4904874,0.389945841 C19.9705596,-0.129981947 19.1306763,-0.129981947 18.6107485,0.389945841 L16.1710873,2.829607 L21.170393,7.82891265 L23.6100542,5.38925149 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.6101 3.50951C24.13 4.02944 24.13 4.86932 23.6101 5.38925L21.1704 7.82891L16.1711 2.82961L18.6107 0.389946C19.1307 -0.129982 19.9706 -0.129982 20.4905 0.389946L23.6101 3.50951ZM0 24V19.0007L14.7446 4.25608L19.7439 9.25538L4.99931 24H0Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M23.61 3.50951C24.13 4.02944 24.13 4.86932 23.61 5.38925L21.1704 7.82891L16.1711 2.82961L18.6107 0.389946C19.1307 -0.129982 19.9706 -0.129982 20.4905 0.389946L23.61 3.50951Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 19.0005V23.9998H4.99931L19.7439 9.25517L14.7446 4.25586L0 19.0005ZM16.9155 9.25517L4.17088 21.9998H2V19.8289L14.7446 7.08429L16.9155 9.25517Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function EducationIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Education',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M0 8.5L12 2L24 8.5L12 16L2 9.75V17.5C2 18.0523 1.55228 18.5 1 18.5C0.447715 18.5 0 18.0523 0 17.5V8.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M4 13.3585L6.32484 14.8116L6.3324 14.8162L10.94 17.696C11.5885 18.1013 12.4115 18.1013 13.06 17.696L17.6677 14.8162L17.6753 14.8115L20 13.3585V16.9492L13.0677 21.3259C12.4155 21.7377 11.5845 21.7377 10.9323 21.3259L4 16.9494V13.3585Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 9.75L4 11V15.8468C4 16.5332 4.35195 17.1716 4.93232 17.538L10.9323 21.3259C11.5845 21.7377 12.4155 21.7377 13.0677 21.3259L19.0677 17.5378C19.6481 17.1714 20 16.533 20 15.8467V11L24 8.5L12 2L0 8.5V17.5C0 18.0523 0.447715 18.5 1 18.5C1.55228 18.5 2 18.0523 2 17.5V9.75ZM6 15.8468V12.25L12 16L18 12.25V15.8467L12 19.6348L6 15.8468ZM3.97119 8.6235L12 13.6415L20.0288 8.6235L12 4.27456L3.97119 8.6235Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}