@westpac/ui 0.5.0 → 0.6.0

package/dist/components/link/link.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { styles as linkStyles } from './link.styles.js';
 export function BaseLink({ className , children , href , iconBefore: IconBefore , iconAfter: IconAfter , iconSize ='small' , target , type ='standalone' , underline =true , ...props }, propRef) {
@@ -21,14 +21,16 @@ export function BaseLink({ className , children , href , iconBefore: IconBefore
     const { linkProps  } = useLink({
         ...props
     }, ref);
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = linkStyles({
         type,
-        underline
+        underline,
+        isFocusVisible
     });
     if (type === 'standalone' && !IconBefore && !IconAfter) {
         IconBefore = ArrowRightIcon;
     }
-    return React.createElement("a", _extends({}, linkProps, {
+    return React.createElement("a", _extends({}, mergeProps(linkProps, focusProps), {
         ref: propRef,
         href: href,
         target: target,

package/dist/components/link/link.styles.d.ts

@@ -12,6 +12,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     text: string;
@@ -33,6 +41,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     text: string;

package/dist/components/link/link.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
+        base: 'inline-flex bg-[transparent] hover:underline',
         text: 'typography-body-10',
         iconBefore: 'mr-1',
         iconAfter: 'ml-1'
@@ -9,16 +9,24 @@ export const styles = tv({
     variants: {
         type: {
             inline: {
-                base: 'items-baseline text-link',
+                base: 'text-link items-baseline',
                 iconBefore: 'self-center',
                 iconAfter: 'self-center'
             },
             standalone: {
-                base: 'items-center text-text'
+                base: 'text-text items-center'
             }
         },
         underline: {
             true: ''
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {
+                base: 'outline-none'
+            }
         }
     },
     compoundSlots: [

package/dist/components/list/components/item/item.component.d.ts

@@ -4,7 +4,7 @@ export declare function BaseItem({ className, children, href, look, type, spacin
 export declare const Item: React.ForwardRefExoticComponent<{
     href?: string | undefined;
     icon?: ((props: import("../../../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+    look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
     nested?: number | undefined;
     spacing?: "medium" | "large" | undefined;
     type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

package/dist/components/list/components/item/item.component.js

@@ -13,6 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext } from 'react';
+import { useFocusRing } from 'react-aria';
 import { ListContext } from '../../list.component.js';
 import { getStateValues } from '../../list.utils.js';
 import { styles as itemStyles } from './item.styles.js';
@@ -28,12 +29,14 @@ export function BaseItem({ className , children , href , look , type , spacing ,
     look = stateValues.look;
     type = stateValues.type;
     const Icon = stateValues.icon;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = itemStyles({
         look,
         type,
         spacing: stateValues.spacing,
         icon: !!Icon,
-        nested: state.nested && state.nested > 0 || false
+        nested: state.nested && state.nested > 0 || false,
+        isFocusVisible
     });
     const bulletToRender = ()=>{
         if (type === 'ordered' || type === 'unstyled') {
@@ -59,10 +62,10 @@ export function BaseItem({ className , children , href , look , type , spacing ,
         className: styles.base({
             className
         })
-    }, props), type === 'link' ? React.createElement("a", {
+    }, props), type === 'link' ? React.createElement("a", _extends({
         href: href,
         className: styles.link(),
         ref: ref
-    }, children) : children));
+    }, focusProps), children) : children));
 }
 export const Item = forwardRef(BaseItem);

package/dist/components/list/components/item/item.styles.d.ts

@@ -60,6 +60,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;
@@ -129,6 +134,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;

package/dist/components/list/components/item/item.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: 'pl-[1.1875rem]',
         bullet: 'absolute block border',
-        link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+        link: 'text-text hover:cursor-pointer hover:underline',
         wrapper: 'relative'
     },
     variants: {
@@ -67,6 +67,11 @@ export const styles = tv({
             true: {
                 bullet: 'bg-[transparent]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                link: 'focus-outline'
+            }
         }
     },
     compoundSlots: [

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

@@ -6,7 +6,7 @@ export declare namespace List {
     var Item: React.ForwardRefExoticComponent<{
         href?: string | undefined;
         icon?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-        look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+        look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
         nested?: number | undefined;
         spacing?: "medium" | "large" | undefined;
         type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

package/dist/components/list/list.stories.js

@@ -50,7 +50,13 @@ export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
         }, type), React.createElement(List, {
             type: type,
             icon: type === 'icon' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List, {
+        }, React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List, {
             icon: type === 'link' ? AndroidIcon : undefined
         }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
 export const ListLooks = ()=>LOOKS.map((look)=>React.createElement("div", {

package/dist/components/list/list.utils.d.ts

@@ -2,7 +2,7 @@
 import { GetStateValuesProps } from './list.types.js';
 export declare const getStateValues: (props: GetStateValuesProps) => {
     type: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered";
-    look: "link" | "success" | "danger" | "hero" | "neutral" | "primary";
+    look: "link" | "primary" | "hero" | "success" | "danger" | "neutral";
     spacing: "medium" | "large";
     icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
 };

package/dist/components/modal/components/backdrop/backdrop.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-        modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown focus:outline-none'
+        base: 'animate-fadeIn fixed inset-0 z-50 flex justify-center overflow-y-auto bg-black/50 p-2',
+        modal: 'animate-fadeInDown relative top-5 z-10 h-fit w-full'
     }
 });

package/dist/components/modal/components/dialog/dialog.component.js

@@ -13,27 +13,29 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useRef } from 'react';
-import { useDialog } from 'react-aria';
+import { useDialog, useFocusRing } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { DialogBody } from './components/dialog-body/index.js';
 import { DialogFooter } from './components/dialog-footer/index.js';
 import { styles as dialogStyles } from './dialog.styles.js';
 export function Dialog({ className , body , onClose , size ='md' , ...props }) {
     const { children  } = props;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = dialogStyles({
         className,
-        size
+        size,
+        isFocusVisible
     });
     const ref = useRef(null);
     const { dialogProps , titleProps  } = useDialog(props, ref);
     return React.createElement("div", _extends({}, dialogProps, {
         ref: ref,
         className: styles.base()
-    }), onClose && React.createElement("button", {
+    }), onClose && React.createElement("button", _extends({
         className: styles.close(),
         onClick: onClose,
         "aria-label": "Close modal"
-    }, React.createElement(CloseIcon, {
+    }, focusProps), React.createElement(CloseIcon, {
         className: "block",
         size: "small"
     })), props.title && React.createElement("h3", _extends({}, titleProps, {

package/dist/components/modal/components/dialog/dialog.styles.d.ts

@@ -10,6 +10,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -28,6 +36,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;

package/dist/components/modal/components/dialog/dialog.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
-        title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-        close: 'absolute right-1 top-1 block p-1 focus:focus-outline'
+        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
+        title: 'border-b-heading border-b pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+        close: 'absolute right-1 top-1 block p-1'
     },
     variants: {
         size: {
@@ -16,6 +16,14 @@ export const styles = tv({
             sm: {
                 base: 'w-[18.75rem]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                close: 'focus-outline'
+            },
+            false: {
+                close: 'outline-none'
+            }
         }
     }
 }, {

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

@@ -4,7 +4,7 @@ export const styles = tv({
         base: '',
         popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
         arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
-        closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+        closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
         content: 'w-[17.625rem] py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-bold',
         body: 'typography-body-10'

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

@@ -36,7 +36,6 @@ export function Popover({ children , className , headingTag , content , heading
     }, React.createElement(Button, {
         look: icon && !children ? 'link' : look,
         iconAfter: icon,
-        className: styles.button(),
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         onClick: handleClick

package/dist/components/popover/popover.styles.d.ts

@@ -1,9 +1,7 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{}, {
     base: string;
-    button: string;
 }, undefined, {
     responsiveVariants: string[];
 }, {}, {
     base: string;
-    button: string;
 }>;

package/dist/components/popover/popover.styles.js

@@ -1,8 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative inline-block',
-        button: 'focus:focus-outline'
+        base: 'relative inline-block'
     },
     variants: {}
 }, {

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

@@ -24,11 +24,11 @@ function BaseRadio({ className , hint , children , ...props }, ref) {
         ...props,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = radioStyles({
         isDisabled,
         isSelected,
-        isFocusVisible,
+        isFocused,
         size,
         orientation
     });

package/dist/components/radio-group/components/radio/radio.styles.d.ts

@@ -13,7 +13,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             selector: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             selector: string;
         };
@@ -59,7 +59,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             selector: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             selector: string;
         };

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

@@ -4,8 +4,8 @@ export const styles = tv({
         base: 'flex',
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
-        hintText: 'typography-body-10 pl-1 text-muted',
-        selector: 'flex h-4 w-4 items-center justify-center rounded-full border border-hero'
+        hintText: 'typography-body-10 text-muted pl-1',
+        selector: 'border-hero flex h-4 w-4 items-center justify-center rounded-full border'
     },
     variants: {
         isDisabled: {
@@ -19,12 +19,12 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
+                selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full'
             }
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
-                selector: 'rounded-full focus-outline'
+                selector: 'focus-outline'
             }
         },
         orientation: {

package/dist/components/repeater/repeater.component.js

@@ -14,6 +14,7 @@ function _extends() {
 }
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useFocusRing } from 'react-aria';
 import { generateID } from '../../utils/index.js';
 import { Button } from '../button/index.js';
 import { AddCircleIcon, RemoveCircleIcon } from '../icon/index.js';
@@ -32,6 +33,7 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
     });
     const [status, setStatus] = useState('');
     const refArr = useRef([]);
+    const { isFocused , focusProps  } = useFocusRing();
     const handleAdd = useCallback(()=>{
         setItems([
             ...items,
@@ -76,7 +78,8 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
     ]);
     const Tag = separator ? 'ol' : 'ul';
     const styles = repeaterStyles({
-        separator
+        separator,
+        isFocused
     });
     return React.createElement("div", {
         className: styles.base({
@@ -101,13 +104,13 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
                 duration: 0.15
             },
             key: index
-        }, React.createElement("div", {
+        }, React.createElement("div", _extends({
             ref: (el)=>{
                 refArr.current[index] = el;
             },
             tabIndex: -1,
             className: styles.item()
-        }, separator && React.createElement(ItemIndex, {
+        }, focusProps), separator && React.createElement(ItemIndex, {
             className: styles.itemIndex()
         }, index + 1, "."), React.createElement("div", {
             className: styles.content()

package/dist/components/repeater/repeater.styles.d.ts

@@ -7,6 +7,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             footer: string;
         };
     };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     base: string;
     list: string;
@@ -27,6 +32,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             footer: string;
         };
     };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     base: string;
     list: string;

package/dist/components/repeater/repeater.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: '',
         list: 'm-0 list-none pl-0',
-        item: 'relative focus:outline-none',
+        item: 'relative',
         itemIndex: 'mb-[1.125rem] font-bold',
         content: '',
         removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
@@ -18,6 +18,11 @@ export const styles = tv({
                 removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
                 footer: 'border-neutral border-t-2 pt-[0.875rem]'
             }
+        },
+        isFocused: {
+            true: {
+                item: 'outline-none'
+            }
         }
     }
 }, {

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

@@ -10,7 +10,12 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -23,4 +28,9 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>> & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/select.component.js

@@ -13,15 +13,18 @@ function _extends() {
     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 , children , ...props }, ref) {
+    const { isFocused , focusProps  } = useFocusRing();
     return React.createElement("select", _extends({
         ref: ref,
         className: styles({
             className,
             size,
-            invalid
+            invalid,
+            isFocused
         })
-    }, props), children);
+    }, mergeProps(props, focusProps)), children);
 }
 export const Select = forwardRef(BaseSelect);

package/dist/components/select/select.styles.d.ts

@@ -9,7 +9,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +27,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>;

package/dist/components/select/select.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -11,6 +11,11 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: {
+                base: 'focus-outline'
+            }
         }
     }
 }, {

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../../../../../../components/flexi-cell/index.js';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../../components/index.js';
@@ -27,11 +27,11 @@ function BaseSelectorCheckboxGroupOption({ className , children , value , withBo
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = selectorCheckboxGroupOptionStyles({
         className,
         isSelected,
-        isFocusVisible,
+        isFocused,
         isDisabled,
         checkIcon
     });
@@ -53,7 +53,7 @@ function BaseSelectorCheckboxGroupOption({ className , children , value , withBo
         ref: ref,
         withHoverEffect: true,
         className: styles.base({})
-    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: localRef
     }))), children);
 }