@westpac/ui 0.42.2 → 0.43.0

package/dist/components/circle/circle.component.js

@@ -1,23 +1,10 @@
-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 './circle.styles.js';
-export function Circle({ className , tag: Tag = 'div' , children , ...props }) {
-    return React.createElement(Tag, _extends({
+export function Circle({ className, tag: Tag = 'div', children, ...props }) {
+    return React.createElement(Tag, {
         className: styles({
             className
-        })
-    }, props), children);
+        }),
+        ...props
+    }, children);
 }

package/dist/components/collapsible/collapsible.component.js

@@ -1,34 +1,22 @@
 '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, useId, useState } from 'react';
 import { Button } from '../button/index.js';
 import { ExpandLessIcon, ExpandMoreIcon } from '../icon/index.js';
 import { styles as collapsibleStyles } from './collapsible.styles.js';
 const loadAnimations = ()=>import('./collapsible.utils.js').then((res)=>res.default);
-export function Collapsible({ className , children , open =false , text , size ='medium' , onClick =()=>undefined  }) {
+export function Collapsible({ className, children, open = false, text, size = 'medium', onClick = ()=>undefined }) {
     const [contentOpen, setContentOpen] = useState(open);
     const contentId = useId();
     const ButtonIcon = (props)=>{
-        if (!contentOpen) return React.createElement(ExpandMoreIcon, _extends({
-            color: "link"
-        }, props));
-        return React.createElement(ExpandLessIcon, _extends({
-            color: "link"
-        }, props));
+        if (!contentOpen) return React.createElement(ExpandMoreIcon, {
+            color: "link",
+            ...props
+        });
+        return React.createElement(ExpandLessIcon, {
+            color: "link",
+            ...props
+        });
     };
     const handleClick = useCallback(()=>{
         onClick();

package/dist/components/compacta/compacta.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, useId, useRef, useState } from 'react';
 import { generateID } from '../../utils/index.js';
@@ -21,7 +7,7 @@ import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, RemoveCircleIcon } from
 import { VisuallyHidden } from '../index.js';
 import { styles as compactaStyles } from './compacta.styles.js';
 const loadAnimations = ()=>import('./compacta.utils.js').then((res)=>res.default);
-export function Compacta({ className , children , titleTag: Tag = 'h3' , addText ='Add another' , ...props }) {
+export function Compacta({ className, children, titleTag: Tag = 'h3', addText = 'Add another', ...props }) {
     const [initial, setInitial] = useState(true);
     const id = useId();
     const [items, setItems] = useState([
@@ -121,7 +107,7 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
             if (action.type === 'add') {
                 setTimeout(()=>{
                     var _headingRefs_current_action_index;
-                    (_headingRefs_current_action_index = headingRefs === null || headingRefs === void 0 ? void 0 : headingRefs.current[action.index]) === null || _headingRefs_current_action_index === void 0 ? void 0 : _headingRefs_current_action_index.focus();
+                    headingRefs === null || headingRefs === void 0 ? void 0 : (_headingRefs_current_action_index = headingRefs.current[action.index]) === null || _headingRefs_current_action_index === void 0 ? void 0 : _headingRefs_current_action_index.focus();
                 }, 1);
                 setStatus(`Item added`);
             }
@@ -130,13 +116,13 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
                 const focusIndex = action.index === 0 ? 0 : action.index - 1;
                 setTimeout(()=>{
                     var _headingRefs_current_focusIndex;
-                    (_headingRefs_current_focusIndex = headingRefs === null || headingRefs === void 0 ? void 0 : headingRefs.current[focusIndex]) === null || _headingRefs_current_focusIndex === void 0 ? void 0 : _headingRefs_current_focusIndex.focus();
+                    headingRefs === null || headingRefs === void 0 ? void 0 : (_headingRefs_current_focusIndex = headingRefs.current[focusIndex]) === null || _headingRefs_current_focusIndex === void 0 ? void 0 : _headingRefs_current_focusIndex.focus();
                 }, 1);
                 setStatus(`Item ${action.index + 1} removed`);
             }
             if (action.type === 'toggle') {
                 var _toggleRefs_current_action_index;
-                (_toggleRefs_current_action_index = toggleRefs === null || toggleRefs === void 0 ? void 0 : toggleRefs.current[action.index]) === null || _toggleRefs_current_action_index === void 0 ? void 0 : _toggleRefs_current_action_index.focus();
+                toggleRefs === null || toggleRefs === void 0 ? void 0 : (_toggleRefs_current_action_index = toggleRefs.current[action.index]) === null || _toggleRefs_current_action_index === void 0 ? void 0 : _toggleRefs_current_action_index.focus();
             }
         }
     }, [
@@ -144,11 +130,12 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
         action
     ]);
     const styles = compactaStyles({});
-    return React.createElement("div", _extends({
+    return React.createElement("div", {
         className: styles.base({
             className
-        })
-    }, props), items.map((item, index)=>{
+        }),
+        ...props
+    }, items.map((item, index)=>{
         return React.createElement("div", {
             className: styles.item(),
             key: item.id
@@ -225,11 +212,12 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
         }), 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,
@@ -239,10 +227,11 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
         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/date-picker/date-picker.component.js

@@ -1,26 +1,14 @@
 '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, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useFocusVisible } from 'react-aria';
 import { styles } from './date-picker.styles.js';
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
-export function DatePicker({ dateFormat ='dd-MM-yyyy' , disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , invalid =false , ...props }) {
+export function DatePicker({ dateFormat = 'dd-MM-yyyy', disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size = 'md', name, block = false, invalid = false, ...props }) {
     const [initialized, setInitialized] = useState(false);
+    const { isFocusVisible } = useFocusVisible();
     useEffect(()=>{
         const initDatePicker = async ()=>{
-            const { defineCustomElements  } = await import('@duetds/date-picker/custom-element/index.js');
+            const { defineCustomElements } = await import('@duetds/date-picker/custom-element/index.js');
             defineCustomElements(window);
             setInitialized(true);
         };
@@ -142,12 +130,14 @@ export function DatePicker({ dateFormat ='dd-MM-yyyy' , disableWeekends , disabl
         initialized,
         ref
     ]);
-    return React.createElement("duet-date-picker", _extends({
+    return React.createElement("duet-date-picker", {
         class: styles({
             size,
             block,
-            invalid
+            invalid,
+            isFocusVisible
         }),
-        ref: ref
-    }, props));
+        ref: ref,
+        ...props
+    });
 }

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -13,6 +13,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, {
@@ -30,6 +34,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -45,6 +53,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker/date-picker.styles.js

@@ -15,6 +15,10 @@ export const styles = tv({
         invalid: {
             true: 'date-picker-invalid',
             false: ''
+        },
+        isFocusVisible: {
+            true: 'date-picker-focused',
+            false: ''
         }
     }
 }, {

package/dist/components/error-message/error-message.component.js

@@ -1,26 +1,13 @@
-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 { AlertIcon } from '../../components/icon/index.js';
 import { styles as errorMessageStyles } from './error-message.styles.js';
-export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , message , ...props }) {
+export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message, ...props }) {
     const styles = errorMessageStyles({});
     const FinalIcon = Icon !== null && Icon !== void 0 ? Icon : AlertIcon;
-    return Array.isArray(message) ? React.createElement("ul", _extends({
-        className: styles.list({})
-    }, props), message.map((msg, index)=>React.createElement("li", {
+    return Array.isArray(message) ? React.createElement("ul", {
+        className: styles.list({}),
+        ...props
+    }, message.map((msg, index)=>React.createElement("li", {
             key: index,
             className: styles.base({
                 className
@@ -30,11 +17,12 @@ export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , messa
             className: styles.icon({}),
             size: "xsmall",
             look: "outlined"
-        }), msg))) : React.createElement(Tag, _extends({
+        }), msg))) : React.createElement(Tag, {
         className: styles.base({
             className: `${className} mb-2`
-        })
-    }, props), React.createElement(FinalIcon, {
+        }),
+        ...props
+    }, React.createElement(FinalIcon, {
         copyrightYear: "2023",
         className: styles.icon({}),
         size: "xsmall",

package/dist/components/error-message/error-message.styles.js

@@ -3,6 +3,6 @@ export const styles = tv({
     slots: {
         base: 'typography-body-11 flex items-start text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mr-[0.5em] mt-[0.15rem] align-top'
+        icon: 'mr-[0.5em] mt-[0.15rem] flex-shrink-0 align-top'
     }
 });

package/dist/components/field/field.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, { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../index.js';
 import { styles } from './field.styles.js';
-export function Field({ className , label , tag: Tag = 'div' , children , hintMessage , errorMessage , labelElementType , labelSize , ...props }) {
-    const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
+export function Field({ className, label, tag: Tag = 'div', children, hintMessage, errorMessage, labelElementType, labelSize, ...props }) {
+    const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
         ...props,
         description: hintMessage,
         errorMessage,
@@ -35,13 +21,16 @@ export function Field({ className , label , tag: Tag = 'div' , children , hintMe
         children,
         fieldProps
     ]);
-    return React.createElement(Tag, _extends({
+    return React.createElement(Tag, {
         className: styles({
             className
-        })
-    }, props), React.createElement(Label, _extends({
-        size: labelSize
-    }, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        }),
+        ...props
+    }, React.createElement(Label, {
+        size: labelSize,
+        ...labelProps
+    }, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && React.createElement(ErrorMessage, {
+        ...errorMessageProps,
         message: errorMessage
-    })), renderChildren());
+    }), renderChildren());
 }

package/dist/components/filter/components/filter-buttons/filter-buttons.component.js

@@ -1,23 +1,9 @@
 '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, useRef, useState } from 'react';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { Button } from '../../../index.js';
 import { styles as filterButtonsStyles } from './filter-buttons.styles.js';
-export function FilterButtons({ filterButtons , onClick , selectedButton , tag: Tag = 'div' , className , ...props }) {
+export function FilterButtons({ filterButtons, onClick, selectedButton, tag: Tag = 'div', className, ...props }) {
     const scrollContainerRef = useRef(null);
     const [isScrollable, setIsScrollable] = useState({
         left: false,
@@ -106,7 +92,9 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
             targetLeft,
             targetRight
         };
-    }, []);
+    }, [
+        filterButtons.length
+    ]);
     const handleScrollTarget = useCallback((container)=>{
         let targetRight = scrollTarget.right;
         let targetLeft = scrollTarget.left;
@@ -196,7 +184,7 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
         iconColor: "hero",
         iconSize: "medium",
         "aria-hidden": "true"
-    }), React.createElement("ul", _extends({
+    }), React.createElement("ul", {
         className: styles.buttonList({
             className
         }),
@@ -204,11 +192,11 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
             overflowX: 'scroll'
-        }
-    }, props, {
+        },
+        ...props,
         ref: scrollContainerRef,
         role: "list"
-    }), filterButtons.map((button, index)=>React.createElement(Button, {
+    }, filterButtons.map((button, index)=>React.createElement(Button, {
             "aria-pressed": button.id === selectedButton,
             look: "hero",
             size: "small",

package/dist/components/filter/components/filter-input/filter-input.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 React from 'react';
 import { SearchIcon } from '../../../icon/index.js';
 import { Input as GELInput, InputGroup } from '../../../index.js';
-export function FilterInput({ onChange , ...props }) {
+export function FilterInput({ onChange, ...props }) {
     return React.createElement(InputGroup, {
         className: "mb-0",
         before: {
             icon: SearchIcon
         }
-    }, React.createElement(GELInput, _extends({}, props, {
+    }, React.createElement(GELInput, {
+        ...props,
         placeholder: "Search",
         onChange: onChange
-    })));
+    }));
 }

package/dist/components/filter/filter.component.js

@@ -1,20 +1,7 @@
-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';
-export function Filter({ children , ...props }) {
-    return React.createElement("div", _extends({}, props, {
+export function Filter({ children, ...props }) {
+    return React.createElement("div", {
+        ...props,
         className: "flex flex-col gap-3"
-    }), children);
+    }, children);
 }

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.js

@@ -1,26 +1,13 @@
-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 adornmentStyles } from './flexi-cell-adornment.styles.js';
-export const FlexiCellAdornment = ({ children , tag: Tag = 'div' , align , className , ...props })=>{
+export const FlexiCellAdornment = ({ children, tag: Tag = 'div', align, className, ...props })=>{
     const styles = adornmentStyles({
         align
     });
-    return React.createElement(Tag, _extends({}, props, {
+    return React.createElement(Tag, {
+        ...props,
         className: styles.base({
             className
         })
-    }), children);
+    }, children);
 };

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.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 React from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './flexi-cell-body.styles.js';
-export const FlexiCellBody = ({ children , tag: Tag = 'div' , href , className , ...props })=>{
-    const { isFocusVisible , focusProps  } = useFocusRing();
-    return React.createElement(Tag, _extends({}, mergeProps(props, focusProps), {
+export const FlexiCellBody = ({ children, tag: Tag = 'div', href, className, ...props })=>{
+    const { isFocusVisible, focusProps } = useFocusRing();
+    return React.createElement(Tag, {
+        ...mergeProps(props, focusProps),
         href: href,
         className: styles({
             isLink: !!href,
             isFocusVisible,
             className
         })
-    }), children);
+    }, children);
 };

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.js

@@ -1,27 +1,14 @@
-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 { Button } from '../../../../components/index.js';
 import { styles as flexiButtonStyles } from './flexi-cell-button.styles.js';
-export const FlexiCellButton = ({ className , icon: Icon , ...props })=>{
+export const FlexiCellButton = ({ className, icon: Icon, ...props })=>{
     const styles = flexiButtonStyles();
-    return React.createElement(React.Fragment, null, Icon && React.createElement(Button, _extends({
+    return React.createElement(React.Fragment, null, Icon && React.createElement(Button, {
         className: styles.base({
             className
         }),
         iconBefore: Icon,
-        look: "link"
-    }, props)));
+        look: "link",
+        ...props
+    }));
 };

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.js

@@ -1,25 +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 from 'react';
 import { Circle } from '../../../../components/index.js';
 import { styles as flexiCellCircleStyles } from './flexi-cell-circle.styles.js';
-export const FlexiCellCircle = ({ className , ...props })=>{
+export const FlexiCellCircle = ({ className, ...props })=>{
     const styles = flexiCellCircleStyles({});
-    return React.createElement(Circle, _extends({
+    return React.createElement(Circle, {
         className: styles.base({
             className
-        })
-    }, props));
+        }),
+        ...props
+    });
 };

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.js

@@ -1,23 +1,10 @@
-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 './flexi-cell-footer.styles.js';
-export const FlexiCellFooter = ({ children , className , tag: Tag = 'div' , ...props })=>{
-    return React.createElement(Tag, _extends({}, props, {
+export const FlexiCellFooter = ({ children, className, tag: Tag = 'div', ...props })=>{
+    return React.createElement(Tag, {
+        ...props,
         className: styles({
             className
         })
-    }), children);
+    }, children);
 };