@westpac/ui 0.4.0 → 0.6.0

package/src/components/accordion/components/accordion-item/accordion-item.component.tsx

@@ -1,7 +1,7 @@
 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';
 
@@ -20,11 +20,12 @@ export function AccordionItem<T = any>({
   const ref = useRef<HTMLButtonElement>(null);
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
   const isOpen = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, className, color, look });
+  const styles = accordionItemStyles({ isOpen, isDisabled, className, color, look, isFocusVisible });
 
   return (
     <Tag className={styles.base()}>
@@ -33,7 +34,7 @@ export function AccordionItem<T = any>({
         https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
       */}
       <h3>
-        <button {...mergeProps(buttonProps, hoverProps)} ref={ref} className={styles.itemHeader()}>
+        <button {...mergeProps(buttonProps, hoverProps, focusProps)} ref={ref} className={styles.itemHeader()}>
           <span>{item.props.title}</span>
           {look === 'material' && <div aria-hidden="true" className={styles.indicator()} />}
           {look === 'default' &&

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -4,33 +4,33 @@ 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',
+          itemHeader: 'hover:bg-light bg-white transition-colors',
           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',
+            '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: '',
@@ -40,6 +40,14 @@ export const styles = tv(
         true: '',
         false: '',
       },
+      isFocusVisible: {
+        true: {
+          itemHeader: 'focus-outline',
+        },
+        false: {
+          itemHeader: 'outline-none',
+        },
+      },
     },
     compoundSlots: [
       {
@@ -69,12 +77,12 @@ export const styles = tv(
       {
         slots: ['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/src/components/alert/alert.component.tsx

@@ -59,7 +59,7 @@ export function Alert({
           >
             <Tag className={styles.base({ className })} {...props}>
               <span className={styles.icon()}>
-                <Icon size={{ initial: 'small', xsl: 'medium' }} />
+                <Icon size={{ initial: 'small', xsl: 'medium' }} look="outlined" />
               </span>
               <div className={styles.body()}>
                 {!!heading && <HeadingTag className={styles.heading()}>{heading}</HeadingTag>}

package/src/components/alert/alert.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 relative mb-4 p-3 xsl:flex',
+      base: 'typography-body-10 relative mb-4 xsl:flex',
       icon: 'float-left mr-1 flex-none xsl:mr-2',
       body: 'relative flex-1 xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
@@ -29,7 +29,7 @@ export const styles = tv(
       },
       mode: {
         box: {
-          base: 'border-y',
+          base: 'border-y p-3',
         },
         text: {
           base: 'bg-[transparent]',

package/src/components/autocomplete/autocomplete.styles.ts

@@ -4,11 +4,11 @@ export const styles = tv(
   {
     slots: {
       base: 'relative flex flex-col',
-      label: 'block text-left text-sm font-medium text-text',
+      label: 'text-text block text-left text-sm font-medium',
       outerWrapper:
-        'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled focus:focus-outline',
+        '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/src/components/button/button.component.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import { FocusRing } from 'react-aria';
-
-import { DropDownIcon } from '../icon/index.js';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles as buttonStyles } from './button.styles.js';
 import { type ButtonProps } from './button.types.js';
@@ -24,6 +22,7 @@ function BaseButton(
   }: ButtonProps,
   ref: any,
 ) {
+  const { isFocusVisible, focusProps } = useFocusRing();
   const iconSize = useMemo(() => getIconSize(size), [size]);
   const styles = buttonStyles({
     size,
@@ -31,16 +30,16 @@ function BaseButton(
     soft,
     block,
     justify,
+    isFocusVisible,
     hasChildren: !!children,
   });
+
   return (
-    <FocusRing focusRingClass="focus-outline">
-      <Tag ref={ref} className={styles.base({ className })} {...props}>
-        {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} />}
-        <span className={styles.text()}>{children}</span>
-        {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} />}
-      </Tag>
-    </FocusRing>
+    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
+      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} />}
+      <span className={styles.text()}>{children}</span>
+      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} />}
+    </Tag>
   );
 }
 

package/src/components/button/button.styles.ts

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

package/src/components/button-dropdown/button-dropdown.styles.ts

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

package/src/components/button-dropdown/components/panel/panel.component.tsx

@@ -1,5 +1,5 @@
 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';
 import { type PanelProps } from './panel.types.js';
@@ -8,7 +8,8 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
   const popoverRef = useRef<HTMLDivElement>(null);
   const { overlayProps } = useOverlay({ shouldCloseOnBlur: true, onClose: state.close }, popoverRef);
   const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, ...props }, state);
-  const styles = panelStyles({});
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = panelStyles({ isFocused });
   const width = props.triggerRef.current?.getBoundingClientRect().width;
 
   // Added this based on accessibility features seen https://gel.westpacgroup.com.au/design-system/components/button-dropdowns?b=WBC&tab=accessibility and React Aria doesn't do this
@@ -30,7 +31,7 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
   return (
     <Overlay>
       <div
-        {...mergeProps(popoverProps, overlayProps)}
+        {...mergeProps(popoverProps, overlayProps, focusProps)}
         id={id}
         data-testid="panel-dialog"
         style={{ ...popoverProps.style, width: block && width ? `${width}px` : undefined }}

package/src/components/button-dropdown/components/panel/panel.styles.ts

@@ -5,9 +5,15 @@ 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: {
+      isFocused: {
+        true: {
+          dialog: 'outline-none',
+        },
+      },
     },
-    variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/checkbox-group/components/checkbox/checkbox.component.tsx

@@ -25,8 +25,8 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxPr
   const { size, orientation } = state;
   const localRef = useRef(null);
   const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocused });
 
   return (
     <label className={styles.base({ className })} ref={ref}>

package/src/components/checkbox-group/components/checkbox/checkbox.styles.ts

@@ -7,8 +7,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: {
@@ -20,8 +20,8 @@ export const styles = tv(
           base: 'hover:cursor-pointer',
         },
       },
-      isFocusVisible: {
-        true: { checkbox: 'rounded focus-outline' },
+      isFocused: {
+        true: { checkbox: 'focus-outline' },
       },
       orientation: {
         horizontal: {

package/src/components/collapsible/collapsible.styles.ts

@@ -3,7 +3,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/src/components/compacta/compacta.component.tsx

@@ -1,12 +1,13 @@
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
 import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, IconProps, RemoveCircleIcon } from '../icon/index.js';
-import { Button, VisuallyHidden } from '../index.js';
+import { VisuallyHidden } from '../index.js';
 
 import { styles as compactaStyles } from './compacta.styles.js';
 import { type CompactaProps } from './compacta.types.js';
-import { generateID } from './compacta.utils.js';
 
 interface Action {
   id?: string;
@@ -97,7 +98,7 @@ export function Compacta({
         setTimeout(() => {
           headingRefs?.current[action.index]?.focus();
         }, 1);
-        setStatus(`Item ${action.index + 1} added`);
+        setStatus(`Item added`);
       }
 
       if (action.type === 'remove') {

package/src/components/compacta/compacta.styles.ts

@@ -12,7 +12,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/src/components/flexi-cell/flexi-cell.component.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
 
@@ -26,13 +27,15 @@ function FlexiCellBase(
     withArrow,
     withBorder = false,
     href,
+    withHoverEffect = false,
     ...props
   }: FlexiCellProps,
   ref: any,
 ) {
-  const styles = flexiCellStyles({ className, withBorder, isLink: !!href });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = flexiCellStyles({ className, withBorder, isLink: !!href || withHoverEffect, isFocusVisible });
   return (
-    <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...props}>
+    <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...mergeProps(props, focusProps)}>
       {badge && <div className={styles.badge()}>{badge}</div>}
       {before}
       <div className={styles.bodyWrapper()}>{body ? <FlexiCellBody>{children}</FlexiCellBody> : children}</div>

package/src/components/flexi-cell/flexi-cell.styles.ts

@@ -3,14 +3,14 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex gap-2 bg-white px-2 py-3 transition-colors focus:focus-outline',
+      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: {},
       },
@@ -20,6 +20,9 @@ export const styles = tv(
         },
         false: {},
       },
+      isFocusVisible: {
+        true: { base: 'focus-outline' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -44,6 +44,10 @@ type BaseFlexiCellProps = {
    * Adds a border radius and a border
    */
   withBorder?: boolean;
+  /**
+   * With hover style
+   */
+  withHoverEffect?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;
 
 type FlexiCellAsLinkProps = {

package/src/components/flexi-cell/index.ts

@@ -1,2 +1,3 @@
+export * from './components/index.js';
 export { FlexiCell } from './flexi-cell.component.js';
 export { type FlexiCellProps } from './flexi-cell.types.js';

package/src/components/icon/index.ts

@@ -233,4 +233,5 @@ export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
 
+export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/src/components/index.ts

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

package/src/components/input/input.component.tsx

@@ -1,4 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles } from './input.styles.js';
 import { type InputProps } from './input.types.js';
@@ -7,7 +8,15 @@ export function BaseInput(
   { className, size = 'medium', invalid = false, ...props }: InputProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
-  return <input ref={ref} className={styles({ className, size, invalid })} aria-invalid={invalid} {...props} />;
+  const { isFocused, focusProps } = useFocusRing();
+  return (
+    <input
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused })}
+      aria-invalid={invalid}
+      {...mergeProps(props, focusProps)}
+    />
+  );
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(BaseInput);

package/src/components/input/input.styles.ts

@@ -2,7 +2,7 @@ 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',
@@ -14,6 +14,9 @@ export const styles = tv(
         true: 'border-danger',
         false: 'border-borderDark',
       },
+      isFocused: {
+        true: 'focus-outline',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/link/link.component.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
 
@@ -23,14 +23,21 @@ export function BaseLink(
 ) {
   const ref = useRef(propRef);
   const { linkProps } = useLink({ ...props }, ref);
-  const styles = linkStyles({ type, underline });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = linkStyles({ type, underline, isFocusVisible });
 
   if (type === 'standalone' && !IconBefore && !IconAfter) {
     IconBefore = ArrowRightIcon;
   }
 
   return (
-    <a {...linkProps} ref={propRef} href={href} target={target} className={styles.base({ className })}>
+    <a
+      {...mergeProps(linkProps, focusProps)}
+      ref={propRef}
+      href={href}
+      target={target}
+      className={styles.base({ className })}
+    >
       {IconBefore && <IconBefore size={iconSize} color="link" className={styles.iconBefore()} />}
       <span className={styles.text()}>{children}</span>
       {IconAfter && <IconAfter size={iconSize} color="link" className={styles.iconAfter()} />}

package/src/components/link/link.styles.ts

@@ -3,7 +3,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',
@@ -11,17 +11,21 @@ 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/src/components/list/components/item/item.component.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
+import { useFocusRing } from 'react-aria';
 
 import { ListContext } from '../../list.component.js';
 import { getStateValues } from '../../list.utils.js';
@@ -14,6 +15,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
   look = stateValues.look;
   type = stateValues.type;
   const Icon = stateValues.icon;
+  const { isFocusVisible, focusProps } = useFocusRing();
 
   const styles = itemStyles({
     look,
@@ -21,6 +23,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
     spacing: stateValues.spacing,
     icon: !!Icon,
     nested: (state.nested && state.nested > 0) || false,
+    isFocusVisible,
   });
 
   const bulletToRender = () => {
@@ -38,7 +41,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
       {bulletToRender()}
       <li className={styles.base({ className })} {...props}>
         {type === 'link' ? (
-          <a href={href} className={styles.link()} ref={ref}>
+          <a href={href} className={styles.link()} ref={ref} {...focusProps}>
             {children}
           </a>
         ) : (

package/src/components/list/components/item/item.styles.ts

@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 pl-[1.1875rem]',
+      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: {
@@ -71,6 +71,9 @@ export const styles = tv(
       nested: {
         true: { bullet: 'bg-[transparent]' },
       },
+      isFocusVisible: {
+        true: { link: 'focus-outline' },
+      },
     },
     compoundSlots: [
       {

package/src/components/list/list.stories.tsx

@@ -47,9 +47,9 @@ export const ListTypes = () =>
     <div className="mb-2" key={type}>
       <h1 className="typography-body-8">{type}</h1>
       <List type={type} icon={type === 'icon' ? AndroidIcon : undefined}>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
         <List icon={type === 'link' ? AndroidIcon : undefined}>
           <List.Item>Styled {type} list</List.Item>
           <List.Item>Styled {type} list</List.Item>

package/src/components/list/list.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'list-none',
+      base: 'typography-body-10 list-none',
     },
     variants: {
       type: {

package/src/components/modal/components/backdrop/backdrop.styles.ts

@@ -2,7 +2,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',
   },
 });