@westpac/ui 0.42.2 → 0.43.0

package/dist/components/accordion/accordion.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 { useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
@@ -20,7 +6,7 @@ import React, { Children, cloneElement, forwardRef, isValidElement } from 'react
 import { Item, useTreeState } from 'react-stately';
 import { styles } from './accordion.styles.js';
 import { AccordionItem as AccordionItemContent } from './components/index.js';
-function Accordion({ className , rounded =true , look ='soft' , ...props }, ref) {
+function Accordion({ className, rounded = true, look = 'soft', ...props }, ref) {
     const clonedChildren = [];
     Children.forEach(props.children, (child)=>{
         if (isValidElement(child)) {
@@ -39,14 +25,16 @@ function Accordion({ className , rounded =true , look ='soft' , ...props }, ref)
     };
     const state = useTreeState(finalProps);
     const domRef = useDOMRef(ref);
-    const { accordionProps  } = useAccordion(finalProps, state, domRef);
-    return React.createElement("div", _extends({}, filterDOMProps(finalProps), accordionProps, {
+    const { accordionProps } = useAccordion(finalProps, state, domRef);
+    return React.createElement("div", {
+        ...filterDOMProps(finalProps),
+        ...accordionProps,
         ref: domRef,
         className: styles({
             className,
             rounded
         })
-    }), React.createElement("div", {
+    }, React.createElement("div", {
         className: "ml-[-1px] mt-[-1px]"
     }, [
         ...state.collection

package/dist/components/accordion/components/accordion-item/accordion-item.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 { useAccordionItem } from '@react-aria/accordion';
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
@@ -19,17 +5,17 @@ import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
-export function AccordionItem({ className , tag: Tag = 'div' , look ='soft' , ...props }) {
+export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...props }) {
     const ref = useRef(null);
-    const { state , item  } = props;
-    const { buttonProps , regionProps  } = useAccordionItem(props, state, ref);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { state, item } = props;
+    const { buttonProps, regionProps } = useAccordionItem(props, state, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
     const isOpen = state.expandedKeys.has(item.key);
     const isDisabled = state.disabledKeys.has(item.key);
-    const { hoverProps  } = useHover({
+    const { hoverProps } = useHover({
         isDisabled
     });
-    const { direction  } = useLocale();
+    const { direction } = useLocale();
     const styles = accordionItemStyles({
         isOpen,
         isDisabled,
@@ -40,16 +26,17 @@ export function AccordionItem({ className , tag: Tag = 'div' , look ='soft' , ..
         className: styles.base({
             className
         })
-    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps, focusProps), {
+    }, React.createElement("h3", null, React.createElement("button", {
+        ...mergeProps(buttonProps, hoverProps, focusProps),
         ref: ref,
         className: styles.itemHeader()
-    }), React.createElement("span", null, item.props.title), direction === 'ltr' ? React.createElement(ArrowRightIcon, {
+    }, React.createElement("span", null, item.props.title), direction === 'ltr' ? React.createElement(ArrowRightIcon, {
         "aria-hidden": "true",
         className: styles.indicator()
     }) : React.createElement(ArrowLeftIcon, {
         "aria-hidden": "true",
         className: styles.indicator()
-    }))), React.createElement("div", _extends({}, regionProps), React.createElement(LazyMotion, {
+    }))), React.createElement("div", regionProps, React.createElement(LazyMotion, {
         features: loadAnimations
     }, React.createElement(AnimatePresence, {
         initial: false

package/dist/components/alert/alert.component.js

@@ -1,24 +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 { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
+import { Button } from '../button/button.component.js';
 import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../icon/index.js';
 import { styles as alertStyles } from './alert.styles.js';
 const loadAnimations = ()=>import('./alert.utils.js').then((res)=>res.default);
-export function Alert({ look ='info' , mode ='box' , heading , headingTag: HeadingTag = 'h2' , dismissible =false , open: isOpen = true , onClose , icon , iconSize , tag: Tag = 'div' , className , children , ...props }) {
+export function Alert({ look = 'info', mode = 'box', heading, headingTag: HeadingTag = 'h2', dismissible = false, open: isOpen = true, onClose, icon, iconSize, tag: Tag = 'div', className, children, ...props }) {
     const [open, setOpen] = useState(isOpen);
     const iconMap = {
         info: InfoIcon,
@@ -63,11 +50,12 @@ export function Alert({ look ='info' , mode ='box' , heading , headingTag: Headi
         transition: {
             duration: 0.4
         }
-    }, React.createElement(Tag, _extends({
+    }, React.createElement(Tag, {
         className: styles.base({
             className
-        })
-    }, props), React.createElement("span", {
+        }),
+        ...props
+    }, React.createElement("span", {
         className: styles.icon({
             hasSize: iconSize ? true : false
         })
@@ -81,7 +69,8 @@ export function Alert({ look ='info' , mode ='box' , heading , headingTag: Headi
         className: styles.body()
     }, !!heading && React.createElement(HeadingTag, {
         className: styles.heading()
-    }, heading), children), dismissible && mode !== 'text' && React.createElement("button", {
+    }, heading), children), dismissible && mode !== 'text' && React.createElement(Button, {
+        look: "unstyled",
         type: "button",
         className: styles.close(),
         onClick: handleClose,

package/dist/components/alert/alert.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         icon: 'float-left flex-none',
         body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
         heading: 'typography-body-9 mb-1 font-bold',
-        close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80'
+        close: 'absolute right-0.5 top-0.5 h-5.5 p-1 hover:opacity-80'
     },
     variants: {
         look: {

package/dist/components/autocomplete/autocomplete.component.d.ts

@@ -1,2 +1,9 @@
+import { ForwardedRef } from 'react';
 import { type AutocompleteProps } from './autocomplete.types.js';
-export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width, loadingState, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width, loadingState, ...props }: AutocompleteProps<T>, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+declare const _Autocomplete: {
+    displayName: string;
+} & (<T extends object>(props: AutocompleteProps<T> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => ReturnType<typeof Autocomplete>);
+export { _Autocomplete as Autocomplete };

package/dist/components/autocomplete/autocomplete.component.js

@@ -1,20 +1,6 @@
 '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 * as React from 'react';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { mergeProps, useButton, useComboBox, useFilter, useFocusRing, useSearchField } from 'react-aria';
 import { useComboBoxState, useSearchFieldState } from 'react-stately';
 import { ClearIcon, SearchIcon } from '../icon/index.js';
@@ -36,8 +22,8 @@ const STATIC_IS_OPEN_STATE = {
         return;
     }
 };
-export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , noOptionsMessage , className , width ='full' , loadingState , ...props }) {
-    const { contains  } = useFilter({
+function Autocomplete({ size = 'medium', invalid = false, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width = 'full', loadingState, ...props }, ref) {
+    const { contains } = useFilter({
         sensitivity: 'base'
     });
     const state = useComboBoxState({
@@ -45,19 +31,20 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         ...props,
         defaultFilter: contains
     });
-    const { isFocusVisible , focusProps  } = useFocusRing();
-    const { isFocusVisible: isInputFocusVisible , focusProps: inputFocusProps  } = useFocusRing();
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { isFocusVisible: isInputFocusVisible, focusProps: inputFocusProps } = useFocusRing();
     const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, ()=>inputRef.current);
     const listBoxRef = React.useRef(null);
     const popoverRef = React.useRef(null);
-    const { inputProps , listBoxProps , labelProps , descriptionProps , errorMessageProps  } = useComboBox({
+    const { inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps } = useComboBox({
         ...props,
         isDisabled,
         inputRef,
         listBoxRef,
         popoverRef
     }, state);
-    const { clearButton: clearButtonStyle , ...styles } = autocompleteStyles({
+    const { clearButton: clearButtonStyle, ...styles } = autocompleteStyles({
         width,
         isDisabled,
         isInputFocusVisible,
@@ -71,13 +58,13 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         onChange: (v)=>state.setInputValue(v)
     };
     const searchState = useSearchFieldState(searchProps);
-    const { clearButtonProps  } = useSearchField({
+    const { clearButtonProps } = useSearchField({
         ...searchProps,
         'aria-label': props['aria-label'],
         'aria-labelledby': props['aria-labelledby']
     }, searchState, inputRef);
     const clearButtonRef = React.useRef(null);
-    const { buttonProps  } = useButton(clearButtonProps, clearButtonRef);
+    const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
     const outerRef = React.useRef(null);
     const isNoOptionPopOverOpen = useMemo(()=>{
         return noOptionsMessage && (!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem || state.collection.size === 0 && searchProps.value.length > 0);
@@ -93,9 +80,10 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         className: styles.base({
             className
         })
-    }, props.label && React.createElement(Label, _extends({}, labelProps), props.label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, props.label && React.createElement(Label, labelProps, props.label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), React.createElement("div", {
+    }), React.createElement("div", {
         ref: outerRef,
         className: styles.outerWrapper()
     }, React.createElement("div", {
@@ -107,12 +95,14 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         "aria-hidden": true,
         size: "small",
         color: "muted"
-    })), React.createElement("input", _extends({}, mergeProps(inputProps, inputFocusProps), {
+    })), React.createElement("input", {
+        ...mergeProps(inputProps, inputFocusProps),
         ref: inputRef,
         className: styles.input(),
         "aria-live": "polite",
         "aria-busy": loadingState
-    })), React.createElement("button", _extends({}, mergeProps(buttonProps, focusProps), {
+    }), React.createElement("button", {
+        ...mergeProps(buttonProps, focusProps),
         onKeyDown: ()=>false,
         tabIndex: 0,
         ref: clearButtonRef,
@@ -120,7 +110,7 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
             visibility: state.inputValue !== '' ? 'visible' : 'hidden'
         },
         className: clearButtonStyle()
-    }), React.createElement(ClearIcon, {
+    }, React.createElement(ClearIcon, {
         "aria-hidden": "true",
         color: "muted",
         size: "small"
@@ -141,11 +131,15 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         isNonModal: true,
         placement: "bottom start",
         portalContainer: portalContainer
-    }, React.createElement(AutocompleteListBox, _extends({}, listBoxProps, {
+    }, React.createElement(AutocompleteListBox, {
+        ...listBoxProps,
         autoFocus: listBoxProps.autoFocus,
         listBoxRef: listBoxRef,
         state: state
-    })), footer && React.createElement("div", {
+    }), footer && React.createElement("div", {
         className: "border-t border-t-border px-3 py-2"
     }, footer)));
 }
+const _Autocomplete = forwardRef(Autocomplete);
+_Autocomplete.displayName = 'Autocomplete';
+export { _Autocomplete as Autocomplete };

package/dist/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.js

@@ -1,28 +1,15 @@
-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 * as React from 'react';
 import { useListBox } from 'react-aria';
 import { AutocompleteListBoxOption, AutocompleteListBoxSection } from './components/index.js';
 export function AutocompleteListBox(props) {
     const ref = React.useRef(null);
-    const { listBoxRef =ref , state  } = props;
-    const { listBoxProps  } = useListBox(props, state, listBoxRef);
-    return React.createElement("ul", _extends({}, listBoxProps, {
+    const { listBoxRef = ref, state } = props;
+    const { listBoxProps } = useListBox(props, state, listBoxRef);
+    return React.createElement("ul", {
+        ...listBoxProps,
         ref: listBoxRef,
-        className: "max-h-[400px] w-full overflow-auto outline-none"
-    }), [
+        className: "max-h-[400px] w-full outline-none"
+    }, [
         ...state.collection
     ].map((item)=>item.type === 'section' ? React.createElement(AutocompleteListBoxSection, {
             key: item.key,

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.js

@@ -1,31 +1,18 @@
-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 * as React from 'react';
 import { useOption } from 'react-aria';
 import { styles } from './autocomplete-list-box-option.styles.js';
-export function AutocompleteListBoxOption({ item , state  }) {
+export function AutocompleteListBoxOption({ item, state }) {
     const ref = React.useRef(null);
-    const { optionProps , isDisabled , isSelected , isFocused  } = useOption({
+    const { optionProps, isDisabled, isSelected, isFocused } = useOption({
         key: item.key
     }, state, ref);
-    return React.createElement("li", _extends({}, optionProps, {
+    return React.createElement("li", {
+        ...optionProps,
         ref: ref,
         className: styles({
             isFocused,
             isSelected,
             isDisabled
         })
-    }), item.rendered);
+    }, item.rendered);
 }

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.d.ts

@@ -8,7 +8,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isDisabled: {
         true: string;
     };
-}, undefined, "flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white", {
+}, undefined, "border-t-border text-text hover:bg-hero focus:bg-hero group flex cursor-pointer items-center justify-between border-t bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:text-white focus:text-white", {
     responsiveVariants: string[];
 }, {
     isFocused: {
@@ -30,6 +30,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isDisabled: {
         true: string;
     };
-}, undefined, "flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white", {
+}, undefined, "border-t-border text-text hover:bg-hero focus:bg-hero group flex cursor-pointer items-center justify-between border-t bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:text-white focus:text-white", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    base: 'border-t-border text-text hover:bg-hero focus:bg-hero group flex cursor-pointer items-center justify-between border-t bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:text-white focus:text-white',
     variants: {
         isFocused: {
-            true: 'bg-hero !text-white'
+            true: 'bg-hero is-focused !text-white'
         },
         isSelected: {
             true: 'font-bold'

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.js

@@ -1,30 +1,18 @@
-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 * as React from 'react';
 import { useListBoxSection } from 'react-aria';
 import { AutocompleteListBoxOption } from '../autocomplete-list-box-option/index.js';
-export function AutocompleteListBoxSection({ section , state  }) {
-    const { itemProps , headingProps , groupProps  } = useListBoxSection({
+export function AutocompleteListBoxSection({ section, state }) {
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
         heading: section.rendered,
         'aria-label': section['aria-label']
     });
-    return React.createElement(React.Fragment, null, React.createElement("li", _extends({}, itemProps, {
+    return React.createElement(React.Fragment, null, React.createElement("li", {
+        ...itemProps,
         className: "pt-2"
-    }), section.rendered && React.createElement("span", _extends({}, headingProps, {
+    }, section.rendered && React.createElement("span", {
+        ...headingProps,
         className: "mx-3 text-xs font-bold uppercase text-text"
-    }), section.rendered), React.createElement("ul", _extends({}, groupProps), [
+    }, section.rendered), React.createElement("ul", groupProps, [
         ...section.childNodes
     ].map((node)=>React.createElement(AutocompleteListBoxOption, {
             key: node.key,

package/dist/components/autocomplete/components/autocomplete-popover/autocomplete-popover.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 { clsx } from 'clsx';
 import React, { useMemo, useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 export function AutocompletePopover(props) {
     var _props_triggerRef_current;
     const ref = useRef(null);
-    const { popoverRef =ref , state , children , className , isNonModal , portalContainer  } = props;
-    const { popoverProps , underlayProps  } = usePopover({
+    const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
+    const { popoverProps, underlayProps } = usePopover({
         ...props,
         popoverRef
     }, state);
@@ -32,16 +18,18 @@ export function AutocompletePopover(props) {
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     return React.createElement(Overlay, {
         portalContainer: portalContainer || brandContainer
-    }, !isNonModal && React.createElement("div", _extends({}, underlayProps, {
+    }, !isNonModal && React.createElement("div", {
+        ...underlayProps,
         className: "fixed inset-0"
-    })), React.createElement("div", _extends({}, popoverProps, {
+    }), React.createElement("div", {
+        ...popoverProps,
         style: {
             ...popoverProps.style,
             width: width ? `${width}px` : undefined
         },
         ref: popoverRef,
-        className: clsx('z-10 border border-border bg-white shadow-lg', className)
-    }), !isNonModal && React.createElement(DismissButton, {
+        className: clsx('border-border z-10 max-h-[400px] overflow-auto border bg-white shadow-lg', className)
+    }, !isNonModal && React.createElement(DismissButton, {
         onDismiss: state.close
     }), children, React.createElement(DismissButton, {
         onDismiss: state.close

package/dist/components/badge/badge.component.js

@@ -1,30 +1,18 @@
 '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 { styles } from './badge.styles.js';
-export function BaseBadge({ className , tag: Tag = 'div' , color ='hero' , type ='default' , soft =false , children , ...props }, ref) {
-    return React.createElement(Tag, _extends({}, {
-        ref
-    }, {
+export function BaseBadge({ className, tag: Tag = 'div', color = 'hero', type = 'default', soft = false, children, ...props }, ref) {
+    return React.createElement(Tag, {
+        ...{
+            ref
+        },
         className: styles({
             className,
             color,
             type,
             soft
-        })
-    }, props), children);
+        }),
+        ...props
+    }, children);
 }
 export const Badge = forwardRef(BaseBadge);

package/dist/components/bottom-sheet/bottom-sheet.component.js

@@ -1,25 +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 from 'react';
 import { BottomSheetDialog } from './components/bottom-sheet-dialog/bottom-sheet-dialog.component.js';
 import { BottomSheetModal } from './components/bottom-sheet-modal/bottom-sheet-modal.component.js';
-export function BottomSheet({ children , state , title , primaryLabel , secondaryLabel , primaryOnClick , secondaryOnClick , ...props }) {
-    return React.createElement(BottomSheetModal, _extends({
-        state: state
-    }, props), React.createElement(BottomSheetDialog, {
+export function BottomSheet({ children, state, title, primaryLabel, secondaryLabel, primaryOnClick, secondaryOnClick, ...props }) {
+    return React.createElement(BottomSheetModal, {
+        state: state,
+        ...props
+    }, React.createElement(BottomSheetDialog, {
         primaryLabel: primaryLabel,
         secondaryLabel: secondaryLabel,
         primaryOnClick: primaryOnClick,

package/dist/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.js

@@ -1,37 +1,25 @@
-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 { useDialog } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { Button } from '../../../../components/index.js';
 import { styles as bottomSheetDialogStyles } from './bottom-sheet-dialog.styles.js';
-export function BottomSheetDialog({ children , title , className , onClose , primaryLabel , primaryOnClick , secondaryLabel , secondaryOnClick , ...props }) {
+export function BottomSheetDialog({ children, title, className, onClose, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }) {
     const ref = useRef(null);
-    const { dialogProps , titleProps  } = useDialog({
+    const { dialogProps, titleProps } = useDialog({
         ...props,
         role: 'dialog'
     }, ref);
     const styles = bottomSheetDialogStyles({});
-    return React.createElement("div", _extends({}, dialogProps, {
+    return React.createElement("div", {
+        ...dialogProps,
         className: styles.base({
             className
         }),
         ref: ref
-    }), React.createElement("header", null, React.createElement("h3", _extends({
-        className: styles.title()
-    }, titleProps), title), onClose && React.createElement(Button, {
+    }, React.createElement("header", null, React.createElement("h3", {
+        className: styles.title(),
+        ...titleProps
+    }, title), onClose && React.createElement(Button, {
         size: "small",
         look: "link",
         onClick: onClose,