npm - @westpac/ui - Versions diffs - 0.1.0 → 0.2.0 - Mend

@westpac/ui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1520) hide show

package/src/components/icon/components/book-icon.tsx CHANGED Viewed

@@ -3,14 +3,29 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function BookIcon({ 'aria-label': ariaLabel = 'Book', copyrightYear = '2020', ...props }: IconProps) {
+export function BookIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Book',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M22,24 L6,24 C3.790861,24 2,22.209139 2,20 L2,4 C2,1.790861 3.790861,4.05812251e-16 6,0 L18,0 L18,16 L7,16 C5.34314575,16 4,17.3431458 4,19 C4,20.6568542 5.34314575,22 7,22 L20,22 L20,0 L22,0 L22,24 Z M6,18 L18,18 L18,20 L6,20 L6,18 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 0C2.89543 0 2 0.89543 2 2V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V2C22 0.895431 21.1046 0 20 0H4ZM12 2H6V14L9 12L12 14V2Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 2H20V22H4V2H6V14L9 12L12 14V2ZM2 2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/bpay-icon.tsx CHANGED Viewed

@@ -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 BpayIcon({ 'aria-label': ariaLabel = 'Bpay', copyrightYear = '2020', ...props }: IconProps) {
+export function BpayIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Bpay',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12.0004693 C24,18.6276642 18.6276642,24.0009386 11.9995307,24.0009386 C5.37233585,24.0009386 0,18.6276642 0,12.0004693 C0,5.37327441 5.37233585,0 11.9995307,0 C18.6276642,0 24,5.37327441 24,12.0004693 M16.0517077,12.4574607 C17.0267663,13.0870774 17.6746328,14.1924915 17.6746328,15.4530286 C17.6746328,17.3757713 16.167724,18.9387329 14.2853915,19 L8.77526723,19 C8.56278787,18.9804467 8.42330755,18.8461806 8.42330755,18.5919875 L8.42330755,9.51142783 L10.0566612,8.9065786 L6,8.9065786 L6,6.45068219 L8.42330755,6.45068219 L8.42330755,4 L10.8427044,4 L10.8427044,6.44937864 L13.1278352,6.44937864 C15.4768402,6.44937864 17.1219258,7.78291475 17.1219258,10.1319197 C17.1219258,11.014426 16.6604675,11.9099678 16.0517077,12.4574607 Z M14.2514991,16.4737117 C14.9410793,16.4150517 15.4885722,15.8297558 15.4885722,15.1114973 C15.4885722,14.3541323 14.8811158,13.7375511 14.1315721,13.7375511 L13.002694,13.7375511 C12.7693578,13.7375511 12.619449,13.6098027 12.6025028,13.3621274 L12.6025028,11.8069871 C12.6103242,11.5801686 12.7380725,11.4354741 12.9818371,11.4250456 L13.4367776,11.4015816 C14.1276614,11.4015816 14.6842791,10.8345355 14.6842791,10.1358304 C14.6842791,9.43973234 14.1276614,8.84009733 13.4367776,8.84009733 L10.8062049,8.84009733 L10.8062049,16.0852525 C10.8153298,16.338142 10.963935,16.4711045 11.192057,16.4763188 L14.2514991,16.4737117 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 12.0005C24 18.6277 18.6277 24.0009 11.9995 24.0009C5.37234 24.0009 0 18.6277 0 12.0005C0 5.37327 5.37234 0 11.9995 0C18.6277 0 24 5.37327 24 12.0005ZM16.0517 12.4575C16.6605 11.91 17.1219 11.0144 17.1219 10.1319C17.1219 7.78292 15.4768 6.44938 13.1278 6.44938H10.8427V4H8.42331V6.45068H6V8.90658H10.0567L8.42331 9.51143V18.592C8.42331 18.8462 8.56279 18.9804 8.77527 19H14.2854C16.1677 18.9387 17.6746 17.3758 17.6746 15.453C17.6746 14.1925 17.0268 13.0871 16.0517 12.4575ZM11.1921 16.4763L14.2515 16.4737C14.9411 16.4151 15.4886 15.8298 15.4886 15.1115C15.4886 14.3541 14.8811 13.7376 14.1316 13.7376H13.0027C12.7694 13.7376 12.6194 13.6098 12.6025 13.3621V11.807C12.6103 11.5802 12.7381 11.4355 12.9818 11.425L13.4368 11.4016C14.1277 11.4016 14.6843 10.8345 14.6843 10.1358C14.6843 9.43973 14.1277 8.8401 13.4368 8.8401H10.8062V16.0853C10.8153 16.3381 10.9639 16.4711 11.1921 16.4763Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.0517 12.4575C16.6605 11.91 17.1219 11.0144 17.1219 10.1319C17.1219 7.78292 15.4768 6.44938 13.1278 6.44938H10.8427V4H8.42331V6.45068H6V8.90658H10.0567L8.42331 9.51143V18.592C8.42331 18.8462 8.56279 18.9804 8.77527 19H14.2854C16.1677 18.9387 17.6746 17.3758 17.6746 15.453C17.6746 14.1925 17.0268 13.0871 16.0517 12.4575ZM14.2515 16.4737L11.1921 16.4763C10.9639 16.4711 10.8153 16.3381 10.8062 16.0853V8.8401H13.4368C14.1277 8.8401 14.6843 9.43973 14.6843 10.1358C14.6843 10.8345 14.1277 11.4016 13.4368 11.4016L12.9818 11.425C12.7381 11.4355 12.6103 11.5802 12.6025 11.807V13.3621C12.6194 13.6098 12.7694 13.7376 13.0027 13.7376H14.1316C14.8811 13.7376 15.4886 14.3541 15.4886 15.1115C15.4886 15.8298 14.9411 16.4151 14.2515 16.4737Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 12.0005C24 18.6277 18.6277 24.0009 11.9995 24.0009C5.37234 24.0009 0 18.6277 0 12.0005C0 5.37327 5.37234 0 11.9995 0C18.6277 0 24 5.37327 24 12.0005ZM22 12.0005C22 17.5232 17.523 22.0009 11.9995 22.0009C6.47711 22.0009 2 17.5233 2 12.0005C2 6.47764 6.47711 2 11.9995 2C17.523 2 22 6.47774 22 12.0005Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/briefcase-icon.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function BriefcaseIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Briefcase',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 4C6 2.89543 6.89543 2 8 2H16C17.1046 2 18 2.89543 18 4V6H22C23.1046 6 24 6.89543 24 8V10H0V8C0 6.89543 0.895431 6 2 6H6V4ZM8 6H16V4H8V6Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14 12H24V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V12H10V14H14V12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 4C6 2.89543 6.89543 2 8 2H16C17.1046 2 18 2.89543 18 4V6H22C23.1046 6 24 6.89543 24 8V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V8C0 6.89543 0.895431 6 2 6H6V4ZM22 8V10H2L2 8H22ZM2 20L2 12H10V14H14V12H22V20H2ZM8 6H16V4H8V6Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/bsa-logo-icon.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function BSALogoIcon({
+  'aria-label': ariaLabel = 'Bank SA',
+  copyrightYear = '2023',
+  viewBox = '0 0 90 41',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} viewBox={viewBox} {...props}>
+      <path
+        d="M58 25.5002C57.063 25.5002 56 25.0002 56 24.0002V2.0002C56 1.0162 57.028 -0.00280363 58 0.000196369H88C88.984 -0.0158036 90 1.0312 90 2.0002V40.1592C90 40.6092 89.576 41.0002 89.053 41.0002C88.475 41.0002 88.252 40.4782 88.105 40.2212C79.685 25.4862 58.937 25.5002 58 25.5002Z"
+        fill="#D81B2B"
+      />
+      <path
+        d="M82.292 2.7609C82.667 2.7609 82.947 2.9859 83.009 3.2659L87.722 21.6079C87.785 21.8329 87.816 22.0579 87.816 22.0849C87.816 22.3949 87.535 22.6749 87.129 22.6749H84.82C84.445 22.6749 84.227 22.3949 84.133 22.0579L83.209 18.5619C83.202 18.5359 83.179 18.5189 83.152 18.5189H77.25C77.224 18.5189 77.2 18.5359 77.193 18.5619L76.269 22.0579C76.175 22.3949 75.957 22.6749 75.582 22.6749H73.272C72.866 22.6749 72.585 22.3949 72.585 22.0849C72.585 22.0579 72.617 21.8329 72.679 21.6079L77.392 3.2659C77.455 2.9859 77.735 2.7609 78.109 2.7609H82.292ZM80.023 6.9969L77.94 15.5249C77.931 15.5619 77.959 15.5969 77.997 15.5969H82.405C82.443 15.5969 82.471 15.5619 82.462 15.5249L80.378 6.9969C80.28 6.5979 80.121 6.5979 80.023 6.9969ZM62.3076 7.4875C62.3076 8.8445 63.0256 9.4175 64.5856 10.3155L68.0846 12.3475C70.4556 13.7235 71.4216 15.2325 71.4216 17.8455C71.4216 21.3845 68.7686 23.1155 64.9296 23.1155C61.2466 23.1155 58.4996 21.3545 58.4996 17.7595L58.5186 16.6075C58.5186 16.1865 58.9246 15.8215 59.4236 15.8215H61.4026C61.9016 15.8215 62.3076 16.1865 62.3076 16.6085V17.7595C62.3076 19.1925 63.3696 20.1015 64.9296 20.1015C66.6456 20.1015 67.5496 19.4115 67.5496 17.8665C67.5496 16.0845 66.0316 15.3045 64.9386 14.6585L61.0196 12.3585C59.2356 11.3315 58.4996 9.3885 58.4996 7.7885C58.4996 4.2495 61.0596 2.1425 64.9916 2.1425C68.7056 2.1425 71.4206 3.9965 71.4206 7.6205L71.4026 8.2385C71.4026 8.6595 70.9966 9.0245 70.4976 9.0245H68.5186C68.0186 9.0245 67.6146 8.6595 67.6136 8.2385V7.6205C67.6136 6.1865 66.7076 5.0325 64.9916 5.0325C63.2756 5.0325 62.3076 5.9415 62.3076 7.4875Z"
+        fill="white"
+      />
+      <path
+        d="M13.0493 19.1887C13.0493 16.8597 14.2343 15.5967 16.1043 14.8967L19.9073 13.4927C21.0913 13.0437 21.4963 12.7357 21.4963 11.9217C21.4963 10.9127 20.6863 10.2107 19.3153 10.2107C18.0363 10.2107 17.1643 10.9397 17.1643 12.0347V12.0667C17.1643 12.4867 16.7583 12.8517 16.2913 12.8517H14.6393C14.1403 12.8517 13.7663 12.4867 13.7663 12.0667V12.0347C13.7663 9.3967 16.1043 7.4057 19.5013 7.4057C23.2113 7.4057 24.9883 9.5927 24.9883 12.2877V22.1057C24.9883 22.5267 24.5833 22.8917 24.0843 22.8917H22.4013C21.9023 22.8917 21.4973 22.5267 21.4973 22.1057V21.9667C21.4973 21.7157 21.3623 21.6657 21.1843 21.8427C20.2963 22.7347 18.9793 23.2007 17.5383 23.2007C15.6363 23.2007 13.0493 22.2177 13.0493 19.1887ZM21.4963 15.6577C21.4963 15.6157 21.4543 15.5867 21.4153 15.6037L17.9433 17.0847C16.9463 17.5037 16.7583 18.2347 16.7583 18.7667C16.7583 19.7217 17.0703 20.6747 19.0653 20.6747C20.4673 20.6747 21.4973 19.6367 21.4973 18.4877L21.4963 15.6577ZM41.0635 3.7863C41.0635 3.3653 41.4685 3.0003 41.9675 3.0003H43.6825C44.1805 3.0003 44.5855 3.3653 44.5855 3.7863V13.3623C44.5855 13.6353 44.7305 13.6873 44.9065 13.4793L48.7945 8.8923C49.1375 8.4993 49.3245 8.2743 49.8235 8.2743H51.9115C52.3785 8.2743 52.7535 8.4713 52.7535 8.8073C52.7535 8.9483 52.6905 9.1723 52.5665 9.3413L48.1385 14.5633C48.0845 14.6273 48.0805 14.7193 48.1285 14.7873L53.0965 21.7413C53.2205 21.9103 53.2205 22.0783 53.2205 22.1903C53.2205 22.6103 52.8475 22.8913 52.2855 22.8913H50.3535C49.8555 22.8913 49.5115 22.4993 49.2625 22.1053L44.9165 15.9003C44.7345 15.6403 44.5855 15.6873 44.5855 16.0053L44.5865 22.1053C44.5865 22.5263 44.1815 22.8913 43.6825 22.8913H41.9675C41.4685 22.8913 41.0635 22.5263 41.0635 22.1053V3.7863ZM38.8154 11.5578C38.8154 9.3978 37.1014 7.4058 34.7004 7.4058C33.1624 7.4058 31.8944 8.0358 31.1664 9.0188C30.9764 9.2758 30.8354 9.2348 30.8354 8.9148V8.6668C30.8354 8.2458 30.4304 7.8818 29.9314 7.8818H28.2164C27.7184 7.8818 27.3134 8.2458 27.3134 8.6668V13.6188V21.5068V22.1058C27.3134 22.5268 27.7184 22.8918 28.2174 22.8918H29.9314C30.4304 22.8918 30.8354 22.5268 30.8354 22.1058V21.4398V11.5348C31.1294 10.9858 31.7654 10.4288 32.5064 10.2818C32.6864 10.2378 32.8774 10.2108 33.0804 10.2108C33.7394 10.2108 34.2654 10.4118 34.6404 10.7608C34.6484 10.7678 34.6554 10.7758 34.6634 10.7828C34.6824 10.7998 34.7014 10.8178 34.7194 10.8358C35.0264 11.1328 35.2164 11.5168 35.2494 11.9398C35.2774 12.1028 35.2934 12.2748 35.2934 12.4548V22.1058C35.2934 22.5268 35.6984 22.8918 36.1974 22.8918H37.9114C38.4104 22.8918 38.8154 22.5268 38.8154 22.1058V11.5578ZM7.9805 18.3186C7.9805 19.6656 7.1695 20.5626 5.7675 20.5626C4.8835 20.5626 3.8925 20.0116 3.5225 19.2086V11.8036C3.8815 11.0156 4.8365 10.4916 5.7675 10.4916C7.1695 10.4916 7.9805 11.4176 7.9805 12.7356C7.9805 12.7356 8.0175 13.4966 8.0175 15.3476C8.0175 17.2006 7.9805 18.3186 7.9805 18.3186ZM11.4655 11.2766C11.4655 9.1446 9.6015 7.4056 7.3875 7.4056C5.8495 7.4056 4.5815 8.0356 3.8535 9.0186C3.6635 9.2756 3.5225 9.2346 3.5225 8.9156V3.7866C3.5225 3.3656 3.1175 3.0006 2.6185 3.0006H0.9035C0.4055 3.0006 0.000499725 3.3656 0.000499725 3.7866V22.1056C0.000499725 22.5266 0.4055 22.8916 0.9045 22.8916H2.6195C3.1175 22.8916 3.5225 22.5266 3.5225 22.1056V21.8586C3.5225 21.5396 3.6635 21.4986 3.8535 21.7556C4.5815 22.7386 5.8495 23.2016 7.3885 23.2016C9.6945 23.2016 11.4655 21.5736 11.4655 19.2156C11.4655 19.2156 11.5395 17.6946 11.5395 15.3536C11.5395 13.0126 11.4655 11.2766 11.4655 11.2766Z"
+        fill="#002F6C"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/bug-report-icon.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function BugReportIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Bug Report',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          d="M17.4142 1L18.8284 2.41421L16.7094 4.53233C17.9078 5.40644 18.854 6.60554 19.4185 8.00003L23 8V10L19.9381 10C19.979 10.3276 20 10.6614 20 11V12H23V14H20V15C20 15.339 19.9789 15.6731 19.938 16.001L23 16V18L19.4181 18.001C18.2311 20.9323 15.357 23 12 23C8.64299 23 5.76892 20.9323 4.58191 18.001L1 18V16L4.06201 16.001C4.02108 15.6731 4 15.339 4 15V14H1V12H4V11L4.00381 10.7508C4.01156 10.4974 4.0311 10.247 4.06189 10L1 10V8L4.58151 8.00003C5.14597 6.60554 6.09222 5.40644 7.29063 4.53233L5.17157 2.41421L6.58579 1L9.11917 3.53439C10.013 3.18924 10.9844 3 12 3C13.0156 3 13.987 3.18924 14.8808 3.53439L17.4142 1ZM16 14H8V16H16V14ZM16 10H8V12H16V10Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M16 10H8V12H16V10Z" fill="currentColor" />
+          <path d="M8 14H16V16H8V14Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17.4142 1L18.8284 2.41406L16.7094 4.53223C16.9109 4.67871 17.1051 4.83496 17.2917 5C18.2152 5.81543 18.9489 6.83984 19.4185 8H23V10H19.9381C19.979 10.3271 20 10.6611 20 11V12H23V14H20V15C20 15.3389 19.979 15.6729 19.9381 16H23V18H19.4185C18.2317 20.9316 15.3574 23 12 23C8.64258 23 5.76831 20.9316 4.58154 18H1V16H4.06189C4.03748 15.8047 4.02014 15.6064 4.01013 15.4072C4.00342 15.2725 4 15.1367 4 15V14H1V12H4V11C4 10.833 4.00513 10.668 4.01514 10.5039C4.02039 10.418 4.02698 10.333 4.03491 10.248C4.0426 10.165 4.05164 10.082 4.06189 10H1V8H4.58154C5.05115 6.83984 5.78479 5.81543 6.70825 5C6.81104 4.90918 6.91614 4.82129 7.02344 4.73535C7.11096 4.66602 7.20007 4.59766 7.29065 4.53223L5.17163 2.41406L6.58582 1L9.11914 3.53418C10.0131 3.18945 10.9844 3 12 3C13.0156 3 13.9869 3.18945 14.8809 3.53418L17.4142 1ZM12 5C8.68628 5 6 7.68652 6 11V15C6 18.3135 8.68628 21 12 21C15.3137 21 18 18.3135 18 15V11C18 7.68652 15.3137 5 12 5Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/burger-icon.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function BurgerIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Burger',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M23.9999 8C23.9999 3 19 1 12 1C4.99992 1 0 3 0 8V10H23.9999V8Z" fill="currentColor" />
+          <path d="M0 21V17H24V21C24 22.1046 23.1046 23 22 23H2C0.89543 23 0 22.1046 0 21Z" fill="currentColor" />
+          <path
+            d="M0 15.0498C1.01586 15.0498 1.74034 14.5574 2.23561 14.2207C2.28137 14.1896 2.3253 14.1598 2.3672 14.1319C2.87989 13.7901 3.30058 13.5498 4 13.5498C4.69942 13.5498 5.12011 13.7901 5.6328 14.1319C5.67465 14.1598 5.71841 14.1895 5.76412 14.2206C6.25939 14.5572 6.98414 15.0498 8 15.0498C9.01586 15.0498 9.74034 14.5574 10.2356 14.2207C10.2814 14.1896 10.3253 14.1598 10.3672 14.1319C10.8799 13.7901 11.3006 13.5498 12 13.5498C12.6994 13.5498 13.1201 13.7901 13.6328 14.1319C13.6747 14.1598 13.7185 14.1896 13.7643 14.2207C14.2596 14.5573 14.9841 15.0498 16 15.0498C17.0159 15.0498 17.7403 14.5574 18.2356 14.2207C18.2814 14.1896 18.3253 14.1598 18.3672 14.1319C18.8799 13.7901 19.3006 13.5498 20 13.5498C20.6994 13.5498 21.1201 13.7901 21.6328 14.1319C21.6746 14.1597 21.7183 14.1895 21.764 14.2205C22.2593 14.5571 22.9841 15.0498 24 15.0498V13.0498C23.6152 13.0498 23.3784 12.892 22.7679 12.4849L22.7422 12.4678C22.1299 12.0596 21.3006 11.5498 20 11.5498C18.6994 11.5498 17.8701 12.0596 17.2578 12.4678L17.2321 12.4849C16.6216 12.892 16.3848 13.0498 16 13.0498C15.6152 13.0498 15.3784 12.892 14.7679 12.4849L14.7422 12.4678C14.1299 12.0596 13.3006 11.5498 12 11.5498C10.6994 11.5498 9.87011 12.0596 9.2578 12.4678L9.23209 12.4849C8.62158 12.892 8.38483 13.0498 8 13.0498C7.61517 13.0498 7.37842 12.892 6.76792 12.4849L6.7422 12.4678C6.12989 12.0596 5.30058 11.5498 4 11.5498C2.69942 11.5498 1.87011 12.0596 1.2578 12.4678L1.23208 12.4849C0.621577 12.892 0.384828 13.0498 0 13.0498V15.0498Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 10V8C0 3 4.99994 1 12 1C19.0001 1 24 3 24 8V10H0ZM19.6892 4.39257C17.9854 3.49054 15.3676 3 12 3C8.63244 3 6.01459 3.49054 4.31076 4.39257C2.7449 5.22156 2.00001 6.34307 2.00001 8H22C22 6.34307 21.2551 5.22156 19.6892 4.39257Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 17V21C0 22.1046 0.89543 23 2 23H22C23.1046 23 24 22.1046 24 21V17H0ZM2 19L2 21H22V19H2Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0 15.0498C1.01586 15.0498 1.74034 14.5574 2.23561 14.2207C2.28142 14.1896 2.32527 14.1598 2.3672 14.1319C2.87989 13.7901 3.30058 13.5498 4 13.5498C4.69942 13.5498 5.12011 13.7901 5.6328 14.1319C5.67473 14.1598 5.71858 14.1896 5.76439 14.2207C6.25966 14.5574 6.98414 15.0498 8 15.0498C9.01586 15.0498 9.74034 14.5574 10.2356 14.2207C10.2814 14.1896 10.3253 14.1598 10.3672 14.1319C10.8799 13.7901 11.3006 13.5498 12 13.5498C12.6994 13.5498 13.1201 13.7901 13.6328 14.1319C13.6747 14.1598 13.7186 14.1896 13.7644 14.2207C14.2597 14.5574 14.9841 15.0498 16 15.0498C17.0159 15.0498 17.7403 14.5574 18.2356 14.2207C18.2814 14.1896 18.3253 14.1598 18.3672 14.1319C18.8799 13.7901 19.3006 13.5498 20 13.5498C20.6994 13.5498 21.1201 13.7901 21.6328 14.1319C21.6747 14.1598 21.7185 14.1895 21.7642 14.2206C22.2595 14.5572 22.9841 15.0498 24 15.0498V13.0498C23.6152 13.0498 23.3784 12.892 22.7679 12.4849L22.7422 12.4678C22.1299 12.0596 21.3006 11.5498 20 11.5498C18.6994 11.5498 17.8701 12.0596 17.2578 12.4678L17.2321 12.4849C16.6216 12.892 16.3848 13.0498 16 13.0498C15.6152 13.0498 15.3784 12.892 14.7679 12.4849L14.7422 12.4678C14.1299 12.0596 13.3006 11.5498 12 11.5498C10.6994 11.5498 9.87011 12.0596 9.2578 12.4678L9.23209 12.4849C8.62158 12.892 8.38483 13.0498 8 13.0498C7.61517 13.0498 7.37842 12.892 6.76792 12.4849L6.7422 12.4678C6.12989 12.0596 5.30058 11.5498 4 11.5498C2.69942 11.5498 1.87011 12.0596 1.2578 12.4678L1.23208 12.4849C0.621577 12.892 0.384828 13.0498 0 13.0498V15.0498Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/business-person-icon.tsx CHANGED Viewed

@@ -1,20 +1,55 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 export function BusinessPersonIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Business Person',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12.2608696,19.6521739 L14,24 L10,24 L11.7391304,19.6521739 L9,16 L15,16 L12.2608696,19.6521739 Z M15.9967737,24 L24,24 L24,21.3333333 C24,18.7701873 19.8243469,17.1262595 15.9967737,16.4116152 L15,19 L15.9967737,24 Z M7.98543588,16.4149431 C4.162726,17.131355 0,18.7741579 0,21.3333333 L0,24 L7.98543588,24 L9,19 L7.98543588,16.4149431 Z M12,12 C15.315,12 18,9.315 18,6 C18,2.685 15.315,0 12,0 C8.685,0 6,2.685 6,6 C6,9.315 8.685,12 12,12"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M18 6C18 9.315 15.315 12 12 12C8.685 12 6 9.315 6 6C6 2.685 8.685 0 12 0C15.315 0 18 2.685 18 6Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.16577 15.221L11.7392 18.6522L10 24H14L12.2609 18.6522L14.8343 15.221C13.7919 15.0737 12.8136 15 12 15C11.1865 15 10.2082 15.0737 9.16577 15.221Z"
+            fill="currentColor"
+          />
+          <path d="M8 15.4121C4.17331 16.1271 0 17.7708 0 20.3332V23.9999H8V15.4121Z" fill="currentColor" />
+          <path d="M16 23.9999H24V20.3332C24 17.7708 19.8267 16.1271 16 15.4121V23.9999Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 12C15.315 12 18 9.315 18 6C18 2.685 15.315 0 12 0C8.685 0 6 2.685 6 6C6 9.315 8.685 12 12 12ZM16 6C16 8.21043 14.2104 10 12 10C9.78957 10 8 8.21043 8 6C8 3.78957 9.78957 2 12 2C14.2104 2 16 3.78957 16 6Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.16577 15.221L11.7392 18.6522L10 24H14L12.2609 18.6522L14.8343 15.221C13.7919 15.0737 12.8136 15 12 15C11.1865 15 10.2082 15.0737 9.16577 15.221Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 15.8682C2.85049 16.7253 0 18.2155 0 20.3332V23.9999H8V15.4121C7.3359 15.5362 6.66136 15.6882 6 15.8682ZM3.51431 18.9402C2.10763 19.6988 2 20.2401 2 20.3332V21.9999H6V17.9485C5.07065 18.2284 4.21522 18.5622 3.51431 18.9402Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 20.3332C24 18.2155 21.1495 16.7253 18 15.8682C17.3386 15.6882 16.6641 15.5362 16 15.4121V23.9999H24V20.3332ZM22 21.9999V20.3332C22 20.2401 21.8924 19.6988 20.4857 18.9402C19.7848 18.5622 18.9294 18.2284 18 17.9485V21.9999H22Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/cafe-icon.tsx CHANGED Viewed

@@ -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 CafeIcon({ 'aria-label': ariaLabel = 'Cafe', copyrightYear = '2020', ...props }: IconProps) {
+export function CafeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cafe',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M22,2 L2,2 L2,16 C2,18.21 3.79,20 6,20 L16,20 C18.21,20 20,18.21 20,16 L20,12 L22,12 C23.11,12 24,11.11 24,10 L24,4 C24,2.89 23.11,2 22,2 Z M22,10 L20,10 L20,4 L22,4 L22,10 Z M0,24 L24,24 L24,22 L0,22 L0,24 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22 2H2V16C2 18.21 3.79 20 6 20H16C18.21 20 20 18.21 20 16V12H22C23.11 12 24 11.11 24 10V4C24 2.89 23.11 2 22 2ZM22 10H20V4H22V10ZM24 24H0V22H24V24Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2H22C23.11 2 24 2.89 24 4V10C24 11.11 23.11 12 22 12H20V16C20 18.21 18.21 20 16 20H6C3.79 20 2 18.21 2 16V2ZM20 10V4H22V10H20ZM18 4H4V16C4 17.1054 4.89457 18 6 18H16C17.1054 18 18 17.1054 18 16V4Z"
+            fill="currentColor"
+          />
+          <path d="M24 24H0V22H24V24Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/cake-icon.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function CakeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cake',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M14 4C14 5.1 13.11 6 12 6C10.9 6 10 5.1 10 4C10 3.62 10.1 3.27 10.29 2.97L12 0L13.71 2.97C13.9 3.27 14 3.62 14 4Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11 7H13V9H18C20.2091 9 22 10.7909 22 13V15.9184C21.8687 16.0271 21.735 16.1318 21.5993 16.2305C20.9697 16.6884 20.4322 16.9142 20 16.9142C19.5678 16.9142 19.0303 16.6884 18.4007 16.2305C17.7867 15.784 17.2153 15.2153 16.7071 14.7071L16 14L15.2929 14.7071C14.7847 15.2153 14.2133 15.784 13.5993 16.2305C12.9697 16.6884 12.4322 16.9142 12 16.9142C11.5678 16.9142 11.0303 16.6884 10.4007 16.2305C9.78673 15.784 9.21526 15.2153 8.70711 14.7071L8 14L7.29289 14.7071C6.78474 15.2153 6.21327 15.784 5.59933 16.2305C4.96971 16.6884 4.4322 16.9142 4 16.9142C3.5678 16.9142 3.03029 16.6884 2.40067 16.2305C2.26496 16.1318 2.13133 16.0271 2 15.9184V13C2 10.7909 3.79086 9 6 9H11V7Z"
+            fill="currentColor"
+          />
+          <path
+            d="M20 18.9142C20.7273 18.9142 21.4057 18.671 22 18.3447V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23V18.3447C2.59426 18.671 3.2727 18.9142 4 18.9142C5.0678 18.9142 6.03029 18.39 6.77567 17.8479C7.21857 17.5258 7.63353 17.1604 8 16.8143C8.36648 17.1604 8.78143 17.5258 9.22433 17.8479C9.96971 18.39 10.9322 18.9142 12 18.9142C13.0678 18.9142 14.0303 18.39 14.7757 17.8479C15.2186 17.5258 15.6335 17.1604 16 16.8143C16.3665 17.1604 16.7814 17.5258 17.2243 17.8479C17.9697 18.39 18.9322 18.9142 20 18.9142Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M14 4C14 5.1 13.11 6 12 6C10.9 6 10 5.1 10 4C10 3.62 10.1 3.27 10.29 2.97L12 0L13.71 2.97C13.9 3.27 14 3.62 14 4Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11 7H13V9H18C20.2091 9 22 10.7909 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23V13C2 10.7909 3.79086 9 6 9H11V7ZM6 11C4.89543 11 4 11.8954 4 13V16.9142C4.4322 16.9142 4.96971 16.6884 5.59933 16.2305C6.21327 15.784 6.78474 15.2153 7.29289 14.7071L8 14L8.70711 14.7071C9.21526 15.2153 9.78673 15.784 10.4007 16.2305C11.0303 16.6884 11.5678 16.9142 12 16.9142C12.4322 16.9142 12.9697 16.6884 13.5993 16.2305C14.2133 15.784 14.7847 15.2153 15.2929 14.7071L16 14L16.7071 14.7071C17.2153 15.2153 17.7867 15.784 18.4007 16.2305C19.0303 16.6884 19.5678 16.9142 20 16.9142V13C20 11.8954 19.1046 11 18 11H6ZM4 22V18.9142C5.0678 18.9142 6.03029 18.39 6.77567 17.8479C7.21857 17.5258 7.63353 17.1604 8 16.8143C8.36648 17.1604 8.78143 17.5258 9.22433 17.8479C9.96971 18.39 10.9322 18.9142 12 18.9142C13.0678 18.9142 14.0303 18.39 14.7757 17.8479C15.2186 17.5258 15.6335 17.1604 16 16.8143C16.3665 17.1604 16.7814 17.5258 17.2243 17.8479C17.9697 18.39 18.9322 18.9142 20 18.9142V22H4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/calculate-icon.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function CalculateIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Calculate',
+  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 0H2ZM18.7175 10.1315L16.9497 8.36377L15.182 10.1315L13.7677 8.71733L15.5355 6.94956L13.7677 5.18179L15.182 3.76758L16.9497 5.53535L18.7175 3.76758L20.1317 5.18179L18.3639 6.94956L20.1317 8.71733L18.7175 10.1315ZM10.6667 5.99935H4V7.99935H10.6667V5.99935ZM13.3334 13.333H20V15.333H13.3334V13.333ZM13.3334 16.6663H20V18.6663H13.3334V16.6663ZM6.33333 16.6663V18.9997H8.33333V16.6663H10.6667V14.6663H8.33333V12.333H6.33333V14.6663H4V16.6663H6.33333Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M16.9497 8.3641L18.7175 10.1319L20.1317 8.71765L18.3639 6.94988L20.1317 5.18212L18.7175 3.7679L16.9497 5.53567L15.182 3.7679L13.7677 5.18212L15.5355 6.94988L13.7677 8.71765L15.182 10.1319L16.9497 8.3641Z"
+            fill="currentColor"
+          />
+          <path d="M4 5.99967H10.6667V7.99967H4V5.99967Z" fill="currentColor" />
+          <path d="M20 13.3333H13.3334V15.3333H20V13.3333Z" fill="currentColor" />
+          <path d="M20 16.6667H13.3334V18.6667H20V16.6667Z" fill="currentColor" />
+          <path
+            d="M6.33333 19V16.6667H4V14.6667H6.33333V12.3333H8.33333V14.6667H10.6667V16.6667H8.33333V19H6.33333Z"
+            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/calculator-icon.tsx CHANGED Viewed

@@ -1,20 +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 CalculatorIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Calculator',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,0 L20,0 C21.1045695,-2.02906125e-16 22,0.8954305 22,2 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 C2,0.8954305 2.8954305,2.02906125e-16 4,0 Z M4,2 L4,8 L20,8 L20,2 L4,2 Z M12,16 L12,18 L20,18 L20,16 L12,16 Z M12,20 L12,22 L20,22 L20,20 L12,20 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 0H20C21.1046 0 22 0.89543 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2C2 0.89543 2.89543 0 4 0ZM4 2H20V8H4V2ZM10 15H18V17H10V15ZM10 18H18V20H10V18Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M10 15H18V17H10V15Z" fill="currentColor" />
+          <path d="M10 18H18V20H10V18Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20 0H4C2.89543 0 2 0.89543 2 2V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V2C22 0.89543 21.1046 0 20 0ZM20 2H4V8H20V2ZM4 22V10H20V22H4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/calendar-icon.tsx CHANGED Viewed

@@ -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 CalendarIcon({ 'aria-label': ariaLabel = 'Calendar', copyrightYear = '2020', ...props }: IconProps) {
+export function CalendarIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Calendar',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M20,2 L22,2 C23.1045695,2 24,2.8954305 24,4 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,4 C-1.3527075e-16,2.8954305 0.8954305,2 2,2 L4,2 L4,0 L6,0 L6,2 L18,2 L18,0 L20,0 L20,2 Z M2,8 L2,22 L22,22 L22,8 L2,8 Z M14,14 L20,14 L20,20 L14,20 L14,14 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 2H22C23.1046 2 24 2.89543 24 4V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V4C0 2.89543 0.89543 2 2 2H4V0H6V2H18V0H20V2ZM2 8H22V22H2V8ZM20 14H14V20H20V14Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M14 14H20V20H14V14Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22 2H20V0H18V2H6V0H4V2H2C0.89543 2 0 2.89543 0 4V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V4C24 2.89543 23.1046 2 22 2ZM22 8H2V22H22V8ZM22 4H2V6H22V4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/camera-icon.tsx CHANGED Viewed

@@ -3,14 +3,29 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function CameraIcon({ 'aria-label': ariaLabel = 'Camera', copyrightYear = '2020', ...props }: IconProps) {
+export function CameraIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Camera',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6,4 L8,2 L16,2 L18,4 L22,4 C23.1045695,4 24,4.8954305 24,6 L24,20 C24,21.1045695 23.1045695,22 22,22 L2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,6 C-1.3527075e-16,4.8954305 0.8954305,4 2,4 L6,4 Z M12,19 C15.3137085,19 18,16.3137085 18,13 C18,9.6862915 15.3137085,7 12,7 C8.6862915,7 6,9.6862915 6,13 C6,16.3137085 8.6862915,19 12,19 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 4H6L8 2H16L18 4H22C23.1046 4 24 4.89543 24 6V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V6C0 4.89543 0.89543 4 2 4ZM7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8C9.23858 8 7 10.2386 7 13Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.82843 6H2V20H22V6H17.1716L15.1716 4H8.82843L6.82843 6ZM8 2L6 4H2C0.89543 4 0 4.89543 0 6V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V6C24 4.89543 23.1046 4 22 4H18L16 2H8ZM12 19C8.68629 19 6 16.3137 6 13C6 9.68629 8.68629 7 12 7C15.3137 7 18 9.68629 18 13C18 16.3137 15.3137 19 12 19ZM12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13C16 15.2091 14.2091 17 12 17Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/car-icon.tsx CHANGED Viewed

@@ -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 CarIcon({ 'aria-label': ariaLabel = 'Car', copyrightYear = '2020', ...props }: IconProps) {
+export function CarIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Car',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M22,10 L22,21 C22,21.5522847 21.5522847,22 21,22 L19,22 C18.4477153,22 18,21.5522847 18,21 L18,19 L6,19 L6,21 C6,21.5522847 5.55228475,22 5,22 L3,22 C2.44771525,22 2,21.5522847 2,21 L2,10 L4.31111111,3.13625 C4.54444444,2.4725 5.15555556,2 5.88888889,2 L18.1111111,2 C18.8444444,2 19.4666667,2.4725 19.6888889,3.13625 L22,10 Z M5.5,15 C6.32842712,15 7,14.3284271 7,13.5 C7,12.6715729 6.32842712,12 5.5,12 C4.67157288,12 4,12.6715729 4,13.5 C4,14.3284271 4.67157288,15 5.5,15 Z M18.5,15 C19.3284271,15 20,14.3284271 20,13.5 C20,12.6715729 19.3284271,12 18.5,12 C17.6715729,12 17,12.6715729 17,13.5 C17,14.3284271 17.6715729,15 18.5,15 Z M6.13060769,4 L4.78375728,8 L19.2162427,8 L17.8693923,4 L6.13060769,4 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.6889 3.13625L22 10V21C22 21.5523 21.5523 22 21 22H19C18.4477 22 18 21.5523 18 21V19H6V21C6 21.5523 5.55228 22 5 22H3C2.44772 22 2 21.5523 2 21V10L4.31111 3.13625C4.54444 2.4725 5.15556 2 5.88889 2H18.1111C18.8444 2 19.4667 2.4725 19.6889 3.13625ZM6.5 15C7.32843 15 8 14.3284 8 13.5C8 12.6716 7.32843 12 6.5 12C5.67157 12 5 12.6716 5 13.5C5 14.3284 5.67157 15 6.5 15ZM19 13.5C19 14.3284 18.3284 15 17.5 15C16.6716 15 16 14.3284 16 13.5C16 12.6716 16.6716 12 17.5 12C18.3284 12 19 12.6716 19 13.5ZM4.78376 8L6.13061 4H17.8694L19.2162 8H4.78376Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M8 13.5C8 14.3284 7.32843 15 6.5 15C5.67157 15 5 14.3284 5 13.5C5 12.6716 5.67157 12 6.5 12C7.32843 12 8 12.6716 8 13.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M17.5 15C18.3284 15 19 14.3284 19 13.5C19 12.6716 18.3284 12 17.5 12C16.6716 12 16 12.6716 16 13.5C16 14.3284 16.6716 15 17.5 15Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M19.6889 3.13625L22 10V21C22 21.5523 21.5523 22 21 22H19C18.4477 22 18 21.5523 18 21V19H6V21C6 21.5523 5.55228 22 5 22H3C2.44772 22 2 21.5523 2 21V10L4.31111 3.13625C4.54444 2.4725 5.15556 2 5.88889 2H18.1111C18.8444 2 19.4667 2.4725 19.6889 3.13625ZM4 10V17H20V10H4ZM4.78376 8L6.13061 4H17.8694L19.2162 8H4.78376Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }