@westpac/ui 0.42.3 → 0.44.0

package/dist/components/pictogram/components/informative/tools-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function ToolsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Tools' , copyrightYear ='2021' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function ToolsPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Tools', copyrightYear = '2021', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("path", {

package/dist/components/pictogram/components/informative/tractor-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function TractorPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Tractor' , copyrightYear ='2021' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function TractorPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Tractor', copyrightYear = '2021', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("path", {

package/dist/components/pictogram/components/informative/truck-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function TruckPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Truck' , copyrightYear ='2025' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function TruckPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Truck', copyrightYear = '2025', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("polygon", {

package/dist/components/pictogram/components/informative/umbrella-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function UmbrellaPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Umbrella' , copyrightYear ='2021' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function UmbrellaPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Umbrella', copyrightYear = '2021', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("path", {

package/dist/components/pictogram/components/informative/unsecure-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function UnsecurePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Unsecure' , copyrightYear ='2021' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function UnsecurePictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Unsecure', copyrightYear = '2021', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("polygon", {

package/dist/components/pictogram/components/informative/wallet-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function WalletPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Wallet' , copyrightYear ='2025' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function WalletPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Wallet', copyrightYear = '2025', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("path", {

package/dist/components/pictogram/components/informative/wearables-pictogram.js

@@ -1,30 +1,17 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
-export function WearablesPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Wearables' , copyrightYear ='2021' , className , ...props }) {
-    return React.createElement(Pictogram, _extends({
+export function WearablesPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Wearables', copyrightYear = '2021', className, ...props }) {
+    return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("g", {
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
         fill: "none",
         fillRule: "evenodd"
     }, React.createElement("path", {

package/dist/components/pictogram/pictogram.component.js

@@ -1,28 +1,15 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React from 'react';
 import { styles } from './pictogram.styles.js';
-export function Pictogram({ copyrightYear ='' , xmlns ='http://www.w3.org/2000/svg' , role ='img' , focusable =false , className , viewBoxWidth , viewBoxHeight , children , ...props }) {
-    return React.createElement("svg", _extends({
+export function Pictogram({ copyrightYear = '', xmlns = 'http://www.w3.org/2000/svg', role = 'img', focusable = false, className, viewBoxWidth, viewBoxHeight, children, ...props }) {
+    return React.createElement("svg", {
         xmlns: xmlns,
         role: role,
         viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
         focusable: focusable,
         className: styles({
             className
-        })
-    }, props), copyrightYear && React.createElement("metadata", null, `Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`), children);
+        }),
+        ...props
+    }, copyrightYear && React.createElement("metadata", null, `Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`), children);
 }

package/dist/components/popover/components/panel/panel.component.js

@@ -1,17 +1,3 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React, { useRef } from 'react';
 import { FocusScope } from 'react-aria';
 import { createPortal } from 'react-dom';
@@ -19,10 +5,10 @@ import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-export function BasePanel({ state , heading , headingTag: Tag = 'h1' , content , placement ='bottom' , id , triggerRef , portal  }) {
+export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'bottom', id, triggerRef, portal }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
-    const { popoverPosition , arrowPosition  } = usePanel({
+    const { popoverPosition, arrowPosition } = usePanel({
         state,
         placement,
         triggerRef,
@@ -66,15 +52,17 @@ export function BasePanel({ state , heading , headingTag: Tag = 'h1' , content ,
         ref: arrowRef
     })));
 }
-export function Panel({ portal =false , ...props }) {
+export function Panel({ portal = false, ...props }) {
     if (portal) {
         const portalValue = typeof portal === 'boolean' ? document.body : portal;
-        return createPortal(React.createElement(BasePanel, _extends({}, props, {
+        return createPortal(React.createElement(BasePanel, {
+            ...props,
             portal: portalValue
-        })), portalValue);
+        }), portalValue);
     }
-    return React.createElement(BasePanel, _extends({
-        portal: portal
-    }, props));
+    return React.createElement(BasePanel, {
+        portal: portal,
+        ...props
+    });
 }
 Panel.displayName = 'Popover.Panel';

package/dist/components/popover/components/panel/panel.hook.js

@@ -24,7 +24,7 @@ const getLeftOffsetPerVerticalPosition = (element)=>{
             return 0;
     }
 };
-export function usePanel({ state , placement ='bottom' , triggerRef , portal  }) {
+export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
     const popoverPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();

package/dist/components/popover/popover.component.js

@@ -4,7 +4,7 @@ import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { Panel } from './components/panel/panel.component.js';
 import { styles as popoverStyles } from './popover.styles.js';
-export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon , portal =false  }) {
+export function Popover({ children, className, headingTag, content, heading, onClick = ()=>undefined, placement, look, soft = false, open = false, linkStyling = false, size = 'medium', icon, portal = false }) {
     const state = useOverlayTriggerState({});
     const panelId = useId();
     const styles = popoverStyles({

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

@@ -1,25 +1,11 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React from 'react';
 import { mergeProps, useProgressBar } from 'react-aria';
 import { styles as progressBarStyles } from './progress-bar.styles.js';
-export function ProgressBar({ className , look ='default' , value =0 , noLabel =false , ...props }) {
+export function ProgressBar({ className, look = 'default', value = 0, noLabel = false, ...props }) {
     const roundedValue = Math.round(value);
     const barValue = `${roundedValue}%`;
-    const { progressBarProps , labelProps  } = useProgressBar({
+    const { progressBarProps, labelProps } = useProgressBar({
         value: roundedValue,
         label: barValue,
         ...props
@@ -27,21 +13,23 @@ export function ProgressBar({ className , look ='default' , value =0 , noLabel =
     const styles = progressBarStyles({
         look
     });
-    return React.createElement("div", _extends({
+    return React.createElement("div", {
         "aria-live": "polite",
         className: styles.base({
             className
+        }),
+        ...mergeProps(progressBarProps, {
+            'aria-valuetext': `${barValue} complete`
         })
-    }, mergeProps(progressBarProps, {
-        'aria-valuetext': `${barValue} complete`
-    })), React.createElement("div", {
+    }, React.createElement("div", {
         style: {
             width: barValue
         },
         className: styles.innerBar()
-    }, React.createElement("span", _extends({
+    }, React.createElement("span", {
         className: styles.label({
             class: `${noLabel || look === 'skinny' ? 'hidden' : ''}`
-        })
-    }, labelProps), barValue)));
+        }),
+        ...labelProps
+    }, barValue)));
 }

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

@@ -1,22 +1,8 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React, { useId } from 'react';
 import { Icon } from '../icon/icon.component.js';
 import { Label } from '../label/label.component.js';
 import { styles as ProgressIndicatorStyles } from './progress-indicator.styles.js';
-export function ProgressIndicator({ color ='hero' , label , size ='medium' , icon: EmbedIcon , className , 'aria-label': ariaLabel = 'Loading' , ...props }) {
+export function ProgressIndicator({ color = 'hero', label, size = 'medium', icon: EmbedIcon, className, 'aria-label': ariaLabel = 'Loading', ...props }) {
     const styles = ProgressIndicatorStyles({
         size,
         color
@@ -44,15 +30,16 @@ export function ProgressIndicator({ color ='hero' , label , size ='medium' , ico
         "aria-label": ariaLabel,
         className: styles.container()
     }, React.createElement("div", {
-        className: "relative"
-    }, React.createElement(Icon, _extends({
+        className: "relative flex items-center justify-center"
+    }, React.createElement(Icon, {
         viewBox: "0 0 180 180",
         fill: "none",
         color: color,
         className: styles.base({
             className
-        })
-    }, props), React.createElement("defs", null, React.createElement("linearGradient", {
+        }),
+        ...props
+    }, React.createElement("defs", null, React.createElement("linearGradient", {
         id: `${id}-1`
     }, React.createElement("stop", {
         offset: "0%",

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

@@ -1,17 +1,3 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useId, useMemo } from 'react';
 import { useFocusRing } from 'react-aria';
@@ -19,7 +5,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 , tag: Tag  }) {
+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(()=>{
@@ -48,7 +34,7 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
         current,
         visited
     ]);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const state = useMemo(()=>{
         if (current && visited) {
             return 'current-visited';
@@ -69,12 +55,13 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
         state,
         isFocusVisible
     });
-    return React.createElement(Tag, null, React.createElement("button", _extends({
+    return React.createElement(Tag, null, React.createElement("button", {
         "aria-expanded": opened,
         className: styles.circleWrapper({}),
         onClick: onToggle,
-        "aria-controls": stepsContainerID
-    }, focusProps), React.createElement(Circle, {
+        "aria-controls": stepsContainerID,
+        ...focusProps
+    }, React.createElement(Circle, {
         className: styles.circle(),
         "aria-hidden": "true"
     }), children, React.createElement(VisuallyHidden, null, visuallyHiddenMessage)), React.createElement(LazyMotion, {

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

@@ -1,22 +1,8 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React, { useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 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' , size ='medium' , children , firstItem , lastItemInGroup , lastItemInRope , furthest , previousStepGroup , ...props }) {
+export function ProgressRopeStep({ className, current, visited, tag: Tag = 'button', size = 'medium', children, firstItem, lastItemInGroup, lastItemInRope, furthest, previousStepGroup, ...props }) {
     const state = useMemo(()=>{
         if (lastItemInRope && visited && current) {
             return 'last-current';
@@ -39,7 +25,7 @@ export function ProgressRopeStep({ className , current , visited , tag: Tag = 'b
         lastItemInRope,
         visited
     ]);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = progressRopeStyles({
         className,
         state,
@@ -65,11 +51,12 @@ export function ProgressRopeStep({ className , current , visited , tag: Tag = 'b
         furthest,
         visited
     ]);
-    return React.createElement(Tag, _extends({
+    return React.createElement(Tag, {
         className: styles.base({}),
         "aria-current": current ? 'step' : false,
-        disabled: state === 'non-visited'
-    }, mergeProps(props, focusProps)), React.createElement(Circle, {
+        disabled: state === 'non-visited',
+        ...mergeProps(props, focusProps)
+    }, React.createElement(Circle, {
         className: styles.circle(),
         "aria-hidden": "true"
     }), children, React.createElement(VisuallyHidden, null, stateText));

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

@@ -1,18 +1,4 @@
 'use client';
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 import React, { useEffect, useMemo, useState } from 'react';
 import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';
 import { styles } from './progress-rope.styles.js';
@@ -24,7 +10,7 @@ const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex, mappedData)=>{
         return acc;
     }, null);
 };
-export function ProgressRope({ 'aria-label': ariaLabel = 'In this form' , role ='navigation' , className , tag: Tag = 'nav' , current =0 , data , headingTag ='h3' , ...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;
@@ -74,11 +60,12 @@ export function ProgressRope({ 'aria-label': ariaLabel = 'In this form' , role =
         mappedData,
         openedGroupStepIndex
     ]);
-    return React.createElement(Tag, _extends({
+    return React.createElement(Tag, {
         className: className,
         role: role,
-        "aria-label": ariaLabel
-    }, props), React.createElement("ol", {
+        "aria-label": ariaLabel,
+        ...props
+    }, React.createElement("ol", {
         className: styles({})
     }, mappedData === null || mappedData === void 0 ? void 0 : mappedData.map((item, index)=>{
         var _mappedData_;