@westpac/ui 0.19.0 → 0.20.1

package/src/components/date-picker/date-picker.utils.ts

@@ -1,4 +1,4 @@
-import { EventHandler, RefObject, useEffect } from 'react';
+import { RefObject, useEffect } from 'react';
 
 import { DuetDatePickerElement } from './date-picker.types.js';
 
@@ -34,7 +34,7 @@ export function formatDate(date: Date, format: string) {
 export function useListener(
   ref: RefObject<DuetDatePickerElement> | null,
   eventName: string,
-  handler?: EventHandler<any>,
+  handler?: EventListenerOrEventListenerObject,
 ) {
   useEffect(() => {
     if (ref?.current && handler) {
@@ -42,7 +42,7 @@ export function useListener(
       element.addEventListener(eventName, handler);
       return () => element.removeEventListener(eventName, handler);
     }
-  }, [eventName, handler]);
+  }, [eventName, handler, ref]);
 }
 
 export function createDate(year: string, month: string, day: string) {

package/src/components/error-message/error-message.component.tsx

@@ -11,8 +11,8 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
 
   return Array.isArray(message) ? (
     <ul className={styles.list({})} {...props}>
-      {message.map(msg => (
-        <li className={styles.base({ className })}>
+      {message.map((msg, index) => (
+        <li key={index} className={styles.base({ className })}>
           <FinalIcon copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
           {msg}
         </li>

package/src/components/error-message/error-message.types.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
 
 export type ErrorMessageProps = {

package/src/components/field/field.component.tsx

@@ -33,7 +33,7 @@ export function Field({
         return cloneElement(child, fieldProps);
       }
     });
-  }, [children]);
+  }, [children, fieldProps]);
 
   return (
     <Tag className={styles({ className })} {...props}>

package/src/components/flexi-cell/flexi-cell.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef } from 'react';
+import React, { Ref, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
@@ -26,7 +26,7 @@ function FlexiCellBase(
     tabIndex,
     ...props
   }: FlexiCellProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   const { isFocusVisible, focusProps } = useFocusRing();
 
@@ -41,7 +41,7 @@ function FlexiCellBase(
 
   return (
     <Tag
-      {...({ ref } as any)}
+      {...({ ref } as object)}
       className={styles.base({ className })}
       href={href}
       {...mergeProps(props, focusProps)}

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

@@ -83,7 +83,7 @@ export function Header({
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [fixed, handleScroll]);
 
   const logoAlignment = logoCenter ? 'center' : 'left';
 

package/src/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.tsx

@@ -6,12 +6,7 @@ import { type InputGroupAddOnDefaultAddOnProps } from './input-group-add-on-defa
 /**
  * @private
  */
-export const InputGroupAddOnDefaultAddOn = ({
-  position,
-  className,
-  children,
-  ...props
-}: InputGroupAddOnDefaultAddOnProps) => {
+export const InputGroupAddOnDefaultAddOn = ({ className, children, ...props }: InputGroupAddOnDefaultAddOnProps) => {
   return (
     <div className={styles({ className })} {...props}>
       {children}

package/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts

@@ -9,8 +9,8 @@ export const styles = tv(
         false: '',
       },
       position: {
-        before: 'add-on-before group',
-        after: 'add-on-after group',
+        before: 'group/add-on-before',
+        after: ' group/add-on-after',
       },
     },
     compoundVariants: [

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

@@ -1,6 +1,15 @@
 'use client';
 
-import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
+import React, {
+  Attributes,
+  Children,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+} from 'react';
 
 import { ErrorMessage, Hint, Label } from '../index.js';
 
@@ -37,7 +46,7 @@ export function InputGroup({
       ...(supportingText ? [`${id}-supporting-text`] : []),
     ];
     return arr.join(' ');
-  }, [id, hint, errorMessage, supportingText]);
+  }, [errorMessage, id, hint, before, after, supportingText]);
 
   const {
     element: beforeElement,
@@ -81,10 +90,10 @@ export function InputGroup({
           id,
           'aria-describedby': ariaDescribedByValue,
           ...(width !== 'full' ? { width: width } : {}),
-        } as any);
+        } as Partial<unknown> & Attributes);
       }
     });
-  }, [children, ariaDescribedByValue]);
+  }, [children, size, id, ariaDescribedByValue, width]);
 
   const isFieldset = useMemo(() => Tag === 'fieldset', [Tag]);
 
@@ -93,7 +102,7 @@ export function InputGroup({
     after: !!after,
     afterInset,
     beforeInset,
-    width: !isNaN(Number(width)),
+    width: width,
   });
 
   return (

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

@@ -1,5 +1,6 @@
 import { tv } from 'tailwind-variants';
 
+const inlineFlexInput = { input: 'inline-flex' };
 export const styles = tv(
   {
     slots: {
@@ -23,9 +24,21 @@ export const styles = tv(
         true: '',
         false: '',
       },
+      // Has to be done this as doing it with compoundVariants with array was not working
       width: {
-        true: '',
-        false: '',
+        full: '',
+        1: inlineFlexInput,
+        2: inlineFlexInput,
+        3: inlineFlexInput,
+        4: inlineFlexInput,
+        5: inlineFlexInput,
+        6: inlineFlexInput,
+        7: inlineFlexInput,
+        8: inlineFlexInput,
+        9: inlineFlexInput,
+        10: inlineFlexInput,
+        20: inlineFlexInput,
+        30: inlineFlexInput,
       },
     },
     compoundVariants: [
@@ -49,12 +62,6 @@ export const styles = tv(
         beforeInset: true,
         className: { base: 'input-group-inset-before' },
       },
-      {
-        width: true,
-        className: {
-          input: 'inline-flex',
-        },
-      },
     ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useContext } from 'react';
+import React, { Ref, forwardRef, useContext } from 'react';
 import { useFocusRing } from 'react-aria';
 
 import { ListContext } from '../../list.component.js';
@@ -11,7 +11,7 @@ import { type ListItemProps } from './list-item.types.js';
 
 export function BaseListItem(
   { className, children, href, target, look, type, spacing, icon, ...props }: ListItemProps,
-  ref: any,
+  ref: Ref<HTMLAnchorElement>,
 ) {
   const state = useContext(ListContext);
 

package/src/components/pagination/components/pagination-item/pagination-item.types.ts

@@ -25,5 +25,7 @@ export type PaginationItemProps = {
   /**
    * Link component to render
    */
+  // NOTE: any typing below is very hard to replace
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
 } & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

package/src/components/pagination/pagination.component.tsx

@@ -66,7 +66,7 @@ export function Pagination({
       tag: linkComponent || 'a',
       href: fowardOnly ? pages[pages.length - 1].href : pages[(current || 0) - 2]?.href,
     };
-  }, [current, onChange, linkComponent, pages, infinite]);
+  }, [current, infinite, onChange, linkComponent, pages, generateHandleOnClickBackwards]);
 
   const generateHandleOnClickForward = useCallback(
     (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => unknown) => () => {
@@ -108,7 +108,7 @@ export function Pagination({
       tag: linkComponent || 'a',
       href: backwardsOnly ? pages[0].href : pages[current || 0]?.href,
     };
-  }, [current, onChange, linkComponent, pages, infinite]);
+  }, [current, pages, infinite, linkComponent, onChange, generateHandleOnClickForward]);
 
   return (
     <Tag className={styles.base({ className })} role={role} aria-label="Page number" {...props}>

package/src/components/pagination/pagination.hooks.ts

@@ -13,7 +13,7 @@ export const usePagination = ({ defaultCurrent = 1, pages, infinite = false }: P
       }
       return cannotGoForward ? currentPage : currentPage + 1;
     });
-  }, [pages]);
+  }, [infinite, pages.length]);
 
   const previous = useCallback(() => {
     setCurrentPage(currentPage => {
@@ -23,7 +23,7 @@ export const usePagination = ({ defaultCurrent = 1, pages, infinite = false }: P
       }
       return cannotGoBackwards ? currentPage : currentPage - 1;
     });
-  }, [pages]);
+  }, [infinite, pages.length]);
 
   const selectedPage = useMemo(() => {
     return pages[currentPage - 1];

package/src/components/pass-code/pass-code.component.tsx

@@ -31,7 +31,7 @@ export function PassCode({ length, onComplete, className, ...props }: PassCodePr
         onComplete(newPasscode.join(''));
       }
     },
-    [onComplete, inputRefs, passcode],
+    [passcode, length, onComplete],
   );
 
   const handlePaste = useCallback(
@@ -47,7 +47,7 @@ export function PassCode({ length, onComplete, className, ...props }: PassCodePr
         onComplete(newPasscode.join(''));
       }
     },
-    [passcode],
+    [length, onComplete, passcode],
   );
 
   const handleKeyDown = useCallback(
@@ -66,7 +66,7 @@ export function PassCode({ length, onComplete, className, ...props }: PassCodePr
         }
       }
     },
-    [inputRefs],
+    [passcode],
   );
 
   const handleFocus = useCallback(

package/src/components/pass-code-view/pass-code-view.types.ts

@@ -33,11 +33,11 @@ export type PassCodeViewProps = {
   /**
    * on click the resend button
    */
-  onResend?: () => any;
+  onResend?: () => void;
   /**
    * on click the update button
    */
-  onUpdate?: () => any;
+  onUpdate?: () => void;
   /**
    * length of the passcode
    */

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

@@ -3,7 +3,7 @@ import { FocusScope } from 'react-aria';
 
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
-import { usePopoverPosition } from '../../popover.hooks.js';
+import { getPopoverPosition } from '../../popover.utils.js';
 
 import { styles as panelStyles } from './panel.styles.js';
 import { type PanelProps, Position } from './panel.types.js';
@@ -29,8 +29,8 @@ export function Panel({ state, heading, headingTag: Tag = 'h1', content, placeme
   });
 
   useLayoutEffect(() => {
-    setPosition(usePopoverPosition(triggerRef, popoverRef, arrowRef, placement));
-  }, [state.isOpen]);
+    setPosition(getPopoverPosition(triggerRef, popoverRef, arrowRef, placement));
+  }, [placement, remSize, state.isOpen, triggerRef]);
 
   const getPopoverClass = useCallback(() => {
     return {

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

@@ -30,18 +30,18 @@ export function Popover({
   const state = useOverlayTriggerState({});
   const panelId = useId();
   const styles = popoverStyles({});
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
 
   const handleClick = useCallback(() => {
     onClick();
     state.toggle();
-  }, [onClick, state.isOpen]);
+  }, [onClick, state]);
 
   const keyHandler = useCallback(
     (event: globalThis.KeyboardEvent) => {
       if (state.isOpen && event.key === 'Escape') state.close();
     },
-    [state.isOpen],
+    [state],
   );
 
   useEffect(() => {
@@ -49,11 +49,11 @@ export function Popover({
     return () => {
       window.document.removeEventListener('keydown', keyHandler);
     };
-  }, [state.isOpen]);
+  }, [keyHandler, state.isOpen]);
 
   useLayoutEffect(() => {
     if (open) state.setOpen(true);
-  }, [open]);
+  }, [open, state]);
   return (
     <div className={styles.base({ className })}>
       <Button

package/src/components/popover/{popover.hooks.tsx → popover.utils.tsx}

@@ -1,8 +1,8 @@
-import { RefObject, useMemo } from 'react';
+import { RefObject } from 'react';
 
 import { Position } from './components/panel/panel.types.js';
 
-export const usePopoverPosition = (
+export const getPopoverPosition = (
   triggerRef: RefObject<HTMLDivElement>,
   popoverRef: RefObject<HTMLDivElement>,
   arrowRef: RefObject<HTMLDivElement>,

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx

@@ -14,7 +14,6 @@ export function ProgressRopeStep({
   current,
   visited,
   tag: Tag = 'button',
-  type,
   size = 'medium',
   children,
   firstItem,
@@ -41,7 +40,7 @@ export function ProgressRopeStep({
       return 'visited';
     }
     return 'non-visited';
-  }, [current, visited]);
+  }, [current, lastItemInRope, visited]);
   const { isFocusVisible, focusProps } = useFocusRing();
 
   const styles = progressRopeStyles({
@@ -65,7 +64,7 @@ export function ProgressRopeStep({
       return ', complete';
     }
     return ', not started';
-  }, [current, visited]);
+  }, [current, furthest, visited]);
 
   return (
     <Tag

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.types.ts

@@ -44,5 +44,5 @@ export type ProgressRopeStepProps = {
    * Says it is visited
    */
   visited?: boolean;
-} & Omit<ProgressRopeStepItem, 'text'> &
+} & Omit<ProgressRopeStepItem, 'text' | 'type'> &
   HTMLAttributes<Element>;

package/src/components/progress-rope/progress-rope.component.tsx

@@ -68,7 +68,7 @@ export function ProgressRope({
     if (newGroupStepIndex !== openedGroupStepIndex) {
       setOpenedGroupStepIndex(newGroupStepIndex);
     }
-  }, [current]);
+  }, [current, mappedData, openedGroupStepIndex]);
 
   return (
     <Tag className={className} role={role} aria-label={ariaLabel} {...props}>
@@ -92,7 +92,6 @@ export function ProgressRope({
               ) : (
                 <ProgressRopeStep
                   firstItem={index === 0}
-                  type={item.type}
                   onClick={furthestVisitedStep >= item.index ? item.onClick : undefined}
                   visited={furthestVisitedStep > item.index}
                   furthest={furthestVisitedStep === item.index}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { Ref, forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 
 import { RadioGroupContext } from '../../radio-group.component.js';
@@ -8,7 +8,7 @@ import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
 import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
 
-function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: any) {
+function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: Ref<HTMLLabelElement>) {
   const { state, size, orientation } = useContext(RadioGroupContext);
   const localRef = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);

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

@@ -90,7 +90,7 @@ export function RadioGroup({
   );
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
-  const firstNewRadioRef = useRef<HTMLDivElement>(null);
+  const firstNewRadioRef = useRef<HTMLLabelElement>(null);
   const revealAmount = radios && radios.length - showAmount;
   const styles = radioGroupStyles({ orientation, isFocusVisible });
   const panelId = useId();
@@ -112,9 +112,7 @@ export function RadioGroup({
     <div className={styles.base({ className })} {...radioGroupProps}>
       <Label {...labelProps}>{label}</Label>
       {hintMessage && <Hint {...descriptionProps}>{hintMessage}</Hint>}
-      {errorMessage && state.validationState === 'invalid' && (
-        <ErrorMessage {...errorMessageProps} message={errorMessage} />
-      )}
+      {errorMessage && state.isInvalid && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
       <div className={styles.radioWrapper()} id={panelId}>
         <RadioGroupContext.Provider value={{ state, orientation, size }}>{childrenToRender}</RadioGroupContext.Provider>
         {hiddenOptions && (

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:!rounded-r group-[.add-on-after]:rounded-l-none group-[.add-on-before]:!rounded-l group-[.add-on-before]:rounded-r-none group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.add-on-after]:!border-x group-[.add-on-before]:!border-x group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    base: 'form-control 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)]',

package/src/components/selector/components/selector-button-group/components/selector-button-group-option/selector-button-group-option.component.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, forwardRef, useCallback, useContext } from 'react';
+import React, { MouseEventHandler, Ref, forwardRef, useCallback, useContext } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { FlexiCell } from '../../../../../../index.js';
@@ -21,7 +21,7 @@ function BaseSelectorButtonGroupOption(
     id,
     ...props
   }: SelectorButtonGroupOptionProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   const state = useContext(SelectorButtonContext);
   const { isFocusVisible, focusProps } = useFocusRing();
@@ -36,7 +36,7 @@ function BaseSelectorButtonGroupOption(
       onClick(event);
       state.onClick(id);
     },
-    [onClick, state.onClick],
+    [id, onClick, state],
   );
   return (
     <FlexiCell

package/src/components/selector/components/selector-button-group/selector-button-group.component.tsx

@@ -32,7 +32,7 @@ export function SelectorButtonGroup({
     (id: string) => {
       setSelected(id);
     },
-    [selected, setSelected],
+    [setSelected],
   );
 
   const state: SelectorButtonGroupContextState = useMemo(
@@ -42,7 +42,7 @@ export function SelectorButtonGroup({
       validationState: errorMessage ? 'invalid' : 'valid',
       isDisabled,
     }),
-    [selected],
+    [errorMessage, handleChange, isDisabled, selected],
   );
 
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { Ref, forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
@@ -22,7 +22,7 @@ function BaseSelectorCheckboxGroupOption(
     checkIcon = 'checkbox',
     ...props
   }: SelectorCheckboxGroupOptionProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   const state = useContext(SelectorCheckboxGroupContext);
   const localRef = useRef(null);

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

@@ -82,9 +82,7 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
     <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
-      {errorMessage && state.validationState === 'invalid' && (
-        <ErrorMessage {...errorMessageProps} message={errorMessage} />
-      )}
+      {errorMessage && state.isInvalid && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
       <div {...groupProps} className={styles({ className: groupProps.className })}>
         <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
       </div>

package/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useContext, useId, useRef } from 'react';
+import React, { Ref, RefObject, forwardRef, useContext, useId, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 
 import { FlexiCell } from '../../../../../../index.js';
@@ -22,12 +22,12 @@ function BaseSelectorLinkGroupOption(
     href,
     ...props
   }: SelectorLinkGroupOptionProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   const id = useId();
   const localRef = useRef(ref);
   const state = useContext(SelectorLinkContext);
-  const { linkProps } = useLink({ ...props }, localRef);
+  const { linkProps } = useLink({ ...props }, localRef as RefObject<HTMLElement>);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = SelectorLinkGroupOptionStyles({
     className,

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { Ref, forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
@@ -22,7 +22,7 @@ function BaseSelectorRadioGroupOption(
     checkIcon = 'checkbox',
     ...props
   }: SelectorRadioGroupOptionProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   const { state } = useContext(SelectorRadioGroupContext);
   const localRef = useRef(null);

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -89,9 +89,7 @@ export function SelectorRadioGroup({
     <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
-      {errorMessage && state.validationState === 'invalid' && (
-        <ErrorMessage {...errorMessageProps} message={errorMessage} />
-      )}
+      {errorMessage && state.isInvalid && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
       <div className={styles({ className, orientation })} {...radioGroupProps}>
         <SelectorRadioGroupContext.Provider value={{ state, orientation }}>
           {children}

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

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { forwardRef } from 'react';
+import React, { Ref, forwardRef } from 'react';
 
 import { styles } from './skip-link.styles.js';
 import { type SkipLinkProps } from './skip-link.types.js';
 
-function BaseSkipLink({ className, tag: Tag = 'a', children, ...props }: SkipLinkProps, ref: any) {
+function BaseSkipLink({ className, tag: Tag = 'a', children, ...props }: SkipLinkProps, ref: Ref<HTMLElement>) {
   return (
-    <Tag {...({ ref } as any)} className={styles({ className })} {...props}>
+    <Tag {...({ ref } as object)} className={styles({ className })} {...props}>
       {children}
     </Tag>
   );

package/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx

@@ -1,12 +1,12 @@
 import React, { useRef } from 'react';
-import { mergeProps, useFocusRing, useTab } from 'react-aria';
+import { Key, mergeProps, useFocusRing, useTab } from 'react-aria';
 
 import { styles } from './tabs-tab.styles.js';
 import { type TabsTabProps } from './tabs-tab.types.js';
 
 export function TabsTab({ item: { key, rendered }, state, orientation, justify, color, look }: TabsTabProps) {
   const ref = useRef(null);
-  const { tabProps } = useTab({ key: key as any }, state, ref);
+  const { tabProps } = useTab({ key: key as Key }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
   return (
     <div