@westpac/ui 0.42.3 → 0.44.0

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

@@ -1,30 +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, 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 , label , ...props }, ref) {
-    const { state , size , orientation  } = useContext(RadioGroupContext);
+function BaseRadioGroupRadio({ className, hint, label, ...props }, ref) {
+    const { state, size, orientation } = useContext(RadioGroupContext);
     const localRef = useRef(null);
-    const { inputProps , labelProps , isSelected , isDisabled  } = useRadio({
+    const { inputProps, labelProps, isSelected, isDisabled } = useRadio({
         ...props,
         children: label
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = radioStyles({
         isDisabled,
         isSelected,
@@ -32,16 +18,18 @@ function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
         size,
         orientation
     });
-    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.selector()
     }), React.createElement("span", {
         className: styles.textWrapper()

package/dist/components/radio-group/radio-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 { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
@@ -80,18 +66,18 @@ export const RadioGroupContext = createContext({
         }
     }
 });
-export function RadioGroup({ className , radios , 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,
         orientation
     });
-    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
+    const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup({
         ...props,
         label,
         orientation
     }, state);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
     const firstNewRadioRef = useRef(null);
     const revealAmount = radios && radios.length - showAmount;
@@ -101,10 +87,11 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
     });
     const panelId = useId();
     const childrenToRender = useMemo(()=>{
-        const newChildren = radios.map((radio, index)=>React.createElement(RadioGroupRadio, _extends({
+        const newChildren = radios.map((radio, index)=>React.createElement(RadioGroupRadio, {
                 key: index,
-                ref: index === showAmount ? firstNewRadioRef : null
-            }, radio)));
+                ref: index === showAmount ? firstNewRadioRef : null,
+                ...radio
+            }));
         return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
     }, [
         radios,
@@ -120,13 +107,15 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
         hiddenOptions,
         showAmount
     ]);
-    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.radioWrapper(),
         id: panelId
     }, React.createElement(RadioGroupContext.Provider, {
@@ -135,7 +124,7 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
             orientation,
             size
         }
-    }, childrenToRender), hiddenOptions && React.createElement(Button, _extends({
+    }, childrenToRender), hiddenOptions && React.createElement(Button, {
         onClick: ()=>setHiddenOptions(false),
         className: styles.revealButton(),
         look: "link",
@@ -144,8 +133,9 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
                 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/repeater/repeater.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 { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusRing } from 'react-aria';
@@ -22,7 +8,7 @@ import { AddCircleIcon, RemoveCircleIcon } from '../icon/index.js';
 import { VisuallyHidden } from '../index.js';
 import { styles as repeaterStyles } from './repeater.styles.js';
 const loadAnimations = ()=>import('./repeater.utils.js').then((res)=>res.default);
-export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = 'h3' , children , separator =false , className  }) {
+export function Repeater({ addText = 'Add another item', indexTag: ItemIndex = 'h3', children, separator = false, className }) {
     const [items, setItems] = useState([
         {
             id: generateID()
@@ -34,7 +20,7 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
     });
     const [status, setStatus] = useState('');
     const refArr = useRef([]);
-    const { isFocused , focusProps  } = useFocusRing();
+    const { isFocused, focusProps } = useFocusRing();
     const handleAdd = useCallback(()=>{
         setItems([
             ...items,
@@ -105,24 +91,26 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
                 duration: 0.15
             },
             key: item.id
-        }, React.createElement("div", _extends({
+        }, React.createElement("div", {
             ref: (el)=>{
                 refArr.current[index] = el;
             },
             tabIndex: -1,
-            className: styles.item()
-        }, focusProps), separator && React.createElement(ItemIndex, {
+            className: styles.item(),
+            ...focusProps
+        }, separator && React.createElement(ItemIndex, {
             className: styles.itemIndex()
         }, index + 1, "."), React.createElement("div", {
             className: styles.content()
         }, children), items.length > 1 && React.createElement(Button, {
             className: styles.removeBtn(),
             "aria-label": `remove item ${index + 1}`,
-            iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {
+            iconBefore: (props)=>React.createElement(RemoveCircleIcon, {
+                    ...props,
                     "aria-hidden": true,
                     look: "outlined",
                     size: "xsmall"
-                })),
+                }),
             look: "link",
             size: "small",
             soft: true,
@@ -133,10 +121,11 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
         className: styles.footer()
     }, React.createElement(Button, {
         className: styles.addBtn(),
-        iconBefore: (props)=>React.createElement(AddCircleIcon, _extends({}, props, {
+        iconBefore: (props)=>React.createElement(AddCircleIcon, {
+                ...props,
                 "aria-hidden": true,
                 look: "outlined"
-            })),
+            }),
         look: "link",
         size: "small",
         soft: true,

package/dist/components/select/select.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 } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './select.styles.js';
-function BaseSelect({ className , size ='medium' , invalid =false , width ='auto' , children , ...props }, ref) {
-    const { isFocused , isFocusVisible , focusProps  } = useFocusRing();
-    return React.createElement("select", _extends({
+function BaseSelect({ className, size = 'medium', invalid = false, width = 'auto', children, ...props }, ref) {
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+    return React.createElement("select", {
         ref: ref,
         className: styles({
             className,
@@ -27,7 +13,8 @@ function BaseSelect({ className , size ='medium' , invalid =false , width ='auto
             isFocused,
             isFocusVisible,
             width
-        })
-    }, mergeProps(props, focusProps)), children);
+        }),
+        ...mergeProps(props, focusProps)
+    }, children);
 }
 export const Select = forwardRef(BaseSelect);

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

@@ -1,26 +1,12 @@
-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, useCallback, useContext } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { FlexiCell } from '../../../../../../index.js';
 import { ArrowRightIcon } from '../../../../../icon/index.js';
 import { SelectorButtonContext } from '../../selector-button-group.component.js';
 import { styles as SelectorButtonGroupOptionStyles } from './selector-button-group-option.styles.js';
-function BaseSelectorButtonGroupOption({ className , children , withBorder =true , withArrow , after , before , isDisabled =false , onClick =()=>undefined , id , ...props }, ref) {
+function BaseSelectorButtonGroupOption({ className, children, withBorder = true, withArrow, after, before, isDisabled = false, onClick = ()=>undefined, id, ...props }, ref) {
     const state = useContext(SelectorButtonContext);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = SelectorButtonGroupOptionStyles({
         className,
         isFocusVisible,
@@ -35,7 +21,8 @@ function BaseSelectorButtonGroupOption({ className , children , withBorder =true
         onClick,
         state
     ]);
-    return React.createElement(FlexiCell, _extends({}, mergeProps(props, focusProps), {
+    return React.createElement(FlexiCell, {
+        ...mergeProps(props, focusProps),
         after: React.createElement("div", {
             className: "flex gap-2"
         }, after, React.createElement(ArrowRightIcon, {
@@ -53,7 +40,7 @@ function BaseSelectorButtonGroupOption({ className , children , withBorder =true
         onClick: (event)=>handleClick(event),
         "aria-pressed": state.value === id,
         "aria-disabled": state.isDisabled ? state.isDisabled : isDisabled
-    }), children);
+    }, children);
 }
 export const SelectorButtonGroupOption = forwardRef(BaseSelectorButtonGroupOption);
 SelectorButtonGroupOption.displayName = 'SelectorButton';

package/dist/components/selector/components/selector-button-group/selector-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 { createContext, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
@@ -23,7 +9,7 @@ export const SelectorButtonContext = createContext({
     validationState: 'valid',
     isDisabled: undefined
 });
-export function SelectorButtonGroup({ className , children , label , orientation ='vertical' , errorMessage , description , value ='' , isDisabled , ...props }) {
+export function SelectorButtonGroup({ className, children, label, orientation = 'vertical', errorMessage, description, value = '', isDisabled, ...props }) {
     const [selected, setSelected] = useState(value);
     const handleChange = useCallback((id)=>{
         setSelected(id);
@@ -41,21 +27,23 @@ export function SelectorButtonGroup({ className , children , label , orientation
         isDisabled,
         selected
     ]);
-    const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
+    const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
         validationState: state.validationState,
         label,
         errorMessage,
         description,
         ...props
     });
-    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, {
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, labelProps, label), description && React.createElement(Hint, descriptionProps, description), errorMessage && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", _extends({
+    }), React.createElement("div", {
         className: styles({
             className,
             orientation
-        })
-    }, fieldProps), React.createElement(SelectorButtonContext.Provider, {
+        }),
+        ...fieldProps
+    }, React.createElement(SelectorButtonContext.Provider, {
         value: state
     }, children)));
 }

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

@@ -1,33 +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, { forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../../components/index.js';
 import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
 import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
-function BaseSelectorCheckboxGroupOption({ className , children , value , withBorder =true , withArrow , after , before , checkIcon ='checkbox' , ...props }, ref) {
+function BaseSelectorCheckboxGroupOption({ className, children, value, withBorder = true, withArrow, after, before, checkIcon = 'checkbox', ...props }, ref) {
     const state = useContext(SelectorCheckboxGroupContext);
     const localRef = useRef(null);
-    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+    const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({
         ...props,
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = selectorCheckboxGroupOptionStyles({
         className,
         isSelected,
@@ -52,9 +38,10 @@ function BaseSelectorCheckboxGroupOption({ className , children , value , withBo
         ref: ref,
         onClick: onItemClick,
         className: styles.base({})
-    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", {
+        ...mergeProps(inputProps, focusProps),
         ref: localRef
-    }))), children);
+    })), children);
 }
 export const SelectorCheckboxGroupOption = forwardRef(BaseSelectorCheckboxGroupOption);
 SelectorCheckboxGroupOption.displayName = 'SelectorCheckbox';

package/dist/components/selector/components/selector-checkbox-group/selector-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 } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
@@ -79,16 +65,18 @@ export const SelectorCheckboxGroupContext = createContext({
     }
 });
 export function SelectorCheckboxGroup(props) {
-    const { children , label , description , errorMessage  } = props;
+    const { children, label, description, errorMessage } = props;
     const state = useCheckboxGroupState(props);
-    const { groupProps , labelProps , descriptionProps , errorMessageProps  } = useCheckboxGroup(props, state);
-    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, labelProps, label), description && React.createElement(Hint, descriptionProps, description), errorMessage && state.isInvalid && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", _extends({}, groupProps, {
+    }), React.createElement("div", {
+        ...groupProps,
         className: styles({
             className: groupProps.className
         })
-    }), React.createElement(SelectorCheckboxGroupContext.Provider, {
+    }, React.createElement(SelectorCheckboxGroupContext.Provider, {
         value: state
     }, children)));
 }

package/dist/components/selector/components/selector-label/selector-label.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 { FlexiCellLabel } from '../../../../components/flexi-cell/index.js';
 import { styles } from './selector-label.styles.js';
-export function SelectorLabel({ className , ...props }) {
-    return React.createElement(FlexiCellLabel, _extends({}, props, {
+export function SelectorLabel({ className, ...props }) {
+    return React.createElement(FlexiCellLabel, {
+        ...props,
         className: styles({
             className
         })
-    }));
+    });
 }

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

@@ -1,38 +1,24 @@
 '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, useId, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { FlexiCell } from '../../../../../../index.js';
 import { ArrowRightIcon } from '../../../../../icon/index.js';
 import { SelectorLinkContext } from '../../selector-link-group.component.js';
 import { styles as SelectorLinkGroupOptionStyles } from './selector-link-group-option.styles.js';
-function BaseSelectorLinkGroupOption({ className , children , withBorder =true , withArrow , after , before , isDisabled =false , href , ...props }, ref) {
+function BaseSelectorLinkGroupOption({ className, children, withBorder = true, withArrow, after, before, isDisabled = false, href, ...props }, ref) {
     const id = useId();
     const localRef = useRef(ref);
     const state = useContext(SelectorLinkContext);
-    const { linkProps  } = useLink({
+    const { linkProps } = useLink({
         ...props
     }, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = SelectorLinkGroupOptionStyles({
         className,
         isFocusVisible,
         isDisabled: state.isDisabled ? state.isDisabled : isDisabled
     });
-    return React.createElement(FlexiCell, _extends({
+    return React.createElement(FlexiCell, {
         after: React.createElement("div", {
             className: "flex gap-2"
         }, after, React.createElement(ArrowRightIcon, {
@@ -47,8 +33,9 @@ function BaseSelectorLinkGroupOption({ className , children , withBorder =true ,
         className: styles.base({}),
         id: id,
         href: href,
-        disabled: isDisabled
-    }, mergeProps(linkProps, focusProps)), children);
+        disabled: isDisabled,
+        ...mergeProps(linkProps, focusProps)
+    }, children);
 }
 export const SelectorLinkGroupOption = forwardRef(BaseSelectorLinkGroupOption);
 SelectorLinkGroupOption.displayName = 'SelectorLink';

package/dist/components/selector/components/selector-link-group/selector-link-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 { createContext } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
@@ -20,9 +6,9 @@ import { styles } from './selector-link-group.styles.js';
 export const SelectorLinkContext = createContext({
     isDisabled: undefined
 });
-export function SelectorLinkGroup({ className , children , label , orientation ='vertical' , errorMessage , description , isDisabled , ...props }) {
+export function SelectorLinkGroup({ className, children, label, orientation = 'vertical', errorMessage, description, isDisabled, ...props }) {
     const validationState = errorMessage ? 'invalid' : 'valid';
-    const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
+    const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
         validationState: validationState,
         label,
         errorMessage,
@@ -32,14 +18,16 @@ export function SelectorLinkGroup({ className , children , label , orientation =
     const state = {
         isDisabled
     };
-    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, {
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, labelProps, label), description && React.createElement(Hint, descriptionProps, description), errorMessage && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", _extends({
+    }), React.createElement("div", {
         className: styles({
             className,
             orientation
-        })
-    }, fieldProps), React.createElement(SelectorLinkContext.Provider, {
+        }),
+        ...fieldProps
+    }, React.createElement(SelectorLinkContext.Provider, {
         value: state
     }, children)));
 }