@westpac/ui 0.14.1 → 0.16.0

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.d.ts

@@ -2,4 +2,4 @@ import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.type
 /**
  * @private
  */
-export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, tag: Tag, }: ProgressRopeGroupStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.js

@@ -19,7 +19,7 @@ import { Circle, VisuallyHidden } from '../../../index.js';
 import { ProgressRopeStep } from '../index.js';
 import { styles as progressRopeGroupStyles } from './progress-rope-group-step.styles.js';
 const loadAnimations = ()=>import('./progress-rope-group-step.utils.js').then((res)=>res.default);
-export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep , children , firstItem , opened , onToggle  }) {
+export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep , children , firstItem , opened , onToggle , tag: Tag  }) {
     const id = useId();
     const stepsContainerID = `progress-rope-group-steps-container-${id}`;
     const current = useMemo(()=>{
@@ -36,15 +36,17 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
     ]);
     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';
+        return ', not started';
     }, [
         steps,
-        furthestVisitedStep
+        furthestVisitedStep,
+        current,
+        visited
     ]);
     const { isFocusVisible , focusProps  } = useFocusRing();
     const state = useMemo(()=>{
@@ -67,7 +69,7 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
         state,
         isFocusVisible
     });
-    return React.createElement(React.Fragment, null, React.createElement("button", _extends({
+    return React.createElement(Tag, null, React.createElement("button", _extends({
         "aria-expanded": opened,
         className: styles.circleWrapper({}),
         onClick: onToggle,
@@ -75,7 +77,7 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
     }, focusProps), React.createElement(Circle, {
         className: styles.circle(),
         "aria-hidden": "true"
-    }), children, React.createElement(VisuallyHidden, null, ", ", visuallyHiddenMessage)), React.createElement(LazyMotion, {
+    }), children, React.createElement(VisuallyHidden, null, visuallyHiddenMessage)), React.createElement(LazyMotion, {
         features: loadAnimations
     }, React.createElement(AnimatePresence, {
         initial: false

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.d.ts

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

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.component.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 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';
 export function ProgressRopeStep({ className , current , visited , tag: Tag = 'button' , type , size ='medium' , children , firstItem , lastItemInGroup , lastItemInRope , furthest , previousStepGroup , ...props }) {
     const state = useMemo(()=>{
@@ -51,12 +51,24 @@ export function ProgressRopeStep({ className , current , visited , tag: Tag = 'b
         previousStepGroup: furthest && previousStepGroup,
         isFocusVisible
     });
+    const stateText = useMemo(()=>{
+        if (current) {
+            return ', in progress';
+        }
+        if (visited || !current && furthest) {
+            return ', complete';
+        }
+        return ', not started';
+    }, [
+        current,
+        visited
+    ]);
     return React.createElement(Tag, _extends({
         className: styles.base({}),
-        "aria-current": current,
+        "aria-current": current ? 'step' : false,
         disabled: state === 'non-visited'
     }, mergeProps(props, focusProps)), React.createElement(Circle, {
         className: styles.circle(),
         "aria-hidden": "true"
-    }), children);
+    }), children, React.createElement(VisuallyHidden, null, stateText));
 }

package/dist/components/progress-rope/progress-rope.component.d.ts

@@ -1,2 +1,2 @@
 import { type ProgressRopeProps } from './progress-rope.types.js';
-export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, headingTag, ...props }: ProgressRopeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/progress-rope.component.js

@@ -24,7 +24,7 @@ const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex, mappedData)=>{
         return acc;
     }, null);
 };
-export function ProgressRope({ 'aria-label': ariaLabel = 'Form steps' , role ='navigation' , className , tag: Tag = 'nav' , current =0 , data , ...props }) {
+export function ProgressRope({ 'aria-label': ariaLabel = 'In this form' , role ='navigation' , className , tag: Tag = 'nav' , current =0 , data , headingTag ='h3' , ...props }) {
     const [furthestVisitedStep, setFurthestVisitedStep] = useState(current);
     const mappedData = useMemo(()=>{
         let autoIncrement = -1;
@@ -89,7 +89,8 @@ export function ProgressRope({ 'aria-label': ariaLabel = 'Form steps' , role ='n
             currentKey: current,
             steps: item.steps,
             opened: openedGroupStepIndex === index,
-            onToggle: ()=>setOpenedGroupStepIndex((state)=>state === index ? null : index)
+            onToggle: ()=>setOpenedGroupStepIndex((state)=>state === index ? null : index),
+            tag: headingTag
         }, item.text) : React.createElement(ProgressRopeStep, {
             firstItem: index === 0,
             type: item.type,

package/dist/components/progress-rope/progress-rope.types.d.ts

@@ -27,6 +27,11 @@ export type ProgressRopeProps = {
         text: ReactNode;
         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/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const RadioGroupRadio: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     hint?: React.ReactNode;
-} & import("react-aria").AriaRadioProps & React.RefAttributes<unknown>>;
+    label: React.ReactNode;
+} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<unknown>>;

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.js

@@ -17,13 +17,13 @@ import React, { forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
-function BaseRadioGroupRadio({ className , hint , children , ...props }, ref) {
+function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
     const state = useContext(RadioGroupContext);
     const { size , orientation  } = state;
     const localRef = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,
-        children
+        children: label
     }, state, localRef);
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = radioStyles({
@@ -46,7 +46,7 @@ function BaseRadioGroupRadio({ className , hint , children , ...props }, ref) {
         className: styles.textWrapper()
     }, React.createElement("span", {
         className: styles.labelText()
-    }, children), hint && React.createElement("span", {
+    }, label), hint && React.createElement("span", {
         className: styles.hintText()
     }, hint)));
 }

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.types.d.ts

@@ -9,4 +9,8 @@ export type RadioGroupRadioProps = {
      * Renders hint under radio, most likely a `string` but could be something else
      */
     hint?: ReactNode;
-} & AriaRadioProps;
+    /**
+     * Label to render
+     */
+    label: ReactNode;
+} & Omit<AriaRadioProps, 'children'>;

package/dist/components/radio-group/radio-group.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
-export declare function RadioGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup({ className, radios, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio-group/radio-group.component.js

@@ -13,12 +13,12 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { cloneElement, 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';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
     name: '',
@@ -33,7 +33,7 @@ export const RadioGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium'
 });
-export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
+export function RadioGroup({ className , radios , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
@@ -47,21 +47,20 @@ export function RadioGroup({ className , children , label , orientation ='vertic
     const { isFocusVisible , focusProps  } = useFocusRing();
     const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
     const firstNewRadioRef = useRef(null);
-    const revealAmount = children && children.length - showAmount;
+    const revealAmount = radios && radios.length - showAmount;
     const styles = radioGroupStyles({
         orientation,
         isFocusVisible
     });
+    const panelId = useId();
     const childrenToRender = useMemo(()=>{
-        const newChildren = children.map((child, index)=>{
-            return cloneElement(child, {
+        const newChildren = radios.map((radio, index)=>React.createElement(RadioGroupRadio, _extends({
                 key: index,
                 ref: index === showAmount ? firstNewRadioRef : null
-            });
-        });
+            }, radio)));
         return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
     }, [
-        children,
+        radios,
         hiddenOptions,
         showAmount
     ]);
@@ -81,7 +80,8 @@ export function RadioGroup({ className , children , label , orientation ='vertic
     }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
-        className: styles.radioWrapper()
+        className: styles.radioWrapper(),
+        id: panelId
     }, React.createElement(RadioGroupContext.Provider, {
         value: {
             ...state,
@@ -95,7 +95,9 @@ export function RadioGroup({ className , children , label , orientation ='vertic
         iconAfter: ()=>React.createElement(ExpandMoreIcon, {
                 size: "small",
                 color: "link"
-            })
+            }),
+        "aria-controls": panelId,
+        "aria-expanded": !hiddenOptions
     }, focusProps), React.createElement("p", {
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));

package/dist/components/radio-group/radio-group.types.d.ts

@@ -1,12 +1,8 @@
-import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 import { HintProps } from '../index.js';
+import { RadioGroupRadioProps } from './components/radio-group-radio/radio-group-radio.types.js';
 export type RadioGroupProps = {
-    /**
-     * The `Radio` components to render
-     */
-    children: ReactNode[];
     /**
      * String to override base style
      */
@@ -19,6 +15,10 @@ export type RadioGroupProps = {
      * hint message
      */
     hintMessage?: HintProps['children'];
+    /**
+     * The `Radio` components to render
+     */
+    radios: RadioGroupRadioProps[];
     /**
      * Amount of Radios to display, remainder will be hidden behind reveal button
      */

package/dist/components/repeater/repeater.styles.js

@@ -18,7 +18,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/dist/components/selector/components/selector-button-group/selector-button-group.component.js

@@ -44,14 +44,14 @@ export function SelectorButtonGroup({ className , children , label , orientation
         description,
         ...props
     });
-    return React.createElement("div", _extends({
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", _extends({
         className: styles({
             className,
             orientation
         })
-    }, fieldProps), label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
-        message: errorMessage
-    })), React.createElement(SelectorButtonContext.Provider, {
+    }, fieldProps), React.createElement(SelectorButtonContext.Provider, {
         value: state
-    }, children));
+    }, children)));
 }

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.js

@@ -33,13 +33,13 @@ export function SelectorCheckboxGroup(props) {
     const { children , label , description , errorMessage  } = props;
     const state = useCheckboxGroupState(props);
     const { groupProps , labelProps , descriptionProps , errorMessageProps  } = useCheckboxGroup(props, state);
-    return React.createElement("div", _extends({}, groupProps, {
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", _extends({}, groupProps, {
         className: styles({
             className: groupProps.className
         })
-    }), label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
-        message: errorMessage
-    })), React.createElement(SelectorCheckboxGroupContext.Provider, {
+    }), React.createElement(SelectorCheckboxGroupContext.Provider, {
         value: state
-    }, children));
+    }, children)));
 }

package/dist/components/selector/components/selector-link-group/selector-link-group.component.js

@@ -32,14 +32,14 @@ export function SelectorLinkGroup({ className , children , label , orientation =
     const state = {
         isDisabled
     };
-    return React.createElement("div", _extends({
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", _extends({
         className: styles({
             className,
             orientation
         })
-    }, fieldProps), label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
-        message: errorMessage
-    })), React.createElement(SelectorLinkContext.Provider, {
+    }, fieldProps), React.createElement(SelectorLinkContext.Provider, {
         value: state
-    }, children));
+    }, children)));
 }

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -42,17 +42,17 @@ export function SelectorRadioGroup({ className , children , label , orientation
         label,
         orientation
     }, state);
-    return React.createElement("div", _extends({
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", _extends({
         className: styles({
             className,
             orientation
         })
-    }, radioGroupProps), label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
-        message: errorMessage
-    })), React.createElement(SelectorRadioGroupContext.Provider, {
+    }, radioGroupProps), React.createElement(SelectorRadioGroupContext.Provider, {
         value: {
             ...state,
             orientation
         }
-    }, children));
+    }, children)));
 }

package/dist/components/symbol/components/logos/bom-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function BOMLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2023' , viewBoxWidth =150 , viewBoxHeight =39 , className , ...props }) {
+export function BOMLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2024' , viewBoxWidth =150 , viewBoxHeight =39 , className , ...props }) {
     return React.createElement(Symbol, _extends({
         className: clsx('h-[39px] w-[150px]', className),
         "aria-label": ariaLabel,

package/dist/components/symbol/components/logos/bom-multibrand-large-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function BOMMultibrandLargeLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2023' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
+export function BOMMultibrandLargeLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2024' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
     null,
     15.305,
     30.61

package/dist/components/symbol/components/logos/bom-multibrand-small-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function BOMMultibrandSmallLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2023' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
+export function BOMMultibrandSmallLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2024' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
     null,
     48,
     96

package/dist/components/symbol/components/logos/bom-shield-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function BOMShieldLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2023' , viewBoxWidth =26 , viewBoxHeight =39 , className , ...props }) {
+export function BOMShieldLogo({ 'aria-label': ariaLabel = 'Bank of Melbourne' , copyrightYear ='2024' , viewBoxWidth =26 , viewBoxHeight =39 , className , ...props }) {
     return React.createElement(Symbol, _extends({
         className: clsx('h-[39px] w-[26px]', className),
         "aria-label": ariaLabel,

package/dist/components/symbol/components/logos/bsa-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const BSALogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2023' , viewBoxWidth =90 , viewBoxHeight =41 , className , ...props })=>React.createElement(Symbol, _extends({
+export const BSALogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2024' , viewBoxWidth =90 , viewBoxHeight =41 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[41px] w-[90px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/bsa-multibrand-large-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const BSAMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2023' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
+export const BSAMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2024' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
     null,
     45,
     90

package/dist/components/symbol/components/logos/bsa-multibrand-small-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const BSAMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2023' , viewBoxHeight =44 , viewBoxWidth =122 , align ='left' , offset =[
+export const BSAMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2024' , viewBoxHeight =44 , viewBoxWidth =122 , align ='left' , offset =[
     null,
     26,
     52

package/dist/components/symbol/components/logos/bsa-stacked-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const BSAStackedLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2023' , viewBoxWidth =32 , viewBoxHeight =54 , className , ...props })=>React.createElement(Symbol, _extends({
+export const BSAStackedLogo = ({ 'aria-label': ariaLabel = 'Bank SA' , copyrightYear ='2024' , viewBoxWidth =32 , viewBoxHeight =54 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[54px] w-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/rams-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React, { useId } from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RAMSLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2023' , viewBoxWidth =99 , viewBoxHeight =51 , className , ...props })=>{
+export const RAMSLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2024' , viewBoxWidth =99 , viewBoxHeight =51 , className , ...props })=>{
     const id = useId();
     return React.createElement(Symbol, _extends({
         className: clsx('h-[51px] w-[99px]', className),

package/dist/components/symbol/components/logos/rams-multibrand-large-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RAMSMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2023' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
+export const RAMSMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2024' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
     null,
     40.5,
     81

package/dist/components/symbol/components/logos/rams-multibrand-small-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RAMSMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2023' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
+export const RAMSMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'RAMS' , copyrightYear ='2024' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
     null,
     25,
     50

package/dist/components/symbol/components/logos/red-avatar-circle-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RedAvatarCircleLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2023' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
+export const RedAvatarCircleLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2024' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[64px] w-[64px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/red-avatar-circle-reversed-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RedAvatarCircleReversedLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2023' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
+export const RedAvatarCircleReversedLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2024' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[64px] w-[64px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/red-avatar-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const RedAvatarLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2023' , viewBoxWidth =67 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+export const RedAvatarLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2024' , viewBoxWidth =67 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[32px] w-[67px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/stg-dragon-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const STGDragonLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2023' , viewBoxWidth =54 , viewBoxHeight =38 , className , ...props })=>React.createElement(Symbol, _extends({
+export const STGDragonLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2024' , viewBoxWidth =54 , viewBoxHeight =38 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[38px] w-[54px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/stg-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const STGLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2023' , viewBoxWidth =170 , viewBoxHeight =51 , className , ...props })=>React.createElement(Symbol, _extends({
+export const STGLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2024' , viewBoxWidth =170 , viewBoxHeight =51 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[51px] w-[170px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,

package/dist/components/symbol/components/logos/stg-multibrand-large-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const STGMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2023' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
+export const STGMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2024' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
     null,
     5,
     10

package/dist/components/symbol/components/logos/stg-multibrand-small-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const STGMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2023' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
+export const STGMultibrandSmallLogo = ({ 'aria-label': ariaLabel = 'St.George' , copyrightYear ='2024' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
     null,
     34,
     68

package/dist/components/symbol/components/logos/wbc-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function WBCLogo({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2023' , viewBoxWidth =69 , viewBoxHeight =28 , className , ...props }) {
+export function WBCLogo({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2024' , viewBoxWidth =69 , viewBoxHeight =28 , className , ...props }) {
     return React.createElement(Symbol, _extends({
         className: clsx('h-[28px] w-[69px]', className),
         "aria-label": ariaLabel,

package/dist/components/symbol/components/logos/wbc-multibrand-large-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const WBCMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2023' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
+export const WBCMultibrandLargeLogo = ({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2024' , viewBoxWidth =180 , viewBoxHeight =65 , align ='left' , offset =[
     null,
     55.5,
     111

package/dist/components/symbol/components/logos/wbc-multibrand-small-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export function WBCMultibrandSmallLogo({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2023' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
+export function WBCMultibrandSmallLogo({ 'aria-label': ariaLabel = 'Westpac' , copyrightYear ='2024' , viewBoxWidth =122 , viewBoxHeight =44 , align ='left' , offset =[
     null,
     35,
     70

package/dist/components/symbol/components/logos/wbg-internal-logo.js

@@ -15,7 +15,7 @@ function _extends() {
 import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
-export const WBGInternalLogo = ({ 'aria-label': ariaLabel = 'We Are Westpac Group' , copyrightYear ='2023' , viewBoxWidth =233 , viewBoxHeight =48 , className , ...props })=>React.createElement(Symbol, _extends({
+export const WBGInternalLogo = ({ 'aria-label': ariaLabel = 'We Are Westpac Group' , copyrightYear ='2024' , viewBoxWidth =233 , viewBoxHeight =48 , className , ...props })=>React.createElement(Symbol, _extends({
         className: clsx('h-[48px] w-[233px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,