@westpac/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.6.0
+
+### Minor Changes
+
+- 240f606: fixes keyboard focus style in several components
+
 ## 0.5.0
 
 ### Minor Changes

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

@@ -24,8 +24,8 @@ declare const _Accordion: {
         default: string;
     };
 }, undefined>> & {
-    color?: "hero" | "primary" | ({
-        [x: string]: "hero" | "primary" | undefined;
+    color?: "primary" | "hero" | ({
+        [x: string]: "primary" | "hero" | undefined;
     } & string) | undefined;
     justify?: boolean | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {

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

@@ -15,7 +15,7 @@ function _extends() {
 import { useAccordionItem } from '@react-aria/accordion';
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
-import { mergeProps, useHover, useLocale } from 'react-aria';
+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);
@@ -23,6 +23,7 @@ export function AccordionItem({ className , tag: Tag = 'div' , color , look ='de
     const ref = useRef(null);
     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({
@@ -34,11 +35,12 @@ export function AccordionItem({ className , tag: Tag = 'div' , color , look ='de
         isDisabled,
         className,
         color,
-        look
+        look,
+        isFocusVisible
     });
     return React.createElement(Tag, {
         className: styles.base()
-    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps), {
+    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps, focusProps), {
         ref: ref,
         className: styles.itemHeader()
     }), React.createElement("span", null, item.props.title), look === 'material' && React.createElement("div", {

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -29,6 +29,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: {
+            itemHeader: string;
+        };
+        false: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -67,6 +75,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: {
+            itemHeader: string;
+        };
+        false: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -2,32 +2,32 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2 focus:focus-outline',
+        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
         indicator: '',
         content: 'hidden'
     },
     variants: {
         look: {
             material: {
-                itemHeader: 'bg-white transition-colors hover:bg-light',
-                indicator: 'relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 before:bg-muted after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-muted after:transition-transform'
+                itemHeader: 'hover:bg-light bg-white transition-colors',
+                indicator: 'before:bg-muted after:bg-muted relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:transition-transform'
             },
             default: {
-                itemHeader: 'border-t border-border bg-light',
+                itemHeader: 'border-border bg-light border-t',
                 indicator: 'h-3 w-3 -rotate-90 transition-transform'
             }
         },
         color: {
             hero: {
-                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
+                itemHeader: 'border-l-border border-l-[0.375rem] transition-colors'
             },
             primary: {
-                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
+                itemHeader: 'border-l-border border-l-[0.375rem] transition-colors'
             }
         },
         isOpen: {
             true: {
-                content: 'block border-t border-border p-3'
+                content: 'border-border block border-t p-3'
             },
             false: {
                 base: ''
@@ -36,6 +36,14 @@ export const styles = tv({
         isDisabled: {
             true: '',
             false: ''
+        },
+        isFocusVisible: {
+            true: {
+                itemHeader: 'focus-outline'
+            },
+            false: {
+                itemHeader: 'outline-none'
+            }
         }
     },
     compoundSlots: [
@@ -76,14 +84,14 @@ export const styles = tv({
                 'content'
             ],
             color: 'hero',
-            className: 'border-l-[0.375rem] border-l-border'
+            className: 'border-l-border border-l-[0.375rem]'
         },
         {
             slots: [
                 'content'
             ],
             color: 'primary',
-            className: 'border-l-[0.375rem] border-l-border'
+            className: 'border-l-border border-l-[0.375rem]'
         }
     ]
 }, {

package/dist/components/autocomplete/autocomplete.styles.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'relative flex flex-col',
-        label: 'block text-left text-sm font-medium text-text',
-        outerWrapper: 'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled focus:focus-outline',
+        label: 'text-text block text-left text-sm font-medium',
+        outerWrapper: 'form-control disabled:form-control-disabled relative flex w-full flex-row items-center overflow-hidden pr-2',
         input: 'w-full appearance-none bg-[transparent] outline-none',
-        clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60'
+        clearButton: 'text-text-50 hover:text-border-60 flex cursor-default items-center justify-center'
     },
     variants: {
         invalid: {

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

@@ -2,8 +2,8 @@ import React from 'react';
 export declare const Button: React.ForwardRefExoticComponent<{
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    iconColor?: "link" | "text" | "border" | "heading" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "hero" | "light" | "muted" | "neutral" | "pop" | "primary" | (string & {
-        [x: string]: "link" | "text" | "border" | "heading" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "hero" | "light" | "muted" | "neutral" | "pop" | "primary" | undefined;
+    iconColor?: "link" | "text" | "border" | "heading" | "primary" | "hero" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "light" | "muted" | "neutral" | "pop" | (string & {
+        [x: string]: "link" | "text" | "border" | "heading" | "primary" | "hero" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "light" | "muted" | "neutral" | "pop" | undefined;
     }) | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
 } & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
@@ -53,6 +53,14 @@ export declare const Button: React.ForwardRefExoticComponent<{
     hasChildren: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     iconBefore: string;
@@ -108,6 +116,14 @@ export declare const Button: React.ForwardRefExoticComponent<{
     hasChildren: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     iconBefore: string;

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

@@ -13,10 +13,11 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useMemo } from 'react';
-import { FocusRing } from 'react-aria';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
 function BaseButton({ className , size ='medium' , look ='hero' , soft , block , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , children , ...props }, ref) {
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const iconSize = useMemo(()=>getIconSize(size), [
         size
     ]);
@@ -26,16 +27,15 @@ function BaseButton({ className , size ='medium' , look ='hero' , soft , block ,
         soft,
         block,
         justify,
+        isFocusVisible,
         hasChildren: !!children
     });
-    return React.createElement(FocusRing, {
-        focusRingClass: "focus-outline"
-    }, React.createElement(Tag, _extends({
+    return React.createElement(Tag, _extends({
         ref: ref,
         className: styles.base({
             className
         })
-    }, props), IconBefore && React.createElement(IconBefore, {
+    }, mergeProps(props, focusProps)), IconBefore && React.createElement(IconBefore, {
         size: iconSize,
         className: styles.iconBefore(),
         color: iconColor
@@ -45,6 +45,6 @@ function BaseButton({ className , size ='medium' , look ='hero' , soft , block ,
         size: iconSize,
         className: styles.iconAfter(),
         color: iconColor
-    })));
+    }));
 }
 export const Button = forwardRef(BaseButton);

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

@@ -48,6 +48,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     hasChildren: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     iconBefore: string;
@@ -103,6 +111,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     hasChildren: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     iconBefore: string;

package/dist/components/button/button.styles.js

@@ -53,6 +53,14 @@ export const styles = tv({
         },
         hasChildren: {
             true: ''
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {
+                base: 'outline-none'
+            }
         }
     },
     compoundSlots: [

package/dist/components/button-dropdown/button-dropdown.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'focus:focus-outline',
+        base: '',
         panel: 'overflow-hidden'
     },
     variants: {

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useOverlay, usePopover } from 'react-aria';
+import { DismissButton, Overlay, mergeProps, useFocusRing, useOverlay, usePopover } from 'react-aria';
 import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ className , children , state , block , id , ...props }) {
     var _props_triggerRef_current;
@@ -27,7 +27,10 @@ export function Panel({ className , children , state , block , id , ...props })
         shouldFlip: false,
         ...props
     }, state);
-    const styles = panelStyles({});
+    const { isFocused , focusProps  } = useFocusRing();
+    const styles = panelStyles({
+        isFocused
+    });
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     const focusHandler = useCallback((event)=>{
         if (event.target && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
@@ -40,7 +43,7 @@ export function Panel({ className , children , state , block , id , ...props })
             window.document.removeEventListener('focusin', focusHandler);
         };
     }, []);
-    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, overlayProps), {
+    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, overlayProps, focusProps), {
         id: id,
         "data-testid": "panel-dialog",
         style: {

package/dist/components/button-dropdown/components/panel/panel.styles.d.ts

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

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

@@ -2,9 +2,15 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
-        dialog: 'focus:outline-none'
+        dialog: ''
     },
-    variants: {}
+    variants: {
+        isFocused: {
+            true: {
+                dialog: 'outline-none'
+            }
+        }
+    }
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -34,12 +34,12 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = checkboxItemStyles({
         isDisabled,
         size,
         orientation,
-        isFocusVisible
+        isFocused
     });
     return React.createElement("label", {
         className: styles.base({

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

@@ -8,7 +8,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             checkbox: string;
         };
@@ -52,7 +52,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             checkbox: string;
         };

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

@@ -5,8 +5,8 @@ export const styles = tv({
         checkIcon: 'overflow-visible',
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
-        hintText: 'typography-body-10 pl-1 text-muted',
-        checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero'
+        hintText: 'typography-body-10 text-muted pl-1',
+        checkbox: 'border-hero flex h-4 w-4 items-center justify-center rounded border'
     },
     variants: {
         isDisabled: {
@@ -18,9 +18,9 @@ export const styles = tv({
                 base: 'hover:cursor-pointer'
             }
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
-                checkbox: 'rounded focus-outline'
+                checkbox: 'focus-outline'
             }
         },
         orientation: {

package/dist/components/collapsible/collapsible.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'px-0 text-text no-underline hover:underline focus:focus-outline',
+        base: 'text-text px-0 no-underline hover:underline',
         content: 'typography-body-10 mb-2 block'
     },
     variants: {

package/dist/components/compacta/compacta.styles.js

@@ -10,7 +10,7 @@ export const styles = tv({
         itemIndex: 'mr-2 w-4 flex-none font-bold',
         removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
         addBtn: 'h-auto p-0 no-underline hover:underline',
-        toggleBtn: 'focus:outline-focus ml-auto p-0',
+        toggleBtn: 'ml-auto p-0',
         collapsible: '',
         content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
         footer: 'pt-[0.5rem]',

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

@@ -13,14 +13,17 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from './components/index.js';
 import { styles as flexiCellStyles } from './flexi-cell.styles.js';
 function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , before , body , after , withArrow , withBorder =false , href , withHoverEffect =false , ...props }, ref) {
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = flexiCellStyles({
         className,
         withBorder,
-        isLink: !!href || withHoverEffect
+        isLink: !!href || withHoverEffect,
+        isFocusVisible
     });
     return React.createElement(Tag, _extends({}, {
         ref
@@ -29,7 +32,7 @@ function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , befor
             className
         }),
         href: href
-    }, props), badge && React.createElement("div", {
+    }, mergeProps(props, focusProps)), badge && React.createElement("div", {
         className: styles.badge()
     }, badge), before, React.createElement("div", {
         className: styles.bodyWrapper()

package/dist/components/flexi-cell/flexi-cell.styles.d.ts

@@ -11,6 +11,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     bodyWrapper: string;
@@ -30,6 +35,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     bodyWrapper: string;

package/dist/components/flexi-cell/flexi-cell.styles.js

@@ -1,14 +1,14 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex gap-2 bg-white p-2 transition-colors focus:focus-outline md:p-3',
+        base: 'relative flex gap-2 bg-white p-2 transition-colors md:p-3',
         bodyWrapper: 'flex flex-1 flex-col',
         badge: 'absolute right-0 top-0'
     },
     variants: {
         withBorder: {
             true: {
-                base: 'rounded border border-borderDark'
+                base: 'border-borderDark rounded border'
             },
             false: {}
         },
@@ -17,6 +17,11 @@ export const styles = tv({
                 base: 'hover:border-hero'
             },
             false: {}
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            }
         }
     }
 }, {

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

@@ -14,7 +14,10 @@ export declare const Input: React.ForwardRefExoticComponent<{
         true: string;
         false: string;
     };
-}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -27,4 +30,7 @@ export declare const Input: React.ForwardRefExoticComponent<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>>, "invalid"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.component.js

@@ -13,16 +13,19 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './input.styles.js';
 export function BaseInput({ className , size ='medium' , invalid =false , ...props }, ref) {
+    const { isFocused , focusProps  } = useFocusRing();
     return React.createElement("input", _extends({
         ref: ref,
         className: styles({
             className,
             size,
-            invalid
+            invalid,
+            isFocused
         }),
         "aria-invalid": invalid
-    }, props));
+    }, mergeProps(props, focusProps)));
 }
 export const Input = forwardRef(BaseInput);

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

@@ -9,7 +9,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>;

package/dist/components/input/input.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
     variants: {
         size: {
             small: 'form-control-small group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',
@@ -11,6 +11,9 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: 'focus-outline'
         }
     }
 }, {

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

@@ -6,7 +6,7 @@ export declare const Link: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    iconSize?: "small" | "xsmall" | "medium" | "large" | "xlarge" | undefined;
+    iconSize?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     type?: "inline" | "standalone" | undefined;
     underline?: boolean | undefined;
 } & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;