@westpac/ui 0.19.0 → 0.20.1

package/dist/tailwind/tailwind-plugin.js

@@ -180,7 +180,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(function(options = {})
                 }
             },
             button: {
-                base: 'inline-flex 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: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-last/add-on-after:rounded-l-none group-first/add-on-before:rounded-r-none',
                 look: {
                     base: {
                         primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',

package/dist/tailwind/utils/create-font-sizes.d.ts

@@ -1 +1,10 @@
-export declare const createFontSizes: (fontTypes: string[]) => Record<string, any>;
+type FontSizeType = Record<string, string | [fontSize: string, lineHeight: string] | [
+    fontSize: string,
+    configuration: Partial<{
+        fontWeight: string | number;
+        letterSpacing: string;
+        lineHeight: string;
+    }>
+]>;
+export declare const createFontSizes: (fontTypes: string[]) => FontSizeType;
+export {};

package/dist/tailwind/utils/generate-font-components.d.ts

@@ -1,5 +1,5 @@
-import { PluginAPI } from 'tailwindcss/types/config.js';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config.js';
 export declare const generateFontComponents: (typographySizes: Record<string, {
     fontSize: string;
     lineHeight: string;
-}>, theme: PluginAPI['theme']) => Record<string, any>;
+}>, theme: PluginAPI['theme']) => CSSRuleObject[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,9 +255,9 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/eslint-config": "~0.2.1",
+    "@westpac/ts-config": "~0.0.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/eslint-config": "~0.2.1"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

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

@@ -1,10 +1,11 @@
 'use client';
 
-import { useAccordion } from '@react-aria/accordion';
+import { AriaAccordionProps, useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
+import { DOMProps, DOMRef } from '@react-types/shared';
 import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
-import { Item, type ItemProps, useTreeState } from 'react-stately';
+import { Item, type ItemProps, TreeProps, useTreeState } from 'react-stately';
 
 import { styles } from './accordion.styles.js';
 import { type AccordionProps } from './accordion.types.js';
@@ -12,30 +13,35 @@ import { AccordionItem as AccordionItemContent } from './components/index.js';
 
 function Accordion<T extends object>(
   { className, rounded = true, look = 'soft', ...props }: AccordionProps<T>,
-  ref: any,
+  ref: DOMRef<HTMLDivElement>,
 ) {
   // react-aria doesn't allow for now to use component children when there is multiple levels
   // in our case we don't need that functionality and we have to render html tags or components
   // therefore as a workaround we are setting hasChildItems false for all of them
   // https://github.com/adobe/react-spectrum/issues/3882
-  const finalProps: any = {
+  const finalProps = {
     ...props,
     children: Children.map(props.children, child => {
       // equal to (if (child == null || typeof child == 'string'))
       if (!isValidElement(child)) return child;
       return cloneElement(child, {
-        ...(child.props as any),
+        ...child.props,
         // Adding hasChildItems false by default
         hasChildItems: false,
       });
     }),
   };
-  const state = useTreeState<T>(finalProps);
+  const state = useTreeState<T>(finalProps as TreeProps<T>);
   const domRef = useDOMRef<HTMLDivElement>(ref);
-  const { accordionProps } = useAccordion(finalProps, state, domRef);
+  const { accordionProps } = useAccordion(finalProps as AriaAccordionProps<T>, state, domRef);
 
   return (
-    <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
+    <div
+      {...filterDOMProps(finalProps as DOMProps)}
+      {...accordionProps}
+      ref={domRef}
+      className={styles({ className, rounded })}
+    >
       <div className="ml-[-1px] mt-[-1px]">
         {[...state.collection].map(item => (
           <AccordionItemContent<T> key={item.key} item={item} state={state} look={look} />
@@ -46,7 +52,7 @@ function Accordion<T extends object>(
 }
 
 const _Accordion = forwardRef(Accordion) as unknown as { displayName: string } & (<T>(
-  props: AccordionProps<T> & { ref?: any },
+  props: AccordionProps<T> & { ref?: HTMLElement },
 ) => ReturnType<typeof Accordion>);
 
 _Accordion.displayName = 'Accordion';

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

@@ -6,7 +6,7 @@ import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
 
 type Variants = VariantProps<typeof styles>;
-export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+export type AccordionProps<T = HTMLElement> = SpectrumAccordionProps<T> & {
   /**
    * <AccordionItem /> as a collection
    */

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, useFocusRing, useHover, useLocale } from 'react-aria';
+import { Key, mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 
@@ -10,7 +10,7 @@ import { type AccordionItemProps } from './accordion-item.types.js';
 
 const loadAnimations = () => import('./accordion-item.utils.js').then(res => res.default);
 
-export function AccordionItem<T = any>({
+export function AccordionItem<T = HTMLElement>({
   className,
   tag: Tag = 'div',
   look = 'soft',
@@ -20,8 +20,8 @@ export function AccordionItem<T = any>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key as any);
-  const isDisabled = state.disabledKeys.has(item.key as any);
+  const isOpen = state.expandedKeys.has(item.key as Key);
+  const isDisabled = state.disabledKeys.has(item.key as Key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
   const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });

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
    */