@westpac/ui 0.1.0 → 0.2.0

package/src/components/icon/components/watch-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 WatchIcon({ 'aria-label': ariaLabel = 'Watch', copyrightYear = '2020', ...props }: IconProps) {
+export function WatchIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Watch',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M20,12 C20,9.46 18.81,7.19 16.96,5.73 L16,0 L8,0 L7.05,5.73 C5.19,7.19 4,9.45 4,12 C4,14.55 5.19,16.81 7.05,18.27 L8,24 L16,24 L16.96,18.27 C18.81,16.81 20,14.54 20,12 Z M6,12 C6,8.69 8.69,6 12,6 C15.31,6 18,8.69 18,12 C18,15.31 15.31,18 12,18 C8.69,18 6,15.31 6,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.96 5.73C18.81 7.19 20 9.46 20 12C20 14.54 18.81 16.81 16.96 18.27L16 24H8L7.05 18.27C5.19 16.81 4 14.55 4 12C4 9.45 5.19 7.19 7.05 5.73L8 0H16L16.96 5.73ZM12 6C8.69 6 6 8.69 6 12C6 15.31 8.69 18 12 18C15.31 18 18 15.31 18 12C18 8.69 15.31 6 12 6Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.712 15.3011C5.24474 16.474 6.0524 17.496 7.05243 18.2847L8 24H16L16.9591 18.2756C18.7675 16.844 19.9439 14.6481 19.998 12.1781C19.9993 12.1189 20 12.0595 20 12C20 11.9272 19.999 11.8546 19.9971 11.7822C19.9313 9.32845 18.7578 7.14834 16.9591 5.72442L16 0H8L7.05243 5.71534C6.05236 6.50405 5.24468 7.52612 4.71194 8.69901C4.25445 9.70371 4 10.8209 4 12C4 13.1792 4.25447 14.2964 4.712 15.3011ZM15.5429 7.15945C14.5496 6.43069 13.3244 6 12 6C10.7295 6 9.55036 6.39632 8.57961 7.07189L8.2849 7.30322C7.61069 7.83244 7.05515 8.49962 6.66073 9.26303C6.23845 10.084 6 11.0145 6 12C6 12.9856 6.23848 13.9161 6.66081 14.7371C7.05523 15.5005 7.61073 16.1676 8.2849 16.6968L8.5796 16.9281C9.55035 17.6037 10.7295 18 12 18C13.3244 18 14.5496 17.5693 15.5429 16.8405L15.721 16.7C17.0226 15.6728 17.8855 14.1153 17.9894 12.3584C17.9964 12.2398 18 12.1203 18 12C18 11.8811 17.9965 11.763 17.9897 11.6457C17.8869 9.8871 17.0236 8.32801 15.721 7.29998L15.5429 7.15945ZM14.722 19.524C13.8722 19.832 12.9555 20 12 20C11.0474 20 10.1334 19.833 9.28568 19.5268L9.69571 22H14.3072L14.722 19.524ZM14.722 4.47596L14.3072 2H9.69571L9.28568 4.47317C10.1334 4.16695 11.0474 4 12 4C12.9555 4 13.8722 4.16797 14.722 4.47596Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/wbc-logo-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WBCLogoIcon({
+  'aria-label': ariaLabel = 'Westpac',
+  copyrightYear = '2023',
+  viewBox = '0 0 69 28',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} viewBox={viewBox} {...props}>
+      <path
+        d="M24.385 25.038C24.385 25.038 25.432 27.828 26.387 28H13.072C10.591 28 8.404 26.61 7.706 23.97L1.643 2.941C1.643 2.941 0.987 0.400999 0 0.000999451H12.561C15.04 0.000999451 16.662 0.902 17.622 4.101L24.385 25.038ZM44.612 25.038L51.379 4.101C52.337 0.902 53.958 0.000999451 56.438 0.000999451H69C68.01 0.400999 67.358 2.941 67.358 2.941L61.293 23.971C60.593 26.609 58.407 28.001 55.929 28.001H42.613C43.566 27.827 44.612 25.038 44.612 25.038ZM27 28V0H42V28H27Z"
+        fill="#DA1710"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/wbg-logo-icon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WBGLogoIcon({
+  'aria-label': ariaLabel = 'Westpac Group',
+  copyrightYear = '2023',
+  viewBox = '0 0 160 21',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} viewBox={viewBox} {...props}>
+      <path
+        d="M145.826 11.658V1.84H151.49C155.096 1.84 157.56 3.5 157.56 6.678V6.736C157.56 9.713 155.04 11.658 151.32 11.658H145.826ZM144.339 20.498H145.826V13.03H151.234C155.414 13.03 159.047 10.855 159.047 6.65V6.592C159.047 2.73 156.015 0.468 151.605 0.468H144.339V20.498ZM130.862 20.817C135.725 20.817 139.073 17.751 139.073 12.001V0.468H137.586V12.175C137.586 17.009 134.983 19.47 130.917 19.47C126.682 19.47 124.133 16.751 124.133 12.03V0.466999H122.647V12.174C122.647 17.781 126.054 20.817 130.862 20.817ZM108.463 19.496C103.51 19.496 99.904 15.434 99.904 10.481V10.427C99.904 5.475 103.455 1.469 108.406 1.469C113.355 1.469 116.961 5.532 116.961 10.481V10.541C116.961 15.494 113.414 19.496 108.463 19.496ZM108.406 20.843C114.469 20.843 118.507 15.951 118.507 10.481V10.427C118.507 4.96 114.526 0.124001 108.463 0.124001C102.397 0.124001 98.36 5.018 98.36 10.481V10.541C98.36 16.008 102.34 20.843 108.406 20.843ZM81.049 10.855V1.84H87.883C91.518 1.84 93.637 3.531 93.637 6.219V6.279C93.637 9.167 91.147 10.855 87.8 10.855H81.049ZM79.559 20.498H81.049V12.201H87.599L93.981 20.498H95.869L89.259 11.943C92.636 11.486 95.125 9.569 95.125 6.219V6.164C95.1297 4.7707 94.5833 3.43205 93.605 2.44C92.405 1.24 90.43 0.468 87.973 0.468H79.558L79.559 20.498ZM66.763 20.843C70.024 20.843 72.829 19.441 74.631 17.84V10.113H66.507V11.486H73.202V17.236C71.741 18.469 69.366 19.525 66.82 19.525C61.466 19.525 58.234 15.664 58.234 10.481V10.427C58.234 5.59 61.641 1.469 66.507 1.469C69.539 1.469 71.367 2.498 72.947 3.872L73.917 2.759C71.913 1.096 69.854 0.124001 66.59 0.124001C60.61 0.124001 56.688 5.073 56.688 10.481V10.541C56.688 16.181 60.438 20.843 66.763 20.843Z"
+        fill="black"
+      />
+      <path
+        d="M52 0C51.251 0.301 50.756 2.206 50.756 2.206L46.158 17.977C45.628 19.957 43.97 21 42.092 21H32C32.723 20.87 33.516 18.778 33.516 18.778L38.644 3.075C39.368 0.677001 40.598 0 42.478 0H52ZM9.52 0C11.399 0 12.628 0.677001 13.356 3.075L18.482 18.778C18.482 18.778 19.275 20.87 20 21H9.908C8.027 21 6.37 19.957 5.84 17.977L1.244 2.206C1.244 2.206 0.748 0.301 0 0H9.52ZM31.5 0V21H20.5V0H31.5Z"
+        fill="#DA1710"
+      />
+    </Icon>
+  );
+}

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

@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function WearableIcon({ 'aria-label': ariaLabel = 'Wearable', copyrightYear = '2020', ...props }: IconProps) {
+export function WearableIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Wearable',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14,22 L14,22 L14,19 L17,19 C19.209139,19 21,17.209139 21,15 C21,12.790861 19.209139,11 17,11 L7,11 C4.790861,11 3,12.790861 3,15 C3,17.209139 4.790861,19 7,19 L10,19 L10,22 L7,22 C3.13400675,22 0,18.8659932 0,15 C0,11.1340068 3.13400675,8 7,8 L17,8 C20.8659932,8 24,11.1340068 24,15 C24,18.8659932 20.8659932,22 17,22 L14,22 Z M7,2 L17,2 C17.5522847,2 18,2.44771525 18,3 L18,6 L6,6 L6,3 L6,3 C6,2.44771525 6.44771525,2 7,2 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M7 2C6.44772 2 6 2.44772 6 3V6H18V3C18 2.44772 17.5523 2 17 2H7Z" fill="currentColor" />
+          <path
+            d="M17 22H14V19H17C19.2091 19 21 17.2091 21 15C21 12.7909 19.2091 11 17 11H7C4.79086 11 3 12.7909 3 15C3 17.2091 4.79086 19 7 19H10V22H7C3.13401 22 0 18.866 0 15C0 11.134 3.13401 8 7 8H17C20.866 8 24 11.134 24 15C24 18.866 20.866 22 17 22Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M7 2C6.44772 2 6 2.44772 6 3V6H18V3C18 2.44772 17.5523 2 17 2H7Z" fill="currentColor" />
+          <path
+            d="M7 20H10V22H7C3.13401 22 0 18.866 0 15C0 11.134 3.13401 8 7 8H17C20.866 8 24 11.134 24 15C24 18.866 20.866 22 17 22H14V20H17C19.7614 20 22 17.7614 22 15C22 12.2386 19.7614 10 17 10H7C4.23858 10 2 12.2386 2 15C2 17.7614 4.23858 20 7 20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -5,15 +5,22 @@ import { type IconProps } from '../icon.types.js';
 
 export function WheelchairIcon({
   'aria-label': ariaLabel = 'Wheelchair',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M12.25 6.5C13.4926 6.5 14.5 5.49264 14.5 4.25C14.5 3.00736 13.4926 2 12.25 2C11.0074 2 10 3.00736 10 4.25C10 5.49264 11.0074 6.5 12.25 6.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20 13.5V11.5C18.5 11.5 17.116 10.9227 16.0194 10.1324C15.3226 9.63025 15.0743 9.30906 14.7466 8.88511C14.5585 8.6418 14.3442 8.36464 14.004 8C13.071 7 12.5 7 12 7C11 7 10 8 10 9.5V16C10 17 10.99 17.9876 12.2 17.9876H18V23H20V17.5C20 16 19.5 15 17.5 15H14.004V11.5C15.423 12.677 18 13.5 20 13.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8 13.207C5.6915 13.86 4 15.9824 4 18.5C4 21.5376 6.46243 24 9.5 24C12.0176 24 14.14 22.3085 14.793 20H12.6632C12.1015 21.1825 10.8962 22 9.5 22C7.567 22 6 20.433 6 18.5C6 17.1038 6.81753 15.8985 8 15.3368V13.207Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M8,13.2070325 C5.6914952,13.8599614 4,15.9824458 4,18.5 C4,21.5375661 6.46243388,24 9.5,24 C12.0175542,24 14.1400386,22.3085048 14.7929675,20 L12.6631844,20 C12.1014525,21.1824737 10.896198,22 9.5,22 C7.56700338,22 6,20.4329966 6,18.5 C6,17.103802 6.81752633,15.8985475 8,15.3368156 L8,13.2070325 L8,13.2070325 Z M20,13.5 C18,13.5 15.423,12.677 14.004,11.5 L14.004,15 L17.5,15 C19.5,15 20,16 20,17.5 L20,23 L18,23 L18,17.9875609 L12.2,17.9875609 C10.99,17.9875609 10,17 10,16 L10,9.5 C10,8 11.0000088,7 12,7 C12.5,7 13.0709844,7 14.004,8 C14.9370156,9 14.9227264,9.34205666 16.0193557,10.1324001 C17.1159849,10.9227436 18.5,11.5 20,11.5 L20,13.5 Z M12.25,6.5 C11.0073593,6.5 10,5.49264069 10,4.25 C10,3.00735931 11.0073593,2 12.25,2 C13.4926407,2 14.5,3.00735931 14.5,4.25 C14.5,5.49264069 13.4926407,6.5 12.25,6.5 Z"
       />
     </Icon>
   );

package/src/components/icon/components/windows-new-icon.tsx

@@ -5,15 +5,16 @@ import { type IconProps } from '../icon.types.js';
 
 export function WindowsNewIcon({
   'aria-label': ariaLabel = 'Windows New',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M23.9968,0 L11.2,1.8616 L11.2,11.1992 L23.9968,11.1992 L23.9968,0 Z M0,3.3984 L0.0088,11.1992 L9.6,11.1992 L9.6,2.0944 L0,3.3984 Z M11.2,12.7992 L11.2,22.2 L23.9968,24 L24,12.7992 L11.2,12.7992 Z M0.0072,12.7992 L0.008,20.6816 L9.6,21.996 L9.6,12.7992 L0.0072,12.7992 Z"
+        clipRule="evenodd"
+        d="M11.2 1.8616L23.9968 0V11.1992H11.2V1.8616ZM0.0088 11.1992L0 3.3984L9.6 2.0944V11.1992H0.0088ZM11.2 12.7992V22.2L23.9968 24L24 12.7992H11.2ZM0.008 20.6816L0.0072 12.7992H9.6V21.996L0.008 20.6816Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/wine-glass-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function WineGlassIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Wine Glass',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 8C20 12.0796 16.9463 15.446 13 15.9381V22H18V24H6V22H11V15.9381C7.05369 15.446 4 12.0796 4 8V0H20V8ZM18 7H6V2H18V7Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 8C20 12.0796 16.9463 15.446 13 15.9381V22H18V24H6V22H11V15.9381C7.05369 15.446 4 12.0796 4 8V0H20V8ZM17.917 9H6.08296C6.55904 11.8377 9.027 14 12 14C14.973 14 17.441 11.8377 17.917 9ZM18 7H6V2H18V7Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/word-file-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 WordFileIcon({ 'aria-label': ariaLabel = 'Word File', copyrightYear = '2020', ...props }: IconProps) {
+export function WordFileIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Word 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 M14.5697731,10 L18,10 L15.3919202,20 L13.3722839,20 L11.9990343,14.0870163 L10.4648318,20 L8.27458555,20 L6,10 L8.24110736,10 L9.40318687,16.2124148 L10.9547723,10 L13.0986641,10 L14.4339289,16.2124148 L15.4595204,11.7940864 L14.5697731,11.7940864 L14.5697731,10 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM14.5698 10V11.7941H15.4595L14.4339 16.2124L13.0987 10H10.9548L9.40319 16.2124L8.24111 10H6L8.27459 20H10.4648L11.999 14.087L13.3723 20H15.3919L18 10H14.5698Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M14.5698 11.7941V10H18L15.3919 20H13.3723L11.999 14.087L10.4648 20H8.27459L6 10H8.24111L9.40319 16.2124L10.9548 10H13.0987L14.4339 16.2124L15.4595 11.7941H14.5698Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H16V6H20V22H4V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,38 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function WriteIcon({ 'aria-label': ariaLabel = 'Write', copyrightYear = '2020', ...props }: IconProps) {
+export function WriteIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Write',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M0,22 L24,22 L24,24 L0,24 L0,22 Z M2,15.0006943 L2,20 L6.99930565,20 L17.7439245,9.2553812 L12.7446188,4.25607555 L2,15.0006943 Z M21.6100542,5.38925149 C22.1299819,4.86932371 22.1299819,4.02944036 21.6100542,3.50951257 L18.4904874,0.389945841 C17.9705596,-0.129981947 17.1306763,-0.129981947 16.6107485,0.389945841 L14.1710873,2.829607 L19.170393,7.82891265 L21.6100542,5.38925149 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.6101 3.50951C22.13 4.02944 22.13 4.86932 21.6101 5.38925L19.1704 7.82891L14.1711 2.82961L16.6107 0.389946C17.1307 -0.129982 17.9706 -0.129982 18.4905 0.389946L21.6101 3.50951ZM2 15.0007V20H6.99931L17.7439 9.25538L12.7446 4.25608L2 15.0007ZM0 22H24V24H0V22Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M21.6101 3.50951C22.13 4.02944 22.13 4.86932 21.6101 5.38925L19.1704 7.82891L14.1711 2.82961L16.6108 0.389946C17.1307 -0.129982 17.9706 -0.129982 18.4905 0.389946L21.6101 3.50951Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 19.9998V15.0005L12.7446 4.25586L17.7439 9.25517L6.99931 19.9998H2ZM6.17088 17.9998L14.9155 9.25517L12.7446 7.08429L4 15.8289V17.9998H6.17088Z"
+            fill="currentColor"
+          />
+          <path d="M0 22H24V24H0V22Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/yammer-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 YammerIcon({ 'aria-label': ariaLabel = 'Yammer', copyrightYear = '2020', ...props }: IconProps) {
+export function YammerIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Yammer',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M1.5,0 L22.5,0 C23.3284271,-1.52179594e-16 24,0.671572875 24,1.5 L24,22.5 C24,23.3284271 23.3284271,24 22.5,24 L1.5,24 C0.671572875,24 1.8778099e-15,23.3284271 1.77635684e-15,22.5 L1.77635684e-15,1.5 L1.77635684e-15,1.5 C1.67490378e-15,0.671572875 0.671572875,1.52179594e-16 1.5,0 L1.5,0 Z M20.9625,13.4955 C21.4365,13.413 21.78,12.984 21.74775,12.49425 C21.717,12.06375 21.405,11.72025 21.0045,11.63175 C20.96475,11.6295 20.92425,11.6295 20.8815,11.6295 C20.16375,11.631 15.00675,12.1965 15.26475,12.72225 C15.52275,13.242 18.699,13.49475 20.9625,13.4955 Z M19.46175,18.342 C19.7265,17.92875 19.63125,17.3865 19.2555,17.0865 C17.27025,15.999 14.36475,14.691 13.88775,15.02475 C13.4085,15.36 17.65725,18.3375 18.28575,18.68325 C18.324,18.70425 18.36,18.723 18.3945,18.74175 C18.78975,18.8565 19.22775,18.705 19.46175,18.342 Z M18.28575,6.537 C17.65725,6.8835 13.4085,9.86025 13.88775,10.197 C14.36475,10.52925 17.27025,9.222 19.2555,8.1345 C19.63125,7.83375 19.7265,7.29225 19.46175,6.879 C19.22775,6.51525 18.78975,6.36525 18.3945,6.48 C18.36,6.49725 18.324,6.51675 18.28575,6.537 Z M13.44375,5.7795 C13.6065,5.26875 13.323,4.71375 12.81525,4.551 C12.3165,4.392 11.7885,4.6455 11.61,5.13 L8.43525,13.5 L8.38575,13.5 L5.04675,5.067 C4.821,4.58925 4.2615,4.37625 3.7575,4.56525 C3.24075,4.7595 2.97525,5.325 3.14475,5.8455 L7.35,16.10475 C6.75975,17.77275 6.21225,18.55425 4.956,18.55425 C4.83525,18.55425 4.41225,18.52875 4.3845,18.5265 C3.9795,18.5055 3.6015,18.7695 3.492,19.17675 C3.36675,19.6395 3.63825,20.1165 4.09875,20.2485 C4.43175,20.307 4.77375,20.32875 5.0805,20.32875 C7.3965,20.32875 8.1615,18.99525 8.9265,17.049 L13.44375,5.7795 Z"
-      />
+      {look === 'filled' ? (
+        <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 22V2ZM13.2518 7.02362L9.58192 16.1792C8.96041 17.7604 8.33891 18.8438 6.45733 18.8438C6.20812 18.8438 5.93027 18.8261 5.65974 18.7786C5.28561 18.6713 5.06504 18.2838 5.1668 17.9079C5.25576 17.577 5.56285 17.3625 5.89189 17.3796C5.91443 17.3814 6.25809 17.4021 6.35619 17.4021C7.3768 17.4021 7.8216 16.7672 8.30113 15.4121L4.88468 7.07724C4.74698 6.65437 4.96268 6.19494 5.3825 6.03713C5.79196 5.88358 6.24651 6.05663 6.42991 6.44477L9.1426 13.2959H9.18281L11.7621 6.49595C11.9071 6.10233 12.336 5.89638 12.7412 6.02555C13.1537 6.15778 13.3841 6.60867 13.2518 7.02362ZM17.2073 7.62703L17.1856 7.63854C16.675 7.92004 13.2232 10.3384 13.6126 10.612C14.0001 10.8819 16.3606 9.8199 17.9734 8.93639C18.2787 8.69205 18.3561 8.25212 18.141 7.91639C17.9509 7.62087 17.5951 7.499 17.274 7.59223C17.2525 7.60293 17.2304 7.61473 17.2073 7.62703ZM19.3602 13.2923C17.5213 13.2917 14.9408 13.0864 14.7312 12.6641C14.5216 12.237 18.7113 11.7776 19.2944 11.7764C19.3291 11.7764 19.362 11.7764 19.3943 11.7782C19.7197 11.8501 19.9732 12.1291 19.9982 12.4789C20.0244 12.8768 19.7453 13.2253 19.3602 13.2923ZM18.141 17.2298C17.9509 17.5247 17.5951 17.6478 17.274 17.5545L17.2368 17.5346C17.2203 17.5258 17.2032 17.5167 17.1856 17.507C16.675 17.2261 13.2232 14.8071 13.6126 14.5347C14.0001 14.2636 16.3606 15.3262 17.9734 16.2098C18.2787 16.4535 18.3561 16.894 18.141 17.2298Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M13.2519 7.0241L9.58201 16.1797C8.96051 17.7609 8.339 18.8443 6.45743 18.8443C6.20821 18.8443 5.93037 18.8266 5.65983 18.7791C5.28571 18.6718 5.06513 18.2843 5.16689 17.9083C5.25585 17.5775 5.56295 17.363 5.89198 17.3801C5.91452 17.3819 6.25818 17.4026 6.35628 17.4026C7.37689 17.4026 7.82169 16.7677 8.30122 15.4126L4.88478 7.07772C4.74707 6.65485 4.96277 6.19542 5.38259 6.03761C5.79205 5.88406 6.2466 6.05711 6.43001 6.44524L9.14269 13.2964H9.18291L11.7621 6.49643C11.9072 6.10281 12.3361 5.89686 12.7413 6.02603C13.1538 6.15826 13.3842 6.60915 13.2519 7.0241Z"
+            fill="currentColor"
+          />
+          <path
+            d="M17.2074 7.6275L17.1857 7.63902C16.6751 7.92052 13.2233 10.3389 13.6126 10.6125C14.0002 10.8824 16.3607 9.82038 17.9735 8.93686C18.2788 8.69253 18.3562 8.2526 18.1411 7.91687C17.951 7.62135 17.5952 7.49948 17.274 7.59271C17.2527 7.60337 17.2304 7.61526 17.2074 7.6275Z"
+            fill="currentColor"
+          />
+          <path
+            d="M19.3603 13.2928C17.5214 13.2922 14.9409 13.0869 14.7313 12.6646C14.5217 12.2375 18.7114 11.7781 19.2945 11.7768C19.3292 11.7768 19.3621 11.7768 19.3944 11.7787C19.7198 11.8506 19.9733 12.1296 19.9983 12.4794C20.0245 12.8773 19.7454 13.2258 19.3603 13.2928Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.1411 17.2302C17.951 17.5251 17.5952 17.6482 17.274 17.555L17.2369 17.5351C17.2282 17.5304 17.2193 17.5257 17.2102 17.5208C17.2022 17.5165 17.194 17.512 17.1857 17.5075C16.6751 17.2266 13.2233 14.8076 13.6126 14.5352C14.0002 14.2641 16.3607 15.3267 17.9735 16.2102C18.2788 16.454 18.3562 16.8945 18.1411 17.2302Z"
+            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/youtube-icon.tsx

@@ -1,16 +1,42 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function YoutubeIcon({ 'aria-label': ariaLabel = 'Youtube', copyrightYear = '2020', ...props }: IconProps) {
+export function YoutubeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Youtube',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,0 L22,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,22 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M11.9960967,6 L12.0039033,6 C12.0039033,6 15.7822946,6 18.3011516,6.1725947 C18.6529753,6.21236514 19.4202207,6.2157392 20.1046778,6.89527757 C20.6443523,7.41302826 20.8202377,8.58875342 20.8202377,8.58875342 C20.8202377,8.58875342 21,9.96944419 21,11.3501015 L21,12.6445033 C21,14.0251607 20.8202377,15.4058347 20.8202377,15.4058347 C20.8202377,15.4058347 20.6443523,16.5815766 20.1046778,17.0993273 C19.4202207,17.7788824 18.6529753,17.7822397 18.3011516,17.8220269 C15.7822946,17.9946048 12.0000088,18 12.0000088,18 C12.0000088,18 7.32010996,17.9594946 5.88007331,17.8286079 C5.47945419,17.757402 4.58004364,17.7788824 3.89532223,17.0993273 C3.35564771,16.5815766 3.18000899,15.4058347 3.18000899,15.4058347 C3.18000899,15.4058347 3,14.0251607 3,12.6445033 L3,11.3501015 C3,9.96944419 3.18000899,8.58875342 3.18000899,8.58875342 C3.18000899,8.58875342 3.35564771,7.41302826 3.89532223,6.89527757 C4.58004364,6.2157392 5.34698942,6.21236514 5.6988484,6.1725947 C8.21779355,6 11.9960967,6 11.9960967,6 Z M10,9 L10,15 L15,12 L10,9 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M10.5 9.5L14.5 12L10.5 14.5V9.5Z" fill="currentColor" />
+          <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 0H2ZM11.9965 7C11.9965 7 8.63804 7 6.39898 7.14383C6.36819 7.14709 6.33383 7.15006 6.29632 7.1533C5.95272 7.18298 5.34458 7.23552 4.79584 7.74606C4.31613 8.17752 4.16001 9.15729 4.16001 9.15729C4.16001 9.15729 4 10.3079 4 11.4584V12.5371C4 13.6876 4.16001 14.8382 4.16001 14.8382C4.16001 14.8382 4.31613 15.818 4.79584 16.2494C5.30048 16.719 5.9363 16.7869 6.34183 16.8302C6.42541 16.8391 6.49921 16.847 6.56007 16.8572C7.8401 16.9662 12 17 12 17C12 17 15.362 16.9955 17.601 16.8517C17.6318 16.8484 17.6662 16.8455 17.7038 16.8422C18.0474 16.8125 18.6557 16.76 19.2042 16.2494C19.6839 15.818 19.8402 14.8382 19.8402 14.8382C19.8402 14.8382 20 13.6876 20 12.5371V11.4584C20 10.3079 19.8402 9.15729 19.8402 9.15729C19.8402 9.15729 19.6839 8.17752 19.2042 7.74606C18.6557 7.23554 18.0473 7.18299 17.7037 7.1533C17.6662 7.15006 17.6318 7.14709 17.601 7.14383C15.362 7 12.0035 7 12.0035 7H11.9965Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9965 7C11.9965 7 8.63804 7 6.39898 7.14383C6.36819 7.14709 6.33383 7.15006 6.29632 7.1533C5.95272 7.18298 5.34458 7.23552 4.79584 7.74606C4.31613 8.17752 4.16001 9.15729 4.16001 9.15729C4.16001 9.15729 4 10.3079 4 11.4584V12.5371C4 13.6876 4.16001 14.8382 4.16001 14.8382C4.16001 14.8382 4.31613 15.818 4.79584 16.2494C5.30048 16.719 5.9363 16.7869 6.34183 16.8302C6.42541 16.8391 6.49921 16.847 6.56007 16.8572C7.8401 16.9662 12 17 12 17C12 17 15.362 16.9955 17.601 16.8517C17.6318 16.8484 17.6662 16.8455 17.7038 16.8422C18.0474 16.8125 18.6557 16.76 19.2042 16.2494C19.6839 15.818 19.8402 14.8382 19.8402 14.8382C19.8402 14.8382 20 13.6876 20 12.5371V11.4584C20 10.3079 19.8402 9.15729 19.8402 9.15729C19.8402 9.15729 19.6839 8.17752 19.2042 7.74606C18.6557 7.23554 18.0473 7.18299 17.7037 7.1533C17.6662 7.15006 17.6318 7.14709 17.601 7.14383C15.362 7 12.0035 7 12.0035 7H11.9965ZM10.5 9.5L14.5 12L10.5 14.5V9.5Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2L2 2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,42 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ZipFileIcon({ 'aria-label': ariaLabel = 'Zip File', copyrightYear = '2020', ...props }: IconProps) {
+export function ZipFileIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Zip 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 M7,20 L11,20 L11,18 L7,18 L7,20 Z M9,16 L12,16 L12,14 L9,14 L9,16 Z M6,14 L9,14 L9,12 L6,12 L6,14 Z M9,12 L12,12 L12,10 L9,10 L9,12 Z M6,10 L9,10 L9,8 L6,8 L6,10 Z M9,8 L12,8 L12,6 L9,6 L9,8 Z M6,6 L6,4 L9,4 L9,6 L6,6 Z M6,16 L12,16 L12,20 C12,20.5522847 11.5522847,21 11,21 L7,21 C6.44771525,21 6,20.5522847 6,20 L6,16 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM9 4H6V2H9V4ZM9 6V4H12V6H9ZM9 8H6V6H9V8ZM9 10V8H12V10H9ZM9 12H6V10H9V12ZM9 14V12H12V14H9ZM9 14V16H6V14H9ZM12 16H10V20H8V18H6V21C6 21.5523 6.44772 22 7 22H11C11.5523 22 12 21.5523 12 21V16Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M9 6V4H6V6H9Z" fill="currentColor" />
+          <path d="M9 8H12V6H9V8Z" fill="currentColor" />
+          <path d="M9 10V8H6V10H9Z" fill="currentColor" />
+          <path d="M9 12H12V10H9V12Z" fill="currentColor" />
+          <path d="M9 12H6V14H9V12Z" fill="currentColor" />
+          <path
+            d="M10 14H12V19C12 19.5523 11.5523 20 11 20H7C6.44772 20 6 19.5523 6 19V16H8V18H10V14Z"
+            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 22V2ZM9 2H4V22H20V6H16V2H12V4H9V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/icon.stories.tsx

@@ -140,3 +140,12 @@ export const WithDifferentSizeStory: Story = {
     size: 'xlarge',
   },
 };
+
+/**
+ * > With outlined look example
+ */
+export const WithOutlinedLookStory: Story = {
+  args: {
+    look: 'outlined',
+  },
+};

package/src/components/icon/icon.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-block rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
       size: {
         xsmall: 'h-2 w-2',

package/src/components/icon/icon.types.ts

@@ -8,9 +8,13 @@ export type IconProps = SVGAttributes<SVGElement> & {
    * children prop
    */
   children?: ReactNode;
-
   /**
    * The icon SVG metadata copyright year text
    */
   copyrightYear?: string;
+
+  /**
+   * Icon look variation. Defaults to filled
+   */
+  look?: 'filled' | 'outlined';
 } & VariantProps<typeof styles>;