@westpac/ui 0.1.0 → 0.2.0

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

@@ -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 PayIcon({ 'aria-label': ariaLabel = 'Pay', copyrightYear = '2020', ...props }: IconProps) {
+export function PayIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Pay',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,14 L4,22 L4,18 L0,18 L0,10 L4,10 L4,6 L12,14 Z M14.8269987,14.0014284 C14.8856891,14.0004762 14.9433762,14 15,14 C18.00375,14 24,15.34 24,18 L24,22 L6.82842712,22 L14.8269987,14.0014284 L14.8269987,14.0014284 Z M20,7 C20,9.7625 17.7625,12 15,12 C12.2375,12 10,9.7625 10,7 C10,4.2375 12.2375,2 15,2 C17.7625,2 20,4.2375 20,7 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M15 2C17.7625 2 20 4.2375 20 7C20 9.7625 17.7625 12 15 12C12.2375 12 10 9.7625 10 7C10 4.2375 12.2375 2 15 2Z"
+            fill="currentColor"
+          />
+          <path d="M12 14L4 6V10H0V18H4V22L12 14Z" fill="currentColor" />
+          <path
+            d="M14.827 14.0014C14.8857 14.0005 14.9434 14 15 14C18.0037 14 24 15.34 24 18V22H6.82843L14.827 14.0014Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20 7C20 4.2375 17.7625 2 15 2C12.2375 2 10 4.2375 10 7C10 9.7625 12.2375 12 15 12C17.7625 12 20 9.7625 20 7ZM15 4C16.6579 4 18 5.34207 18 7C18 8.65793 16.6579 10 15 10C13.3421 10 12 8.65793 12 7C12 5.34207 13.3421 4 15 4Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M23.9999 22H9V20H21.9999V18.0569C21.9734 18.0148 21.9055 17.9286 21.7475 17.799C21.3883 17.5043 20.7844 17.1818 19.9554 16.8866C18.3034 16.2984 16.281 16 15 16V14C18.0038 14 23.9999 15.34 23.9999 18V22Z"
+            fill="currentColor"
+          />
+          <path d="M12 14L4 6V10H0V18H4V22L12 14Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PayIdIcon({ 'aria-label': ariaLabel = 'Pay Id', copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 0C2.68629 0 0 2.68629 0 6V18C0 21.3137 2.68629 24 6 24H18C21.3137 24 24 21.3137 24 18V6C24 2.68629 21.3137 0 18 0H6ZM10.8544 5.75669L10.1729 5.83989V14.4609H11.7238V7.26271C13.0484 7.25243 15.9333 7.52633 16.9523 9.94475L18.3816 9.34272C17.6338 7.57214 16.0791 6.3849 13.8757 5.92216C12.8825 5.71694 11.8641 5.66117 10.8544 5.75669ZM5.47033 6.17948C5.34297 6.37039 5.27508 6.59478 5.27527 6.82427C5.27552 7.1318 5.39785 7.42664 5.61539 7.644C5.83293 7.86137 6.12787 7.98347 6.4354 7.98347C6.66489 7.98347 6.88923 7.9154 7.08003 7.78788C7.27083 7.66037 7.41953 7.47912 7.50731 7.26708C7.59509 7.05504 7.61801 6.82173 7.57317 6.59666C7.52833 6.37159 7.41774 6.16488 7.2554 6.00267C7.09306 5.84046 6.88626 5.73004 6.66115 5.68539C6.43605 5.64073 6.20276 5.66384 5.99079 5.75179C5.77882 5.83974 5.5977 5.98858 5.47033 6.17948ZM18.3882 14.8536C18.5701 14.3953 18.6957 13.9165 18.7621 13.4279L20.3364 13.4298L18.1171 10.6459L15.9034 13.4251H17.1935C17.1464 13.7058 17.0696 13.9806 16.9644 14.245C16.1801 16.0866 14.2104 17.0214 11.1105 17.0214H7.16083V10.0102H5.609V18.5733H11.1068C14.8872 18.5733 17.3374 17.3215 18.3882 14.8536Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

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

@@ -1,20 +1,43 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function PayToMobileIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Pay To Mobile',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,17 L2,19 C4.76,19 7,21.24 7,24 L9,24 C9,20.13 5.87,17 2,17 Z M2,21 L2,24 L5,24 C5,22.34 3.66,21 2,21 Z M2,13 C8.08,13 13,17.92 13,24 L11,24 C11,19.03 6.97,15 2,15 L2,13 Z M18,24 L15,24 C15,22.6043798 14.7800789,21.260125 14.3730012,20 L18,20 L18,4 L8,4 L8,12.4644213 C7.36250073,12.1321607 6.69400958,11.8511954 6,11.6269988 L6,2 C6,0.9 6.9,0 8,0 L18,0 C19.1,0 20,0.9 20,2 L20,22 C20,23.1 19.1,24 18,24 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M6 2C6 0.89543 6.89543 0 8 0H18C19.1046 0 20 0.895431 20 2V22C20 23.1046 19.1046 24 18 24H10V22H17.8471C17.9478 21.3481 18 20.6801 18 20C18 13.1568 12.7124 7.54851 6 7.03789V2Z"
+            fill="currentColor"
+          />
+          <path d="M5 9V11C9.97 11 14 15.03 14 20H16C16 13.92 11.08 9 5 9Z" fill="currentColor" />
+          <path d="M5 15V13C8.87 13 12 16.13 12 20H10C10 17.24 7.76 15 5 15Z" fill="currentColor" />
+          <path
+            d="M8 20C8 18.34 6.66 17 5 17C3.34315 17 2 18.3431 2 20C2 21.6569 3.34315 23 5 23C6.65685 23 8 21.6569 8 20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M8 0C6.89543 0 6 0.89543 6 2V7H8V2H18V22H10V24H18C19.1046 24 20 23.1046 20 22V2C20 0.895431 19.1046 0 18 0H8Z"
+            fill="currentColor"
+          />
+          <path d="M5 11V9C11.08 9 16 13.92 16 20H14C14 15.03 9.97 11 5 11Z" fill="currentColor" />
+          <path d="M5 13V15C7.76 15 10 17.24 10 20H12C12 16.13 8.87 13 5 13Z" fill="currentColor" />
+          <path
+            d="M8 20C8 18.34 6.66 17 5 17C3.34315 17 2 18.3431 2 20C2 21.6569 3.34315 23 5 23C6.65685 23 8 21.6569 8 20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +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 PaypassIcon({ 'aria-label': ariaLabel = 'Paypass', copyrightYear = '2020', ...props }: IconProps) {
+export function PaypassIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Paypass',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14.3137085,0.686291501 C17.209139,3.581722 19,7.581722 19,12 C19,16.418278 17.209139,20.418278 14.3137085,23.3137085 L12.8994949,21.8994949 C15.4329966,19.3659932 17,15.8659932 17,12 C17,8.13400675 15.4329966,4.63400675 12.8994949,2.10050506 L14.3137085,0.686291501 L14.3137085,0.686291501 Z M11.4852814,3.51471863 C13.6568542,5.6862915 15,8.6862915 15,12 C15,15.3137085 13.6568542,18.3137085 11.4852814,20.4852814 L10.0710678,19.0710678 C11.8807119,17.2614237 13,14.7614237 13,12 C13,9.23857625 11.8807119,6.73857625 10.0710678,4.92893219 L11.4852814,3.51471863 Z M8.65685425,6.34314575 C10.1045695,7.790861 11,9.790861 11,12 C11,14.209139 10.1045695,16.209139 8.65685425,17.6568542 L7.24264069,16.2426407 C8.32842712,15.1568542 9,13.6568542 9,12 C9,10.3431458 8.32842712,8.84314575 7.24264069,7.75735931 L8.65685425,6.34314575 L8.65685425,6.34314575 Z M5.82842712,9.17157288 C6.55228475,9.8954305 7,10.8954305 7,12 C7,13.1045695 6.55228475,14.1045695 5.82842712,14.8284271 L4.41421356,13.4142136 C4.77614237,13.0522847 5,12.5522847 5,12 C5,11.4477153 4.77614237,10.9477153 4.41421356,10.5857864 L5.82842712,9.17157288 L5.82842712,9.17157288 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M19 12C19 7.58171 17.2091 3.58171 14.3137 0.686279L12.8995 2.10049C15.433 4.63399 17 8.13399 17 12C17 15.866 15.433 19.366 12.8995 21.8995L14.3137 23.3137C17.2091 20.4183 19 16.4183 19 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15 12C15 8.68628 13.6568 5.68628 11.4853 3.51471L10.071 4.92892C11.8807 6.73856 13 9.23856 13 12C13 14.7614 11.8807 17.2614 10.071 19.0711L11.4853 20.4853C13.6568 18.3137 15 15.3137 15 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.65683 6.34313C10.1045 7.79085 11 9.79085 11 12C11 14.2091 10.1045 16.2091 8.65683 17.6568L7.24261 16.2426C8.3284 15.1568 8.99997 13.6568 8.99997 12C8.99997 10.3431 8.3284 8.84313 7.24261 7.75735L8.65683 6.34313Z"
+            fill="currentColor"
+          />
+          <path
+            d="M6.99997 12C6.99997 10.8954 6.55226 9.89542 5.8284 9.17156L4.41418 10.5858C4.77611 10.9477 4.99997 11.4477 4.99997 12C4.99997 12.5523 4.77611 13.0523 4.41418 13.4142L5.8284 14.8284C6.55226 14.1046 6.99997 13.1046 6.99997 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M19.0001 12C19.0001 7.58171 17.2092 3.58171 14.3138 0.686279L12.8996 2.10049C15.4331 4.63399 17.0001 8.13399 17.0001 12C17.0001 15.866 15.4331 19.366 12.8996 21.8995L14.3138 23.3137C17.2092 20.4183 19.0001 16.4183 19.0001 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.0001 12C15.0001 8.68628 13.6569 5.68628 11.4854 3.51471L10.0712 4.92892C11.8808 6.73856 13.0001 9.23856 13.0001 12C13.0001 14.7614 11.8808 17.2614 10.0712 19.0711L11.4854 20.4853C13.6569 18.3137 15.0001 15.3137 15.0001 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.65695 6.34313C10.1047 7.79085 11.0001 9.79085 11.0001 12C11.0001 14.2091 10.1047 16.2091 8.65695 17.6568L7.24273 16.2426C8.32852 15.1568 9.00009 13.6568 9.00009 12C9.00009 10.3431 8.32852 8.84313 7.24273 7.75735L8.65695 6.34313Z"
+            fill="currentColor"
+          />
+          <path
+            d="M7.00009 12C7.00009 10.8954 6.55238 9.89542 5.82852 9.17156L4.41431 10.5858C4.77624 10.9477 5.00009 11.4477 5.00009 12C5.00009 12.5523 4.77624 13.0523 4.41431 13.4142L5.82852 14.8284C6.55238 14.1046 7.00009 13.1046 7.00009 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,49 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PdfFileIcon({ 'aria-label': ariaLabel = 'PDF File', copyrightYear = '2020', ...props }: IconProps) {
+export function PdfFileIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Pdf File',
+  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 M18.5030447,16.5503616 C18.417082,16.6046746 18.1736303,16.6361895 18.0167975,16.6361895 C17.5102081,16.6361895 16.8835333,16.3988218 16.0055323,16.014608 C16.342165,15.9891278 16.6518932,15.9757172 16.9294675,15.9757172 C17.4367132,15.9757172 17.5882963,15.9743762 18.085699,16.1037885 C18.581133,16.2325303 18.5883512,16.4960487 18.5030447,16.5503616 L18.5030447,16.5503616 Z M9.68431929,16.6308252 C9.87789946,16.2761148 10.0800103,15.9026294 10.2860583,15.5063461 C10.7880544,14.5367594 11.1056571,13.7763782 11.3418906,13.1521146 C11.8117326,14.0258154 12.3977228,14.7687629 13.0847684,15.3628526 C13.1700749,15.4372815 13.2612872,15.5117103 13.3577492,15.5854687 C11.9580661,15.8684324 10.7486822,16.2124144 9.68431929,16.6308252 L9.68431929,16.6308252 Z M11.3162986,7.45663106 C11.5945291,7.45663106 11.7526743,8.17342785 11.7657983,8.8452991 C11.7789224,9.51717036 11.6253707,9.98855309 11.4344153,10.3365583 C11.2762702,9.82092054 11.2001505,9.00622635 11.2001505,8.4744959 C11.2001505,8.4744959 11.188995,7.45663106 11.3162986,7.45663106 L11.3162986,7.45663106 Z M5.84552595,20.3301403 C6.00301491,19.8889315 6.62772111,19.0165717 7.55165632,18.2441209 C7.60940227,18.1958427 7.75311095,18.0597251 7.88369554,17.9316538 C6.91776327,19.5060587 6.27140234,20.1330045 5.84552595,20.3301403 L5.84552595,20.3301403 Z M18.7720883,15.6243594 C18.4932016,15.3427367 17.8711203,15.192538 16.9268427,15.1804684 C16.2870438,15.1730926 15.5179728,15.2307582 14.7088732,15.3467599 C14.3466486,15.1321902 13.9726124,14.9008573 13.6806016,14.6205757 C12.8911882,13.8682408 12.2336718,12.8235548 11.8235443,11.6735955 C11.8504487,11.5663106 11.8721034,11.4724364 11.8937581,11.3765506 C11.8937581,11.3765506 12.3380082,8.79769146 12.2205477,7.92533167 C12.2041426,7.80664783 12.1942995,7.77178026 12.1628018,7.67790603 L12.1247419,7.5773265 C12.0033442,7.29235117 11.7671107,6.99061258 11.3950431,7.00737583 L11.1771834,7 L11.1706213,7 C10.7572128,7 10.4192678,7.21658125 10.3306802,7.53910628 C10.0609804,8.55495953 10.3392109,10.0730399 10.8425193,12.0390344 L10.7139033,12.3602184 C10.3529912,13.2587289 9.90152281,14.1632741 9.50255078,14.9618756 L9.45071067,15.0658077 C9.03205252,15.9039705 8.6501418,16.6160736 8.3049785,17.2202213 L7.94865974,17.4126634 C7.92306778,17.426074 7.31345427,17.7566454 7.1697456,17.8444849 C5.95445581,18.5860913 5.14994972,19.4282772 5.01674031,20.0961253 C4.97343085,20.3086834 5.00492864,20.5815892 5.22147596,20.7076488 L5.56598305,20.8853393 C5.71559756,20.9617798 5.87308652,21 6.0338565,21 C6.90070197,21 7.90469407,19.8983189 9.28797208,17.4300972 C10.886485,16.8983668 12.7061387,16.4564874 14.3007144,16.2130849 C15.5160041,16.9124479 17.0101806,17.3979118 17.9531458,17.3979118 C18.121134,17.3979118 18.2654989,17.3824896 18.3829594,17.3496336 C18.5640717,17.3013554 18.716311,17.1960822 18.809492,17.0525887 C18.9925729,16.770966 19.0293203,16.3833996 18.980105,15.9864457 C18.9630437,15.8697735 18.8718313,15.7242684 18.7720883,15.6243594 L18.7720883,15.6243594 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M11.3163 7.45663C11.5945 7.45663 11.7527 8.17343 11.7658 8.8453C11.7789 9.51717 11.6254 9.98855 11.4344 10.3366C11.2763 9.82092 11.2002 9.00623 11.2002 8.4745C11.2002 8.4745 11.189 7.45663 11.3163 7.45663Z"
+            fill="currentColor"
+          />
+          <path
+            d="M10.2861 15.5063C10.08 15.9026 9.8779 16.2761 9.68432 16.6308C10.7487 16.2124 11.9581 15.8684 13.3577 15.5855C13.2613 15.5117 13.1701 15.4373 13.0848 15.3629C12.3977 14.7688 11.8117 14.0258 11.3419 13.1521C11.1057 13.7764 10.7881 14.5368 10.2861 15.5063Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.0168 16.6362C18.1736 16.6362 18.4171 16.6047 18.503 16.5504C18.5884 16.496 18.5811 16.2325 18.0857 16.1038C17.5934 15.9757 17.4399 15.9757 16.9449 15.9757H16.9295C16.6519 15.9757 16.3422 15.9891 16.0055 16.0146C16.8835 16.3988 17.5102 16.6362 18.0168 16.6362Z"
+            fill="currentColor"
+          />
+          <path
+            d="M7.55166 18.2441C6.62772 19.0166 6.00302 19.8889 5.84553 20.3301C6.2714 20.133 6.91776 19.5061 7.8837 17.9317C7.75311 18.0597 7.6094 18.1958 7.55166 18.2441Z"
+            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 22V2ZM16 2L20 6H16V2ZM18.7721 15.6244C18.4932 15.3427 17.8711 15.1925 16.9268 15.1805C16.287 15.1731 15.518 15.2308 14.7089 15.3468C14.3466 15.1322 13.9726 14.9009 13.6806 14.6206C12.8912 13.8682 12.2337 12.8236 11.8235 11.6736C11.8504 11.5663 11.8721 11.4724 11.8938 11.3766C11.8938 11.3766 12.338 8.79769 12.2205 7.92533C12.2041 7.80665 12.1943 7.77178 12.1628 7.67791L12.1247 7.57733C12.0033 7.29235 11.7671 6.99061 11.395 7.00738L11.1772 7H11.1706C10.7572 7 10.4193 7.21658 10.3307 7.53911C10.061 8.55496 10.3392 10.073 10.8425 12.039L10.7139 12.3602C10.353 13.2587 9.90152 14.1633 9.50255 14.9619L9.45071 15.0658C9.03205 15.904 8.65014 16.6161 8.30498 17.2202L7.94866 17.4127C7.92307 17.4261 7.31345 17.7566 7.16975 17.8445C5.95446 18.5861 5.14995 19.4283 5.01674 20.0961C4.97343 20.3087 5.00493 20.5816 5.22148 20.7076L5.56598 20.8853C5.7156 20.9618 5.87309 21 6.03386 21C6.9007 21 7.90469 19.8983 9.28797 17.4301C10.8865 16.8984 12.7061 16.4565 14.3007 16.2131C15.516 16.9124 17.0102 17.3979 17.9531 17.3979C18.1211 17.3979 18.2655 17.3825 18.383 17.3496C18.5641 17.3014 18.7163 17.1961 18.8095 17.0526C18.9926 16.771 19.0293 16.3834 18.9801 15.9864C18.963 15.8698 18.8718 15.7243 18.7721 15.6244Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <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 2H16V6H20V22H4V2ZM18.0168 16.6362C18.1736 16.6362 18.4171 16.6047 18.503 16.5504C18.5884 16.496 18.5811 16.2325 18.0857 16.1038C17.5934 15.9757 17.4399 15.9757 16.9449 15.9757H16.9295C16.6519 15.9757 16.3422 15.9891 16.0055 16.0146C16.8835 16.3988 17.5102 16.6362 18.0168 16.6362ZM9.68432 16.6308C9.8779 16.2761 10.08 15.9026 10.2861 15.5063C10.7881 14.5368 11.1057 13.7764 11.3419 13.1521C11.8117 14.0258 12.3977 14.7688 13.0848 15.3629C13.1701 15.4373 13.2613 15.5117 13.3577 15.5855C11.9581 15.8684 10.7487 16.2124 9.68432 16.6308ZM11.7658 8.8453C11.7527 8.17343 11.5945 7.45663 11.3163 7.45663C11.189 7.45663 11.2002 8.4745 11.2002 8.4745C11.2002 9.00623 11.2763 9.82092 11.4344 10.3366C11.6254 9.98855 11.7789 9.51717 11.7658 8.8453ZM5.84553 20.3301C6.00302 19.8889 6.62772 19.0166 7.55166 18.2441C7.6094 18.1958 7.75311 18.0597 7.8837 17.9317C6.91776 19.5061 6.2714 20.133 5.84553 20.3301ZM16.9268 15.1805C17.8711 15.1925 18.4932 15.3427 18.7721 15.6244C18.8718 15.7243 18.963 15.8698 18.9801 15.9864C19.0293 16.3834 18.9926 16.771 18.8095 17.0526C18.7163 17.1961 18.5641 17.3014 18.383 17.3496C18.2655 17.3825 18.1211 17.3979 17.9531 17.3979C17.0102 17.3979 15.516 16.9124 14.3007 16.2131C12.7061 16.4565 10.8865 16.8984 9.28797 17.4301C7.90469 19.8983 6.9007 21 6.03386 21C5.87309 21 5.7156 20.9618 5.56598 20.8853L5.22148 20.7076C5.00493 20.5816 4.97343 20.3087 5.01674 20.0961C5.14995 19.4283 5.95446 18.5861 7.16975 17.8445C7.31345 17.7566 7.92307 17.4261 7.94866 17.4127L8.30498 17.2202C8.65014 16.6161 9.03205 15.904 9.45071 15.0658L9.50255 14.9619C9.90152 14.1633 10.353 13.2587 10.7139 12.3602L10.8425 12.039C10.3392 10.073 10.061 8.55496 10.3307 7.53911C10.4193 7.21658 10.7572 7 11.1706 7H11.1772L11.395 7.00738C11.7671 6.99061 12.0033 7.29235 12.1247 7.57733L12.1628 7.67791C12.1943 7.77178 12.2041 7.80665 12.2205 7.92533C12.338 8.79769 11.8938 11.3766 11.8938 11.3766C11.8721 11.4724 11.8504 11.5663 11.8235 11.6736C12.2337 12.8236 12.8912 13.8682 13.6806 14.6206C13.9726 14.9009 14.3466 15.1322 14.7089 15.3468C15.518 15.2308 16.287 15.1731 16.9268 15.1805Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,16 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PendingIcon({ 'aria-label': ariaLabel = 'Pending', copyrightYear = '2020', ...props }: IconProps) {
+export function PendingIcon({ 'aria-label': ariaLabel = 'Pending', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M20 16.5L24 12H21C21 6.20101 16.299 1.5 10.5 1.5C4.70101 1.5 0 6.20101 0 12C0 17.799 4.70101 22.5 10.5 22.5C13.0572 22.5 15.4009 21.5859 17.2221 20.0665L15.9417 18.53C14.4674 19.76 12.5701 20.5 10.5 20.5C5.80558 20.5 2 16.6944 2 12C2 7.30558 5.80558 3.5 10.5 3.5C15.1944 3.5 19 7.30558 19 12H16L20 16.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.5 14.5C11.8807 14.5 13 13.3807 13 12C13 10.6193 11.8807 9.5 10.5 9.5C9.11929 9.5 8 10.6193 8 12C8 13.3807 9.11929 14.5 10.5 14.5Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 L20,16.5 L16,12 L19,12 C19,7.30557963 15.1944204,3.5 10.5,3.5 C5.80557963,3.5 2,7.30557963 2,12 C2,16.6944204 5.80557963,20.5 10.5,20.5 C12.5701131,20.5 14.4673847,19.7599774 15.9417031,18.5300437 L17.2221038,20.0665245 C15.4008869,21.5858544 13.0571985,22.5 10.5,22.5 C4.70101013,22.5 0,17.7989899 0,12 C0,6.20101013 4.70101013,1.5 10.5,1.5 C16.2989899,1.5 21,6.20101013 21,12 L24,12 Z M10.5,14.5 C9.11928813,14.5 8,13.3807119 8,12 C8,10.6192881 9.11928813,9.5 10.5,9.5 C11.8807119,9.5 13,10.6192881 13,12 C13,13.3807119 11.8807119,14.5 10.5,14.5 Z"
       />
     </Icon>
   );

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

@@ -1,16 +1,56 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PeopleIcon({ 'aria-label': ariaLabel = 'People', copyrightYear = '2020', ...props }: IconProps) {
+export function PeopleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'People',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M17.7223772,14.2593068 C20.6642206,14.7663417 24,16.0160056 24,18 L24,22 L20,22 L20,18 C20,16.4654583 19.112709,15.214323 17.7223772,14.2593068 L17.7223772,14.2593068 Z M13.9997631,11.9000397 L13.9997631,11.9000397 C15.237188,10.6375754 16,8.90816252 16,7 C16,5.09183748 15.237188,3.36242456 13.9997631,2.09996035 C14.3229246,2.03440871 14.6574255,2 15,2 C17.7625,2 20,4.2375 20,7 C20,9.7625 17.7625,12 15,12 C14.6574255,12 14.3229246,11.9655913 13.9997631,11.9000397 Z M14,7 C14,9.7625 11.7625,12 9,12 C6.2375,12 4,9.7625 4,7 C4,4.2375 6.2375,2 9,2 C11.7625,2 14,4.2375 14,7 Z M0,18 C0,15.34 5.99625,14 9,14 C12.00375,14 18,15.34 18,18 L18,22 L0,22 L0,18 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M14 7C14 4.2375 11.7625 2 9 2C6.2375 2 4 4.2375 4 7C4 9.7625 6.2375 12 9 12C11.7625 12 14 9.7625 14 7Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15 12C14.6574 12 14.3229 11.9656 13.9998 11.9C15.2372 10.6376 16 8.90816 16 7C16 5.09184 15.2372 3.36242 13.9998 2.09996C14.3229 2.03441 14.6574 2 15 2C17.7625 2 20 4.2375 20 7C20 9.7625 17.7625 12 15 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M24 18C24 16.016 20.6642 14.7663 17.7224 14.2593C19.1127 15.2143 20 16.4655 20 18V22H24V18Z"
+            fill="currentColor"
+          />
+          <path d="M0 22V18C0 15.34 5.99625 14 9 14C12.0037 14 18 15.34 18 18V22H0Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 18V22H18V18C18 15.34 12.0037 14 9 14C5.99625 14 0 15.34 0 18ZM16 18.0569V20H2V18.0569C2.0265 18.0148 2.09443 17.9286 2.25237 17.799C2.6116 17.5043 3.2155 17.1818 4.04451 16.8866C5.69649 16.2984 7.719 16 9 16C10.281 16 12.3035 16.2984 13.9555 16.8866C14.7845 17.1818 15.3884 17.5043 15.7476 17.799C15.9056 17.9286 15.9735 18.0148 16 18.0569ZM1.98507 18.0869C1.98507 18.0869 1.98593 18.0818 1.99143 18.0715C1.98846 18.0818 1.98507 18.0869 1.98507 18.0869ZM16.0149 18.0869C16.0149 18.0869 16.0115 18.0818 16.0086 18.0715C16.0141 18.0818 16.0149 18.0869 16.0149 18.0869Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9 2C11.7625 2 14 4.2375 14 7C14 9.7625 11.7625 12 9 12C6.2375 12 4 9.7625 4 7C4 4.2375 6.2375 2 9 2ZM9 4C10.6579 4 12 5.34207 12 7C12 8.65793 10.6579 10 9 10C7.34207 10 6 8.65793 6 7C6 5.34207 7.34207 4 9 4Z"
+            fill="currentColor"
+          />
+          <path
+            d="M13.9998 11.9C14.3229 11.9656 14.6574 12 15 12C17.7625 12 20 9.7625 20 7C20 4.2375 17.7625 2 15 2C14.6574 2 14.3229 2.03441 13.9998 2.09996C15.2372 3.36242 16 5.09184 16 7C16 8.90816 15.2372 10.6376 13.9998 11.9Z"
+            fill="currentColor"
+          />
+          <path
+            d="M17.7224 14.2598C20.6643 14.7668 24 16.0165 24 18.0005V22.0005H20V18.0005C20 16.4659 19.1127 15.2148 17.7224 14.2598Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/percent-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 PercentIcon({ 'aria-label': ariaLabel = 'Percent', copyrightYear = '2020', ...props }: IconProps) {
+export function PercentIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Percent',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M15.1719126,16.2398208 C15.1886586,16.4961075 15.2177821,16.6970596 15.258555,16.8426771 C15.300056,16.9875665 15.3612153,17.0873145 15.4427611,17.1397368 C15.5235788,17.1921591 15.6284234,17.2183702 15.7572949,17.2183702 C15.8847102,17.2183702 15.9895547,17.1921591 16.0711005,17.1397368 C16.1533744,17.0873145 16.2145337,16.9875665 16.2545785,16.8426771 C16.2960795,16.6970596 16.325203,16.4961075 16.341949,16.2398208 C16.3601512,15.983534 16.3688883,15.6566228 16.3688883,15.2612714 C16.3688883,14.8535424 16.3601512,14.525175 16.341949,14.2739849 C16.325203,14.0235228 16.2960795,13.8254831 16.2545785,13.6798656 C16.2145337,13.53352 16.1533744,13.4352282 16.0711005,13.3828059 C15.9895547,13.3303836 15.8847102,13.3041725 15.7572949,13.3041725 C15.6284234,13.3041725 15.5235788,13.3303836 15.4427611,13.3828059 C15.3612153,13.4352282 15.300056,13.53352 15.258555,13.6798656 C15.2177821,13.8254831 15.1886586,14.0235228 15.1719126,14.2739849 C15.1544385,14.525175 15.1457015,14.8535424 15.1457015,15.2612714 C15.1457015,15.6566228 15.1544385,15.983534 15.1719126,16.2398208 L15.1719126,16.2398208 Z M13.1536544,13.7140857 C13.2461215,13.2888827 13.4004761,12.9437693 13.6159899,12.675105 C13.8315038,12.4071689 14.1147298,12.2120414 14.4634836,12.0897228 C14.8136936,11.9674041 15.2447214,11.9062447 15.7572949,11.9062447 C16.2698684,11.9062447 16.7008961,11.9674041 17.050378,12.0897228 C17.39986,12.2120414 17.6816298,12.4071689 17.8971437,12.675105 C18.1126575,12.9437693 18.267012,13.2888827 18.3609353,13.7140857 C18.4541305,14.1400168 18.5,14.6555027 18.5,15.2612714 C18.5,15.86704 18.4541305,16.3817978 18.3609353,16.8070008 C18.267012,17.2322039 18.1126575,17.5795015 17.8971437,17.8467096 C17.6816298,18.1153738 17.39986,18.3017642 17.050378,18.4066088 C16.7008961,18.5107253 16.2698684,18.5631476 15.7572949,18.5631476 C15.2447214,18.5631476 14.8136936,18.5107253 14.4634836,18.4066088 C14.1147298,18.3017642 13.8315038,18.1153738 13.6159899,17.8467096 C13.4004761,17.5795015 13.2461215,17.2322039 13.1536544,16.8070008 C13.0604593,16.3817978 13.0131336,15.86704 13.0131336,15.2612714 C13.0131336,14.6555027 13.0604593,14.1400168 13.1536544,13.7140857 L13.1536544,13.7140857 Z M15.7223467,6 L10.1823299,18.5631476 L8.26090731,18.5631476 L13.7994679,6 L15.7223467,6 Z M7.65805097,10.333576 C7.67552506,10.5898628 7.70392047,10.7908149 7.74542145,10.9364324 C7.78546626,11.0820498 7.8466256,11.1810697 7.92889947,11.233492 C8.00971717,11.2859143 8.11528983,11.3121255 8.24270512,11.3121255 C8.3708485,11.3121255 8.47642117,11.2859143 8.55796696,11.233492 C8.63878465,11.1810697 8.69994399,11.0820498 8.74144497,10.9364324 C8.78221787,10.7908149 8.81134136,10.5898628 8.82881546,10.333576 C8.84628955,10.0772893 8.85429852,9.75110613 8.85429852,9.3550266 C8.85429852,8.94729768 8.84628955,8.61820218 8.82881546,8.36701204 C8.81134136,8.11727807 8.78221787,7.91923831 8.74144497,7.77362083 C8.69994399,7.62800336 8.63878465,7.52898348 8.55796696,7.47656119 C8.47642117,7.4241389 8.3708485,7.39792775 8.24270512,7.39792775 C8.11528983,7.39792775 8.00971717,7.4241389 7.92889947,7.47656119 C7.8466256,7.52898348 7.78546626,7.62800336 7.74542145,7.77362083 C7.70392047,7.91923831 7.67552506,8.11727807 7.65805097,8.36701204 C7.63984878,8.61820218 7.63183982,8.94729768 7.63183982,9.3550266 C7.63183982,9.75110613 7.63984878,10.0772893 7.65805097,10.333576 L7.65805097,10.333576 Z M5.63906469,7.80856903 C5.73225987,7.383366 5.88661439,7.03679642 6.10285634,6.76886026 C6.3183702,6.50092411 6.6008681,6.3057967 6.95035004,6.18274993 C7.29910389,6.06115934 7.73013162,6 8.24270512,6 C8.75527863,6 9.18630636,6.06115934 9.53651638,6.18274993 C9.88527023,6.3057967 10.1677681,6.50092411 10.3840101,6.76886026 C10.5995239,7.03679642 10.7538785,7.383366 10.8470736,7.80856903 C10.9402688,8.23377205 10.9868664,8.74925791 10.9868664,9.3550266 C10.9868664,9.9607953 10.9402688,10.4762812 10.8470736,10.9014842 C10.7538785,11.3266872 10.5995239,11.6732568 10.3840101,11.9411929 C10.1677681,12.2091291 9.88527023,12.4042565 9.53651638,12.5265752 C9.18630636,12.6488939 8.75527863,12.7100532 8.24270512,12.7100532 C7.73013162,12.7100532 7.29910389,12.6488939 6.95035004,12.5265752 C6.6008681,12.4042565 6.3183702,12.2091291 6.10285634,11.9411929 C5.88661439,11.6732568 5.73225987,11.3266872 5.63906469,10.9014842 C5.5458695,10.4762812 5.5,9.9607953 5.5,9.3550266 C5.5,8.74925791 5.5458695,8.23377205 5.63906469,7.80856903 L5.63906469,7.80856903 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 M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,-8.8817842e-16 12,-8.8817842e-16 C18.62775,-8.8817842e-16 24,5.373 24,12"
-      />
+      {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 24ZM5.63906 7.80857C5.73226 7.38337 5.88661 7.0368 6.10286 6.76886C6.31837 6.50092 6.60087 6.3058 6.95035 6.18275C7.2991 6.06116 7.73013 6 8.24271 6C8.75528 6 9.18631 6.06116 9.53652 6.18275C9.88527 6.3058 10.1678 6.50092 10.384 6.76886C10.5995 7.0368 10.7539 7.38337 10.8471 7.80857C10.9403 8.23377 10.9869 8.74926 10.9869 9.35503C10.9869 9.9608 10.9403 10.4763 10.8471 10.9015C10.7539 11.3267 10.5995 11.6733 10.384 11.9412C10.1678 12.2091 9.88527 12.4043 9.53652 12.5266C9.18631 12.6489 8.75528 12.7101 8.24271 12.7101C7.73013 12.7101 7.2991 12.6489 6.95035 12.5266C6.60087 12.4043 6.31837 12.2091 6.10286 11.9412C5.88661 11.6733 5.73226 11.3267 5.63906 10.9015C5.54587 10.4763 5.5 9.9608 5.5 9.35503C5.5 8.74926 5.54587 8.23377 5.63906 7.80857ZM15.7223 6L10.1823 18.5631H8.26091L13.7995 6H15.7223ZM13.616 12.6751C13.4005 12.9438 13.2461 13.2889 13.1537 13.7141C13.0605 14.14 13.0131 14.6555 13.0131 15.2613C13.0131 15.867 13.0605 16.3818 13.1537 16.807C13.2461 17.2322 13.4005 17.5795 13.616 17.8467C13.8315 18.1154 14.1147 18.3018 14.4635 18.4066C14.8137 18.5107 15.2447 18.5631 15.7573 18.5631C16.2699 18.5631 16.7009 18.5107 17.0504 18.4066C17.3999 18.3018 17.6816 18.1154 17.8971 17.8467C18.1127 17.5795 18.267 17.2322 18.3609 16.807C18.4541 16.3818 18.5 15.867 18.5 15.2613C18.5 14.6555 18.4541 14.14 18.3609 13.7141C18.267 13.2889 18.1127 12.9438 17.8971 12.6751C17.6816 12.4072 17.3999 12.212 17.0504 12.0897C16.7009 11.9674 16.2699 11.9062 15.7573 11.9062C15.2447 11.9062 14.8137 11.9674 14.4635 12.0897C14.1147 12.212 13.8315 12.4072 13.616 12.6751ZM15.2586 16.8427C15.2178 16.6971 15.1887 16.4961 15.1719 16.2398C15.1544 15.9835 15.1457 15.6566 15.1457 15.2613C15.1457 14.8535 15.1544 14.5252 15.1719 14.274C15.1887 14.0235 15.2178 13.8255 15.2586 13.6799C15.3001 13.5335 15.3612 13.4352 15.4428 13.3828C15.5236 13.3304 15.6284 13.3042 15.7573 13.3042C15.8847 13.3042 15.9896 13.3304 16.0711 13.3828C16.1534 13.4352 16.2145 13.5335 16.2546 13.6799C16.2961 13.8255 16.3252 14.0235 16.3419 14.274C16.3602 14.5252 16.3689 14.8535 16.3689 15.2613C16.3689 15.6566 16.3602 15.9835 16.3419 16.2398C16.3252 16.4961 16.2961 16.6971 16.2546 16.8427C16.2145 16.9876 16.1534 17.0873 16.0711 17.1397C15.9896 17.1922 15.8847 17.2184 15.7573 17.2184C15.6284 17.2184 15.5236 17.1922 15.4428 17.1397C15.3612 17.0873 15.3001 16.9876 15.2586 16.8427ZM7.74542 10.9364C7.70392 10.7908 7.67553 10.5899 7.65805 10.3336C7.63985 10.0773 7.63184 9.75111 7.63184 9.35503C7.63184 8.9473 7.63985 8.6182 7.65805 8.36701C7.67553 8.11728 7.70392 7.91924 7.74542 7.77362C7.78547 7.628 7.84663 7.52898 7.9289 7.47656C8.00972 7.42414 8.11529 7.39793 8.24271 7.39793C8.37085 7.39793 8.47642 7.42414 8.55797 7.47656C8.63878 7.52898 8.69994 7.628 8.74144 7.77362C8.78222 7.91924 8.81134 8.11728 8.82882 8.36701C8.84629 8.6182 8.8543 8.9473 8.8543 9.35503C8.8543 9.75111 8.84629 10.0773 8.82882 10.3336C8.81134 10.5899 8.78222 10.7908 8.74144 10.9364C8.69994 11.082 8.63878 11.1811 8.55797 11.2335C8.47642 11.2859 8.37085 11.3121 8.24271 11.3121C8.11529 11.3121 8.00972 11.2859 7.9289 11.2335C7.84663 11.1811 7.78547 11.082 7.74542 10.9364Z"
+          fill="currentColor"
+        />
+      ) : (
+        <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 24ZM12 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 2ZM6.10286 6.76886C5.88661 7.0368 5.73226 7.38337 5.63906 7.80857C5.54587 8.23377 5.5 8.74926 5.5 9.35503C5.5 9.9608 5.54587 10.4763 5.63906 10.9015C5.73226 11.3267 5.88661 11.6733 6.10286 11.9412C6.31837 12.2091 6.60087 12.4043 6.95035 12.5266C7.2991 12.6489 7.73013 12.7101 8.24271 12.7101C8.75528 12.7101 9.18631 12.6489 9.53652 12.5266C9.88527 12.4043 10.1678 12.2091 10.384 11.9412C10.5995 11.6733 10.7539 11.3267 10.8471 10.9015C10.9403 10.4763 10.9869 9.9608 10.9869 9.35503C10.9869 8.74926 10.9403 8.23377 10.8471 7.80857C10.7539 7.38337 10.5995 7.0368 10.384 6.76886C10.1678 6.50092 9.88527 6.3058 9.53652 6.18275C9.18631 6.06116 8.75528 6 8.24271 6C7.73013 6 7.2991 6.06116 6.95035 6.18275C6.60087 6.3058 6.31837 6.50092 6.10286 6.76886ZM10.1823 18.5631L15.7223 6H13.7995L8.26091 18.5631H10.1823ZM13.1537 13.7141C13.2461 13.2889 13.4005 12.9438 13.616 12.6751C13.8315 12.4072 14.1147 12.212 14.4635 12.0897C14.8137 11.9674 15.2447 11.9062 15.7573 11.9062C16.2699 11.9062 16.7009 11.9674 17.0504 12.0897C17.3999 12.212 17.6816 12.4072 17.8971 12.6751C18.1127 12.9438 18.267 13.2889 18.3609 13.7141C18.4541 14.14 18.5 14.6555 18.5 15.2613C18.5 15.867 18.4541 16.3818 18.3609 16.807C18.267 17.2322 18.1127 17.5795 17.8971 17.8467C17.6816 18.1154 17.3999 18.3018 17.0504 18.4066C16.7009 18.5107 16.2699 18.5631 15.7573 18.5631C15.2447 18.5631 14.8137 18.5107 14.4635 18.4066C14.1147 18.3018 13.8315 18.1154 13.616 17.8467C13.4005 17.5795 13.2461 17.2322 13.1537 16.807C13.0605 16.3818 13.0131 15.867 13.0131 15.2613C13.0131 14.6555 13.0605 14.14 13.1537 13.7141ZM15.1719 16.2398C15.1887 16.4961 15.2178 16.6971 15.2586 16.8427C15.3001 16.9876 15.3612 17.0873 15.4428 17.1397C15.5236 17.1922 15.6284 17.2184 15.7573 17.2184C15.8847 17.2184 15.9896 17.1922 16.0711 17.1397C16.1534 17.0873 16.2145 16.9876 16.2546 16.8427C16.2961 16.6971 16.3252 16.4961 16.3419 16.2398C16.3602 15.9835 16.3689 15.6566 16.3689 15.2613C16.3689 14.8535 16.3602 14.5252 16.3419 14.274C16.3252 14.0235 16.2961 13.8255 16.2546 13.6799C16.2145 13.5335 16.1534 13.4352 16.0711 13.3828C15.9896 13.3304 15.8847 13.3042 15.7573 13.3042C15.6284 13.3042 15.5236 13.3304 15.4428 13.3828C15.3612 13.4352 15.3001 13.5335 15.2586 13.6799C15.2178 13.8255 15.1887 14.0235 15.1719 14.274C15.1544 14.5252 15.1457 14.8535 15.1457 15.2613C15.1457 15.6566 15.1544 15.9835 15.1719 16.2398ZM7.65805 10.3336C7.67553 10.5899 7.70392 10.7908 7.74542 10.9364C7.78547 11.082 7.84663 11.1811 7.9289 11.2335C8.00972 11.2859 8.11529 11.3121 8.24271 11.3121C8.37085 11.3121 8.47642 11.2859 8.55797 11.2335C8.63878 11.1811 8.69994 11.082 8.74144 10.9364C8.78222 10.7908 8.81134 10.5899 8.82882 10.3336C8.84629 10.0773 8.8543 9.75111 8.8543 9.35503C8.8543 8.9473 8.84629 8.6182 8.82882 8.36701C8.81134 8.11728 8.78222 7.91924 8.74144 7.77362C8.69994 7.628 8.63878 7.52898 8.55797 7.47656C8.47642 7.42414 8.37085 7.39793 8.24271 7.39793C8.11529 7.39793 8.00972 7.42414 7.9289 7.47656C7.84663 7.52898 7.78547 7.628 7.74542 7.77362C7.70392 7.91924 7.67553 8.11728 7.65805 8.36701C7.63985 8.6182 7.63184 8.9473 7.63184 9.35503C7.63184 9.75111 7.63985 10.0773 7.65805 10.3336Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/person-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 PersonIcon({ 'aria-label': ariaLabel = 'Person', copyrightYear = '2020', ...props }: IconProps) {
+export function PersonIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Person',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M0,21.3333333 L0,24 L24,24 L24,21.3333333 C24,17.7866667 16.005,16 12,16 C7.995,16 0,17.7866667 0,21.3333333 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' ? (
+        <path
+          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 12ZM12 15C7.995 15 0 17.01 0 21V24H24V21C24 17.01 16.005 15 12 15Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 21C24 17.01 16.005 15 12 15C7.995 15 0 17.01 0 21V24H24V21ZM2.66825 19.8489C2.11583 20.3588 2 20.7371 2 21V22H22V21C22 20.7371 21.8842 20.3588 21.3317 19.8489C20.7657 19.3265 19.8858 18.812 18.7581 18.3603C16.4997 17.4556 13.7525 17 12 17C10.2475 17 7.50034 17.4556 5.24187 18.3603C4.11424 18.812 3.23426 19.3265 2.66825 19.8489Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            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 6ZM12 10C14.2104 10 16 8.21043 16 6C16 3.78957 14.2104 2 12 2C9.78957 2 8 3.78957 8 6C8 8.21043 9.78957 10 12 10Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/phone-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 PhoneIcon({ 'aria-label': ariaLabel = 'Phone', copyrightYear = '2020', ...props }: IconProps) {
+export function PhoneIcon({ 'aria-label': ariaLabel = 'Phone', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M7,2 L17,2 C18.1045695,2 19,2.8954305 19,4 L19,22 C19,23.1045695 18.1045695,24 17,24 L7,24 C5.8954305,24 5,23.1045695 5,22 L5,4 L5,4 C5,2.8954305 5.8954305,2 7,2 L7,2 Z M17,19 L17,5 L7,5 L7,19 L17,19 Z M12,23 C12.83,23 13.5,22.33 13.5,21.5 C13.5,20.67 12.83,20 12,20 C11.17,20 10.5,20.67 10.5,21.5 C10.5,22.33 11.17,23 12,23 Z"
+        clipRule="evenodd"
+        d="M5 2C5 0.89543 5.89543 0 7 0H17C18.1046 0 19 0.895431 19 2V22C19 23.1046 18.1046 24 17 24H7C5.89543 24 5 23.1046 5 22V2ZM17 19H7V3H17V19ZM10.5 21.5C10.5 22.33 11.17 23 12 23C12.83 23 13.5 22.33 13.5 21.5C13.5 20.67 12.83 20 12 20C11.17 20 10.5 20.67 10.5 21.5Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/pie-chart-icon.tsx

@@ -1,16 +1,32 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PieChartIcon({ 'aria-label': ariaLabel = 'Pie Chart', copyrightYear = '2020', ...props }: IconProps) {
+export function PieChartIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Pie Chart',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M13,0 C18.8434819,0.482903868 23.4975482,5.14094692 23.9599991,11 L13,11 L13,0 Z M0,11.9794279 C0,5.67797979 4.84046948,0.509022045 11,0 L11,13.0222864 L23.9554671,13.0222864 C23.4278192,19.1727741 18.2766744,24 12,24 C5.372583,24 0,18.6182066 0,11.9794279 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M12 24C5.37258 24 0 18.6182 0 11.9794C0 5.67798 4.84047 0.509022 11 0V13.0223H23.9555C23.4278 19.1728 18.2767 24 12 24Z"
+            fill="currentColor"
+          />
+          <path d="M23.96 11C23.4975 5.14095 18.8435 0.482904 13 0V11H23.96Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.631 9C23.7947 9.6471 23.906 10.3154 23.96 11H13V0C13.6846 0.0565753 14.3529 0.170457 15 0.336862C19.231 1.42485 22.5578 4.75813 23.631 9ZM21.5542 9C20.5875 5.86688 18.1243 3.39621 15 2.41612V9H21.5542ZM11 13.0223V0C10.3154 0.0565728 9.64715 0.170706 9 0.337556C3.82432 1.67197 0 6.37832 0 11.9794C0 18.6182 5.37258 24 12 24C17.578 24 22.267 20.1877 23.6122 15.0223C23.7807 14.3752 23.8967 13.707 23.9555 13.0223H11ZM21.5311 15.0223H9V2.41727C4.94512 3.69345 2 7.4908 2 11.9794C2 17.5169 6.48038 22 12 22C16.4617 22 20.2455 19.0698 21.5311 15.0223Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PizzaIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Pizza',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1.21191 4.8C3.87591 1.848 7.71591 0 11.9999 0C16.2839 0 20.1359 1.86 22.7879 4.8L11.9999 24L1.21191 4.8ZM11 6C11 7.10457 10.1046 8 9 8C7.89543 8 7 7.10457 7 6C7 4.89543 7.89543 4 9 4C10.1046 4 11 4.89543 11 6ZM14 13C14 14.1046 13.1046 15 12 15C10.8954 15 10 14.1046 10 13C10 11.8954 10.8954 11 12 11C13.1046 11 14 11.8954 14 13Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M11 6C11 7.10457 10.1046 8 9 8C7.89543 8 7 7.10457 7 6C7 4.89543 7.89543 4 9 4C10.1046 4 11 4.89543 11 6Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12 15C13.1046 15 14 14.1046 14 13C14 11.8954 13.1046 11 12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22.7879 4.8L11.9999 24L1.21191 4.8C3.87591 1.848 7.71591 0 11.9999 0C16.2839 0 20.1359 1.86 22.7879 4.8ZM3.70006 5.14538L11.9999 19.9171L20.2996 5.14566C18.0914 3.19057 15.1843 2 11.9999 2C8.8131 2 5.9136 3.18337 3.70006 5.14538Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

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

@@ -3,13 +3,12 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PlaneIcon({ 'aria-label': ariaLabel = 'Plane', copyrightYear = '2020', ...props }: IconProps) {
+export function PlaneIcon({ 'aria-label': ariaLabel = 'Plane', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M7 24V22.5L10 20V14L0 17V15L10 8V2C10 0.89543 10.8954 0 12 0C13.1046 0 14 0.89543 14 2V8L24 15V17L14 14V20L17 22.5V24L12 22.5L7 24Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M7,24 L7,22.5 L10,20 L10,14 L0,17 L0,15 L10,8 L10,2 C10,0.8954305 10.8954305,0 12,0 C13.1045695,0 14,0.8954305 14,2 L14,8 L24,15 L24,17 L14,14 L14,20 L17,22.5 L17,24 L12,22.5 L7,24 Z"
       />
     </Icon>
   );

package/src/components/icon/components/play-circle-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 PlayCircleIcon({ 'aria-label': ariaLabel = 'Play', copyrightYear = '2020', ...props }: IconProps) {
+export function PlayCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Play Circle',
+  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 M10,16.5 L10,7.5 L16,12 L10,16.5 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 24ZM16 12L10 16.5V7.5L16 12Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M16 12L10 16.5V7.5L16 12Z" 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 2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/play-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 PlayIcon({ 'aria-label': ariaLabel = 'Play', copyrightYear = '2020', ...props }: IconProps) {
+export function PlayIcon({ 'aria-label': ariaLabel = 'Play', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="8 5 8 19 19 12" />
+      <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
     </Icon>
   );
 }