@westpac/ui 0.1.0 → 0.2.0

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

@@ -5,15 +5,18 @@ import { type IconProps } from '../icon.types.js';
 
 export function NewContentIcon({
   'aria-label': ariaLabel = 'New Content',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M14 5C14 2.23857 16.2386 0 19 0C21.7614 0 24 2.23857 24 5C24 7.76143 21.7614 10 19 10C16.2386 10 14 7.76143 14 5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4 4H12.0709C12.1719 3.29385 12.3783 2.62171 12.6736 2H4C2.89543 2 2 2.89543 2 4V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V11.3264C21.3783 11.6217 20.7061 11.8281 20 11.9291V22H4V4Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M12.0708889,4 L4,4 L4,22 L20,22 L20,11.9291111 C20.7061453,11.828105 21.3782934,11.6217094 22,11.3263688 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,4 C2,2.8954305 2.8954305,2 4,2 L12.6736312,2 C12.3782906,2.62170659 12.171895,3.2938547 12.0708889,4 Z M19,0 C21.7614286,0 24,2.23857143 24,5 C24,7.76142857 21.7614286,10 19,10 C16.2385714,10 14,7.76142857 14,5 C14,2.23857143 16.2385714,0 19,0 Z"
       />
     </Icon>
   );

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

@@ -3,14 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function NewWindowIcon({ 'aria-label': ariaLabel = 'New Window', copyrightYear = '2020', ...props }: IconProps) {
+export function NewWindowIcon({ 'aria-label': ariaLabel = 'New Window', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M2 0H12V2H2V22H22V12H24V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2C0 0.89543 0.89543 0 2 0Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M12,0 L12,2 L2,2 L2,22 L22,22 L22,12 L24,12 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 C0.8954305,24 0,23.1045695 0,22 L0,2 C-3.33066907e-16,0.8954305 0.8954305,0 2,0 L12,0 Z M22,3.41682007 L12.3997851,13.0170349 L10.9855716,11.6028214 L20.5883929,2 L16,2 L16,0 L24,0 L24,8 L22,8 L22,3.41682007 Z"
       />
+      <path d="M22 8V3.41682L12.3998 13.017L10.9856 11.6028L20.5884 2H16V0H24V8H22Z" fill="currentColor" />
     </Icon>
   );
 }

package/src/components/icon/components/notification-active-icon.tsx

@@ -1,20 +1,57 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function NotificationActiveIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Notification Active',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14,3.25203497 C17.4504544,4.14012056 20,7.27232114 20,11 L20,17 L22,19 L22,20 L2,20 L2,19 L4,17 L4,11 C4,7.27232114 6.54954557,4.14012056 10,3.25203497 L10,2 C10,0.8954305 10.8954305,0 12,0 C13.1045695,0 14,0.8954305 14,2 L14,3.25203497 L14,3.25203497 Z M9,21 L15.003,21 C15.003,22.6568542 13.6591827,24 12.0015,24 C10.3438173,24 9,22.6568542 9,21 Z M0.041073777,10 C0.316286557,6.66401946 1.95604422,3.71495492 4.40091892,1.71223423 L5.66743243,3.2601952 C3.67084816,4.89569849 2.31858497,7.28854422 2.04937524,10 L0.041073777,10 L0.041073777,10 Z M23.9589262,10 L23.9589262,10 L21.9506248,10 C21.681415,7.28854422 20.3291518,4.89569849 18.3325676,3.2601952 L19.5990811,1.71223423 C22.0439558,3.71495492 23.6837134,6.66401946 23.9589262,10 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M20 11C20 7.27232 17.4505 4.14012 14 3.25203V2C14 0.89543 13.1046 0 12 0C10.8954 0 10 0.89543 10 2V3.25203C6.54955 4.14012 4 7.27232 4 11V17L2 19V20H22V19L20 17V11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.0015 24C10.3438 24 9 22.6569 9 21H15.003C15.003 22.6569 13.6592 24 12.0015 24Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0.0410767 10C0.316289 6.66402 1.95605 3.71495 4.40092 1.71223L5.66744 3.2602C3.67085 4.8957 2.31859 7.28854 2.04938 10H0.0410767Z"
+            fill="currentColor"
+          />
+          <path
+            d="M19.5991 1.71223C22.044 3.71495 23.6837 6.66402 23.9589 10H21.9506C21.6814 7.28854 20.3292 4.8957 18.3326 3.2602L19.5991 1.71223Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 3.25203C17.4505 4.14012 20 7.27232 20 11V17L22 19V20H2V19L4 17V11C4 7.27232 6.54955 4.14012 10 3.25203V2C10 0.89543 10.8954 0 12 0C13.1046 0 14 0.89543 14 2V3.25203ZM18 11C18 7.68629 15.3137 5 12 5C8.68629 5 6 7.68629 6 11V18H18V11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.0015 24C10.3438 24 9 22.6569 9 21H15.003C15.003 22.6569 13.6592 24 12.0015 24Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0 9.99968C0.275213 6.6637 1.91497 3.71463 4.35985 1.71191L5.62636 3.25988C3.62977 4.89538 2.27751 7.28822 2.0083 9.99968H0Z"
+            fill="currentColor"
+          />
+          <path
+            d="M19.6402 1.71191C22.085 3.71463 23.7248 6.6637 24 9.99968H21.9917C21.7225 7.28822 20.3702 4.89538 18.3736 3.25988L19.6402 1.71191Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -1,20 +1,41 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function NotificationIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Notification',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14,3.25203497 C17.4504544,4.14012056 20,7.27232114 20,11 L20,17 L22,19 L22,20 L2,20 L2,19 L4,17 L4,11 C4,7.27232114 6.54954557,4.14012056 10,3.25203497 L10,2 C10,0.8954305 10.8954305,0 12,0 C13.1045695,0 14,0.8954305 14,2 L14,3.25203497 L14,3.25203497 Z M9,21 L15.003,21 C15.003,22.6568542 13.6591827,24 12.0015,24 C10.3438173,24 9,22.6568542 9,21 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M20 11C20 7.27232 17.4505 4.14012 14 3.25203V2C14 0.89543 13.1046 0 12 0C10.8954 0 10 0.89543 10 2V3.25203C6.54955 4.14012 4 7.27232 4 11V17L2 19V20H22V19L20 17V11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.0015 24C10.3438 24 9 22.6569 9 21H15.003C15.003 22.6569 13.6592 24 12.0015 24Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 3.25203C17.4505 4.14012 20 7.27232 20 11V17L22 19V20H2V19L4 17V11C4 7.27232 6.54955 4.14012 10 3.25203V2C10 0.89543 10.8954 0 12 0C13.1046 0 14 0.89543 14 2V3.25203ZM18 11C18 7.68629 15.3137 5 12 5C8.68629 5 6 7.68629 6 11V18H18V11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.0015 24C10.3438 24 9 22.6569 9 21H15.003C15.003 22.6569 13.6592 24 12.0015 24Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/notification-off-icon.tsx

@@ -1,20 +1,46 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function NotificationOffIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Notification Off',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M9,21 L15.003,21 C15.003,22.6568542 13.6591827,24 12.0015,24 C10.3438173,24 9,22.6568542 9,21 Z M10,3.25203497 L10,2 C10,0.8954305 10.8954305,-8.8817842e-16 12,-8.8817842e-16 C13.1045695,-8.8817842e-16 14,0.8954305 14,2 L14,3.25203497 C17.4504544,4.14012056 20,7.27232114 20,11 L20,16.4226821 L7.77974993,4.20243206 C8.45863802,3.78005235 9.20543208,3.45654262 10,3.25203497 Z M2.37898178,1.62101822 L22.3789818,21.6210182 L20.9647682,23.0352318 L17.9295364,20 L2,20 L2,19 L4,17 L4,11 C4,9.57970281 4.37012145,8.24585212 5.01917435,7.08963792 L0.964768219,3.03523178 L2.37898178,1.62101822 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M9.99995 3.25203V2C9.99995 0.89543 10.8954 0 12 0C13.1045 0 14 0.89543 14 2V3.25203C17.4504 4.14012 20 7.27232 20 11V16.4227L7.7797 4.20243C8.45859 3.78005 9.20539 3.45654 9.99995 3.25203Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.99995 21C8.99995 22.6569 10.3438 24 12.0015 24C13.6591 24 15.003 22.6569 15.003 21H8.99995Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0.964722 3.03523L2.37894 1.62102L22.3789 21.621L20.9647 23.0352L17.9295 20H1.99995V19L3.99995 17V11C3.99995 9.5797 4.37007 8.24585 5.01913 7.08964L0.964722 3.03523Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M10 2V3.25203C9.20547 3.45654 8.45867 3.78005 7.77979 4.20243L9.24556 5.66821C10.0704 5.2412 11.0071 5 12 5C15.3137 5 18 7.68629 18 11V14.4226L20 16.4227V11C20 7.27232 17.4505 4.14012 14 3.25203V2C14 0.89543 13.1046 0 12 0C10.8955 0 10 0.89543 10 2Z"
+            fill="currentColor"
+          />
+          <path d="M9 21C9 22.6569 10.3438 24 12.0015 24C13.6592 24 15.003 22.6569 15.003 21H9Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.964844 3.03531L2.37906 1.62109L22.3791 21.6211L20.9648 23.0353L17.9296 20.0001H2.00008V19.0001L4.00008 17.0001V11.0001C4.00008 9.57978 4.3702 8.24593 5.01925 7.08971L0.964844 3.03531ZM6 11C6 10.1385 6.18156 9.31945 6.50849 8.57896L15.9295 18H6V11Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,17 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function OfficeIcon({ 'aria-label': ariaLabel = 'Office', copyrightYear = '2020', ...props }: IconProps) {
+export function OfficeIcon({ 'aria-label': ariaLabel = 'Office', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M20 10H16V12H20V10Z" fill="currentColor" />
+      <path d="M16 14H20V16H16V14Z" fill="currentColor" />
+      <path d="M20 18H16V20H20V18Z" fill="currentColor" />
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M14,6 L24,6 L24,24 L0,24 L0,0 L14,0 L14,6 Z M14,8 L14,22 L22,22 L22,8 L14,8 Z M16,10 L20,10 L20,12 L16,12 L16,10 Z M16,14 L20,14 L20,16 L16,16 L16,14 Z M16,18 L20,18 L20,20 L16,20 L16,18 Z M2,4 L2,8 L6,8 L6,4 L2,4 Z M8,4 L8,8 L12,8 L12,4 L8,4 Z M2,10 L2,14 L6,14 L6,10 L2,10 Z M8,10 L8,14 L12,14 L12,10 L8,10 Z M2,16 L2,20 L6,20 L6,16 L2,16 Z M8,16 L8,20 L12,20 L12,16 L8,16 Z"
+        clipRule="evenodd"
+        d="M14 6H24V24H0V0H14V6ZM14 8H22V22H14V8ZM2 4H6V8H2V4ZM12 4H8V8H12V4ZM2 10H6V14H2V10ZM12 10H8V14H12V10ZM2 16H6V20H2V16ZM12 16H8V20H12V16Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/open-browser-icon.tsx

@@ -1,20 +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 OpenBrowserIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Open Browser',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M22,0 L2,0 C0.89,0 0,0.9 0,2 L0,18 C0,19.1 0.89,20 2,20 L7,20 L7,18 L2,18 L2,6 L22,6 L22,18 L17,18 L17,20 L22,20 C23.1,20 24,19.1 24,18 L24,2 C24,0.9 23.11,0 22,0 Z M12,9 L6,15 L10,15 L10,24 L14,24 L14,15 L18,15 L12,9 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 0H22C23.11 0 24 0.9 24 2V18C24 19.1 23.1 20 22 20H17V18H22V6H2V18H7V20H2C0.89 20 0 19.1 0 18V2C0 0.9 0.89 0 2 0ZM6 15L12 9L18 15H14V24H10V15H6Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22 0H2C0.89 0 0 0.9 0 2V18C0 19.1 0.89 20 2 20H7V18H2V6H22V18H17V20H22C23.1 20 24 19.1 24 18V2C24 0.9 23.11 0 22 0ZM2 2H22V4H2V2Z"
+            fill="currentColor"
+          />
+          <path d="M6 15L12 9L18 15H14V24H10V15H6Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,63 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PackageDeliveryIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Package Delivery',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.053006 0.679823C0.229985 0.156663 0.79756 -0.123973 1.32072 0.053006L3.72221 0.865403C4.67238 1.18683 5.39903 1.96186 5.65864 2.93074L9.2639 16.3857L7.33205 16.9034L3.72679 3.44838C3.64026 3.12542 3.39804 2.86708 3.08132 2.75993L0.679823 1.94754C0.156663 1.77056 -0.123973 1.20298 0.053006 0.679823Z"
+            fill="currentColor"
+          />
+          <path
+            d="M22.149 18.1095C22.6824 17.9665 22.999 17.4182 22.8561 16.8847C22.7131 16.3512 22.1648 16.0347 21.6313 16.1776C21.6262 16.179 21.6212 16.1804 21.6161 16.1818L12.938 18.5071L13.4557 20.4389L22.149 18.1095Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.2309 19.7318C12.6598 21.3322 11.71 22.9773 10.1096 23.4061C8.50921 23.8349 6.8642 22.8852 6.43537 21.2848C6.00655 19.6844 6.95629 18.0393 8.55669 17.6105C10.1571 17.1817 11.8021 18.1314 12.2309 19.7318Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.34861 5.24284C8.06273 4.1759 8.69589 3.07923 9.76282 2.79335L17.4902 0.722795C18.5572 0.436912 19.6538 1.07008 19.9397 2.13701L22.5279 11.7963C22.8138 12.8632 22.1806 13.9599 21.1137 14.2458L13.3863 16.3163C12.3194 16.6022 11.2227 15.969 10.9368 14.9021L8.34861 5.24284Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.053006 0.679823C0.229985 0.156663 0.79756 -0.123973 1.32072 0.053006L3.72221 0.865403C4.67238 1.18683 5.39903 1.96186 5.65864 2.93074L9.2639 16.3857L7.33205 16.9034L3.72679 3.44838C3.64026 3.12542 3.39804 2.86708 3.08132 2.75993L0.679823 1.94754C0.156663 1.77056 -0.123973 1.20298 0.053006 0.679823Z"
+            fill="currentColor"
+          />
+          <path
+            d="M22.149 18.1095C22.6824 17.9665 22.999 17.4182 22.8561 16.8847C22.7131 16.3512 22.1648 16.0347 21.6313 16.1776C21.6262 16.179 21.6212 16.1804 21.6161 16.1818L12.938 18.5071L13.4557 20.4389L22.149 18.1095Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.59197 21.4742C10.1254 21.3313 10.442 20.7829 10.2991 20.2495C10.1561 19.716 9.6078 19.3994 9.07433 19.5424C8.54087 19.6853 8.22428 20.2337 8.36722 20.7671C8.51017 21.3006 9.0585 21.6172 9.59197 21.4742ZM10.1096 23.4061C11.71 22.9773 12.6598 21.3322 12.2309 19.7318C11.8021 18.1314 10.1571 17.1817 8.55669 17.6105C6.95629 18.0393 6.00655 19.6844 6.43537 21.2848C6.8642 22.8852 8.50921 23.8349 10.1096 23.4061Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.0079 2.65465L10.2805 4.7252L12.8687 14.3845L20.5961 12.3139L18.0079 2.65465ZM9.76282 2.79335C8.69589 3.07923 8.06273 4.1759 8.34861 5.24284L10.9368 14.9021C11.2227 15.969 12.3194 16.6022 13.3863 16.3163L21.1137 14.2458C22.1806 13.9599 22.8138 12.8632 22.5279 11.7963L19.9397 2.13701C19.6538 1.07008 18.5572 0.436912 17.4902 0.722795L9.76282 2.79335Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/padlock-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 PadlockIcon({ 'aria-label': ariaLabel = 'Padlock', copyrightYear = '2020', ...props }: IconProps) {
+export function PadlockIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Padlock',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6,8 L6,6 C6,2.6862915 8.6862915,0 12,0 C15.3137085,0 18,2.6862915 18,6 L18,8 L20,8 C21.1045695,8 22,8.8954305 22,10 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,10 C2,8.8954305 2.8954305,8 4,8 L6,8 Z M16,8 L16,6 C16,3.790861 14.209139,2 12,2 C9.790861,2 8,3.790861 8,6 L8,8 L16,8 Z M12,18.5 C13.3807119,18.5 14.5,17.3807119 14.5,16 C14.5,14.6192881 13.3807119,13.5 12,13.5 C10.6192881,13.5 9.5,14.6192881 9.5,16 C9.5,17.3807119 10.6192881,18.5 12,18.5 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 8H4C2.89543 8 2 8.89543 2 10V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V10C22 8.89543 21.1046 8 20 8H18V6C18 2.68629 15.3137 0 12 0C8.68629 0 6 2.68629 6 6V8ZM16 8V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V8H16ZM12 18.5C13.3807 18.5 14.5 17.3807 14.5 16C14.5 14.6193 13.3807 13.5 12 13.5C10.6193 13.5 9.5 14.6193 9.5 16C9.5 17.3807 10.6193 18.5 12 18.5Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M12 18.5C13.3807 18.5 14.5 17.3807 14.5 16C14.5 14.6193 13.3807 13.5 12 13.5C10.6193 13.5 9.5 14.6193 9.5 16C9.5 17.3807 10.6193 18.5 12 18.5Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 8H6V6C6 2.68629 8.68629 0 12 0C15.3137 0 18 2.68629 18 6V8H20C21.1046 8 22 8.89543 22 10V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V10C2 8.89543 2.89543 8 4 8ZM4 22H20V10H4V22ZM16 8V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V8H16Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/padlock-open-icon.tsx

@@ -1,20 +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 PadlockOpenIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Padlock Open',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M16,8 L16,6 C16,3.790861 14.209139,2 12,2 C9.790861,2 8,3.790861 8,6 L6,6 C6,2.6862915 8.6862915,0 12,0 C15.3137085,0 18,2.6862915 18,6 L18,8 L20,8 C21.1045695,8 22,8.8954305 22,10 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,10 C2,8.8954305 2.8954305,8 4,8 L16,8 Z M12,18.5 C13.3807119,18.5 14.5,17.3807119 14.5,16 C14.5,14.6192881 13.3807119,13.5 12,13.5 C10.6192881,13.5 9.5,14.6192881 9.5,16 C9.5,17.3807119 10.6192881,18.5 12,18.5 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 8H16V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6H6C6 2.68629 8.68629 0 12 0C15.3137 0 18 2.68629 18 6V8H20C21.1046 8 22 8.89543 22 10V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V10C2 8.89543 2.89543 8 4 8ZM12 18.5C13.3807 18.5 14.5 17.3807 14.5 16C14.5 14.6193 13.3807 13.5 12 13.5C10.6193 13.5 9.5 14.6193 9.5 16C9.5 17.3807 10.6193 18.5 12 18.5Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M12 18.5C13.3807 18.5 14.5 17.3807 14.5 16C14.5 14.6193 13.3807 13.5 12 13.5C10.6193 13.5 9.5 14.6193 9.5 16C9.5 17.3807 10.6193 18.5 12 18.5Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16 8H4C2.89543 8 2 8.89543 2 10V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V10C22 8.89543 21.1046 8 20 8H18V6C18 2.68629 15.3137 0 12 0C8.68629 0 6 2.68629 6 6H8C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V8ZM4 10H20V22H4V10Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/padlock-tick-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PadlockTickIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Padlock Tick',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 8H6V6C6 2.68629 8.68629 0 12 0C15.3137 0 18 2.68629 18 6V8H20C21.1046 8 22 8.89543 22 10V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V10C2 8.89543 2.89543 8 4 8ZM16 6V8H8V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6ZM10.7021 17.4679L16.585 11.585L17.995 13.005L10.7021 20.2979L6.70211 16.2979L8.11211 14.8879L10.7021 17.4679Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M10.7021 17.4679L16.585 11.585L17.995 13.005L10.7021 20.2979L6.70211 16.2979L8.11211 14.8879L10.7021 17.4679Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 8H4C2.89543 8 2 8.89543 2 10V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V10C22 8.89543 21.1046 8 20 8H18V6C18 2.68629 15.3137 0 12 0C8.68629 0 6 2.68629 6 6V8ZM16 8V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V8H16ZM20 10V22H4V10H20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/pause-circle-icon.tsx

@@ -1,16 +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 PauseCircleIcon({ 'aria-label': ariaLabel = 'Pause', copyrightYear = '2020', ...props }: IconProps) {
+export function PauseCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Pause 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 M9,16 L9,8 L11,8 L11,16 L9,16 Z M13,16 L13,8 L15,8 L15,16 L13,16 Z"
-      />
+      {look === 'filled' ? (
+        <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 12ZM9 16H11V8H9V16ZM15 16H13V8H15V16Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M9 16H11V8H9V16Z" fill="currentColor" />
+          <path d="M15 16H13V8H15V16Z" 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 24ZM2 12C2 6.47714 6.47714 2 12 2C17.5229 2 22 6.47714 22 12C22 17.5229 17.5229 22 12 22C6.47714 22 2 17.5229 2 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,14 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function PauseIcon({ 'aria-label': ariaLabel = 'Pause', copyrightYear = '2020', ...props }: IconProps) {
+export function PauseIcon({ 'aria-label': ariaLabel = 'Pause', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6,19 L10,19 L10,5 L6,5 L6,19 Z M14,5 L14,19 L18,19 L18,5 L14,5 Z"
-      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M10 19H6V5H10V19ZM14 19V5H18V19H14Z" fill="currentColor" />
     </Icon>
   );
 }

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

@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PawIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Paw',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M11 3.99999C11 6.20913 9.76877 7.99999 8.24999 7.99999C6.73121 7.99999 5.49999 6.20913 5.49999 3.99999C5.49999 1.79086 6.73121 0 8.24999 0C9.76877 0 11 1.79086 11 3.99999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.5 3.99999C18.5 6.20913 17.2688 7.99999 15.75 7.99999C14.2312 7.99999 13 6.20913 13 3.99999C13 1.79086 14.2312 0 15.75 0C17.2688 0 18.5 1.79086 18.5 3.99999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M21.25 15C22.7688 15 24 13.2091 24 11C24 8.79085 22.7688 6.99999 21.25 6.99999C19.7312 6.99999 18.5 8.79085 18.5 11C18.5 13.2091 19.7312 15 21.25 15Z"
+            fill="currentColor"
+          />
+          <path
+            d="M5.49999 11C5.49999 13.2091 4.26878 15 2.75 15C1.23122 15 0 13.2091 0 11C0 8.79085 1.23122 6.99999 2.75 6.99999C4.26878 6.99999 5.49999 8.79085 5.49999 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12 9.49999C13.933 9.49999 15.5 11.067 15.5 13C15.5 14.0851 16.442 14.7464 17.5083 15.4948C18.8985 16.4706 20.5 17.5947 20.5 20C20.5 22.2091 18.7091 24 16.5 24C15.0912 24 14.3175 23.5237 13.6421 23.1078C13.1189 22.7858 12.6547 22.5 12 22.5C11.3452 22.5 10.881 22.7858 10.3579 23.1078C9.68245 23.5237 8.90876 24 7.49999 24C5.29085 24 3.5 22.2091 3.5 20C3.5 17.5947 5.10144 16.4706 6.49169 15.4948C7.55796 14.7464 8.49999 14.0851 8.49999 13C8.49999 11.067 10.067 9.49999 12 9.49999Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M11 3.99999C11 6.20913 9.76877 7.99999 8.24999 7.99999C6.73121 7.99999 5.49999 6.20913 5.49999 3.99999C5.49999 1.79086 6.73121 0 8.24999 0C9.76877 0 11 1.79086 11 3.99999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.5 3.99999C18.5 6.20913 17.2688 7.99999 15.75 7.99999C14.2312 7.99999 13 6.20913 13 3.99999C13 1.79086 14.2312 0 15.75 0C17.2688 0 18.5 1.79086 18.5 3.99999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M21.25 15C22.7688 15 24 13.2091 24 11C24 8.79085 22.7688 6.99999 21.25 6.99999C19.7312 6.99999 18.5 8.79085 18.5 11C18.5 13.2091 19.7312 15 21.25 15Z"
+            fill="currentColor"
+          />
+          <path
+            d="M5.49999 11C5.49999 13.2091 4.26878 15 2.75 15C1.23122 15 0 13.2091 0 11C0 8.79085 1.23122 6.99999 2.75 6.99999C4.26878 6.99999 5.49999 8.79085 5.49999 11Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.49999 24C8.90876 24 9.68245 23.5237 10.3579 23.1078C10.881 22.7858 11.3452 22.5 12 22.5C12.6547 22.5 13.1189 22.7858 13.6421 23.1078C14.3175 23.5237 15.0912 24 16.5 24C18.7091 24 20.5 22.2091 20.5 20C20.5 17.5947 18.8985 16.4706 17.5083 15.4948C16.442 14.7464 15.5 14.0851 15.5 13C15.5 11.067 13.933 9.49999 12 9.49999C10.067 9.49999 8.49999 11.067 8.49999 13C8.49999 14.0851 7.55796 14.7464 6.49169 15.4948C5.10144 16.4706 3.5 17.5947 3.5 20C3.5 22.2091 5.29085 24 7.49999 24ZM12 11.5C12.8284 11.5 13.5 12.1716 13.5 13C13.5 14.2049 14.0511 15.106 14.6433 15.7395C15.1571 16.2892 15.8092 16.7462 16.2896 17.0829L16.3592 17.1318C17.8159 18.1542 18.5 18.7372 18.5 20C18.5 21.1045 17.6045 22 16.5 22C16.0358 22 15.7292 21.9242 15.5013 21.8383C15.2494 21.7434 15.037 21.618 14.6906 21.4047L14.6174 21.3594C14.1219 21.0522 13.2314 20.5 12 20.5C10.7686 20.5 9.87805 21.0522 9.38261 21.3594L9.30935 21.4047C8.96294 21.618 8.75055 21.7434 8.4987 21.8383C8.27079 21.9242 7.96414 22 7.49999 22C6.39543 22 5.5 21.1045 5.5 20C5.5 18.7372 6.18407 18.1542 7.64072 17.1318L7.71037 17.0829C8.1907 16.7463 8.84283 16.2892 9.35672 15.7395C9.94887 15.106 10.5 14.2049 10.5 13C10.5 12.1716 11.1716 11.5 12 11.5Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}