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/sd-storage-icon.tsx CHANGED Viewed

@@ -1,16 +1,36 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function SdStorageIcon({ 'aria-label': ariaLabel = 'Sd Storage', copyrightYear = '2020', ...props }: IconProps) {
+export function SdStorageIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Sd Storage',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,0 C19.1,0 20,0.9 20,2 L20,22 C20,23.1 19.1,24 18,24 L4,24 C2.9,24 2,23.1 2,22 L2.02,6 L8,0 L18,0 Z M10,8 L10,2 L8,2 L8,8 L10,8 Z M14,8 L14,2 L12,2 L12,8 L14,8 Z M18,8 L18,2 L16,2 L16,8 L18,8 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.02 6L2 22C2 23.1 2.9 24 4 24H20C21.1 24 22 23.1 22 22V2C22 0.9 21.1 0 20 0H7L2.02 6ZM8 10H10V4H8V10ZM12 10H14V4H12V10ZM18 10H16V4H18V10Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M8 10H10V4H8V10Z" fill="currentColor" />
+          <path d="M12 10H14V4H12V10Z" fill="currentColor" />
+          <path d="M18 10H16V4H18V10Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.02 6L7 0H20C21.1 0 22 0.9 22 2V22C22 23.1 21.1 24 20 24H4C2.9 24 2 23.1 2 22L2.02 6ZM20 2V22H4L4.0191 6.72296L7.93915 2H20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function SearchIcon({ 'aria-label': ariaLabel = 'Search', copyrightYear = '2020', ...props }: IconProps) {
+export function SearchIcon({ 'aria-label': ariaLabel = 'Search', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M2,9 C2,5.13425 5.13425,2 9,2 C12.86575,2 16,5.13425 16,9 C16,12.86575 12.86575,16 9,16 C5.13425,16 2,12.86575 2,9 M22.59075,20.15925 L16.46325,14.03175 C17.433,12.5955 18,10.86375 18,9 C18,4.02975 13.97025,0 9,0 C4.02975,0 0,4.02975 0,9 C0,13.97025 4.02975,18 9,18 C10.4715,18 11.856,17.64 13.08225,17.01375 L19.40925,23.34075 C19.84875,23.78025 20.424,24 21,24 C21.576,24 22.15125,23.78025 22.59075,23.34075 C23.46975,22.4625 23.46975,21.0375 22.59075,20.15925"
+        clipRule="evenodd"
+        d="M16.4632 14.0317L22.5907 20.1593C23.4697 21.0375 23.4697 22.4625 22.5907 23.3407C22.1512 23.7803 21.576 24 21 24C20.424 24 19.8488 23.7803 19.4093 23.3407L13.0822 17.0138C11.856 17.64 10.4715 18 9 18C4.02975 18 0 13.9703 0 9C0 4.02975 4.02975 0 9 0C13.9703 0 18 4.02975 18 9C18 10.8638 17.433 12.5955 16.4632 14.0317ZM9 2C5.13425 2 2 5.13425 2 9C2 12.8658 5.13425 16 9 16C12.8658 16 16 12.8658 16 9C16 5.13425 12.8658 2 9 2Z"
+        fill="currentColor"
       />
     </Icon>
   );

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

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function SecurityIcon({ 'aria-label': ariaLabel = 'Security', copyrightYear = '2020', ...props }: IconProps) {
+export function SecurityIcon({ 'aria-label': ariaLabel = 'Security', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M12,0 L22,4.5 L22,11 C22,17.0545455 17.7333333,22.6254545 12,24 C6.26666667,22.6254545 2,17.0545455 2,11 L2,4.5 L12,0 Z M4.04577037,12 L4.04577037,12 L12,12 L12,21.9311004 C16.274414,20.6811566 19.534648,16.5867485 19.9542296,12 L12,12 L12,2.19317122 L4,5.79317122 L4,11 C4,11.3353086 4.01548572,11.6689368 4.04577037,12 Z"
+        clipRule="evenodd"
+        d="M22 4.5L12 0L2 4.5V11C2 17.0545 6.26667 22.6255 12 24C17.7333 22.6255 22 17.0545 22 11V4.5ZM4 11C4 11.3353 4.01549 11.6689 4.04577 12H12V21.9311C16.2744 20.6812 19.5346 16.5867 19.9542 12H12V2.19317L4 5.79317V11Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/service-bell-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 ServiceBellIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Service Bell',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M1,18 C1,11.9248678 5.92486775,7 12,7 C18.0751322,7 23,11.9248678 23,18 L1,18 Z M9,2 L15,2 L15,4 L9,4 L9,2 Z M0,20 L24,20 L24,22 L0,22 L0,20 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M14 2H10C9.44771 2 9 2.44772 9 3C9 3.55228 9.44771 4 10 4H11V7.04484C5.3935 7.55007 1 12.262 1 18H23C23 12.262 18.6065 7.55007 13 7.04484V4H14C14.5523 4 15 3.55228 15 3C15 2.44772 14.5523 2 14 2Z"
+            fill="currentColor"
+          />
+          <path d="M24 20V22H0V20H24Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 2H10C9.44771 2 9 2.44772 9 3C9 3.55228 9.44771 4 10 4H11V7.04484C6.06084 7.48993 2.06309 11.1999 1.18138 16C1.06225 16.6486 1 17.317 1 18H23C23 17.317 22.9378 16.6486 22.8186 16C21.9369 11.1999 17.9392 7.48993 13 7.04484V4H14C14.5523 4 15 3.55228 15 3C15 2.44772 14.5523 2 14 2ZM20.777 16C19.8675 11.992 16.2832 9 12 9C7.71683 9 4.13247 11.992 3.22302 16H20.777Z"
+            fill="currentColor"
+          />
+          <path d="M24 20V22H0V20H24Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/settings-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 SettingsIcon({ 'aria-label': ariaLabel = 'Settings', copyrightYear = '2020', ...props }: IconProps) {
+export function SettingsIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Settings',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,14.25225 L20.5515,14.826 C20.41275,15.2475 20.24325,15.65475 20.04525,16.0455 L22.0785,18.89175 L18.8925,22.077 L16.04175,20.04075 C15.6525,20.2365 15.2475,20.4045 14.82825,20.54325 L14.25225,24 L9.74775,24 L9.17175,20.544 C8.7525,20.40525 8.3475,20.2365 7.9575,20.0415 L5.1075,22.07775 L1.9215,18.89175 L3.954,16.04625 C3.7575,15.6555 3.58725,15.2475 3.44775,14.82675 L0,14.25225 L0,9.74775 L3.4395,9.17325 C3.57825,8.74875 3.74925,8.33775 3.948,7.94325 L1.9215,5.10675 L5.1075,1.9215 L7.93875,3.94425 C8.33475,3.744 8.748,3.57225 9.1755,3.43125 L9.74775,0 L14.25225,0 L14.82375,3.432 C15.25125,3.573 15.6645,3.74475 16.0605,3.945 L18.89175,1.92225 L22.07775,5.10825 L20.0505,7.944 C20.25,8.3385 20.42025,8.7495 20.55975,9.17475 L24,9.74775 L24,14.25225 Z M7,12 C7,14.7614286 9.23857143,17 12,17 C14.7614286,17 17,14.7614286 17,12 C17,9.23857143 14.7614286,7 12,7 C9.23857143,7 7,9.23857143 7,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.2525 12C21.2525 12.4125 21.2268 12.8 21.1754 13.175L23.7584 15.15C24.0026 15.325 24.0668 15.6375 23.9126 15.9125L21.4453 20.0625C21.2911 20.3375 20.9698 20.4375 20.6871 20.3375L17.6158 19.1375C16.9861 19.6125 16.2921 20.0125 15.5339 20.3125L15.0713 23.4875C15.0328 23.7875 14.7758 24 14.4673 24H9.53266C9.22425 24 8.98008 23.7875 8.91583 23.4875L8.4532 20.3125C7.69501 20.0125 7.01392 19.6125 6.37139 19.1375L3.30006 20.3375C3.01735 20.425 2.69608 20.3375 2.54187 20.0625L0.0745346 15.9125C-0.0668233 15.6625 -0.00256982 15.325 0.228743 15.15L2.83744 13.175C2.77318 12.8 2.74748 12.3875 2.74748 12C2.74748 11.6125 2.79889 11.2 2.86314 10.825L0.254444 8.85C-0.00256985 8.675 -0.0539726 8.35 0.100236 8.0875L2.55472 3.9375C2.70893 3.6625 3.0302 3.5625 3.31291 3.6625L6.38424 4.8625C7.01392 4.4 7.70786 3.9875 8.46605 3.6875L8.92868 0.5125C8.98008 0.2125 9.22425 0 9.53266 0H14.4673C14.7758 0 15.0328 0.2125 15.0842 0.5125L15.5468 3.6875C16.305 3.9875 16.9861 4.3875 17.6286 4.8625L20.6999 3.6625C20.9827 3.575 21.3039 3.6625 21.4581 3.9375L23.9255 8.0875C24.0668 8.3375 24.0026 8.675 23.7713 8.85L21.1626 10.825C21.2268 11.2 21.2525 11.6 21.2525 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17.6158 19.1375L20.6871 20.3375C20.9698 20.4375 21.2911 20.3375 21.4453 20.0625L23.9126 15.9125C24.0668 15.6375 24.0026 15.325 23.7584 15.15L21.1754 13.175C21.2268 12.8 21.2525 12.4125 21.2525 12C21.2525 11.6 21.2268 11.2 21.1626 10.825L23.7713 8.85C24.0026 8.675 24.0668 8.3375 23.9255 8.0875L21.4581 3.9375C21.3039 3.6625 20.9827 3.575 20.6999 3.6625L17.6286 4.8625C16.9861 4.3875 16.305 3.9875 15.5468 3.6875L15.0842 0.5125C15.0328 0.2125 14.7758 0 14.4673 0H9.53266C9.22425 0 8.98008 0.2125 8.92868 0.5125L8.46605 3.6875C7.70786 3.9875 7.01392 4.4 6.38424 4.8625L3.31291 3.6625C3.0302 3.5625 2.70893 3.6625 2.55472 3.9375L0.100236 8.0875C-0.0539726 8.35 -0.00256985 8.675 0.254444 8.85L2.86314 10.825C2.79889 11.2 2.74748 11.6125 2.74748 12C2.74748 12.3875 2.77318 12.8 2.83744 13.175L0.228743 15.15C-0.00256982 15.325 -0.0668233 15.6625 0.0745346 15.9125L2.54187 20.0625C2.69608 20.3375 3.01735 20.425 3.30006 20.3375L6.37139 19.1375C7.01392 19.6125 7.69501 20.0125 8.4532 20.3125L8.91583 23.4875C8.98008 23.7875 9.22425 24 9.53266 24H14.4673C14.7758 24 15.0328 23.7875 15.0713 23.4875L15.5339 20.3125C16.2921 20.0125 16.9861 19.6125 17.6158 19.1375ZM19.1939 12.9034L19.0359 14.0567L21.5474 15.9771L20.3175 18.0459L17.3031 16.8681L16.4113 17.5408C15.9153 17.915 15.3777 18.2235 14.7981 18.4528L13.7217 18.8787L13.2669 22H10.7202L10.2654 18.8787L9.18905 18.4528C8.61947 18.2274 8.08915 17.9202 7.5603 17.5292L6.67222 16.8727L3.66968 18.0459L2.44281 15.9823L5.01405 14.0356L4.80871 12.8372C4.76866 12.6035 4.74748 12.3091 4.74748 12C4.74748 11.7729 4.77917 11.4851 4.83441 11.1628L5.03975 9.96435L2.46618 8.01594L3.68503 5.95513L6.68132 7.12581L7.56818 6.47442C8.09262 6.08922 8.63701 5.77073 9.2019 5.54721L10.2783 5.12132L10.7331 2H13.2798L13.7346 5.12132L14.811 5.54721C15.3805 5.77258 15.9109 6.0798 16.4397 6.47075L17.3278 7.12727L20.3303 5.95415L21.5572 8.0177L18.9859 9.96435L19.1913 11.1628C19.2316 11.3978 19.2525 11.6802 19.2525 12C19.2525 12.3282 19.2321 12.6247 19.1939 12.9034Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,12 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function ShareIcon({ 'aria-label': ariaLabel = 'Share', copyrightYear = '2020', ...props }: IconProps) {
+export function ShareIcon({ 'aria-label': ariaLabel = 'Share', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M19.0723 16.9639C18.1566 16.9639 17.3373 17.3253 16.7108 17.8916L8.12048 12.8916C8.18072 12.6145 8.22892 12.3373 8.22892 12.0482C8.22892 11.759 8.18072 11.4819 8.12048 11.2048L16.6145 6.25301C17.2651 6.85542 18.1205 7.22892 19.0723 7.22892C21.0723 7.22892 22.6867 5.61446 22.6867 3.61446C22.6867 1.61446 21.0723 0 19.0723 0C17.0723 0 15.4578 1.61446 15.4578 3.61446C15.4578 3.90361 15.506 4.18072 15.5663 4.45783L7.07229 9.40964C6.42169 8.80723 5.56627 8.43373 4.61446 8.43373C2.61446 8.43373 1 10.0482 1 12.0482C1 14.0482 2.61446 15.6627 4.61446 15.6627C5.56627 15.6627 6.42169 15.2892 7.07229 14.6867L15.6506 19.6988C15.5904 19.9518 15.5542 20.2169 15.5542 20.4819C15.5542 22.4217 17.1325 24 19.0723 24C21.012 24 22.5904 22.4217 22.5904 20.4819C22.5904 18.5422 21.012 16.9639 19.0723 16.9639Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M19.0722892,16.9638554 C18.1566265,16.9638554 17.3373494,17.3253012 16.7108434,17.8915663 L8.12048193,12.8915663 C8.18072289,12.6144578 8.22891566,12.3373494 8.22891566,12.0481928 C8.22891566,11.7590361 8.18072289,11.4819277 8.12048193,11.2048193 L16.6144578,6.25301205 C17.2650602,6.85542169 18.1204819,7.22891566 19.0722892,7.22891566 C21.0722892,7.22891566 22.686747,5.61445783 22.686747,3.61445783 C22.686747,1.61445783 21.0722892,0 19.0722892,0 C17.0722892,0 15.4578313,1.61445783 15.4578313,3.61445783 C15.4578313,3.90361446 15.5060241,4.18072289 15.5662651,4.45783133 L7.07228916,9.40963855 C6.42168675,8.80722892 5.56626506,8.43373494 4.61445783,8.43373494 C2.61445783,8.43373494 1,10.0481928 1,12.0481928 C1,14.0481928 2.61445783,15.6626506 4.61445783,15.6626506 C5.56626506,15.6626506 6.42168675,15.2891566 7.07228916,14.686747 L15.6506024,19.6987952 C15.5903614,19.9518072 15.5542169,20.2168675 15.5542169,20.4819277 C15.5542169,22.4216867 17.1325301,24 19.0722892,24 C21.0120482,24 22.5903614,22.4216867 22.5903614,20.4819277 C22.5903614,18.5421687 21.0120482,16.9638554 19.0722892,16.9638554 Z"
       />
     </Icon>
   );

package/src/components/icon/components/share-ios-icon.tsx CHANGED Viewed

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function ShareIosIcon({ 'aria-label': ariaLabel = 'Share', copyrightYear = '2021', ...props }: IconProps) {
+export function ShareIosIcon({ 'aria-label': ariaLabel = 'Share Ios', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M17 5l-1.42 1.42-2.59-2.59L13 16h-2l.01-12.17-2.59 2.59L7 5l5-5 5 5zm5 5v12c0 1.1-.9 2-2 2H4a2 2 0 01-2-2V10c0-1.11.89-2 2-2h4v2H4v12h16V10h-4V8h4a2 2 0 012 2z"
+        clipRule="evenodd"
+        d="M17 5L15.58 6.42L12.99 3.83L13 16H11L11.01 3.83L8.42 6.42L7 5L12 0L17 5ZM22 10V22C22 23.1 21.1 24 20 24H4C3.46957 24 2.96086 23.7893 2.58579 23.4142C2.21071 23.0391 2 22.5304 2 22V10C2 8.89 2.89 8 4 8H8V10H4V22H20V10H16V8H20C20.5304 8 21.0391 8.21071 21.4142 8.58579C21.7893 8.96086 22 9.46957 22 10Z"
+        fill="currentColor"
       />
     </Icon>
   );

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

@@ -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 ShopIcon({ 'aria-label': ariaLabel = 'Shop', copyrightYear = '2020', ...props }: IconProps) {
+export function ShopIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Shop',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,2 L20,2 L20,0 L4,0 L4,2 Z M4,4 L0,11.00075 L0,14.00075 L2,14.00075 L2,24 L14,24 L14,14.00075 L20,14.00075 L20,24 L22,24 L22,14.00075 L24,14.00075 L24,11.00075 L20,4 L4,4 Z M4,20 L12,20 L12,14 L4,14 L4,20 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M4 0H20V2H4V0Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 4L0 11.0007V14H2V24H22V14H24V11.0007L20 4H4ZM20 22V14H16V22H20ZM14 22V14H4V22H14Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M4 0H20V2H4V0Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 4L0 11.0007V14H2V24H22V14H24V11.0007L20 4H4ZM2 11.5318V12H22V11.5318L18.8393 6H5.16071L2 11.5318ZM20 22V14H16V22H20ZM14 22V14H4V22H14Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/shopping-bag-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 ShoppingBagIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Shopping Bag',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5H4C2.89543 5 2 5.89543 2 7V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V7C22 5.89543 21.1046 5 20 5H17ZM12 2C13.6569 2 15 3.34315 15 5H9C9 3.34315 10.3431 2 12 2ZM12 13C9.23858 13 7 10.7614 7 8H9C9 9.65685 10.3431 11 12 11C13.6569 11 15 9.65685 15 8H17C17 10.7614 14.7614 13 12 13Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M12 13C9.23858 13 7 10.7614 7 8H9C9 9.65685 10.3431 11 12 11C13.6569 11 15 9.65685 15 8H17C17 10.7614 14.7614 13 12 13Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5H4C2.89543 5 2 5.89543 2 7V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V7C22 5.89543 21.1046 5 20 5H17ZM12 2C13.6569 2 15 3.34315 15 5H9C9 3.34315 10.3431 2 12 2ZM4 7V22H20V7H4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/shopping-basket-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 ShoppingBasketIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Shopping Basket',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.45455 9.00001L11.1913 1.11202C11.5906 0.562919 12.4094 0.562919 12.8087 1.11202L18.5455 9.00001H23.3478C23.6768 9.00001 23.9161 9.3123 23.8306 9.63L20.8987 20.52C20.6636 21.3932 19.8718 22 18.9674 22H5.03296C4.12863 22 3.33683 21.3932 3.10173 20.52L0.169813 9.63C0.0842789 9.3123 0.32361 9.00001 0.652621 9.00001H5.45455ZM7.92754 9.00001L12 3.40038L16.0725 9.00001H7.92754ZM14.0002 15C14.0002 16.1046 13.1048 17 12.0002 17C10.8956 17 10.0002 16.1046 10.0002 15C10.0002 13.8954 10.8956 13 12.0002 13C13.1048 13 14.0002 13.8954 14.0002 15Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M14.0002 15C14.0002 16.1046 13.1048 17 12.0002 17C10.8956 17 10.0002 16.1046 10.0002 15C10.0002 13.8954 10.8956 13 12.0002 13C13.1048 13 14.0002 13.8954 14.0002 15Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.45475 9.00001L11.1915 1.11202C11.5908 0.562919 12.4096 0.562919 12.8089 1.11202L18.5457 9.00001H23.3478C23.6768 9.00001 23.9161 9.3123 23.8306 9.63L20.8987 20.52C20.6636 21.3932 19.8718 22 18.9674 22H5.03296C4.12863 22 3.33683 21.3932 3.10173 20.52L0.169813 9.63C0.0842789 9.3123 0.32361 9.00001 0.652621 9.00001H5.45475ZM7.92774 9.00001L12.0002 3.40038L16.0727 9.00001H7.92774ZM2.60988 11L5.03296 20H18.9674L21.3905 11H2.60988Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/sim-card-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 SimCardIcon({ 'aria-label': ariaLabel = 'Sim Card', copyrightYear = '2020', ...props }: IconProps) {
+export function SimCardIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Sim Card',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18,0 C19.1,0 20,0.9 20,2 L20,22 C20,23.1 19.1,24 18,24 L4,24 C2.9,24 2,23.1 2,22 L2,7 L8,0 L18,0 Z M8,14 L8,8 L6,8 L6,14 L8,14 Z M12,20 L12,12 L10,12 L10,20 L12,20 Z M12,10 L12,8 L10,8 L10,10 L12,10 Z M16,20 L16,14 L14,14 L14,20 L16,20 Z M8,20 L8,16 L6,16 L6,20 L8,20 Z M16,12 L16,8 L14,8 L14,12 L16,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18 0H8L2 7V22C2 23.1 2.9 24 4 24H18C19.1 24 20 23.1 20 22V2C20 0.9 19.1 0 18 0ZM8 14H6V8H8V14ZM10 20H12V12H10V20ZM12 10H10V8H12V10ZM14 20H16V14H14V20ZM8 20H6V16H8V20ZM14 12H16V8H14V12Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M8 14H6V8H8V14Z" fill="currentColor" />
+          <path d="M10 20H12V12H10V20Z" fill="currentColor" />
+          <path d="M12 10H10V8H12V10Z" fill="currentColor" />
+          <path d="M14 20H16V14H14V20Z" fill="currentColor" />
+          <path d="M8 20H6V16H8V20Z" fill="currentColor" />
+          <path d="M14 12H16V8H14V12Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 7L8 0H18C19.1 0 20 0.9 20 2V22C20 23.1 19.1 24 18 24H4C2.9 24 2 23.1 2 22V7ZM8.91987 2L4 7.73985V22H18V2H8.91987Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,65 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function SlackIcon({ 'aria-label': ariaLabel = 'Slack', copyrightYear = '2020', ...props }: IconProps) {
+export function SlackIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Slack',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M22.5 0A1.5 1.5 0 0124 1.5v21a1.5 1.5 0 01-1.5 1.5h-21A1.5 1.5 0 010 22.5v-21A1.5 1.5 0 011.5 0h21zM9.767 12.61c-.894 0-1.625.73-1.625 1.623V18.3c0 .894.73 1.624 1.625 1.624.894 0 1.624-.73 1.624-1.624v-4.067c0-.894-.73-1.624-1.624-1.624zm4.466 4.066H12.61V18.3c0 .894.73 1.624 1.624 1.624.894 0 1.625-.73 1.625-1.624 0-.894-.73-1.624-1.625-1.624zm-6.909-4.067H5.7c-.894 0-1.624.73-1.624 1.624 0 .894.73 1.625 1.624 1.625.894 0 1.624-.73 1.624-1.625V12.61zm10.976 0h-4.067c-.894 0-1.624.73-1.624 1.624 0 .894.73 1.625 1.624 1.625H18.3c.894 0 1.624-.73 1.624-1.625 0-.894-.73-1.624-1.624-1.624zm-4.067-8.533c-.894 0-1.624.73-1.624 1.624v4.067c0 .894.73 1.624 1.624 1.624.894 0 1.625-.73 1.625-1.624V5.7c0-.894-.73-1.624-1.625-1.624zM18.3 8.142c-.894 0-1.624.73-1.624 1.625v1.624H18.3c.894 0 1.624-.73 1.624-1.624 0-.894-.73-1.625-1.624-1.625zm-8.533 0H5.7c-.894 0-1.624.73-1.624 1.625 0 .894.73 1.624 1.624 1.624h4.067c.894 0 1.624-.73 1.624-1.624 0-.894-.73-1.625-1.624-1.625zm0-4.066c-.894 0-1.625.73-1.625 1.624 0 .894.73 1.624 1.625 1.624h1.624V5.7c0-.894-.73-1.624-1.624-1.624z"
-      />
+      {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 0H2ZM15.8578 9.76624C15.8578 10.6602 15.1275 11.3904 14.2336 11.3904C13.3396 11.3904 12.6094 10.6602 12.6094 9.76624V5.69941C12.6094 4.80546 13.3396 4.0752 14.2336 4.0752C15.1275 4.0752 15.8578 4.80546 15.8578 5.69941V9.76624ZM16.6763 9.76679C16.6763 8.87284 17.4065 8.14258 18.3005 8.14258C19.1944 8.14258 19.9247 8.87284 19.9247 9.76679C19.9247 10.6607 19.1944 11.391 18.3005 11.391H16.6763V9.76679ZM11.3909 9.76679C11.3909 8.87284 10.6607 8.14258 9.76672 8.14258H5.6999C4.80595 8.14258 4.07568 8.87284 4.07568 9.76679C4.07568 10.6607 4.80595 11.391 5.6999 11.391H9.76672C10.6607 11.391 11.3909 10.6607 11.3909 9.76679ZM9.76679 7.32362C8.87284 7.32362 8.14258 6.59336 8.14258 5.69941C8.14258 4.80546 8.87284 4.0752 9.76679 4.0752C10.6607 4.0752 11.391 4.80546 11.391 5.69941V7.32362H9.76679ZM9.76679 12.6094C8.87284 12.6094 8.14258 13.3396 8.14258 14.2336V18.3004C8.14258 19.1944 8.87284 19.9246 9.76679 19.9246C10.6607 19.9246 11.391 19.1944 11.391 18.3004V14.2336C11.391 13.3396 10.6607 12.6094 9.76679 12.6094ZM7.32411 14.2336C7.32411 15.1275 6.59384 15.8578 5.6999 15.8578C4.80595 15.8578 4.07568 15.1275 4.07568 14.2336C4.07568 13.3396 4.80595 12.6094 5.6999 12.6094H7.32411V14.2336ZM15.8578 18.3C15.8578 17.406 15.1275 16.6758 14.2336 16.6758H12.6094V18.3C12.6094 19.1939 13.3396 19.9242 14.2336 19.9242C15.1275 19.9242 15.8578 19.1939 15.8578 18.3ZM14.2336 15.8578C13.3396 15.8578 12.6094 15.1275 12.6094 14.2336C12.6094 13.3396 13.3396 12.6094 14.2336 12.6094H18.3004C19.1944 12.6094 19.9246 13.3396 19.9246 14.2336C19.9246 15.1275 19.1944 15.8578 18.3004 15.8578H14.2336Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M15.8578 9.76624C15.8578 10.6602 15.1275 11.3904 14.2336 11.3904C13.3396 11.3904 12.6094 10.6602 12.6094 9.76624V5.69941C12.6094 4.80546 13.3396 4.0752 14.2336 4.0752C15.1275 4.0752 15.8578 4.80546 15.8578 5.69941V9.76624Z"
+            fill="currentColor"
+          />
+          <path
+            d="M16.6763 9.76679C16.6763 8.87284 17.4065 8.14258 18.3005 8.14258C19.1944 8.14258 19.9247 8.87284 19.9247 9.76679C19.9247 10.6607 19.1944 11.391 18.3005 11.391H16.6763V9.76679Z"
+            fill="currentColor"
+          />
+          <path
+            d="M11.3909 9.76679C11.3909 8.87284 10.6607 8.14258 9.76672 8.14258H5.6999C4.80595 8.14258 4.07568 8.87284 4.07568 9.76679C4.07568 10.6607 4.80595 11.391 5.6999 11.391H9.76672C10.6607 11.391 11.3909 10.6607 11.3909 9.76679Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.76679 7.32362C8.87284 7.32362 8.14258 6.59336 8.14258 5.69941C8.14258 4.80546 8.87284 4.0752 9.76679 4.0752C10.6607 4.0752 11.391 4.80546 11.391 5.69941V7.32362H9.76679Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.76679 12.6094C8.87284 12.6094 8.14258 13.3396 8.14258 14.2336V18.3004C8.14258 19.1944 8.87284 19.9246 9.76679 19.9246C10.6607 19.9246 11.391 19.1944 11.391 18.3004V14.2336C11.391 13.3396 10.6607 12.6094 9.76679 12.6094Z"
+            fill="currentColor"
+          />
+          <path
+            d="M7.32411 14.2336C7.32411 15.1275 6.59384 15.8578 5.6999 15.8578C4.80595 15.8578 4.07568 15.1275 4.07568 14.2336C4.07568 13.3396 4.80595 12.6094 5.6999 12.6094H7.32411V14.2336Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.8578 18.3C15.8578 17.406 15.1275 16.6758 14.2336 16.6758H12.6094V18.3C12.6094 19.1939 13.3396 19.9242 14.2336 19.9242C15.1275 19.9242 15.8578 19.1939 15.8578 18.3Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.2336 15.8578C13.3396 15.8578 12.6094 15.1275 12.6094 14.2336C12.6094 13.3396 13.3396 12.6094 14.2336 12.6094H18.3004C19.1944 12.6094 19.9246 13.3396 19.9246 14.2336C19.9246 15.1275 19.1944 15.8578 18.3004 15.8578H14.2336Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,45 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function SmsIcon({ 'aria-label': ariaLabel = 'Sms', copyrightYear = '2020', ...props }: IconProps) {
+export function SmsIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Sms',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,16 C24,17.1045695 23.1045695,18 22,18 L6,18 L0,24 L0,2 Z M6,11 C7.1045695,11 8,10.1045695 8,9 C8,7.8954305 7.1045695,7 6,7 C4.8954305,7 4,7.8954305 4,9 C4,10.1045695 4.8954305,11 6,11 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M18,11 C19.1045695,11 20,10.1045695 20,9 C20,7.8954305 19.1045695,7 18,7 C16.8954305,7 16,7.8954305 16,9 C16,10.1045695 16.8954305,11 18,11 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 0C0.89543 0 0 0.89543 0 2V24L6 18H22C23.1046 18 24 17.1046 24 16V2C24 0.89543 23.1046 0 22 0H2ZM6 11C7.10457 11 8 10.1046 8 9C8 7.89543 7.10457 7 6 7C4.89543 7 4 7.89543 4 9C4 10.1046 4.89543 11 6 11ZM14 9C14 10.1046 13.1046 11 12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9ZM18 11C19.1046 11 20 10.1046 20 9C20 7.89543 19.1046 7 18 7C16.8954 7 16 7.89543 16 9C16 10.1046 16.8954 11 18 11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M6 11C7.10457 11 8 10.1046 8 9C8 7.89543 7.10457 7 6 7C4.89543 7 4 7.89543 4 9C4 10.1046 4.89543 11 6 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7C10.8954 7 10 7.89543 10 9C10 10.1046 10.8954 11 12 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M20 9C20 10.1046 19.1046 11 18 11C16.8954 11 16 10.1046 16 9C16 7.89543 16.8954 7 18 7C19.1046 7 20 7.89543 20 9Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2V24L6 18H22C23.1046 18 24 17.1046 24 16V2C24 0.89543 23.1046 0 22 0H2C0.89543 0 0 0.89543 0 2ZM22 16H5.17157L2 19.1716V2H22V16Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function SpaIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Spa',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M12.9853 1.88355C15.286 4.18421 16.4572 7.18664 16.4989 10.2018C14.7126 11.1913 13.1743 12.5734 12.0001 14.2315C10.8258 12.5734 9.28751 11.1913 7.50122 10.2018C7.54294 7.18664 8.71412 4.18421 11.0148 1.88355C11.3306 1.56775 11.6596 1.27324 12.0001 1C12.3405 1.27324 12.6695 1.56775 12.9853 1.88355Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0.154666 10.5447C0.420726 10.5263 0.689273 10.517 0.96 10.517C6.17499 10.517 10.5806 13.9822 12 18.7357C13.4194 13.9822 17.825 10.517 23.04 10.517C23.3107 10.517 23.5793 10.5263 23.8453 10.5447C23.9471 11.1603 24 11.7925 24 12.437C24 18.7993 18.8423 23.957 12.48 23.957C12.3192 23.957 12.1592 23.9537 12 23.9471C11.8408 23.9537 11.6808 23.957 11.52 23.957C5.15768 23.957 0 18.7993 0 12.437C0 11.7925 0.052925 11.1603 0.154666 10.5447Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M16.4989 10.2018C15.7617 10.6102 15.0666 11.0855 14.422 11.6194C14.7685 8.85484 13.9612 5.97324 12.0001 3.75395C10.0389 5.97324 9.23161 8.85484 9.5781 11.6194C8.93349 11.0855 8.23848 10.6102 7.50122 10.2018C7.54294 7.18664 8.71412 4.18421 11.0148 1.88355C11.3306 1.56775 11.6596 1.27324 12.0001 1C12.3405 1.27324 12.6695 1.56775 12.9853 1.88355C15.286 4.18421 16.4572 7.18664 16.4989 10.2018Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.96 10.517C5.17213 10.517 8.85627 12.7776 10.8653 16.1517C11.3437 16.9551 11.7271 17.8216 12 18.7357C12.273 17.8216 12.6563 16.9551 13.1347 16.1517C15.1437 12.7776 18.8279 10.517 23.04 10.517C23.3107 10.517 23.5793 10.5263 23.8453 10.5447C23.9471 11.1603 24 11.7925 24 12.437C24 18.7832 18.8684 23.9309 12.5282 23.9569L12.48 23.957C12.3192 23.957 12.1592 23.9537 12 23.9471C11.8408 23.9537 11.6808 23.957 11.52 23.957L11.4718 23.9569C5.13164 23.9309 0 18.7832 0 12.437C0 11.7925 0.052925 11.1603 0.154666 10.5447C0.420726 10.5263 0.689273 10.517 0.96 10.517ZM13.9164 19.3079C14.9939 15.6992 18.1547 12.9915 21.999 12.5733C21.9292 17.5498 18.0409 21.603 13.132 21.935L13.9164 19.3079ZM10.0836 19.3079L10.868 21.935C5.95912 21.603 2.07078 17.5498 2.00096 12.5732C5.84533 12.9915 9.00606 15.6992 10.0836 19.3079Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/star-half-icon.tsx CHANGED Viewed

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
-export function StarHalfIcon({ 'aria-label': ariaLabel = 'Star Half', copyrightYear = '2020', ...props }: IconProps) {
+export function StarHalfIcon({ 'aria-label': ariaLabel = 'Star Half', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M12,0 L9,9 L0,9 L7.5,14.25 L4.5,23.25 L12,17.24925 L19.5,23.25 L16.49925,14.25 L24,9 L15,9 L12,0 Z M12.93675,16.0785 L12,15.32925 L12,4.743 L13.5765,9.474 L13.91925,10.49925 L15,10.49925 L19.24125,10.49925 L15.63975,13.02075 L14.72325,13.66275 L15.0765,14.724 L16.47075,18.90525 L12.93675,16.0785 Z"
+        clipRule="evenodd"
+        d="M9 9L12 0L15 9H24L16.4993 14.25L19.5 23.25L12 17.2493L4.5 23.25L7.5 14.25L0 9H9ZM12 15.3293L16.4707 18.9053L14.7232 13.6628L19.2412 10.4993H13.9193L12 4.743V15.3293Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/star-rate-icon.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+export function StarRateIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Star Rate',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          d="M12 0L9 9H0L7.5 14.25L4.5 23.25L12 17.2493L19.5 23.25L16.4993 14.25L24 9H15L12 0Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.4415 11H6.34473L9.86915 13.4671L8.53924 17.4568L12 14.6879L15.46 17.4562L14.13 13.4671L17.6548 11H13.5585L12 6.32456L10.4415 11ZM9 9H0L7.5 14.25L4.5 23.25L12 17.2493L19.5 23.25L16.4993 14.25L24 9H15L12 0L9 9Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}