@westpac/ui 0.42.3 → 0.44.0

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.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 { motion, useAnimation } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
@@ -26,10 +12,10 @@ function checkIfItIsMobile(breakpoint) {
     }
 }
 const MEDIUM_BREAKPOINT_AS_NUMBER = +BREAKPOINTS.md.replace('px', '');
-export function BottomSheetModal({ state , height , width , children , portalContainer , ...props }) {
+export function BottomSheetModal({ state, height, width, children, portalContainer, ...props }) {
     const styles = bottomSheetModalStyles({});
     const ref = useRef(null);
-    const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
+    const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
     const controls = useAnimation();
     const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
     const brandContainer = useMemo(()=>{
@@ -72,9 +58,10 @@ export function BottomSheetModal({ state , height , width , children , portalCon
     }
     return React.createElement(Overlay, {
         portalContainer: portalContainer || brandContainer
-    }, React.createElement("div", _extends({
-        className: styles.underlay()
-    }, underlayProps), React.createElement(motion.div, {
+    }, React.createElement("div", {
+        className: styles.underlay(),
+        ...underlayProps
+    }, React.createElement(motion.div, {
         animate: controls,
         dragElastic: 0,
         initial: "hidden",
@@ -97,13 +84,13 @@ export function BottomSheetModal({ state , height , width , children , portalCon
             }
         },
         className: styles.motionWrapper()
-    }, React.createElement("div", _extends({
-        className: styles.modal()
-    }, modalProps, {
+    }, React.createElement("div", {
+        className: styles.modal(),
+        ...modalProps,
         ref: ref,
         style: {
             height,
             width
         }
-    }), children))));
+    }, children))));
 }

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -1,30 +1,19 @@
 '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, { Children, cloneElement } from 'react';
 import { useBreadcrumbs } from 'react-aria';
-export function Breadcrumb({ className , children , 'aria-label': ariaLabel = 'Breadcrumb' , ...props }) {
-    const { navProps  } = useBreadcrumbs(props);
+export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Breadcrumb', ...props }) {
+    const { navProps } = useBreadcrumbs(props);
     const childCount = Children.count(children);
-    var _cloneElement;
-    return React.createElement("nav", _extends({
+    return React.createElement("nav", {
         className: className,
-        "aria-label": ariaLabel
-    }, navProps), React.createElement("ol", {
+        "aria-label": ariaLabel,
+        ...navProps
+    }, React.createElement("ol", {
         className: "m-0 flex list-none p-0"
-    }, Children.map(children, (child, i)=>(_cloneElement = cloneElement(child, {
+    }, Children.map(children, (child, i)=>{
+        var _cloneElement;
+        return (_cloneElement = cloneElement(child, {
             isCurrent: i === childCount - 1
-        })) !== null && _cloneElement !== void 0 ? _cloneElement : React.createElement(React.Fragment, null))));
+        })) !== null && _cloneElement !== void 0 ? _cloneElement : React.createElement(React.Fragment, null);
+    })));
 }

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.js

@@ -1,26 +1,12 @@
 '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, { forwardRef, useRef } from 'react';
 import { useBreadcrumbItem } from 'react-aria';
 import { ArrowRightIcon } from '../../../icon/index.js';
 import { styles } from './breadcrumb-item.styles.js';
-export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =false , href , children , tag: Tag = 'span' , ...props }, propRef) {
+export function BaseBreadcrumbItem({ className, isDisabled = false, isCurrent = false, href, children, tag: Tag = 'span', ...props }, propRef) {
     const ref = useRef(propRef);
     const FinalTag = Tag === 'a' && isDisabled || Tag === 'a' && isCurrent ? 'span' : Tag;
-    const { itemProps  } = useBreadcrumbItem({
+    const { itemProps } = useBreadcrumbItem({
         ...props,
         children,
         isDisabled,
@@ -29,17 +15,18 @@ export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =
     }, ref);
     return React.createElement("li", {
         className: "inline-flex items-center"
-    }, React.createElement(FinalTag, _extends({}, {
-        ...itemProps,
-        ref: propRef,
-        href: FinalTag === 'a' ? href : undefined
-    }, {
+    }, React.createElement(FinalTag, {
+        ...{
+            ...itemProps,
+            ref: propRef,
+            href: FinalTag === 'a' ? href : undefined
+        },
         className: styles({
             className,
             isDisabled,
             isCurrent
         })
-    }), children), !isCurrent && React.createElement("span", {
+    }, children), !isCurrent && React.createElement("span", {
         "aria-hidden": "true",
         className: "flex items-center px-0.5"
     }, React.createElement(ArrowRightIcon, {

package/dist/components/button/button.component.js

@@ -1,24 +1,10 @@
 '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, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className , size ='medium' , look ='hero' , soft , block =false , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconLook , iconColor , iconSize , children , ...props }, ref) {
-    const { isFocusVisible , focusProps  } = useFocusRing();
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, ...props }, ref) {
+    const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
         size
@@ -32,12 +18,13 @@ function BaseButton({ className , size ='medium' , look ='hero' , soft , block =
         isFocusVisible,
         hasChildren: !!children
     });
-    return React.createElement(Tag, _extends({
+    return React.createElement(Tag, {
         ref: ref,
         className: styles.base({
             className
-        })
-    }, mergeProps(props, focusProps)), IconBefore && React.createElement(IconBefore, {
+        }),
+        ...mergeProps(props, focusProps)
+    }, IconBefore && React.createElement(IconBefore, {
         look: iconLook,
         size: btnIconSize,
         className: styles.iconBefore(),

package/dist/components/button-dropdown/button-dropdown.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, { useCallback, useEffect, useId, useRef } from 'react';
 import { useButton, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
@@ -20,7 +6,7 @@ import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
-export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore: IconBefore , open =false , text , children , size , look ='hero' , soft =false , block =false  }) {
+export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, look = 'hero', soft = false, block = false }) {
     const ref = useRef(null);
     const panelId = useId();
     const styles = buttonDropdownStyles({
@@ -30,10 +16,10 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
     const state = useOverlayTriggerState({
         defaultOpen: open
     });
-    const { triggerProps  } = useOverlayTrigger({
+    const { triggerProps } = useOverlayTrigger({
         type: 'menu'
     }, state, ref);
-    const { buttonProps  } = useButton(triggerProps, ref);
+    const { buttonProps } = useButton(triggerProps, ref);
     const keyHandler = useCallback((event)=>{
         if (state.isOpen && event.key === 'Escape') state.close();
     }, [
@@ -47,11 +33,12 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
     }, [
         keyHandler
     ]);
-    return React.createElement(React.Fragment, null, React.createElement(Button, _extends({
+    return React.createElement(React.Fragment, null, React.createElement(Button, {
         ref: ref,
-        iconAfter: (props)=>React.createElement(DropDownIcon, _extends({
-                "aria-hidden": true
-            }, props)),
+        iconAfter: (props)=>React.createElement(DropDownIcon, {
+                "aria-hidden": true,
+                ...props
+            }),
         iconBefore: IconBefore,
         size: size,
         look: look,
@@ -59,8 +46,9 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
         block: block,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
-        className: styles.base()
-    }, buttonProps), text), state.isOpen && React.createElement(ButtonDropdownPanel, {
+        className: styles.base(),
+        ...buttonProps
+    }, text), state.isOpen && React.createElement(ButtonDropdownPanel, {
         className: styles.panel({
             className
         }),

package/dist/components/button-dropdown/components/button-dropdown-heading/button-dropdown-heading.component.js

@@ -1,24 +1,11 @@
-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 as headingStyles } from './button-dropdown-heading.styles.js';
-export function ButtonDropdownHeading({ className , tag: Tag = 'h1' , children , ...props }) {
+export function ButtonDropdownHeading({ className, tag: Tag = 'h1', children, ...props }) {
     const styles = headingStyles({});
-    return React.createElement(Tag, _extends({
+    return React.createElement(Tag, {
         className: styles.base({
             className
-        })
-    }, props), children);
+        }),
+        ...props
+    }, children);
 }

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.js

@@ -1,30 +1,16 @@
-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, { useCallback, useEffect, useRef } from 'react';
 import { DismissButton, mergeProps, useFocusRing, usePopover } from 'react-aria';
 import { styles as panelStyles } from './button-dropdown-panel.styles.js';
-export function ButtonDropdownPanel({ className , children , state , block , id , ...props }) {
+export function ButtonDropdownPanel({ className, children, state, block, id, ...props }) {
     var _props_triggerRef_current;
     const popoverRef = useRef(null);
-    const { popoverProps  } = usePopover({
+    const { popoverProps } = usePopover({
         popoverRef,
         shouldFlip: false,
         isNonModal: true,
         ...props
     }, state);
-    const { isFocused , focusProps  } = useFocusRing();
+    const { isFocused, focusProps } = useFocusRing();
     const styles = panelStyles({
         isFocused
     });
@@ -52,7 +38,8 @@ export function ButtonDropdownPanel({ className , children , state , block , id
         clickHandler,
         focusHandler
     ]);
-    return React.createElement("div", _extends({}, mergeProps(popoverProps, focusProps), {
+    return React.createElement("div", {
+        ...mergeProps(popoverProps, focusProps),
         id: id,
         style: {
             ...popoverProps.style,
@@ -62,7 +49,7 @@ export function ButtonDropdownPanel({ className , children , state , block , id
         className: styles.base({
             className
         })
-    }), React.createElement(DismissButton, {
+    }, React.createElement(DismissButton, {
         onDismiss: state.close
     }), React.createElement("div", {
         className: styles.dialog()

package/dist/components/button-group/button-group.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, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
@@ -79,26 +65,28 @@ export const ButtonGroupContext = createContext({
         }
     }
 });
-export function ButtonGroup({ className , buttons , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
+export function ButtonGroup({ className, buttons, label, look = 'hero', size = 'medium', block = false, errorMessage, hintMessage, ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
         orientation: 'horizontal'
     });
-    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
+    const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup({
         ...props,
         'aria-errormessage': Array.isArray(errorMessage) ? errorMessage.join(', ') : errorMessage,
         label,
         orientation: 'horizontal'
     }, state);
     const styles = buttonGroupStyles({});
-    return React.createElement("div", _extends({
+    return React.createElement("div", {
         className: styles.base({
             className
-        })
-    }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        }),
+        ...radioGroupProps
+    }, React.createElement(Label, labelProps, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", {
+    }), React.createElement("div", {
         className: styles.buttonWrapper()
     }, React.createElement(ButtonGroupContext.Provider, {
         value: {
@@ -107,8 +95,9 @@ export function ButtonGroup({ className , buttons , label , look ='hero' , size
             look,
             block
         }
-    }, buttons.map((button, index)=>React.createElement(ButtonGroupButton, _extends({
+    }, buttons.map((button, index)=>React.createElement(ButtonGroupButton, {
             key: index,
-            className: "group/buttons"
-        }, button))))));
+            className: "group/buttons",
+            ...button
+        })))));
 }

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

@@ -1,31 +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 React, { useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { Button as GELButton } from '../../../button/index.js';
 import { ButtonGroupContext } from '../../button-group.component.js';
 import { styles as buttonStyles } from './button-group-button.styles.js';
-export function ButtonGroupButton({ className , label , ...props }) {
-    const { state , size , look , block  } = useContext(ButtonGroupContext);
+export function ButtonGroupButton({ className, label, ...props }) {
+    const { state, size, look, block } = useContext(ButtonGroupContext);
     const ref = useRef(null);
-    const { inputProps , isSelected , isDisabled  } = useRadio({
+    const { inputProps, isSelected, isDisabled } = useRadio({
         ...props,
         children: label
     }, state, ref);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = buttonStyles({
         block,
         isDisabled,
@@ -35,9 +21,11 @@ export function ButtonGroupButton({ className , label , ...props }) {
         className: styles.base({
             className
         })
-    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", {
+        ...inputProps,
+        ...focusProps,
         ref: ref
-    }))), React.createElement(GELButton, {
+    })), React.createElement(GELButton, {
         tag: "div",
         block: block,
         soft: !isSelected,

package/dist/components/checkbox-group/checkbox-group.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, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
@@ -84,16 +70,16 @@ export const CheckboxGroupContext = createContext({
         }
     }
 });
-export function CheckboxGroup({ className , checkboxes , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
+export function CheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {
     const state = useCheckboxGroupState({
         ...props,
         label
     });
-    const { groupProps , labelProps , errorMessageProps , descriptionProps  } = useCheckboxGroup({
+    const { groupProps, labelProps, errorMessageProps, descriptionProps } = useCheckboxGroup({
         ...props,
         label
     }, state);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
     const firstNewCheckboxRef = useRef(null);
     const revealAmount = checkboxes && checkboxes.length - showAmount;
@@ -103,10 +89,11 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
     });
     const panelId = useId();
     const childrenToRender = useMemo(()=>{
-        const newChildren = checkboxes.map((checkbox, index)=>React.createElement(CheckboxGroupCheckbox, _extends({
+        const newChildren = checkboxes.map((checkbox, index)=>React.createElement(CheckboxGroupCheckbox, {
                 key: index,
-                ref: index === showAmount ? firstNewCheckboxRef : null
-            }, checkbox)));
+                ref: index === showAmount ? firstNewCheckboxRef : null,
+                ...checkbox
+            }));
         return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
     }, [
         checkboxes,
@@ -122,13 +109,15 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
         hiddenOptions,
         showAmount
     ]);
-    return React.createElement("div", _extends({
+    return React.createElement("div", {
         className: styles.base({
             className
-        })
-    }, groupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        }),
+        ...groupProps
+    }, React.createElement(Label, labelProps, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", {
+    }), React.createElement("div", {
         className: styles.itemWrapper(),
         id: panelId
     }, React.createElement(CheckboxGroupContext.Provider, {
@@ -137,7 +126,7 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
             orientation,
             size
         }
-    }, childrenToRender), hiddenOptions && React.createElement(Button, _extends({
+    }, childrenToRender), hiddenOptions && React.createElement(Button, {
         onClick: ()=>setHiddenOptions(false),
         className: styles.revealButton(),
         look: "link",
@@ -146,8 +135,9 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
                 color: "link"
             }),
         "aria-controls": panelId,
-        "aria-expanded": !hiddenOptions
-    }, focusProps), React.createElement("p", {
+        "aria-expanded": !hiddenOptions,
+        ...focusProps
+    }, React.createElement("p", {
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
 }

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

@@ -1,29 +1,16 @@
 '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, { forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { Icon } from '../../../icon/icon.component.js';
 import { CheckboxGroupContext } from '../../checkbox-group.component.js';
 import { styles as checkboxItemStyles } from './checkbox-group-checkbox.styles.js';
-function CheckIcon({ copyrightYear ='2025' , size , ...props }) {
+function CheckIcon({ copyrightYear = '2025', size, ...props }) {
     const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
-    return React.createElement(Icon, _extends({
+    return React.createElement(Icon, {
         copyrightYear: copyrightYear,
-        viewBox: viewBoxSize
-    }, props), size === 'large' ? React.createElement("path", {
+        viewBox: viewBoxSize,
+        ...props
+    }, size === 'large' ? React.createElement("path", {
         d: "M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z",
         fill: "currentColor"
     }) : React.createElement("path", {
@@ -31,31 +18,33 @@ function CheckIcon({ copyrightYear ='2025' , size , ...props }) {
         fill: "currentColor"
     }));
 }
-function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
-    const { state , size , orientation  } = useContext(CheckboxGroupContext);
+function BaseCheckbox({ className, hint, label, value, ...props }, ref) {
+    const { state, size, orientation } = useContext(CheckboxGroupContext);
     const localRef = useRef(null);
-    const { inputProps , labelProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+    const { inputProps, labelProps, isDisabled, isSelected } = useCheckboxGroupItem({
         ...props,
         value,
         children: label
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = checkboxItemStyles({
         isDisabled,
         size,
         orientation,
         isFocusVisible
     });
-    return React.createElement("label", _extends({
+    return React.createElement("label", {
         className: styles.base({
             className
         }),
-        ref: ref
-    }, labelProps), React.createElement(VisuallyHidden, {
+        ref: ref,
+        ...labelProps
+    }, React.createElement(VisuallyHidden, {
         elementType: "span"
-    }, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
+    }, React.createElement("input", {
+        ...mergeProps(inputProps, focusProps),
         ref: localRef
-    }))), React.createElement("span", {
+    })), React.createElement("span", {
         className: styles.checkbox()
     }, isSelected && React.createElement(CheckIcon, {
         className: styles.checkIcon(),