@westpac/ui 0.50.0 → 0.52.0

package/dist/hook/breakpoints.hook.js

@@ -1,21 +1,70 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { create } from 'zustand';
 import { BREAKPOINTS } from '../tailwind/constants/index.js';
 function checkBreakpoint() {
+    if (typeof window === 'undefined') {
+        return 'initial';
+    }
     const breakpointsAsArray = Object.entries(BREAKPOINTS).reverse();
     const breakpoint = breakpointsAsArray.find(([, value])=>window.matchMedia(`(min-width: ${value})`).matches);
     return breakpoint ? breakpoint[0] : 'initial';
 }
+const BREAKPOINTS_ENTRIES = Object.entries(BREAKPOINTS);
+const BREAKPOINTS_MEDIA = BREAKPOINTS_ENTRIES.reduce((acc, [key, value], index)=>{
+    const finalValue = (()=>{
+        const nextBreakpoint = BREAKPOINTS_ENTRIES[index + 1];
+        if (nextBreakpoint) {
+            return `(min-width: ${value}) and (max-width: ${+nextBreakpoint[1].replace('px', '') - 1}px)`;
+        }
+        return `(min-width: ${value})`;
+    })();
+    return {
+        ...acc,
+        [key]: finalValue
+    };
+}, {
+    initial: `(max-width: ${+BREAKPOINTS_ENTRIES[0][1].replace('px', '') - 1}px)`
+});
+const useBreakpointStore = create()((set, get)=>({
+        breakpoint: 'initial',
+        mediaQueryListeners: null,
+        initialised: false,
+        ensureInitialized: ()=>{
+            if (get().initialised) {
+                return;
+            }
+            const listeners = Object.entries(BREAKPOINTS_MEDIA).map(([label, query])=>{
+                const mq = window.matchMedia(query);
+                const listener = (e)=>{
+                    if (e.matches) {
+                        set({
+                            breakpoint: label
+                        });
+                    }
+                };
+                mq.addEventListener('change', listener);
+                return {
+                    mq,
+                    listener
+                };
+            });
+            set({
+                mediaQueryListeners: listeners,
+                initialised: true,
+                breakpoint: checkBreakpoint()
+            });
+        },
+        removeListeners: ()=>{
+            var _get_mediaQueryListeners;
+            (_get_mediaQueryListeners = get().mediaQueryListeners) === null || _get_mediaQueryListeners === void 0 ? void 0 : _get_mediaQueryListeners.forEach(({ mq, listener })=>{
+                mq.removeEventListener('change', listener);
+            });
+        }
+    }));
 export function useBreakpoint() {
-    const [breakpoint, setBreakpoint] = useState(checkBreakpoint());
+    const { breakpoint, ensureInitialized: initIfNotInitialised } = useBreakpointStore();
     useEffect(()=>{
-        const listener = ()=>{
-            const breakpoint = checkBreakpoint();
-            setBreakpoint(breakpoint);
-        };
-        window.addEventListener('resize', listener);
-        return ()=>{
-            window.removeEventListener('resize', listener);
-        };
+        initIfNotInitialised();
     }, []);
     return breakpoint;
 }

package/dist/hook/index.d.ts

@@ -1 +1,2 @@
+export * from './breakpoints.hook.js';
 export * from '../components/pagination/pagination.hooks.js';

package/dist/hook/index.js

@@ -1 +1,2 @@
+export * from './breakpoints.hook.js';
 export * from '../components/pagination/pagination.hooks.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,8 +255,8 @@
     "typescript": "^5.5.4",
     "vite": "^7.0.5",
     "vitest": "^3.2.4",
-    "@westpac/eslint-config": "~1.0.1",
     "@westpac/test-config": "~0.0.0",
+    "@westpac/eslint-config": "~1.0.1",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
@@ -270,7 +270,8 @@
     "lodash.throttle": "~4.1.1",
     "motion": "~12.23.12",
     "react-aria": "~3.41.1",
-    "react-stately": "~3.39.0"
+    "react-stately": "~3.39.0",
+    "zustand": "~4.5.4"
   },
   "overrides": {
     "react-aria": {

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

@@ -1,8 +1,8 @@
 /* eslint-disable sonarjs/deprecation */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useAccordionItem } from '@react-aria/accordion';
-import { AnimatePresence, LazyMotion, m } from 'motion/react';
-import React, { useRef } from 'react';
+import { LazyMotion, m, useAnimate } from 'motion/react';
+import React, { useEffect, useRef, useState } from 'react';
 import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
@@ -23,11 +23,58 @@ export function AccordionItem<T = HTMLElement>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key);
+  const isOpenState = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible, rounded });
+  // Open/close animation needs to be done with useAnimate as AnimatePresence will unmount component
+  const [scope, animate] = useAnimate();
+  const [enableOpenStyle, setEnableOpenStyle] = useState(isOpenState); // styles for opening accordion
+  const [enableCloseStyle, setEnableCloseStyle] = useState(!isOpenState); // styles for closing accordion
+
+  const styles = accordionItemStyles({
+    isOpen: enableOpenStyle,
+    isClosed: enableCloseStyle,
+    isOpenState,
+    isDisabled,
+    look,
+    isFocusVisible,
+    rounded,
+  });
+
+  useEffect(() => {
+    // setEnableStyle here as opening animation isn't working correctly if done below
+    if (isOpenState) setEnableOpenStyle(true);
+
+    // animates opening accordion
+    if (enableOpenStyle) {
+      animate(
+        scope.current,
+        { height: 'auto' },
+        { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0], onComplete: () => setEnableCloseStyle(false) },
+      );
+    }
+
+    // animates closing accordion
+    if (!isOpenState) {
+      animate(
+        scope.current,
+        { height: '0px' },
+        {
+          duration: 0.3,
+          ease: [0.25, 0.1, 0.25, 1.0],
+          // set some styles after animation completes so content doesn't disappear on close
+          onPlay: () => {
+            setEnableCloseStyle(true);
+          },
+          onComplete: () => {
+            setEnableOpenStyle(false);
+          },
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenState, enableOpenStyle]);
 
   return (
     <Tag className={styles.base({ className })}>
@@ -46,34 +93,23 @@ export function AccordionItem<T = HTMLElement>({
         </button>
       </h3>
       <div {...regionProps}>
+        {/* NOTE: Can potentially replace animation in the future with React 19.2 Activity and AnimateActivity from motion/react once fully released https://motion.dev/docs/react-animate-activity */}
         <LazyMotion features={loadAnimations}>
-          <AnimatePresence initial={false}>
-            <m.div
-              className="overflow-hidden"
-              initial={{
-                height: 0,
-              }}
-              animate={{
-                height: 'auto',
+          <m.div className={styles.motionContent()} initial={{ height: isOpenState ? 'auto' : 0 }} ref={scope}>
+            <div
+              className={styles.content()}
+              // TODO: Remove below with updated accordion that uses disclosure as the issue doesn't happen with that version
+              // Need to call stopPropagation here as some events from children are bubbling up and focusing the accordion i.e. inputs
+              onBlur={e => {
+                e.stopPropagation();
               }}
-              exit={{
-                height: 0,
+              onFocus={e => {
+                e.stopPropagation();
               }}
-              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
-              key={`${item.index}-${isOpen}`}
             >
-              <div
-                className={styles.content()}
-                // TODO: Remove below with updated accordion that uses disclosure as the issue doesn't happen with that version
-                // Need to call stopPropagation here as some events from children are bubbling up and focusing the accordion i.e. inputs
-                onBlur={e => {
-                  e.stopPropagation();
-                }}
-              >
-                {item.props.children}
-              </div>
-            </m.div>
-          </AnimatePresence>
+              {item.props.children}
+            </div>
+          </m.div>
         </LazyMotion>
       </div>
     </Tag>

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

@@ -7,7 +7,8 @@ export const styles = tv(
       itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
       headerTitleWrapper: 'flex-1 pr-2 text-left',
       indicator: 'size-3 rotate-90',
-      content: 'hidden',
+      content: '',
+      motionContent: '',
     },
     variants: {
       look: {
@@ -19,13 +20,25 @@ export const styles = tv(
             'mb-[-1px] border-l-[0.375rem] border-r border-border bg-light shadow-[inset_0px_1px_0_0_var(--tw-shadow-color),inset_0_-1px_0_0_var(--tw-shadow-color)] !shadow-border transition-colors',
         },
       },
+      isOpenState: {
+        false: {
+          itemHeader: 'background-transition hover:bg-background',
+        },
+      },
       isOpen: {
         true: {
-          content: 'block border-border p-3',
+          content: 'visible block border-border p-3',
         },
         false: {
-          base: '',
-          itemHeader: 'background-transition hover:bg-background',
+          content: 'hidden',
+        },
+      },
+      isClosed: {
+        true: {
+          motionContent: 'overflow-hidden',
+        },
+        false: {
+          motionContent: 'overflow-visible',
         },
       },
       isDisabled: {
@@ -45,13 +58,13 @@ export const styles = tv(
     compoundSlots: [
       {
         slots: ['indicator'],
-        isOpen: true,
+        isOpenState: true,
         className: '-rotate-90',
       },
       {
         slots: ['itemHeader'],
         look: 'lego',
-        isOpen: true,
+        isOpenState: true,
         className: 'border-l-hero',
       },
       {

package/src/components/autocomplete/autocomplete.component.tsx

@@ -41,13 +41,15 @@ function Autocomplete<T extends object>(
     className,
     width = 'full',
     loadingState,
+    comboBoxState,
     ...props
   }: AutocompleteProps<T>,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { contains } = useFilter({ sensitivity: 'base' });
-  const state = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const internalState = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const state = comboBoxState ?? internalState;
   const { isFocusVisible, focusProps } = useFocusRing();
   const { isFocusVisible: isInputFocusVisible, focusProps: inputFocusProps } = useFocusRing();
   const inputRef = React.useRef<HTMLInputElement>(null);

package/src/components/autocomplete/autocomplete.types.ts

@@ -1,6 +1,7 @@
 import { type ComboBoxProps } from '@react-types/combobox';
 import { type AriaLabelingProps } from '@react-types/shared';
 import { type ReactNode } from 'react';
+import { ComboBoxState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 
 import { HintProps, InputProps } from '../index.js';
@@ -63,5 +64,10 @@ export type AutocompleteProps<T extends object> = {
    * Width of autocomplete
    */
   width?: InputProps['width'];
+  /**
+   * Pass through comboBox state from consuming component. If not specified,
+   * will be handled internally.
+   */
+  comboBoxState?: ComboBoxState<T>;
 } & ComboBoxProps<T> &
   AriaLabelingProps;

package/src/components/badge/badge.styles.ts

@@ -24,7 +24,7 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
+        pill: 'typography-body-10 flex h-4 min-w-4 w-fit items-center justify-center rounded-xl px-[0.4375rem] font-medium leading-none',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
+      base: 'relative flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
       title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
       body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
       closeBtn: 'absolute right-3 top-3 p-0',

package/src/components/footer/footer.component.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { useFocusRing } from 'react-aria';
 
-import { Grid, GridItem, VisuallyHidden } from '../index.js';
+import { VisuallyHidden } from '../index.js';
 import {
   BOMMultibrandSmallLogo,
   BSAMultibrandSmallLogo,
@@ -54,18 +54,14 @@ export function Footer({
   return (
     <footer className={styles.base({ className })} {...props}>
       <div className={styles.wrapper()}>
-        <Grid className={styles.topRow()}>
-          <GridItem span={12}>{children}</GridItem>
-        </Grid>
+        <div>{children}</div>
         {!hideLogo && (
-          <Grid>
-            <GridItem span={{ initial: 12, md: 1 }}>
-              <a href={logoLink} className={styles.link()} {...focusProps}>
-                {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
-                <Logo align="right" aria-label={logoAssistiveText} />
-              </a>
-            </GridItem>
-          </Grid>
+          <div className={styles.logoWrapper()}>
+            <a href={logoLink} className={styles.link()} {...focusProps}>
+              {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
+              <Logo align="right" aria-label={logoAssistiveText} />
+            </a>
+          </div>
         )}
       </div>
     </footer>

package/src/components/footer/footer.styles.ts

@@ -4,9 +4,9 @@ export const styles = tv(
   {
     slots: {
       base: 'relative overflow-hidden border-t border-t-border',
-      wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
-      topRow: '',
+      wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-3',
       link: 'float-right block',
+      logoWrapper: 'flex justify-end',
     },
     variants: {
       offsetSidebar: {
@@ -18,10 +18,6 @@ export const styles = tv(
       isFocusVisible: {
         true: { link: 'focus-outline' },
       },
-      hideLogo: {
-        true: '',
-        false: { topRow: 'max-md:mb-7 md:mb-4' },
-      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/header/header.component.tsx

@@ -56,6 +56,7 @@ export function Header({
   brand,
   className,
   children,
+  disableLogoLink = false,
   fixed = false,
   fixedMaxWidth,
   isScrolled,
@@ -97,6 +98,13 @@ export function Header({
 
   const styles = headerStyles({ logoCenter, fixed, leftIcon, scrolled: isScrolled || scrolled });
 
+  const HeaderLogo = () => (
+    <>
+      <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
+      <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
+    </>
+  );
+
   return (
     <header className={styles.base({ className })} {...props}>
       <div className={styles.inner()} style={{ maxWidth: fixed ? fixedMaxWidth : undefined }}>
@@ -115,10 +123,15 @@ export function Header({
           </div>
         )}
         {/* useFocusRing was causing this link to need two clicks to activate so focus-visible styling is used instead */}
-        <a href={logoLink} target={anchorTarget} className={styles.logoLink()} onClick={logoOnClick}>
-          <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
-          <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
-        </a>
+        {disableLogoLink ? (
+          <div className={styles.logoLink()}>
+            <HeaderLogo />
+          </div>
+        ) : (
+          <a href={logoLink} target={anchorTarget} className={styles.logoLink()} onClick={logoOnClick}>
+            <HeaderLogo />
+          </a>
+        )}
         {children && <div className={styles.rightContent()}>{children}</div>}
       </div>
     </header>

package/src/components/header/header.types.ts

@@ -12,6 +12,11 @@ export type HeaderProps = {
    * Icon for brand
    */
   brand: Exclude<BrandKey, 'btfg'>;
+  /**
+   * Removes anchor link from logo
+   * @default false
+   */
+  disableLogoLink?: boolean;
   /**
    * Enable fixed header
    */
@@ -46,7 +51,8 @@ export type HeaderProps = {
    */
   logoCenter?: boolean;
   /**
-   * Link for logo
+   * Link for logo, can be disabled with disableLogoLink
+   * @default '#'
    */
   logoLink?: string;
   /**

package/src/components/modal/components/modal-dialog/index.ts

@@ -1,2 +1,3 @@
 export { ModalDialog } from './modal-dialog.component.js';
 export { type ModalDialogProps } from './modal-dialog.types.js';
+export { type ModalDialogFooterProps } from './components/modal-dialog-footer/modal-dialog-footer.types.js';

package/src/components/modal/index.ts

@@ -3,3 +3,4 @@ export { ModalDialogFooter as ModalFooter } from './components/modal-dialog/comp
 
 export { Modal } from './modal.component.js';
 export { type ModalProps } from './modal.types.js';
+export { type ModalDialogFooterProps } from './components/index.js';

package/src/components/popover/components/panel/panel.component.tsx

@@ -22,16 +22,19 @@ export function BasePanel({
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
   const { popoverPosition, arrowPosition } = usePanel({ state, placement, triggerRef, portal });
-
   const styles = panelStyles({ placement });
   return (
     <FocusScope autoFocus restoreFocus>
       <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
         <div className={styles.content()}>
-          <Tag tabIndex={0} className={styles.heading()}>
-            {heading}
-          </Tag>
-          <div className={styles.body()}>{content}</div>
+          {heading && (
+            <Tag className={styles.heading()} tabIndex={0}>
+              {heading}
+            </Tag>
+          )}
+          <div className={styles.body()} tabIndex={0}>
+            {content}
+          </div>
           <Button
             look="link"
             size="small"

package/src/components/select/components/index.ts

@@ -0,0 +1,2 @@
+export { SelectWithTooltip } from './select-with-tooltip/select-with-tooltip.component.js';
+export { StyledSelect } from './styled-select/styled-select.component.js';

package/src/components/select/components/select-with-tooltip/select-with-tooltip.component.tsx

@@ -0,0 +1,31 @@
+import React, { ForwardedRef, forwardRef, useState } from 'react';
+
+import { Tooltip } from '../../../tooltip/index.js';
+import { SelectProps } from '../../select.types.js';
+import { StyledSelect } from '../styled-select/styled-select.component.js';
+
+import { styles } from './select-with-tooltip.styles.js';
+
+function BaseSelectWithTooltip(
+  { width = 'auto', children, onChange, ...props }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  const [selectedOption, setSelectedOption] = useState('');
+  return (
+    <Tooltip tooltip={selectedOption} className={styles({ width })}>
+      <StyledSelect
+        ref={ref}
+        onChange={e => {
+          setSelectedOption(e.target.options[e.target.selectedIndex].text);
+          onChange?.(e);
+        }}
+        width={width}
+        {...props}
+      >
+        {children}
+      </StyledSelect>
+    </Tooltip>
+  );
+}
+
+export const SelectWithTooltip = forwardRef<HTMLSelectElement, SelectProps>(BaseSelectWithTooltip);

package/src/components/select/components/select-with-tooltip/select-with-tooltip.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {
+      width: {
+        auto: 'flex-1',
+        full: 'w-full flex-1',
+        1: 'w-[1.81ex]',
+        2: 'w-[3.62ex]',
+        3: 'w-[5.43ex]',
+        4: 'w-[7.24ex]',
+        5: 'w-[9.05ex]',
+        6: 'w-[10.86ex]',
+        7: 'w-[12.67ex]',
+        8: 'w-[14.48ex]',
+        9: 'w-[16.29ex]',
+        10: 'w-[18.1ex]',
+        20: 'w-[36.2ex]',
+        30: 'w-[54.3ex]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/select/components/styled-select/styled-select.component.tsx

@@ -0,0 +1,25 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+
+import { type SelectProps } from '../../select.types.js';
+
+import { styles } from './styled-select.styles.js';
+
+function BaseSelect(
+  { className, size = 'medium', invalid = false, width = 'auto', children, ...props }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+
+  return (
+    <select
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused, isFocusVisible, width })}
+      {...mergeProps(props, focusProps)}
+    >
+      {children}
+    </select>
+  );
+}
+
+export const StyledSelect = forwardRef<HTMLSelectElement, SelectProps>(BaseSelect);

package/src/components/select/components/styled-select/styled-select.styles.ts

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    variants: {
+      size: {
+        small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
+        medium: 'form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+        large: 'form-control-large bg-[right_0.9375rem_center] pr-[calc(0.5rem+14px+0.9375rem)]',
+        xlarge: 'form-control-xlarge bg-[right_1.125rem_center] pr-[calc(0.5rem+14px+1.125rem)]',
+      },
+      invalid: {
+        true: 'border-danger',
+        false: 'border-borderDark',
+      },
+      isFocusVisible: {
+        true: 'focus-outline',
+      },
+      isFocused: {
+        true: 'outline-none',
+      },
+      width: {
+        auto: 'flex-1',
+        full: 'w-full flex-1',
+        1: 'box-content w-[1.81ex]',
+        2: 'box-content w-[3.62ex]',
+        3: 'box-content w-[5.43ex]',
+        4: 'box-content w-[7.24ex]',
+        5: 'box-content w-[9.05ex]',
+        6: 'box-content w-[10.86ex]',
+        7: 'box-content w-[12.67ex]',
+        8: 'box-content w-[14.48ex]',
+        9: 'box-content w-[16.29ex]',
+        10: 'box-content w-[18.1ex]',
+        20: 'box-content w-[36.2ex]',
+        30: 'box-content w-[54.3ex]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);