@westpac/ui 0.19.0 → 0.20.0

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

@@ -6,7 +6,7 @@ import { styles } from './accordion-item.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type AccordionItemProps<T = any> = {
+export type AccordionItemProps<T = HTMLElement> = {
   /**
    * AccordionItem body content
    */

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

@@ -92,7 +92,14 @@ export function Autocomplete<T extends object>({
       ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem) ||
         (state.collection.size === 0 && searchProps.value.length > 0))
     );
-  }, [state, searchProps, noOptionsMessage]);
+  }, [
+    noOptionsMessage,
+    state.isOpen,
+    state.isFocused,
+    state.selectedItem,
+    state.collection.size,
+    searchProps.value.length,
+  ]);
 
   const iconSize = useMemo(() => {
     switch (size) {
@@ -161,7 +168,7 @@ export function Autocomplete<T extends object>({
         >
           <AutocompleteListBox
             {...listBoxProps}
-            autoFocus={listBoxProps.autoFocus as any}
+            autoFocus={listBoxProps.autoFocus as boolean | undefined}
             listBoxRef={listBoxRef}
             state={state}
           />

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Item } from 'react-stately';
 
 import { AutocompleteItemProps } from './autocomplete-item.types.js';

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { type ItemProps } from 'react-stately';
 
-export type AutocompleteItemProps<T = any> = ItemProps<T> & {
+export type AutocompleteItemProps<T = HTMLElement> = ItemProps<T> & {
   /**
    * AutocompleteItem body content
    */

package/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 import { ListState } from 'react-stately';
 
-export type AutocompleteListBoxProps<T = any> = AriaListBoxOptions<T> & {
+export type AutocompleteListBoxProps = AriaListBoxOptions<unknown> & {
   listBoxRef?: React.RefObject<HTMLUListElement>;
-  state: ListState<T>;
+  state: ListState<unknown>;
 } & HTMLAttributes<Element>;

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx

@@ -1,11 +1,11 @@
 import { type Node } from '@react-types/shared';
 import * as React from 'react';
-import { useOption } from 'react-aria';
+import { Key, useOption } from 'react-aria';
 import { type ListState } from 'react-stately';
 
 import { styles } from './autocomplete-list-box-option.styles.js';
 
-interface AutocompleteListBoxOptionProps<T = any> {
+interface AutocompleteListBoxOptionProps<T = unknown> {
   item: Node<T>;
   state: ListState<T>;
 }
@@ -18,7 +18,7 @@ export function AutocompleteListBoxOption({ item, state }: AutocompleteListBoxOp
 
   const { optionProps, isDisabled, isSelected, isFocused } = useOption(
     {
-      key: item.key as any,
+      key: item.key as Key,
     },
     state,
     ref,

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.types.ts

@@ -1,7 +1,7 @@
 import { type Node } from '@react-types/shared';
 import { type ListState } from 'react-stately';
 
-export type AutocompleteListBoxOptionProps<T = any> = {
+export type AutocompleteListBoxOptionProps<T = HTMLLIElement> = {
   item: Node<T>;
   state: ListState<T>;
 };

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.tsx

@@ -8,7 +8,7 @@ import { type AutocompleteListBoxSectionProps } from './autocomplete-list-box-se
 /**
  * @private
  */
-export function AutocompleteListBoxSection({ section, state }: AutocompleteListBoxSectionProps) {
+export function AutocompleteListBoxSection({ section, state }: AutocompleteListBoxSectionProps<unknown>) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     'aria-label': section['aria-label'],

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.types.ts

@@ -1,7 +1,7 @@
 import { type Node } from '@react-types/shared';
 import { ListState } from 'react-stately';
 
-export type AutocompleteListBoxSectionProps<T = any> = {
+export type AutocompleteListBoxSectionProps<T> = {
   section: Node<T>;
   state: ListState<T>;
 };

package/src/components/badge/badge.component.tsx

@@ -1,20 +1,19 @@
 'use client';
 
-import React, { forwardRef } from 'react';
+import React, { Ref, forwardRef } from 'react';
 
 import { styles } from './badge.styles.js';
 import { type BadgeProps } from './badge.types.js';
 
 export function BaseBadge(
   { className, tag: Tag = 'div', color = 'hero', type = 'default', soft = false, children, ...props }: BadgeProps,
-  ref: any,
+  ref: Ref<HTMLElement>,
 ) {
   return (
-    <Tag {...({ ref } as any)} className={styles({ className, color, type, soft })} {...props}>
-      {/* styling vertically aligns text in the middle */}
-      <div className="relative bottom-[1px]">{children}</div>
+    <Tag {...({ ref } as object)} className={styles({ className, color, type, soft })} {...props}>
+      {children}
     </Tag>
   );
 }
 
-export const Badge = forwardRef<any, BadgeProps>(BaseBadge);
+export const Badge = forwardRef<HTMLElement, BadgeProps>(BaseBadge);

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inline-block whitespace-nowrap border text-center leading-none',
+    base: 'inline-block whitespace-nowrap border text-center',
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
@@ -24,8 +24,8 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
-        default: 'rounded-sm px-1 py-[0.125rem] text-[0.75rem] leading-none',
+        pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
+        default: 'h-3 rounded-sm px-1 text-[0.75rem] leading-none',
       },
       soft: {
         true: 'bg-white',

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx';
 import React, { useRef } from 'react';
 import { useDialog } from 'react-aria';
 

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx';
 import { PanInfo, motion, useAnimation } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
@@ -52,7 +51,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
       return;
     }
     controls.start('hidden');
-  }, [state.isOpen]);
+  }, [controls, state.isOpen]);
 
   const onDragEnd = useCallback(
     (_: unknown, info: PanInfo) => {
@@ -66,7 +65,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
       controls.start('visible');
       state.open();
     },
-    [controls],
+    [controls, state],
   );
 
   if (!isBrowser || !state.isOpen) {

package/src/components/breadcrumb/breadcrumb.component.tsx

@@ -4,6 +4,7 @@ import React, { Children, FunctionComponentElement, cloneElement } from 'react';
 import { useBreadcrumbs } from 'react-aria';
 
 import { type BreadcrumbProps } from './breadcrumb.types.js';
+import { BreadcrumbItemProps } from './components/breadcrumb-item/breadcrumb-item.types.js';
 
 export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Breadcrumb', ...props }: BreadcrumbProps) {
   const { navProps } = useBreadcrumbs(props);
@@ -15,7 +16,9 @@ export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Bre
         {Children.map(
           children,
           (child, i) =>
-            cloneElement(child as FunctionComponentElement<any>, { isCurrent: i === childCount - 1 }) ?? <></>,
+            cloneElement(child as FunctionComponentElement<BreadcrumbItemProps>, {
+              isCurrent: i === childCount - 1,
+            }) ?? <></>,
         )}
       </ol>
     </nav>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useRef } from 'react';
+import React, { Ref, RefObject, forwardRef, useRef } from 'react';
 import { useBreadcrumbItem } from 'react-aria';
 
 import { ArrowRightIcon } from '../../../icon/index.js';
@@ -18,7 +18,7 @@ export function BaseBreadcrumbItem(
     tag: Tag = 'span',
     ...props
   }: BreadcrumbItemProps,
-  propRef: any,
+  propRef: Ref<HTMLElement>,
 ) {
   const ref = useRef(propRef);
   const FinalTag = (Tag === 'a' && isDisabled) || (Tag === 'a' && isCurrent) ? 'span' : Tag;
@@ -30,12 +30,12 @@ export function BaseBreadcrumbItem(
       isCurrent,
       elementType: FinalTag,
     },
-    ref,
+    ref as RefObject<HTMLElement>,
   );
   return (
     <li className="inline-flex items-center">
       <FinalTag
-        {...({ ...itemProps, ref: propRef, href: FinalTag === 'a' ? href : undefined } as any)}
+        {...({ ...itemProps, ref: propRef, href: FinalTag === 'a' ? href : undefined } as object)}
         className={styles({ className, isDisabled, isCurrent })}
       >
         {children}
@@ -49,4 +49,4 @@ export function BaseBreadcrumbItem(
   );
 }
 
-export const BreadcrumbItem = forwardRef<any, BreadcrumbItemProps>(BaseBreadcrumbItem);
+export const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(BaseBreadcrumbItem);

package/src/components/button/button.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { Ref, forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles as buttonStyles } from './button.styles.js';
@@ -22,7 +22,7 @@ function BaseButton(
     children,
     ...props
   }: ButtonProps,
-  ref: any,
+  ref: Ref<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>,
 ) {
   const { isFocusVisible, focusProps } = useFocusRing();
   const iconSize = useMemo(() => getIconSize(size), [size]);

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

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+      base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
       iconBefore: '',
       iconAfter: '',
       dropdown: 'ml-[0.4em]',

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

@@ -23,7 +23,7 @@ export function ButtonDropdown({
   soft = false,
   block = false,
 }: ButtonDropdownProps) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
   const panelId = useId();
   const styles = buttonDropdownStyles({ block, dropdownSize });
   const state = useOverlayTriggerState({ defaultOpen: open });
@@ -35,7 +35,7 @@ export function ButtonDropdown({
     (event: globalThis.KeyboardEvent) => {
       if (state.isOpen && event.key === 'Escape') state.close();
     },
-    [state.isOpen],
+    [state],
   );
 
   useEffect(() => {

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

@@ -26,7 +26,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ...
       )
         state.close();
     },
-    [state.isOpen],
+    [props.triggerRef, state],
   );
 
   // React Aria does not handle click as we need when isNonModal is true so this is needed
@@ -42,7 +42,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ...
       )
         state.close();
     },
-    [state.isOpen],
+    [props.triggerRef, state],
   );
 
   useEffect(() => {
@@ -52,7 +52,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ...
       window.document.removeEventListener('focusin', focusHandler);
       window.document.removeEventListener('click', clickHandler);
     };
-  }, []);
+  }, [clickHandler, focusHandler]);
 
   return (
     <div

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

@@ -99,9 +99,7 @@ export function ButtonGroup({
     <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.buttonWrapper()}>
         <ButtonGroupContext.Provider value={{ state, size, look, block }}>
           {buttons.map((button, index) => (

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

@@ -91,7 +91,7 @@ export function CheckboxGroup({
   const { groupProps, labelProps, errorMessageProps, descriptionProps } = useCheckboxGroup({ ...props, label }, state);
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
-  const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
+  const firstNewCheckboxRef = useRef<HTMLLabelElement>(null);
   const revealAmount = checkboxes && checkboxes.length - showAmount;
   const styles = checkboxStyles({ orientation, isFocusVisible });
   const panelId = useId();
@@ -113,9 +113,7 @@ export function CheckboxGroup({
     <div className={styles.base({ className })} {...groupProps}>
       <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.itemWrapper()} id={panelId}>
         <CheckboxGroupContext.Provider value={{ state, orientation, size }}>
           {childrenToRender}

package/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.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, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 
 import { Icon } from '../../../icon/icon.component.js';
@@ -31,7 +31,10 @@ function CheckIcon({ copyrightYear = '2024', size, ...props }: IconProps) {
   );
 }
 
-function BaseCheckbox({ className, hint, label, value, ...props }: CheckboxGroupCheckboxProps, ref: any) {
+function BaseCheckbox(
+  { className, hint, label, value, ...props }: CheckboxGroupCheckboxProps,
+  ref: Ref<HTMLLabelElement>,
+) {
   const { state, size, orientation } = useContext(CheckboxGroupContext);
   const localRef = useRef(null);
   const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem(

package/src/components/collapsible/collapsible.component.tsx

@@ -30,7 +30,7 @@ export function Collapsible({
   const handleClick = useCallback(() => {
     onClick();
     setContentOpen(contentOpen => !contentOpen);
-  }, [contentOpen]);
+  }, [onClick]);
 
   const styles = collapsibleStyles({ open: contentOpen });
 

package/src/components/compacta/compacta.component.tsx

@@ -146,7 +146,7 @@ export function Compacta({
                   look="link"
                   size="large"
                   onClick={() => handleToggle(item.id, index)}
-                  ref={(el: HTMLElement) => {
+                  ref={(el: HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement) => {
                     toggleRefs.current[index] = el;
                   }}
                   aria-labelledby={`gel-compacta-title-${item.id}`}

package/src/components/date-picker/date-picker.component.tsx

@@ -46,7 +46,7 @@ export function DatePicker({
 
   const dateAdapter = useMemo(
     () => ({
-      parse(value = '', createDate: any) {
+      parse(value = '', createDate: (year: string, month: string, day: string) => Date) {
         const matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
         if (matches) {
           return createDate(matches[3], matches[2], matches[1]);
@@ -103,7 +103,7 @@ export function DatePicker({
     ref.current.isDateDisabled = (date: Date) => {
       return isDateDisabled(date, disableWeekends, disableDaysOfWeek, disableDates);
     };
-  }, [ref, initialized]);
+  }, [ref, initialized, dateAdapter, localization, value, id, name, disableWeekends, disableDaysOfWeek, disableDates]);
 
   useLayoutEffect(() => {
     if (!ref.current) {

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

@@ -4,10 +4,10 @@ import { VariantProps } from 'tailwind-variants';
 import { styles } from './date-picker.styles.js';
 
 export type DuetDatePickerElement = Element & {
-  dateAdapter: any;
-  identifier: any;
+  dateAdapter: object;
+  identifier?: string;
   isDateDisabled: (date: Date) => boolean;
-  localization: any;
+  localization: object;
   max?: string;
   min?: string;
   name?: string;
@@ -48,23 +48,33 @@ export type DatePickerProps = {
   /*
    * onBlur
    */
-  onBlur?: (...args: any[]) => unknown;
+  // NOTE: duet library uses custom events build with another library causing these to be hard to type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onBlur?: (...args: any[]) => void;
   /*
    * onChange
    */
-  onChange?: (...args: any[]) => unknown;
+  // NOTE: duet library uses custom events build with another library causing these to be hard to type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?: (...args: any[]) => void;
   /*
    * onClose
    */
-  onClose?: (...args: any[]) => unknown;
+  // NOTE: duet library uses custom events build with another library causing these to be hard to type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClose?: (...args: any[]) => void;
   /*
    * onFocus
    */
-  onFocus?: (...args: any[]) => unknown;
+  // NOTE: duet library uses custom events build with another library causing these to be hard to type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onFocus?: (...args: any[]) => void;
   /*
    * onOpen
    */
-  onOpen?: (...args: any[]) => unknown;
+  // NOTE: duet library uses custom events build with another library causing these to be hard to type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onOpen?: (...args: any[]) => void;
   /*
    * placeholder
    */

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]);
 

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);