@westpac/ui 0.15.0 → 0.17.0

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

@@ -12,7 +12,7 @@ export function CashPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Cash',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function ChatPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Chat',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function ClockPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Clock',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function CoinsPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Coins',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/desktop-computer-pictogram.tsx

@@ -12,7 +12,7 @@ export function DesktopComputerPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Desktop computer',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/dollar-sign-pictogram.tsx

@@ -12,7 +12,7 @@ export function DollarSignPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Dollar sign',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/drivers-licence-pictogram.tsx

@@ -12,7 +12,7 @@ export function DriversLicencePictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Drivers licence',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function EftposPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Eftpos',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/envelope-email-pictogram.tsx

@@ -12,7 +12,7 @@ export function EnvelopeEmailPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Email envelope',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/generic-document-pictogram.tsx

@@ -12,7 +12,7 @@ export function GenericDocumentPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Generic document',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function GiftPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Gift',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function GlobePictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Globe',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/graph-decreasing-pictogram.tsx

@@ -12,7 +12,7 @@ export function GraphDecreasingPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Graph showing decreasing trend',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function HousePictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'House',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/medicare-card-pictogram.tsx

@@ -12,7 +12,7 @@ export function MedicareCardPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Medicare card',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/mobile-device-pictogram.tsx

@@ -12,7 +12,7 @@ export function MobileDevicePictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Mobile device',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/money-in-pictogram.tsx

@@ -12,7 +12,7 @@ export function MoneyInPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Money in',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/money-out-pictogram.tsx

@@ -12,7 +12,7 @@ export function MoneyOutPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Money out',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/padlock-locked-pictogram.tsx

@@ -12,7 +12,7 @@ export function PadlockLockedPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Locked padlock',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/padlock-unlocked-pictogram.tsx

@@ -12,7 +12,7 @@ export function PadlockUnlockedPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Unlocked padlock',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function PassportPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Passport',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/percent-sign-pictogram.tsx

@@ -12,7 +12,7 @@ export function PercentSignPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Percent sign',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function PersonPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Person',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/piggy-bank-pictogram.tsx

@@ -12,7 +12,7 @@ export function PiggyBankPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Piggy bank',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function StarPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Star',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function StopwatchPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Stopwatch',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

package/src/components/pictogram/components/informative/thumbs-up-pictogram.tsx

@@ -12,7 +12,7 @@ export function ThumbsUpPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Thumbs up',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function TickPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Tick',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function TruckPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Truck',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -12,7 +12,7 @@ export function WalletPictogram({
   viewBoxWidth = 78,
   viewBoxHeight = 78,
   'aria-label': ariaLabel = 'Wallet',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   className,
   ...props
 }: PictogramProps) {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useProgressBar } from 'react-aria';
+import { mergeProps, useProgressBar } from 'react-aria';
 
 import { styles as progressBarStyles } from './progress-bar.styles.js';
 import { type ProgressBarProps } from './progress-bar.types.js';
@@ -19,7 +19,11 @@ export function ProgressBar({ className, look = 'default', value = 0, noLabel =
   const styles = progressBarStyles({ look });
 
   return (
-    <div {...progressBarProps} className={styles.base({ className })}>
+    <div
+      aria-live="polite"
+      className={styles.base({ className })}
+      {...mergeProps(progressBarProps, { 'aria-valuetext': `${barValue} complete` })}
+    >
       <div style={{ width: barValue }} className={styles.innerBar()}>
         <span className={styles.label({ class: `${noLabel || look === 'skinny' ? 'hidden' : ''}` })} {...labelProps}>
           {barValue}

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx

@@ -21,6 +21,7 @@ export function ProgressRopeGroupStep({
   firstItem,
   opened,
   onToggle,
+  tag: Tag,
 }: ProgressRopeGroupStepProps) {
   const id = useId();
   const stepsContainerID = `progress-rope-group-steps-container-${id}`;
@@ -35,13 +36,13 @@ export function ProgressRopeGroupStep({
 
   const visuallyHiddenMessage = useMemo(() => {
     if (steps.slice(-1)[0].index < (furthestVisitedStep || 0)) {
-      return 'completed';
+      return ', completed';
     }
-    if (current) {
-      return 'in progress';
+    if (current || visited) {
+      return ', in progress';
     }
-    return 'not started';
-  }, [steps, furthestVisitedStep]);
+    return ', not started';
+  }, [steps, furthestVisitedStep, current, visited]);
 
   const { isFocusVisible, focusProps } = useFocusRing();
 
@@ -60,7 +61,7 @@ export function ProgressRopeGroupStep({
 
   const styles = progressRopeGroupStyles({ firstItem, state, isFocusVisible });
   return (
-    <>
+    <Tag>
       <button
         aria-expanded={opened}
         className={styles.circleWrapper({})}
@@ -70,7 +71,7 @@ export function ProgressRopeGroupStep({
       >
         <Circle className={styles.circle()} aria-hidden="true" />
         {children}
-        <VisuallyHidden>, {visuallyHiddenMessage}</VisuallyHidden>
+        <VisuallyHidden>{visuallyHiddenMessage}</VisuallyHidden>
       </button>
       <LazyMotion features={loadAnimations}>
         <AnimatePresence initial={false}>
@@ -110,6 +111,6 @@ export function ProgressRopeGroupStep({
           )}
         </AnimatePresence>
       </LazyMotion>
-    </>
+    </Tag>
   );
 }

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts

@@ -36,4 +36,8 @@ export type ProgressRopeGroupStepProps = {
    * Steps to render
    */
   steps: (ProgressRopeStepItem & { index: number })[];
+  /**
+   * Tag for the heading wrapper
+   */
+  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
-import { Circle } from '../../../index.js';
+import { Circle, VisuallyHidden } from '../../../index.js';
 
 import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
 import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
@@ -57,15 +57,26 @@ export function ProgressRopeStep({
     isFocusVisible,
   });
 
+  const stateText = useMemo(() => {
+    if (current) {
+      return ', in progress';
+    }
+    if (visited || (!current && furthest)) {
+      return ', complete';
+    }
+    return ', not started';
+  }, [current, visited]);
+
   return (
     <Tag
       className={styles.base({})}
-      aria-current={current}
+      aria-current={current ? 'step' : false}
       disabled={state === 'non-visited'}
       {...mergeProps(props, focusProps)}
     >
       <Circle className={styles.circle()} aria-hidden="true" />
       {children}
+      <VisuallyHidden>{stateText}</VisuallyHidden>
     </Tag>
   );
 }

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

@@ -16,12 +16,13 @@ const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex: number, mappedData
 };
 
 export function ProgressRope({
-  'aria-label': ariaLabel = 'Form steps',
+  'aria-label': ariaLabel = 'In this form',
   role = 'navigation',
   className,
   tag: Tag = 'nav',
   current = 0,
   data,
+  headingTag = 'h3',
   ...props
 }: ProgressRopeProps) {
   const [furthestVisitedStep, setFurthestVisitedStep] = useState<number>(current);
@@ -84,6 +85,7 @@ export function ProgressRope({
                   steps={item.steps}
                   opened={openedGroupStepIndex === index}
                   onToggle={() => setOpenedGroupStepIndex(state => (state === index ? null : index))}
+                  tag={headingTag}
                 >
                   {item.text}
                 </ProgressRopeGroupStep>

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

@@ -31,6 +31,11 @@ export type ProgressRopeProps = {
         type: 'group';
       }
   )[];
+  /**
+   * The semantic tag for the group step headings
+   * @default h3
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
    * Tag to render
    * @default nav

package/src/components/radio-group/radio-group.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
@@ -47,6 +47,7 @@ export function RadioGroup({
   const firstNewRadioRef = useRef<HTMLDivElement>(null);
   const revealAmount = radios && radios.length - showAmount;
   const styles = radioGroupStyles({ orientation, isFocusVisible });
+  const panelId = useId();
   const childrenToRender = useMemo(() => {
     const newChildren = radios.map((radio, index) => (
       <RadioGroupRadio key={index} ref={index === showAmount ? firstNewRadioRef : null} {...radio} />
@@ -68,7 +69,7 @@ export function RadioGroup({
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <div className={styles.radioWrapper()}>
+      <div className={styles.radioWrapper()} id={panelId}>
         <RadioGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}
         </RadioGroupContext.Provider>
@@ -78,6 +79,8 @@ export function RadioGroup({
             className={styles.revealButton()}
             look="link"
             iconAfter={() => <ExpandMoreIcon size="small" color="link" />}
+            aria-controls={panelId}
+            aria-expanded={!hiddenOptions}
             {...focusProps}
           >
             <p className={styles.buttonText()}>{`Show ${revealAmount} more ${

package/src/components/repeater/repeater.component.tsx

@@ -99,6 +99,7 @@ export function Repeater({
                         size="small"
                         soft
                         onClick={() => handleRemove(item.id, index)}
+                        type="button"
                       >
                         Remove
                       </Button>
@@ -118,6 +119,7 @@ export function Repeater({
           size="small"
           soft
           onClick={() => handleAdd()}
+          type="button"
         >
           {addText}
         </Button>

package/src/components/repeater/repeater.styles.ts

@@ -20,7 +20,7 @@ export const styles = tv(
         true: {
           item: 'border-t-2 border-neutral pt-[0.625rem]',
           content: 'px-0 pb-7 pt-0 md:px-6',
-          removeBtn: 'relative mb-5 ml-3',
+          removeBtn: 'relative mb-5 md:ml-6',
           footer: 'border-t-2 border-neutral',
         },
       },

package/src/components/selector/components/selector-button-group/selector-button-group.component.tsx

@@ -5,7 +5,6 @@ import { useField } from 'react-aria';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorButtonGroupOption } from './components/index.js';
 import { styles } from './selector-button-group.styles.js';
 import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
 
@@ -52,11 +51,13 @@ export function SelectorButtonGroup({
   });
 
   return (
-    <div className={styles({ className, orientation })} {...fieldProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
-      <SelectorButtonContext.Provider value={state}>{children}</SelectorButtonContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...fieldProps}>
+        <SelectorButtonContext.Provider value={state}>{children}</SelectorButtonContext.Provider>
+      </div>
+    </>
   );
 }

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx

@@ -6,7 +6,6 @@ import { useCheckboxGroupState } from 'react-stately';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 import {
   type SelectorCheckboxGroupContextState,
@@ -31,13 +30,15 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
 
   return (
-    <div {...groupProps} className={styles({ className: groupProps.className })}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
-    </div>
+      <div {...groupProps} className={styles({ className: groupProps.className })}>
+        <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
+      </div>
+    </>
   );
 }

package/src/components/selector/components/selector-link-group/selector-link-group.component.tsx

@@ -5,7 +5,6 @@ import { useField } from 'react-aria';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorLinkGroupOption } from './components/index.js';
 import { styles } from './selector-link-group.styles.js';
 import { SelectorLinkGroupProps } from './selector-link-group.types.js';
 
@@ -35,11 +34,13 @@ export function SelectorLinkGroup({
   const state: { isDisabled?: boolean } = { isDisabled };
 
   return (
-    <div className={styles({ className, orientation })} {...fieldProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
-      <SelectorLinkContext.Provider value={state}>{children}</SelectorLinkContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...fieldProps}>
+        <SelectorLinkContext.Provider value={state}>{children}</SelectorLinkContext.Provider>
+      </div>
+    </>
   );
 }

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -6,7 +6,6 @@ import { useRadioGroupState } from 'react-stately';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
 
@@ -40,15 +39,17 @@ export function SelectorRadioGroup({
   );
 
   return (
-    <div className={styles({ className, orientation })} {...radioGroupProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
-        {children}
-      </SelectorRadioGroupContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...radioGroupProps}>
+        <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
+          {children}
+        </SelectorRadioGroupContext.Provider>
+      </div>
+    </>
   );
 }

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

@@ -6,7 +6,7 @@ import { type SymbolProps } from '../../symbol.types.js';
 
 export function BOMLogo({
   'aria-label': ariaLabel = 'Bank of Melbourne',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   viewBoxWidth = 150,
   viewBoxHeight = 39,
   className,