@westpac/ui 0.19.0 → 0.20.0

package/dist/components/accordion/accordion.component.d.ts

@@ -1,7 +1,8 @@
+import { DOMRef } from '@react-types/shared';
 import React from 'react';
 import { type ItemProps } from 'react-stately';
 import { type AccordionProps } from './accordion.types.js';
-declare function Accordion<T extends object>({ className, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
+declare function Accordion<T extends object>({ className, rounded, look, ...props }: AccordionProps<T>, ref: DOMRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare const _Accordion: {
     displayName: string;
 } & (<T>(props: import("@react-types/accordion").SpectrumAccordionProps<T> & {
@@ -14,7 +15,7 @@ declare const _Accordion: {
         [x: string]: boolean | undefined;
     } | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-    ref?: any;
+    ref?: HTMLElement | undefined;
 }) => ReturnType<typeof Accordion>);
 export { _Accordion as Accordion };
 export declare const AccordionItem: <T>(props: ItemProps<T>) => JSX.Element;

package/dist/components/accordion/accordion.types.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from 'tailwind-variants';
 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/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,2 +1,2 @@
 import { type AccordionItemProps } from './accordion-item.types.js';
-export declare function AccordionItem<T = any>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem<T = HTMLElement>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts

@@ -3,7 +3,7 @@ import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 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/dist/components/autocomplete/autocomplete.component.js

@@ -82,9 +82,12 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     const isNoOptionPopOverOpen = useMemo(()=>{
         return noOptionsMessage && (!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){

package/dist/components/autocomplete/components/autocomplete-item/autocomplete-item.component.js

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import { Item } from 'react-stately';
 export const AutocompleteItem = Item;

package/dist/components/autocomplete/components/autocomplete-item/autocomplete-item.types.d.ts

@@ -1,6 +1,6 @@
 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/dist/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.d.ts

@@ -1,7 +1,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/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.d.ts

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

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.types.d.ts

@@ -1,6 +1,6 @@
 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/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.d.ts

@@ -2,4 +2,4 @@ import { type AutocompleteListBoxSectionProps } from './autocomplete-list-box-se
 /**
  * @private
  */
-export declare function AutocompleteListBoxSection({ section, state }: AutocompleteListBoxSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AutocompleteListBoxSection({ section, state }: AutocompleteListBoxSectionProps<unknown>): import("react/jsx-runtime").JSX.Element;

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.types.d.ts

@@ -1,6 +1,6 @@
 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/dist/components/badge/badge.component.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { type BadgeProps } from './badge.types.js';
-export declare function BaseBadge({ className, tag: Tag, color, type, soft, children, ...props }: BadgeProps, ref: any): import("react/jsx-runtime").JSX.Element;
+export declare function BaseBadge({ className, tag: Tag, color, type, soft, children, ...props }: BadgeProps, ref: Ref<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Badge: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     color?: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "muted" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | {
@@ -13,4 +13,4 @@ export declare const Badge: React.ForwardRefExoticComponent<{
     type?: "default" | "pill" | {
         [x: string]: "default" | "pill" | undefined;
     } | undefined;
-} & Omit<React.HTMLAttributes<Element>, "color" | "type"> & React.RefAttributes<any>>;
+} & Omit<React.HTMLAttributes<Element>, "color" | "type"> & React.RefAttributes<HTMLElement>>;

package/dist/components/badge/badge.component.js

@@ -25,8 +25,6 @@ export function BaseBadge({ className , tag: Tag = 'div' , color ='hero' , type
             type,
             soft
         })
-    }, props), React.createElement("div", {
-        className: "relative bottom-[1px]"
-    }, children));
+    }, props), children);
 }
 export const Badge = forwardRef(BaseBadge);

package/dist/components/badge/badge.styles.d.ts

@@ -25,7 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     soft: {
         true: string;
     };
-}, undefined, "inline-block whitespace-nowrap border text-center leading-none", {
+}, undefined, "inline-block whitespace-nowrap border text-center", {
     responsiveVariants: string[];
 }, {
     color: {

package/dist/components/badge/badge.styles.js

@@ -1,6 +1,6 @@
 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',
@@ -22,8 +22,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/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js

@@ -51,6 +51,7 @@ export function BottomSheetModal({ state , height , width , children , portalCon
         }
         controls.start('hidden');
     }, [
+        controls,
         state.isOpen
     ]);
     const onDragEnd = useCallback((_, info)=>{
@@ -63,7 +64,8 @@ export function BottomSheetModal({ state , height , width , children , portalCon
         controls.start('visible');
         state.open();
     }, [
-        controls
+        controls,
+        state
     ]);
     if (!isBrowser || !state.isOpen) {
         return null;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';
-export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: any): import("react/jsx-runtime").JSX.Element;
+export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: Ref<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare const BreadcrumbItem: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     isCurrent?: boolean | undefined;
     isDisabled?: boolean | undefined;
     tag?: keyof JSX.IntrinsicElements | undefined;
-} & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;
+} & React.AnchorHTMLAttributes<Element> & React.RefAttributes<HTMLElement>>;

package/dist/components/button/button.component.d.ts

@@ -22,4 +22,4 @@ export declare const Button: React.ForwardRefExoticComponent<{
         [x: string]: boolean | undefined;
     } | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
-} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;
+} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>>;

package/dist/components/button/button.styles.js

@@ -1,7 +1,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/dist/components/button-dropdown/button-dropdown.component.js

@@ -37,7 +37,7 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
     const keyHandler = useCallback((event)=>{
         if (state.isOpen && event.key === 'Escape') state.close();
     }, [
-        state.isOpen
+        state
     ]);
     useEffect(()=>{
         window.document.addEventListener('keydown', keyHandler);

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.js

@@ -32,12 +32,14 @@ export function ButtonDropdownPanel({ className , children , state , block , id
     const focusHandler = useCallback((event)=>{
         if (event.target && popoverRef.current && event.target !== props.triggerRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
     }, [
-        state.isOpen
+        props.triggerRef,
+        state
     ]);
     const clickHandler = useCallback((event)=>{
         if (event.target && props.triggerRef.current && !props.triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
     }, [
-        state.isOpen
+        props.triggerRef,
+        state
     ]);
     useEffect(()=>{
         window.document.addEventListener('focusin', focusHandler);
@@ -46,7 +48,10 @@ export function ButtonDropdownPanel({ className , children , state , block , id
             window.document.removeEventListener('focusin', focusHandler);
             window.document.removeEventListener('click', clickHandler);
         };
-    }, []);
+    }, [
+        clickHandler,
+        focusHandler
+    ]);
     return React.createElement("div", _extends({}, mergeProps(popoverProps, focusProps), {
         id: id,
         style: {

package/dist/components/button-group/button-group.component.js

@@ -96,7 +96,7 @@ export function ButtonGroup({ className , buttons , label , look ='hero' , size
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         className: styles.buttonWrapper()

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -126,7 +126,7 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
         className: styles.base({
             className
         })
-    }, groupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, groupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         className: styles.itemWrapper(),

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.d.ts

@@ -3,4 +3,4 @@ export declare const CheckboxGroupCheckbox: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     hint?: React.ReactNode;
     label: React.ReactNode;
-} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<unknown>>;
+} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/collapsible/collapsible.component.js

@@ -34,7 +34,7 @@ export function Collapsible({ className , children , open =false , text , size =
         onClick();
         setContentOpen((contentOpen)=>!contentOpen);
     }, [
-        contentOpen
+        onClick
     ]);
     const styles = collapsibleStyles({
         open: contentOpen

package/dist/components/date-picker/date-picker.component.js

@@ -109,7 +109,15 @@ export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates
         };
     }, [
         ref,
-        initialized
+        initialized,
+        dateAdapter,
+        localization,
+        value,
+        id,
+        name,
+        disableWeekends,
+        disableDaysOfWeek,
+        disableDates
     ]);
     useLayoutEffect(()=>{
         if (!ref.current) {

package/dist/components/date-picker/date-picker.types.d.ts

@@ -2,10 +2,10 @@ import { HTMLAttributes } from 'react';
 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;
@@ -29,11 +29,11 @@ export type DatePickerProps = {
      */
     min?: string;
     name?: string;
-    onBlur?: (...args: any[]) => unknown;
-    onChange?: (...args: any[]) => unknown;
-    onClose?: (...args: any[]) => unknown;
-    onFocus?: (...args: any[]) => unknown;
-    onOpen?: (...args: any[]) => unknown;
+    onBlur?: (...args: any[]) => void;
+    onChange?: (...args: any[]) => void;
+    onClose?: (...args: any[]) => void;
+    onFocus?: (...args: any[]) => void;
+    onOpen?: (...args: any[]) => void;
     placeholder?: string;
     /**
      * Size of datepicker input

package/dist/components/date-picker/date-picker.utils.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, RefObject } from 'react';
+import { RefObject } from 'react';
 import { DuetDatePickerElement } from './date-picker.types.js';
 /**
  * @param date the date to format as a Date
@@ -10,7 +10,7 @@ export declare function formatDate(date: Date, format: string): string;
  * @param eventName Event name for the event listener
  * @param handler Callback for the event
  */
-export declare function useListener(ref: RefObject<DuetDatePickerElement> | null, eventName: string, handler?: EventHandler<any>): void;
+export declare function useListener(ref: RefObject<DuetDatePickerElement> | null, eventName: string, handler?: EventListenerOrEventListenerObject): void;
 export declare function createDate(year: string, month: string, day: string): Date | undefined;
 /**
  * @param value date string in ISO format YYYY-MM-DD

package/dist/components/date-picker/date-picker.utils.js

@@ -24,7 +24,8 @@ export function useListener(ref, eventName, handler) {
         }
     }, [
         eventName,
-        handler
+        handler,
+        ref
     ]);
 }
 export function createDate(year, month, day) {

package/dist/components/error-message/error-message.component.js

@@ -20,7 +20,8 @@ export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , messa
     const FinalIcon = Icon !== null && Icon !== void 0 ? Icon : AlertIcon;
     return Array.isArray(message) ? React.createElement("ul", _extends({
         className: styles.list({})
-    }, props), message.map((msg)=>React.createElement("li", {
+    }, props), message.map((msg, index)=>React.createElement("li", {
+            key: index,
             className: styles.base({
                 className
             })

package/dist/components/field/field.component.js

@@ -32,7 +32,8 @@ export function Field({ className , label , tag: Tag = 'div' , children , hintMe
             }
         });
     }, [
-        children
+        children,
+        fieldProps
     ]);
     return React.createElement(Tag, _extends({
         className: styles({

package/dist/components/flexi-cell/flexi-cell.component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type FlexiCellProps } from './flexi-cell.types.js';
-export declare const FlexiCell: React.ForwardRefExoticComponent<FlexiCellProps & React.RefAttributes<unknown>>;
+export declare const FlexiCell: React.ForwardRefExoticComponent<FlexiCellProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/header.component.js

@@ -59,7 +59,10 @@ export function Header({ brand , className , children , fixed =false , leftIcon
         return ()=>{
             window.removeEventListener('scroll', handleScroll);
         };
-    }, []);
+    }, [
+        fixed,
+        handleScroll
+    ]);
     const logoAlignment = logoCenter ? 'center' : 'left';
     const SmallLogo = logoMap[brand].logo;
     const LargeLogo = logoMap[brand].largeLogo;

package/dist/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.d.ts

@@ -2,4 +2,4 @@ import { type InputGroupAddOnDefaultAddOnProps } from './input-group-add-on-defa
 /**
  * @private
  */
-export declare const InputGroupAddOnDefaultAddOn: ({ position, className, children, ...props }: InputGroupAddOnDefaultAddOnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputGroupAddOnDefaultAddOn: ({ className, children, ...props }: InputGroupAddOnDefaultAddOnProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { styles } from './input-group-add-on-default-add-on.styles.js';
-export const InputGroupAddOnDefaultAddOn = ({ position , className , children , ...props })=>{
+export const InputGroupAddOnDefaultAddOn = ({ className , children , ...props })=>{
     return React.createElement("div", _extends({
         className: styles({
             className

package/dist/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.js

@@ -7,8 +7,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/dist/components/input-group/input-group.component.js

@@ -44,9 +44,11 @@ export function InputGroup({ label , hideLabel , size ='medium' , hint , errorMe
         ];
         return arr.join(' ');
     }, [
+        errorMessage,
         id,
         hint,
-        errorMessage,
+        before,
+        after,
         supportingText
     ]);
     const { element: beforeElement , icon: beforeIcon , inset: beforeInset  } = useMemo(()=>{
@@ -94,7 +96,10 @@ export function InputGroup({ label , hideLabel , size ='medium' , hint , errorMe
         });
     }, [
         children,
-        ariaDescribedByValue
+        size,
+        id,
+        ariaDescribedByValue,
+        width
     ]);
     const isFieldset = useMemo(()=>Tag === 'fieldset', [
         Tag

package/dist/components/list/components/list-item/list-item.component.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { type ListItemProps } from './list-item.types.js';
-export declare function BaseListItem({ className, children, href, target, look, type, spacing, icon, ...props }: ListItemProps, ref: any): import("react/jsx-runtime").JSX.Element;
+export declare function BaseListItem({ className, children, href, target, look, type, spacing, icon, ...props }: ListItemProps, ref: Ref<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
 export declare const ListItem: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     href?: string | undefined;
@@ -10,4 +10,4 @@ export declare const ListItem: React.ForwardRefExoticComponent<{
     spacing?: "medium" | "large" | undefined;
     target?: React.HTMLAttributeAnchorTarget | undefined;
     type?: "link" | "icon" | "ordered" | "bullet" | "tick" | "cross" | "unstyled" | undefined;
-} & React.HTMLAttributes<Element> & React.RefAttributes<unknown>>;
+} & React.HTMLAttributes<Element> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/pagination/pagination.component.js

@@ -55,10 +55,11 @@ export function Pagination({ className , pages , tag: Tag = 'nav' , role ='navig
         };
     }, [
         current,
+        infinite,
         onChange,
         linkComponent,
         pages,
-        infinite
+        generateHandleOnClickBackwards
     ]);
     const generateHandleOnClickForward = useCallback((current, infinite, backwardsOnly, onChange)=>()=>{
             if (infinite && backwardsOnly) {
@@ -99,10 +100,11 @@ export function Pagination({ className , pages , tag: Tag = 'nav' , role ='navig
         };
     }, [
         current,
-        onChange,
-        linkComponent,
         pages,
-        infinite
+        infinite,
+        linkComponent,
+        onChange,
+        generateHandleOnClickForward
     ]);
     return React.createElement(Tag, _extends({
         className: styles.base({

package/dist/components/pagination/pagination.hooks.js

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

package/dist/components/pass-code/pass-code.component.js

@@ -38,9 +38,9 @@ export function PassCode({ length , onComplete , className , ...props }) {
             onComplete(newPasscode.join(''));
         }
     }, [
-        onComplete,
-        inputRefs,
-        passcode
+        passcode,
+        length,
+        onComplete
     ]);
     const handlePaste = useCallback((index, event)=>{
         event.preventDefault();
@@ -60,6 +60,8 @@ export function PassCode({ length , onComplete , className , ...props }) {
             onComplete(newPasscode.join(''));
         }
     }, [
+        length,
+        onComplete,
         passcode
     ]);
     const handleKeyDown = useCallback((index, event)=>{
@@ -81,7 +83,7 @@ export function PassCode({ length , onComplete , className , ...props }) {
             }
         }
     }, [
-        inputRefs
+        passcode
     ]);
     const handleFocus = useCallback((index)=>{
         var _inputRefs_current_index;

package/dist/components/pass-code-view/pass-code-view.types.d.ts

@@ -30,11 +30,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/dist/components/popover/components/panel/panel.component.js

@@ -2,7 +2,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from '
 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';
 export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement , id , triggerRef  }) {
     const popoverRef = useRef(null);
@@ -20,9 +20,12 @@ export function Panel({ state , heading , headingTag: Tag = 'h1' , content , pla
         arrowPosition: popoverRef.current ? popoverRef.current.getBoundingClientRect().width / 2 / remSize : 0
     });
     useLayoutEffect(()=>{
-        setPosition(usePopoverPosition(triggerRef, popoverRef, arrowRef, placement));
+        setPosition(getPopoverPosition(triggerRef, popoverRef, arrowRef, placement));
     }, [
-        state.isOpen
+        placement,
+        remSize,
+        state.isOpen,
+        triggerRef
     ]);
     const getPopoverClass = useCallback(()=>{
         return {