@westpac/ui 0.26.0 → 0.28.0

package/src/components/icon/components/drop-left-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left', copyrightYear = '2024', ...props }: IconProps) {
+export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="m8 19 8-7-8-7v14Z" fill="currentColor" />

package/src/components/icon/components/drop-right-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right', copyrightYear = '2024', ...props }: IconProps) {
+export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="m16 5-8 7 8 7V5Z" fill="currentColor" />

package/src/components/icon/components/piggy-bank.tsx

@@ -15,9 +15,9 @@ export function PiggyBankIcon({
         <Fragment>
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </Fragment>
       ) : (
@@ -28,9 +28,9 @@ export function PiggyBankIcon({
           />
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </Fragment>
       )}

package/src/components/icon/components/quick-balance-icon.tsx

@@ -12,28 +12,24 @@ export function QuickBalanceIcon({
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <path
+          fillRule="evenodd"
+          d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-3.877-3.88-1.528 1.528c.262.735.405 1.527.405 2.352 0 1.277-.34 2.47-.936 3.5a1 1 0 0 0 1.731 1A8.963 8.963 0 0 0 21 14c0-1.39-.315-2.705-.877-3.88ZM15.88 5.877A9 9 0 0 0 4.204 18.501a1 1 0 0 0 1.732-1.002 7 7 0 0 1 8.416-10.094l1.528-1.528Zm2.827 2.83a1 1 0 0 0-1.414-1.414l-4.775 4.775a2 2 0 1 0 1.414 1.414l4.775-4.775Z"
+          clipRule="evenodd"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
           <path
-            fill-rule="evenodd"
-            d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-3.877-3.88-1.528 1.528c.262.735.405 1.527.405 2.352 0 1.277-.34 2.47-.936 3.5a1 1 0 0 0 1.731 1A8.963 8.963 0 0 0 21 14c0-1.39-.315-2.705-.877-3.88ZM15.88 5.877A9 9 0 0 0 4.204 18.501a1 1 0 0 0 1.732-1.002 7 7 0 0 1 8.416-10.094l1.528-1.528Zm2.827 2.83a1 1 0 0 0-1.414-1.414l-4.775 4.775a2 2 0 1 0 1.414 1.414l4.775-4.775Z"
-            clip-rule="evenodd"
+            d="m17.797 12.446 1.57-1.57c.407.96.633 2.016.633 3.124a7.983 7.983 0 0 1-.526 2.857 1 1 0 1 1-1.868-.714A5.984 5.984 0 0 0 18 14a6.01 6.01 0 0 0-.203-1.554ZM12 6c1.108 0 2.164.225 3.124.633l-1.57 1.57a6 6 0 0 0-7.16 7.94 1 1 0 1 1-1.868.714A8 8 0 0 1 12 6ZM17.293 7.293a1 1 0 1 1 1.414 1.414l-4.775 4.775a2 2 0 1 1-1.414-1.414l4.775-4.775Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-2 0a9.947 9.947 0 0 1-2 6H4a9.948 9.948 0 0 1-2-6C2 8.477 6.477 4 12 4s10 4.477 10 10Z"
+            clipRule="evenodd"
             fill="currentColor"
           />
-        </svg>
-      ) : (
-        <Fragment>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-            <path
-              d="m17.797 12.446 1.57-1.57c.407.96.633 2.016.633 3.124a7.983 7.983 0 0 1-.526 2.857 1 1 0 1 1-1.868-.714A5.984 5.984 0 0 0 18 14a6.01 6.01 0 0 0-.203-1.554ZM12 6c1.108 0 2.164.225 3.124.633l-1.57 1.57a6 6 0 0 0-7.16 7.94 1 1 0 1 1-1.868.714A8 8 0 0 1 12 6ZM17.293 7.293a1 1 0 1 1 1.414 1.414l-4.775 4.775a2 2 0 1 1-1.414-1.414l4.775-4.775Z"
-              fill="currentColor"
-            />
-            <path
-              fill-rule="evenodd"
-              d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-2 0a9.947 9.947 0 0 1-2 6H4a9.948 9.948 0 0 1-2-6C2 8.477 6.477 4 12 4s10 4.477 10 10Z"
-              clip-rule="evenodd"
-              fill="currentColor"
-            />
-          </svg>
         </Fragment>
       )}
     </Icon>

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

@@ -3,28 +3,21 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TargetIcon({
-  look = 'filled',
-  'aria-label': ariaLabel = 'Target',
-  copyrightYear = '2023',
-  ...props
-}: IconProps) {
+export function TargetIcon({ 'aria-label': ariaLabel = 'Target', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <path
-          d="M16.9431 11.2432C16.9806 11.49 17 11.7427 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C12.2821 7 12.5588 7.02337 12.8282 7.06827L13.1617 5.09595C12.7838 5.03284 12.3957 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 11.6291 18.9712 11.265 18.9156 10.9097L16.9431 11.2432Z"
-          fill="currentColor"
-        />
-        <path
-          d="M21.8742 10.4095C21.957 10.9275 22 11.4587 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.5662 2 13.1213 2.04705 13.6618 2.13745L13.9953 0.165126C13.3464 0.0565233 12.6798 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 11.3451 23.9475 10.7025 23.8466 10.076L21.8742 10.4095Z"
-          fill="currentColor"
-        />
-        <path
-          d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C12.1791 10 12.3528 10.0236 12.518 10.0677L15.9861 6.59968L15.5146 4.24268L19.7573 0L20.3129 3.68706L24 4.24264L19.7573 8.48532L17.4003 8.01389L13.9322 11.4819C13.9764 11.6472 14 11.8208 14 12Z"
-          fill="currentColor"
-        />
-      </svg>
+      <path
+        d="M16.9431 11.2432C16.9806 11.49 17 11.7427 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C12.2821 7 12.5588 7.02337 12.8282 7.06827L13.1617 5.09595C12.7838 5.03284 12.3957 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 11.6291 18.9712 11.265 18.9156 10.9097L16.9431 11.2432Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.8742 10.4095C21.957 10.9275 22 11.4587 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.5662 2 13.1213 2.04705 13.6618 2.13745L13.9953 0.165126C13.3464 0.0565233 12.6798 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 11.3451 23.9475 10.7025 23.8466 10.076L21.8742 10.4095Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C12.1791 10 12.3528 10.0236 12.518 10.0677L15.9861 6.59968L15.5146 4.24268L19.7573 0L20.3129 3.68706L24 4.24264L19.7573 8.48532L17.4003 8.01389L13.9322 11.4819C13.9764 11.6472 14 11.8208 14 12Z"
+        fill="currentColor"
+      />
     </Icon>
   );
 }

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

@@ -11,24 +11,24 @@ export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrigh
           <path fill="currentColor" d="M15.815 19.008h2.12L8.178 5.04h-2.12l9.757 13.968Z" />
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M2 0a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm17.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </Fragment>
       ) : (
         <Fragment>
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="m19.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Zm-3.5 15.008h2.12L8.178 5.04h-2.12l9.757 13.968Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M0 2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h20v20H2V2Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </Fragment>
       )}

package/src/components/icon/index.ts

@@ -6,10 +6,14 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
+export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';
 export { AustraliaIcon } from './components/australia-icon.js';
@@ -62,9 +66,9 @@ export { DownloadFileIcon } from './components/download-file-icon.js';
 export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
-export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropLeftIcon } from './components/drop-left-icon.js';
 export { DropRightIcon } from './components/drop-right-icon.js';
+export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';

package/src/components/pictogram/components/informative/sparkle-pictogram.tsx

@@ -26,50 +26,50 @@ export function SparklePictogram({
       {...props}
     >
       <svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_882_7929)">
+        <g clipPath="url(#clip0_882_7929)">
           <path
             d="M38.9999 61.716C37.7659 61.716 36.6949 60.9716 36.2758 59.8201L32.4922 49.5961C31.782 47.6885 30.2802 46.1765 28.371 45.4786L18.1378 41.6984C16.9853 41.268 16.2402 40.1979 16.2402 38.9766C16.2402 37.7553 16.9853 36.6736 18.1378 36.2549L28.371 32.4747C30.2802 31.7652 31.7937 30.2647 32.4922 28.3572L36.2758 18.1332C36.7065 16.9817 37.7775 16.2373 38.9999 16.2373C40.2223 16.2373 43.5 17 44.0525 18.1332L47.8361 28.3572C48.5462 30.2647 50.048 31.7768 51.9572 32.4747L62.1904 36.2549C63.3429 36.6853 64.088 37.7553 64.088 38.9766C64.088 40.1979 63.3429 41.2797 62.1904 41.6984L51.9572 45.4786C50.048 46.1881 48.5346 47.6885 47.8361 49.5961C47.8361 49.5961 45.6049 57.6401 44.0525 59.8201C42.5 62 40.2223 61.716 38.9999 61.716ZM38.9999 18.5403C38.8835 18.5403 38.5808 18.5752 38.4528 18.9242L34.6692 29.1481C33.7262 31.6954 31.7238 33.7076 29.1626 34.6498L18.9295 38.43C18.5919 38.5579 18.5453 38.8487 18.5453 38.9766C18.5453 39.1046 18.5802 39.3954 18.9295 39.5233L29.1626 43.3035C31.7122 44.2457 33.7262 46.2463 34.6692 48.8052L38.4528 59.0291C38.5808 59.3664 38.8719 59.413 38.9999 59.413C39.128 59.413 39.419 59.3781 39.5471 59.0291L43.3307 48.8052C44.2737 46.2579 46.2761 44.2457 48.8372 43.3035L59.0704 39.5233C59.408 39.3954 59.4546 39.1046 59.4546 38.9766C59.4546 38.8487 59.4196 38.5579 59.0704 38.43L48.8372 34.6498C46.2877 33.7076 44.2737 31.707 43.3307 29.1481L41.4389 24.0361L39.5471 18.9242C39.419 18.5868 39.128 18.5403 38.9999 18.5403Z"
             className={fill({ mode, outline: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M67.5225 39.5465H78.0001V37.2202H67.5225V39.5465Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M39.582 10.4682V0H37.2537V10.4682H39.582Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M58.8375 20.192L66.0671 12.9689L64.4605 11.3638L57.231 18.5869L58.8375 20.192Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M19.9772 18.5869L12.7477 11.3638L11.1411 12.9689L18.3707 20.192L19.9772 18.5869Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M0 39.5465H10.4776V37.2202H0V39.5465Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M39.582 77.9302V67.4619H37.2537V77.9302H39.582Z"
             className={fill({ mode, highlight: true })}
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M12.7477 66.2408L19.9772 59.0177L18.3707 57.4126L11.1411 64.6357L12.7477 66.2408Z"
             className={fill({ mode, highlight: true })}
           />

package/src/components/progress-indicator/progress-indicator.component.tsx

@@ -1,19 +1,67 @@
-import React from 'react';
+import React, { useId } from 'react';
 
-import { styles } from './progress-indicator.styles.js';
-import { type ProgressIndicatorProps } from './progress-indicator.types.js';
+import { Icon } from '../icon/icon.component.js';
+import { Label } from '../label/label.component.js';
+
+import { styles as ProgressIndicatorStyles } from './progress-indicator.styles.js';
+import { ProgressIndicatorProps } from './progress-indicator.types.js';
 
 export function ProgressIndicator({
-  className,
-  children,
-  inverted = false,
+  color = 'hero',
+  label,
   size = 'medium',
+  icon: EmbedIcon,
+  className,
   'aria-label': ariaLabel = 'Loading',
   ...props
 }: ProgressIndicatorProps) {
+  const styles = ProgressIndicatorStyles({
+    size,
+    color,
+  });
+
+  const id = useId();
+
+  const sizeMap: Record<string, { strokeWidth: number }> = {
+    xlarge: { strokeWidth: 4 },
+    large: { strokeWidth: 4 },
+    medium: { strokeWidth: 15 },
+    small: { strokeWidth: 20 },
+    xsmall: { strokeWidth: 30 },
+  };
+
+  const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2;
+
   return (
-    <div className={styles({ className, size, inverted })} aria-label={ariaLabel} {...props}>
-      {children}
+    <div aria-label={ariaLabel} className={styles.container()}>
+      <div className="relative">
+        <Icon viewBox="0 0 180 180" fill="none" color={color} className={styles.base({ className })} {...props}>
+          <defs>
+            <linearGradient id={`${id}-1`}>
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id={`${id}-2`}>
+              <stop offset="0%" stopColor="currentColor" />
+              <stop offset="50%" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g strokeWidth={strokeHalfWidth * 2}>
+            <>
+              <path
+                stroke={`url(#${id}-1)`}
+                d={`M ${strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${180 - strokeHalfWidth} 90`}
+              ></path>
+              <path
+                stroke={`url(#${id}-2)`}
+                d={`M ${180 - strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${strokeHalfWidth} 90`}
+              ></path>
+            </>
+          </g>
+        </Icon>
+        {EmbedIcon && size === 'large' && <EmbedIcon size="large" color={color} className={styles.icon()} />}
+      </div>
+      {label && size === 'large' && <Label className={styles.label()}>{label}</Label>}
     </div>
   );
 }

package/src/components/progress-indicator/progress-indicator.styles.ts

@@ -2,18 +2,41 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]',
+    slots: {
+      icon: 'absolute inset-0 m-auto',
+      base: 'animate-[spin_0.7s_linear_infinite]',
+      container: 'flex flex-col items-center',
+      label: 'typography-body-9 mt-1.5',
+    },
     variants: {
       size: {
-        xsmall: 'h-2 w-2',
-        small: 'h-3 w-3',
-        medium: 'h-4 w-4',
-        large: 'h-6 w-6',
-        xlarge: 'h-8 w-8',
+        xsmall: { base: 'h-2 w-2' },
+        small: { base: 'h-3 w-3' },
+        medium: { base: 'h-4 w-4' },
+        large: { base: 'h-15 w-15' },
+        xlarge: { base: 'h-15 w-15' },
       },
-      inverted: {
-        true: 'border-b-white border-l-white',
-        false: 'border-b-hero border-l-hero',
+      color: {
+        success: { label: 'text-success' },
+        info: { label: 'text-info' },
+        warning: { label: 'text-warning' },
+        danger: { label: 'text-danger' },
+        system: { label: 'text-system' },
+        white: { label: 'text-white' },
+        black: { label: 'text-black' },
+        background: { label: 'text-background' },
+        border: { label: 'text-border' },
+        borderDark: { label: 'text-borderDark' },
+        focus: { label: 'text-focus' },
+        heading: { label: 'text-heading' },
+        hero: { label: 'text-hero' },
+        light: { label: 'text-light' },
+        link: { label: 'text-link' },
+        muted: { label: 'text-muted' },
+        neutral: { label: 'text-neutral' },
+        pop: { label: 'text-pop' },
+        primary: { label: 'text-primary' },
+        text: { label: 'text-text' },
       },
     },
   },

package/src/components/progress-indicator/progress-indicator.types.ts

@@ -1,17 +1,19 @@
-import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import { ReactNode } from 'react';
 
-import { styles } from './progress-indicator.styles.js';
+import { IconProps } from '../icon/icon.types.js';
 
-type Variants = VariantProps<typeof styles>;
-
-export type ProgressIndicatorProps = {
+export type ProgressIndicatorProps = Omit<IconProps, 'copyrightYear' | 'look'> & {
+  /**
+   * children prop
+   * @default false
+   */
+  children?: ReactNode;
   /**
-   * Whether indicator should be white for a dark background
+   * Icon embedded in progress indicator
    */
-  inverted?: boolean;
+  icon?: (props: IconProps) => JSX.Element;
   /**
-   * Size of progress indicator
+   * Label placed below progress indicator
    */
-  size?: Variants['size'];
-} & HTMLAttributes<Element>;
+  label?: string;
+};

package/src/components/symbol/components/logos/bt-logo.tsx

@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export function BTLogo({
+  'aria-label': ariaLabel = 'BT',
+  copyrightYear = '2025',
+  viewBoxWidth = 105,
+  viewBoxHeight = 43,
+  className,
+  ...props
+}: SymbolProps) {
+  return (
+    <Symbol
+      className={clsx('h-[43px] w-[105px]', className)}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      {...props}
+    >
+      <path
+        d="M14.2593 22.8258C13.8282 22.8258 13.4147 22.6549 13.1099 22.3508C12.8051 22.0467 12.6339 21.6342 12.6339 21.2041C12.6339 20.7741 12.8051 20.3616 13.1099 20.0575C13.4147 19.7534 13.8282 19.5825 14.2593 19.5825H37.175C36.8325 16.9135 35.6262 14.429 33.7395 12.5062C33.7036 12.4767 33.6706 12.4437 33.641 12.408L30.8212 9.57011L30.7103 9.47182L21.2288 0L0 21.2041L21.2288 42.3714L30.6734 32.9119L30.8212 32.7768L33.641 29.9635L33.7764 29.8038C35.6422 27.8953 36.835 25.4332 37.175 22.7889L14.2593 22.8258Z"
+        fill="#007BC6"
+      />
+      <path d="M103.521 1.41278H74.1775V9.02954H84.9027V41.88H93.0543V9.02954H103.78V1.41278H103.521Z" fill="#020202" />
+      <path
+        d="M68.8335 20.2828C70.0116 19.3585 70.9585 18.1739 71.5996 16.8223C72.2407 15.4706 72.5583 13.989 72.5276 12.494C72.6137 10.9994 72.3805 9.50369 71.8434 8.10581C71.3064 6.70796 70.4776 5.43995 69.4122 4.38579C67.2942 2.40788 64.1912 1.41278 60.2016 1.41278H41.4971V17.5063L46.127 21.1919L41.4971 24.8774V41.88H61.2852C69.092 41.88 74.1283 37.1625 74.1283 29.8775C74.2329 27.9442 73.7921 26.0205 72.8563 24.3246C71.9203 22.6287 70.5267 21.2284 68.8335 20.2828ZM49.6487 8.85762H60.2262C62.9475 8.85762 64.6345 10.4301 64.6345 12.9608C64.6371 13.5284 64.5232 14.0906 64.2995 14.6126C64.0759 15.1345 63.7473 15.6052 63.3342 15.9955C62.9211 16.3858 62.4322 16.6874 61.8976 16.8818C61.363 17.0761 60.7942 17.1591 60.2262 17.1254H49.6487V8.85762ZM60.2262 34.3861H49.6487V24.558H60.0538C63.7479 24.558 65.7796 26.3271 65.7796 29.472C65.7796 33.5507 62.7628 34.3861 60.2262 34.3861Z"
+        fill="#020202"
+      />
+    </Symbol>
+  );
+}

package/src/components/symbol/components/logos/bt-multibrand-large-logo.tsx

@@ -0,0 +1,42 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export function BTMultibrandLargeLogo({
+  'aria-label': ariaLabel = 'BT',
+  copyrightYear = '2024',
+  viewBoxWidth = 180,
+  viewBoxHeight = 65,
+  align = 'left',
+  offset = [null, 52.59, 105.18],
+  className,
+  ...props
+}: SymbolProps) {
+  return (
+    <Symbol
+      className={clsx('h-[65px] w-[180px]', className)}
+      aria-label={ariaLabel}
+      align={align}
+      offset={offset}
+      copyrightYear={copyrightYear}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      {...props}
+    >
+      <path
+        d="M10.2799 33.4558C9.96916 33.4558 9.67106 33.3326 9.45135 33.1134C9.23158 32.8941 9.10813 32.5968 9.10813 32.2867C9.10813 31.9767 9.23158 31.6793 9.45135 31.4601C9.67106 31.2408 9.96916 31.1176 10.2799 31.1176H26.8006C26.5537 29.1935 25.684 27.4023 24.3238 26.0161C24.298 25.9948 24.2742 25.9711 24.2528 25.9453L22.2199 23.8994L22.14 23.8285L15.3045 17L0 32.2867L15.3045 47.5468L22.1134 40.7272L22.2199 40.6297L24.2528 38.6016L24.3504 38.4864C25.6955 37.1106 26.5555 35.3356 26.8006 33.4292L10.2799 33.4558Z"
+        fill="#007BC6"
+      />
+      <path
+        d="M74.6314 18.0186H53.4768V23.5097H61.2089V47.1926H67.0856V23.5097H74.8179V18.0186H74.6314Z"
+        fill="#020202"
+      />
+      <path
+        d="M49.6241 31.6225C50.4735 30.9562 51.1562 30.1021 51.6183 29.1277C52.0805 28.1533 52.3095 27.0851 52.2873 26.0073C52.3494 24.9298 52.1813 23.8515 51.7941 22.8438C51.4069 21.836 50.8095 20.9219 50.0414 20.1619C48.5145 18.736 46.2774 18.0186 43.4012 18.0186H29.9165V29.6209L33.2544 32.2779L29.9165 34.9349V47.1926H44.1824C49.8105 47.1926 53.4414 43.7916 53.4414 38.5396C53.5167 37.1459 53.199 35.759 52.5243 34.5364C51.8496 33.3137 50.8448 32.3042 49.6241 31.6225ZM35.7933 23.3858H43.4189C45.3808 23.3858 46.597 24.5194 46.597 26.3439C46.5989 26.7531 46.5167 27.1584 46.3555 27.5347C46.1943 27.911 45.9574 28.2503 45.6596 28.5317C45.3618 28.813 45.0092 29.0305 44.6238 29.1706C44.2384 29.3107 43.8284 29.3705 43.4189 29.3463H35.7933V23.3858ZM43.4189 41.79H35.7933V34.7046H43.2946C45.9578 34.7046 47.4225 35.98 47.4225 38.2473C47.4225 41.1878 45.2476 41.79 43.4189 41.79Z"
+        fill="#020202"
+      />
+    </Symbol>
+  );
+}

package/src/components/symbol/components/logos/bt-multibrand-small-logo.tsx

@@ -0,0 +1,49 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export function BTMultibrandSmallLogo({
+  'aria-label': ariaLabel = 'BT',
+  copyrightYear = '2025',
+  viewBoxWidth = 122,
+  viewBoxHeight = 44,
+  align = 'left',
+  offset = [null, 36.865, 73.73],
+  className,
+  ...props
+}: SymbolProps) {
+  return (
+    <Symbol
+      className={clsx('h-[44px] w-[122px]', className)}
+      aria-label={ariaLabel}
+      align={align}
+      offset={offset}
+      copyrightYear={copyrightYear}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      {...props}
+    >
+      <g clip-path="url(#clip0_2154_48)">
+        <path
+          d="M6.63221 22.6166C6.43171 22.6166 6.23939 22.5372 6.09764 22.3957C5.95586 22.2543 5.87621 22.0624 5.87621 21.8624C5.87621 21.6624 5.95586 21.4705 6.09764 21.3291C6.23939 21.1876 6.43171 21.1081 6.63221 21.1081H17.2907C17.1314 19.8668 16.5703 18.7112 15.6928 17.8169C15.6761 17.8031 15.6608 17.7878 15.647 17.7711L14.3354 16.4512L14.2839 16.4055L9.87386 12L0 21.8624L9.87386 31.7076L14.2667 27.3079L14.3354 27.245L15.647 25.9365L15.71 25.8622C16.5778 24.9746 17.1326 23.8294 17.2907 22.5995L6.63221 22.6166Z"
+          fill="#007BC6"
+        />
+        <path
+          d="M48.1493 12.6571H34.5012V16.1998H39.4897V31.4791H43.2811V16.1998H48.2697V12.6571H48.1493Z"
+          fill="#020202"
+        />
+        <path
+          d="M32.0156 21.4339C32.5636 21.004 33.004 20.453 33.3022 19.8243C33.6004 19.1956 33.7481 18.5065 33.7338 17.8111C33.7739 17.116 33.6654 16.4203 33.4156 15.7701C33.1658 15.12 32.7803 14.5302 32.2848 14.0399C31.2997 13.1199 29.8565 12.6571 28.0008 12.6571H19.301V20.1425L21.4545 21.8567L19.301 23.5709V31.4791H28.5048C32.1359 31.4791 34.4783 29.2849 34.4783 25.8965C34.527 24.9973 34.322 24.1026 33.8867 23.3138C33.4514 22.525 32.8032 21.8737 32.0156 21.4339ZM23.0925 16.1198H28.0122C29.278 16.1198 30.0626 16.8512 30.0626 18.0283C30.0638 18.2923 30.0108 18.5538 29.9068 18.7965C29.8028 19.0393 29.65 19.2582 29.4578 19.4397C29.2657 19.6213 29.0383 19.7616 28.7896 19.852C28.541 19.9424 28.2764 19.981 28.0122 19.9653H23.0925V16.1198ZM28.0122 27.9935H23.0925V23.4223H27.9321C29.6502 23.4223 30.5952 24.2451 30.5952 25.7079C30.5952 27.605 29.1921 27.9935 28.0122 27.9935Z"
+          fill="#020202"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2154_48">
+          <rect width="48.5714" height="20" fill="white" transform="translate(0 12)" />
+        </clipPath>
+      </defs>
+    </Symbol>
+  );
+}