diff --git a/.changeset/cuddly-seals-design.md b/.changeset/cuddly-seals-design.md
new file mode 100644
index 000000000..3aeb1425a
--- /dev/null
+++ b/.changeset/cuddly-seals-design.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Updated types on some components to resolve eslint errors/warnings
diff --git a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
index 8edd1a28f..3a2376810 100644
--- a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
+++ b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
@@ -11,9 +11,9 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Colours</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge color={color} >
+          <Badge color={color} className="my-1 mr-2" >
             {color}
           </Badge>
         ))}
@@ -21,9 +21,9 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Soft</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge color={color} soft>
+          <Badge color={color} soft className="my-1 mr-2">
             {color}
           </Badge>
         ))}
@@ -44,9 +44,9 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Colours</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge className="my-1" type="pill" color={color} >
+          <Badge className="my-1 mr-2" type="pill" color={color}>
             88
           </Badge>
         ))}
@@ -54,9 +54,9 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Soft</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge className="my-1" type="pill" color={color} soft>
+          <Badge className="my-1 mr-2" type="pill" color={color} soft>
             88
           </Badge>
         ))}
diff --git a/apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc b/apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc
new file mode 100644
index 000000000..e8a8552ba
--- /dev/null
+++ b/apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc
@@ -0,0 +1,26 @@
+When setting up your project we recommend extending `@westpac/eslint-config/nextjs` as seen below:
+
+```html
+<StaticCode language="tsx" code={`
+    // .eslintrc.js
+    module.exports = {
+        root: true,
+        extends: ['@westpac/eslint-config/nextjs'],
+    };      
+`} />
+```
+
+If you are using this in a non-Next.js project, you may need to turn off certain rules as seen below:
+
+```html
+<StaticCode language="tsx" code={`
+    // .eslintrc.js
+    module.exports = {
+        root: true,
+        extends: ['@westpac/eslint-config/nextjs'],
+        rules: {
+          '@next/next/no-html-link-for-pages': 0,
+        },
+    };      
+`} />
+```
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/development/guides/eslint/index.yaml b/apps/site/src/content/design-system/development/guides/eslint/index.yaml
new file mode 100644
index 000000000..8b04edf97
--- /dev/null
+++ b/apps/site/src/content/design-system/development/guides/eslint/index.yaml
@@ -0,0 +1,8 @@
+name: ESLint
+description: >-
+  We suggest following the Westpac Group ESLint configuration.
+design:
+  - title:
+      name: ESLint Configuration
+      slug: eslint-configuration
+accessibility: []
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
index 60876ad77..c0715e5e4 100644
--- a/packages/ui/.eslintrc.cjs
+++ b/packages/ui/.eslintrc.cjs
@@ -1,6 +1,11 @@
+const OFF = 0;
+
 module.exports = {
   root: true,
-  extends: ['@westpac/eslint-config'],
+  extends: ['@westpac/eslint-config/nextjs'],
+  rules: {
+    '@next/next/no-html-link-for-pages': OFF,
+  },
   overrides: [
     {
       files: ['**/*.stories.tsx', '**/*.stories.ts'],
@@ -18,4 +23,4 @@ module.exports = {
       },
     },
   },
-};
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/accordion/accordion.component.tsx b/packages/ui/src/components/accordion/accordion.component.tsx
index 20c93046c..9eedb068e 100644
--- a/packages/ui/src/components/accordion/accordion.component.tsx
+++ b/packages/ui/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';
diff --git a/packages/ui/src/components/accordion/accordion.stories.tsx b/packages/ui/src/components/accordion/accordion.stories.tsx
index 96c0abccd..c80833fd9 100644
--- a/packages/ui/src/components/accordion/accordion.stories.tsx
+++ b/packages/ui/src/components/accordion/accordion.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta<typeof Accordion> = {
 };
 
 export default meta;
-type Story = StoryObj<any>;
+type Story = StoryObj<typeof Accordion>;
 
 /**
  * > Default usage example
@@ -79,34 +79,29 @@ export const LegoLook: Story = {
 /**
  * > Controlled example
  */
-export const Controlled: Story = {
-  args: {
-    look: 'lego',
-    rounded: false,
-  },
-  render: ({ ...props }) => {
-    const [expandedKeys, setExpandedKeys] = useState<Set<Key>>();
-    return (
-      <Accordion
-        {...props}
-        expandedKeys={expandedKeys}
-        onExpandedChange={keys => {
-          setExpandedKeys(keys);
-        }}
-      >
-        {[
-          { key: 'files', title: 'Your files' },
-          { key: 'shared', title: 'Shared with you' },
-          { key: 'last', title: 'Last item' },
-        ].map(({ key, title }) => (
-          <AccordionItem key={key} title={title}>
-            <p>{title}</p>
-            <Button>Test</Button>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    );
-  },
+export const Controlled = () => {
+  const [expandedKeys, setExpandedKeys] = useState<Set<Key>>();
+  return (
+    <Accordion
+      look="lego"
+      rounded={false}
+      expandedKeys={expandedKeys}
+      onExpandedChange={keys => {
+        setExpandedKeys(keys);
+      }}
+    >
+      {[
+        { key: 'files', title: 'Your files' },
+        { key: 'shared', title: 'Shared with you' },
+        { key: 'last', title: 'Last item' },
+      ].map(({ key, title }) => (
+        <AccordionItem key={key} title={title}>
+          <p>{title}</p>
+          <Button>Test</Button>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
 };
 
 /**
diff --git a/packages/ui/src/components/accordion/accordion.types.ts b/packages/ui/src/components/accordion/accordion.types.ts
index 884b7159b..a1eabac82 100644
--- a/packages/ui/src/components/accordion/accordion.types.ts
+++ b/packages/ui/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
    */
diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
index 77267572c..038cd98cc 100644
--- a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
+++ b/packages/ui/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 });
diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts
index 7ad5c28aa..d8be8ba25 100644
--- a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts
+++ b/packages/ui/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
    */
diff --git a/packages/ui/src/components/autocomplete/autocomplete.component.tsx b/packages/ui/src/components/autocomplete/autocomplete.component.tsx
index b4da00ed7..02b7d906c 100644
--- a/packages/ui/src/components/autocomplete/autocomplete.component.tsx
+++ b/packages/ui/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}
           />
diff --git a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx
index db5d52816..06b81e5fe 100644
--- a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx
+++ b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx
@@ -54,24 +54,21 @@ export const Default: Story = {
 /**
  * > Controlled usage example
  */
-export const Controlled: Story = {
-  args: {},
-  render: () => {
-    const [selectedKey, setSelectedKey] = useState<string | number>();
-    const handleSelectionChange = (key: string | number) => {
-      setSelectedKey(key);
-    };
-    return (
-      <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
-        <AutocompleteItem key="red panda">Red Panda</AutocompleteItem>
-        <AutocompleteItem key="cat">Cat</AutocompleteItem>
-        <AutocompleteItem key="dog">Dog</AutocompleteItem>
-        <AutocompleteItem key="aardvark">Aardvark</AutocompleteItem>
-        <AutocompleteItem key="kangaroo">Kangaroo</AutocompleteItem>
-        <AutocompleteItem key="snake">Snake</AutocompleteItem>
-      </Autocomplete>
-    );
-  },
+export const Controlled = () => {
+  const [selectedKey, setSelectedKey] = useState<string | number>();
+  const handleSelectionChange = (key: string | number) => {
+    setSelectedKey(key);
+  };
+  return (
+    <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
+      <AutocompleteItem key="red panda">Red Panda</AutocompleteItem>
+      <AutocompleteItem key="cat">Cat</AutocompleteItem>
+      <AutocompleteItem key="dog">Dog</AutocompleteItem>
+      <AutocompleteItem key="aardvark">Aardvark</AutocompleteItem>
+      <AutocompleteItem key="kangaroo">Kangaroo</AutocompleteItem>
+      <AutocompleteItem key="snake">Snake</AutocompleteItem>
+    </Autocomplete>
+  );
 };
 
 /**
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx b/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx
index 954759bac..ee85d60c6 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx
+++ b/packages/ui/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';
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.types.ts b/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.types.ts
index 7b71970e0..cd33634e8 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.types.ts
+++ b/packages/ui/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
    */
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.ts b/packages/ui/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.ts
index e9fcaf07b..2a172f09b 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.ts
+++ b/packages/ui/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>;
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx b/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx
index ff85c2992..2ff2fe8c0 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx
+++ b/packages/ui/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,
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.types.ts b/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.types.ts
index bebbcfa33..10c8e7708 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.types.ts
+++ b/packages/ui/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>;
 };
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.tsx b/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.tsx
index 3f3512f02..7542d26ba 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.component.tsx
+++ b/packages/ui/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'],
diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.types.ts b/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.types.ts
index 7a3375a87..9f5810f1c 100644
--- a/packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-section/autocomplete-list-box-section.types.ts
+++ b/packages/ui/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>;
 };
diff --git a/packages/ui/src/components/badge/badge.component.tsx b/packages/ui/src/components/badge/badge.component.tsx
index d287e0dbc..f8a9f1279 100644
--- a/packages/ui/src/components/badge/badge.component.tsx
+++ b/packages/ui/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);
diff --git a/packages/ui/src/components/badge/badge.spec.tsx b/packages/ui/src/components/badge/badge.spec.tsx
index f0fd4c5ae..2247ff57c 100644
--- a/packages/ui/src/components/badge/badge.spec.tsx
+++ b/packages/ui/src/components/badge/badge.spec.tsx
@@ -12,7 +12,7 @@ describe('Badge', () => {
     const style = styles({ color: 'primary', type: 'pill' });
     // TODO: use some variants for test
     expect(style).toBe(
-      'inline-block whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
+      'inline-block whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
     );
   });
 });
diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
index fceff6ace..a44677e7a 100644
--- a/packages/ui/src/components/badge/badge.stories.tsx
+++ b/packages/ui/src/components/badge/badge.stories.tsx
@@ -73,12 +73,14 @@ export const Colors = () => (
   <div className="flex flex-col gap-2">
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color}>{color}</Badge>
+        <Badge key={color} color={color}>
+          {color}
+        </Badge>
       ))}
     </div>
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color} type="pill">
+        <Badge key={color} color={color} type="pill">
           {color}
         </Badge>
       ))}
@@ -87,12 +89,14 @@ export const Colors = () => (
     <div className="flex flex-col gap-2 bg-muted p-2">
       <div className="flex flex-wrap gap-2">
         {INVERTED_COLORS.map(color => (
-          <Badge color={color}>{color}</Badge>
+          <Badge key={color} color={color}>
+            {color}
+          </Badge>
         ))}
       </div>
       <div className="flex flex-wrap gap-2">
         {INVERTED_COLORS.map(color => (
-          <Badge color={color} type="pill">
+          <Badge key={color} color={color} type="pill">
             {color}
           </Badge>
         ))}
@@ -105,14 +109,14 @@ export const Soft = () => (
   <div className="flex flex-col gap-2">
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color} soft>
+        <Badge key={color} color={color} soft>
           {color}
         </Badge>
       ))}
     </div>
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color} type="pill" soft>
+        <Badge key={color} color={color} type="pill" soft>
           {color}
         </Badge>
       ))}
@@ -126,7 +130,7 @@ export const Soft = () => (
 export const Links = () => (
   <div className="flex flex-col gap-2">
     {COLORS.map(color => (
-      <a className="text-link underline" href="#">
+      <a key={color} className="text-link underline" href="#">
         {color}
         <Badge color={color} type="pill" className="ml-1">
           12
@@ -142,7 +146,7 @@ export const Links = () => (
 export const Buttons = () => (
   <div className="flex flex-col gap-2">
     {INVERTED_COLORS.map(color => (
-      <Button look="primary">
+      <Button key={color} look="primary">
         Primary
         <Badge color={color} type="pill" className="ml-1">
           {color}
diff --git a/packages/ui/src/components/badge/badge.styles.ts b/packages/ui/src/components/badge/badge.styles.ts
index fe158299c..d6b1b713f 100644
--- a/packages/ui/src/components/badge/badge.styles.ts
+++ b/packages/ui/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',
diff --git a/packages/ui/src/components/bottom-sheet/bottom-sheet.spec.tsx b/packages/ui/src/components/bottom-sheet/bottom-sheet.spec.tsx
index 53d8178e0..39e4ecec2 100644
--- a/packages/ui/src/components/bottom-sheet/bottom-sheet.spec.tsx
+++ b/packages/ui/src/components/bottom-sheet/bottom-sheet.spec.tsx
@@ -9,7 +9,7 @@ const user = userEvent.setup();
 describe('Bottom Sheet', () => {
   it('renders the bottom sheet', () => {
     const { result } = renderHook(() => useOverlayTriggerState({}));
-    render(<BottomSheet children={undefined} state={result.current} />);
+    render(<BottomSheet state={result.current}>{undefined}</BottomSheet>);
   });
 
   it('shows the content when the state isOpen is true', async () => {
diff --git a/packages/ui/src/components/bottom-sheet/bottom-sheet.stories.tsx b/packages/ui/src/components/bottom-sheet/bottom-sheet.stories.tsx
index cc2d070f4..25c3c0bea 100644
--- a/packages/ui/src/components/bottom-sheet/bottom-sheet.stories.tsx
+++ b/packages/ui/src/components/bottom-sheet/bottom-sheet.stories.tsx
@@ -1,5 +1,4 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { useEffect } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import { Button } from '../index.js';
@@ -7,13 +6,9 @@ import { Button } from '../index.js';
 import { BottomSheet } from './bottom-sheet.component.js';
 import { BottomSheetProps } from './bottom-sheet.types.js';
 
-const StoryBottomSheet = ({ children, state, ...props }: BottomSheetProps) => {
+const StoryBottomSheet = ({ children, ...props }: BottomSheetProps) => {
   const bottomSheetState = useOverlayTriggerState({});
 
-  useEffect(() => {
-    bottomSheetState.setOpen(state.isOpen);
-  }, [state]);
-
   return (
     <>
       <Button onClick={bottomSheetState.open}> Open Bottom Sheet </Button>
@@ -65,21 +60,6 @@ type Story = StoryObj<typeof meta>;
  */
 export const DefaultState: Story = {
   args: {
-    state: {
-      close: () => {
-        return;
-      },
-      setOpen: () => {
-        return;
-      },
-      open: () => {
-        return;
-      },
-      toggle: () => {
-        return;
-      },
-      isOpen: false,
-    },
     title: 'Heading',
     primaryLabel: 'Label',
     secondaryLabel: 'Label',
@@ -99,21 +79,6 @@ export const DefaultState: Story = {
  */
 export const NoFooter: Story = {
   args: {
-    state: {
-      close: () => {
-        return;
-      },
-      setOpen: () => {
-        return;
-      },
-      open: () => {
-        return;
-      },
-      toggle: () => {
-        return;
-      },
-      isOpen: false,
-    },
     title: 'Heading',
     children: (
       <p>
diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx
index 7f426ce5d..9a05fab86 100644
--- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx
+++ b/packages/ui/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';
 
diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx
index 03d48a025..c9951643e 100644
--- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx
+++ b/packages/ui/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) {
diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx
index 91428fedc..3c6073fda 100644
--- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx
+++ b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx
@@ -7,7 +7,7 @@ import { BottomSheetModal } from './bottom-sheet-modal.component.js';
 describe('BottomSheetModal', () => {
   it('renders the Modal', () => {
     const { result } = renderHook(() => useOverlayTriggerState({}));
-    render(<BottomSheetModal children={undefined} state={result.current} />);
+    render(<BottomSheetModal state={result.current}>{undefined}</BottomSheetModal>);
   });
 
   it('shows the content when the state isOpen is true', async () => {
diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx b/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx
index ef639c379..57e0c2c6b 100644
--- a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx
+++ b/packages/ui/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>
diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx
index 3bbb0e3c5..b22b0cec9 100644
--- a/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -19,13 +19,13 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     children: [
-      <BreadcrumbItem tag="button" onClick={() => alert('Folder 1')}>
+      <BreadcrumbItem key="one" tag="button" onClick={() => alert('Folder 1')}>
         About us
       </BreadcrumbItem>,
-      <BreadcrumbItem tag="a" href="#nogo">
+      <BreadcrumbItem key="two" tag="a" href="#nogo">
         Innovation
       </BreadcrumbItem>,
-      <BreadcrumbItem tag="a" href="#loko">
+      <BreadcrumbItem key="three" tag="a" href="#loko">
         Principal investments
       </BreadcrumbItem>,
     ],
diff --git a/packages/ui/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx b/packages/ui/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx
index a2642989a..ad4c87938 100644
--- a/packages/ui/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx
+++ b/packages/ui/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);
diff --git a/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx b/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx
index bae8be6b1..ff637e9d7 100644
--- a/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx
+++ b/packages/ui/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(() => {
diff --git a/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx b/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx
index 28893f05c..94e663e2d 100644
--- a/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx
+++ b/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx
@@ -43,7 +43,7 @@ export const Default: Story = {
 export const StandardLooks = () => (
   <div className="flex gap-2">
     {LOOKS.map(look => (
-      <ButtonDropdown look={look} text={look}>
+      <ButtonDropdown key={look} look={look} text={look}>
         <p>
           Example dropdown
           <a href="#" className="text-[blue] underline">
@@ -62,7 +62,7 @@ export const StandardLooks = () => (
 export const SoftLooks = () => (
   <div className="flex gap-2">
     {LOOKS.map(look => (
-      <ButtonDropdown look={look} soft text={look}>
+      <ButtonDropdown key={look} look={look} soft text={look}>
         <p>
           Example dropdown
           <a href="#" className="text-[blue] underline">
diff --git a/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx b/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx
index 98d4d1856..c8faf099b 100644
--- a/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/button-group/button-group.component.tsx b/packages/ui/src/components/button-group/button-group.component.tsx
index 832ee020f..1d6b23fb6 100644
--- a/packages/ui/src/components/button-group/button-group.component.tsx
+++ b/packages/ui/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) => (
diff --git a/packages/ui/src/components/button-group/button-group.stories.tsx b/packages/ui/src/components/button-group/button-group.stories.tsx
index 7b96f3960..03c4739e3 100644
--- a/packages/ui/src/components/button-group/button-group.stories.tsx
+++ b/packages/ui/src/components/button-group/button-group.stories.tsx
@@ -62,6 +62,7 @@ export const Colors = () => (
   <div className="flex flex-col gap-2">
     {LOOKS.map(look => (
       <ButtonGroup
+        key={look}
         label={<h3 className="font-bold">{look}</h3>}
         look={look}
         buttons={[
@@ -90,6 +91,7 @@ export const Sizes = () => (
   <div className="flex flex-col gap-2">
     {SIZES.map(size => (
       <ButtonGroup
+        key={size}
         label={<h3 className="font-bold">{size}</h3>}
         size={size}
         buttons={[
@@ -145,6 +147,7 @@ export const Block = () => (
   <div className="flex flex-col gap-2">
     {SIZES.map(size => (
       <ButtonGroup
+        key={size}
         block
         label={<h3 className="font-bold">{size}</h3>}
         size={size}
diff --git a/packages/ui/src/components/button/button.component.tsx b/packages/ui/src/components/button/button.component.tsx
index 4d89125f0..46ab91593 100644
--- a/packages/ui/src/components/button/button.component.tsx
+++ b/packages/ui/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]);
diff --git a/packages/ui/src/components/button/button.spec.tsx b/packages/ui/src/components/button/button.spec.tsx
index 91f33b810..4d561207f 100644
--- a/packages/ui/src/components/button/button.spec.tsx
+++ b/packages/ui/src/components/button/button.spec.tsx
@@ -17,7 +17,7 @@ describe('Button', () => {
   it('renders the style correctly', () => {
     const style = styles({ look: 'primary', size: 'medium' });
     expect(style.base()).toBe(
-      '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 typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem] relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
+      '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 typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem] relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
     );
   });
 
diff --git a/packages/ui/src/components/button/button.stories.tsx b/packages/ui/src/components/button/button.stories.tsx
index e59e2e30d..7b4457acf 100644
--- a/packages/ui/src/components/button/button.stories.tsx
+++ b/packages/ui/src/components/button/button.stories.tsx
@@ -35,13 +35,15 @@ export const Colors = () => (
     <h3 className="font-bold">Default</h3>
     <div className="flex gap-2">
       {LOOKS.map(look => (
-        <Button look={look}>{look}</Button>
+        <Button key={look} look={look}>
+          {look}
+        </Button>
       ))}
     </div>
     <h3 className="font-bold">Soft</h3>
     <div className="flex gap-2">
       {SOFT_LOOKS.map(look => (
-        <Button look={look} soft>
+        <Button key={look} look={look} soft>
           {look}
         </Button>
       ))}
@@ -59,14 +61,14 @@ export const Sizes = () => (
         <h3 className="font-bold">{size}</h3>
         <div className="flex gap-2">
           {LOOKS.map(look => (
-            <Button look={look} size={size}>
+            <Button key={look} look={look} size={size}>
               {look}
             </Button>
           ))}
         </div>
         <div className="flex gap-2">
           {SOFT_LOOKS.map(look => (
-            <Button look={look} size={size} soft>
+            <Button key={look} look={look} size={size} soft>
               {look}
             </Button>
           ))}
@@ -86,7 +88,7 @@ export const Block = () => (
         <h3 className="font-bold">{size}</h3>
         <div className="flex flex-col gap-2">
           {SOFT_LOOKS.map(look => (
-            <Button look={look} size={size} block>
+            <Button key={look} look={look} size={size} block>
               {look}
             </Button>
           ))}
@@ -106,14 +108,14 @@ export const Icons = () => (
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
         {LOOKS.map(look => (
-          <Button look={look} iconBefore={BurgerIcon}>
+          <Button key={look} look={look} iconBefore={BurgerIcon}>
             {look}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
         {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconBefore={BurgerIcon}>
+          <Button key={look} look={look} soft iconBefore={BurgerIcon}>
             {look}
           </Button>
         ))}
@@ -121,14 +123,14 @@ export const Icons = () => (
       <h3 className="font-bold">Sizes</h3>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconBefore={BurgerIcon} className="mr-2">
+          <Button key={size} size={size} iconBefore={BurgerIcon} className="mr-2">
             Button
           </Button>
         ))}
       </div>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconBefore={BurgerIcon} soft className="mr-2">
+          <Button key={size} size={size} iconBefore={BurgerIcon} soft className="mr-2">
             Button
           </Button>
         ))}
@@ -149,14 +151,14 @@ export const Icons = () => (
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
         {LOOKS.map(look => (
-          <Button look={look} iconAfter={BurgerIcon}>
+          <Button key={look} look={look} iconAfter={BurgerIcon}>
             {look}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
         {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconAfter={BurgerIcon}>
+          <Button key={look} look={look} soft iconAfter={BurgerIcon}>
             {look}
           </Button>
         ))}
@@ -164,14 +166,14 @@ export const Icons = () => (
       <h3 className="font-bold">Sizes</h3>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} className="mr-2">
+          <Button key={size} size={size} iconAfter={BurgerIcon} className="mr-2">
             Button
           </Button>
         ))}
       </div>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2">
+          <Button key={size} size={size} iconAfter={BurgerIcon} soft className="mr-2">
             Button
           </Button>
         ))}
@@ -191,23 +193,23 @@ export const Icons = () => (
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
         {LOOKS.map(look => (
-          <Button look={look} iconAfter={BurgerIcon} />
+          <Button key={look} look={look} iconAfter={BurgerIcon} />
         ))}
       </div>
       <div className="flex gap-2">
         {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconAfter={BurgerIcon} />
+          <Button key={look} look={look} soft iconAfter={BurgerIcon} />
         ))}
       </div>
       <h3 className="font-bold">Sizes</h3>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} className="mr-2" />
+          <Button key={size} size={size} iconAfter={BurgerIcon} className="mr-2" />
         ))}
       </div>
       <div>
         {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2" />
+          <Button key={size} size={size} iconAfter={BurgerIcon} soft className="mr-2" />
         ))}
       </div>
       <h3 className="font-bold">Block</h3>
diff --git a/packages/ui/src/components/button/button.styles.ts b/packages/ui/src/components/button/button.styles.ts
index 155f5ad85..089bcb543 100644
--- a/packages/ui/src/components/button/button.styles.ts
+++ b/packages/ui/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]',
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
index 6985e3f48..92be5db18 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
+++ b/packages/ui/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}
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx
index 3ebbca8d7..4d25f66e0 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx
+++ b/packages/ui/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(
diff --git a/packages/ui/src/components/collapsible/collapsible.component.tsx b/packages/ui/src/components/collapsible/collapsible.component.tsx
index 4f52c3d90..a0dc01718 100644
--- a/packages/ui/src/components/collapsible/collapsible.component.tsx
+++ b/packages/ui/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 });
 
diff --git a/packages/ui/src/components/compacta/compacta.component.tsx b/packages/ui/src/components/compacta/compacta.component.tsx
index ec8ee8a63..6415f7639 100644
--- a/packages/ui/src/components/compacta/compacta.component.tsx
+++ b/packages/ui/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}`}
diff --git a/packages/ui/src/components/date-picker/date-picker.component.tsx b/packages/ui/src/components/date-picker/date-picker.component.tsx
index 07cdad5cf..6e851e3e3 100644
--- a/packages/ui/src/components/date-picker/date-picker.component.tsx
+++ b/packages/ui/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) {
diff --git a/packages/ui/src/components/date-picker/date-picker.stories.tsx b/packages/ui/src/components/date-picker/date-picker.stories.tsx
index e766ab805..9cec17f18 100644
--- a/packages/ui/src/components/date-picker/date-picker.stories.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.stories.tsx
@@ -52,32 +52,29 @@ export const Sizes: Story = {
 /**
  * > Controlled value
  */
-export const Controlled: Story = {
-  args: {},
-  render: () => {
-    const [value, setValue] = useState('2023-08-01');
-    return (
-      <DatePicker
-        onChange={value => {
-          console.log(value.target.value);
-          setValue(value.target.value);
-        }}
-        onOpen={() => {
-          console.log('onOpen');
-        }}
-        onClose={() => {
-          console.log('onClose');
-        }}
-        onBlur={() => {
-          console.log('onBlur');
-        }}
-        onFocus={() => {
-          console.log('onFocus');
-        }}
-        value={value}
-      />
-    );
-  },
+export const Controlled = () => {
+  const [value, setValue] = useState('2023-08-01');
+  return (
+    <DatePicker
+      onChange={value => {
+        console.log(value.target.value);
+        setValue(value.target.value);
+      }}
+      onOpen={() => {
+        console.log('onOpen');
+      }}
+      onClose={() => {
+        console.log('onClose');
+      }}
+      onBlur={() => {
+        console.log('onBlur');
+      }}
+      onFocus={() => {
+        console.log('onFocus');
+      }}
+      value={value}
+    />
+  );
 };
 
 /**
@@ -104,37 +101,34 @@ export const DisableSpecificDates: Story = {
 /**
  * > Form field example
  */
-export const FormField: Story = {
-  args: {},
-  render: () => {
-    const [value, setValue] = useState('2023-08-01');
+export const FormField = () => {
+  const [value, setValue] = useState('2023-08-01');
 
-    return (
-      <Field
-        label="Are you an existing customer?"
-        hintMessage="Hint: choose from one of the following options"
-        errorMessage="This is an inline error message"
-      >
-        <DatePicker
-          onChange={value => {
-            console.log(value.target.value);
-            setValue(value.target.value);
-          }}
-          onOpen={() => {
-            console.log('onOpen');
-          }}
-          onClose={() => {
-            console.log('onClose');
-          }}
-          onBlur={() => {
-            console.log('onBlur');
-          }}
-          onFocus={() => {
-            console.log('onFocus');
-          }}
-          value={value}
-        />
-      </Field>
-    );
-  },
+  return (
+    <Field
+      label="Are you an existing customer?"
+      hintMessage="Hint: choose from one of the following options"
+      errorMessage="This is an inline error message"
+    >
+      <DatePicker
+        onChange={value => {
+          console.log(value.target.value);
+          setValue(value.target.value);
+        }}
+        onOpen={() => {
+          console.log('onOpen');
+        }}
+        onClose={() => {
+          console.log('onClose');
+        }}
+        onBlur={() => {
+          console.log('onBlur');
+        }}
+        onFocus={() => {
+          console.log('onFocus');
+        }}
+        value={value}
+      />
+    </Field>
+  );
 };
diff --git a/packages/ui/src/components/date-picker/date-picker.types.ts b/packages/ui/src/components/date-picker/date-picker.types.ts
index 8838b3139..a9aafddc9 100644
--- a/packages/ui/src/components/date-picker/date-picker.types.ts
+++ b/packages/ui/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
    */
diff --git a/packages/ui/src/components/date-picker/date-picker.utils.ts b/packages/ui/src/components/date-picker/date-picker.utils.ts
index 362604f0e..10cbfd890 100644
--- a/packages/ui/src/components/date-picker/date-picker.utils.ts
+++ b/packages/ui/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) {
diff --git a/packages/ui/src/components/error-message/error-message.component.tsx b/packages/ui/src/components/error-message/error-message.component.tsx
index 6b9102c5f..2710789f4 100644
--- a/packages/ui/src/components/error-message/error-message.component.tsx
+++ b/packages/ui/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>
diff --git a/packages/ui/src/components/error-message/error-message.types.ts b/packages/ui/src/components/error-message/error-message.types.ts
index d41accadf..a6368a8bc 100644
--- a/packages/ui/src/components/error-message/error-message.types.ts
+++ b/packages/ui/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 = {
diff --git a/packages/ui/src/components/field/field.component.tsx b/packages/ui/src/components/field/field.component.tsx
index 55b748f6b..438503a3d 100644
--- a/packages/ui/src/components/field/field.component.tsx
+++ b/packages/ui/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}>
diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.component.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.component.tsx
index dca0acbde..53f197def 100644
--- a/packages/ui/src/components/flexi-cell/flexi-cell.component.tsx
+++ b/packages/ui/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)}
diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
index c6ecc0a10..48977efbd 100644
--- a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
+++ b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
@@ -860,6 +860,7 @@ export const PromotilesVerticalList: Story = {
       <div className="flex gap-3">
         {MOCK_VERTICAL_PROMOS.map(({ title, subtitle }) => (
           <FlexiCell
+            key={title}
             className="max-sm:h-[255px] max-sm:min-w-[214px] sm:h-[277px] sm:min-w-[298px] sm:max-w-[298px]"
             href="#"
             tag="a"
@@ -867,6 +868,8 @@ export const PromotilesVerticalList: Story = {
             topBadge={({ className }) => <Badge className={className + ' leading-normal'}>Corner flag</Badge>}
           >
             <FlexiCellAdornment className="mb-1">
+              {/* Disabled as we can't import Image */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                 alt=""
diff --git a/packages/ui/src/components/footer/footer.stories.tsx b/packages/ui/src/components/footer/footer.stories.tsx
index 60c940278..00618b96f 100644
--- a/packages/ui/src/components/footer/footer.stories.tsx
+++ b/packages/ui/src/components/footer/footer.stories.tsx
@@ -29,6 +29,8 @@ type Story = StoryObj<typeof meta>;
  * > Default usage example
  */
 export const DefaultStory: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
diff --git a/packages/ui/src/components/form/form.stories.tsx b/packages/ui/src/components/form/form.stories.tsx
index fa5a8dfda..fe0c2210e 100644
--- a/packages/ui/src/components/form/form.stories.tsx
+++ b/packages/ui/src/components/form/form.stories.tsx
@@ -170,7 +170,7 @@ export const AllSpacings: Story = {
     return (
       <div className="flex flex-col gap-3">
         {(['medium', 'large'] as const).map(size => (
-          <Form spacing={size}>
+          <Form key={size} spacing={size}>
             <h3>Form with Spacing:{size}. Sets spacing between label, hint and form groups.</h3>
             <Label htmlFor={`space-${size}`}>This is a label</Label>
             <Hint id={`space-${size}-hint`}>This is a hint</Hint>
diff --git a/packages/ui/src/components/header/header.component.tsx b/packages/ui/src/components/header/header.component.tsx
index fb4fb6c54..bd8c43fb4 100644
--- a/packages/ui/src/components/header/header.component.tsx
+++ b/packages/ui/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';
 
diff --git a/packages/ui/src/components/header/header.stories.tsx b/packages/ui/src/components/header/header.stories.tsx
index 237c36db7..b4a99dce7 100644
--- a/packages/ui/src/components/header/header.stories.tsx
+++ b/packages/ui/src/components/header/header.stories.tsx
@@ -26,6 +26,8 @@ type Story = StoryObj<typeof meta>;
  * > Default usage example
  */
 export const DefaultStory: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -40,6 +42,8 @@ export const DefaultStory: Story = {
  * > Example with a button on the right
  */
 export const RightButton: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -58,6 +62,8 @@ export const RightButton: Story = {
  * > Example of logo centering when XSL
  */
 export const CenterAtXS: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -72,6 +78,8 @@ export const CenterAtXS: Story = {
  * > Example of logo with onClick
  */
 export const LogoOnClick: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -87,6 +95,8 @@ export const LogoOnClick: Story = {
  * > Example of header with skiplink
  */
 export const LogoWithSkipLink: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -101,6 +111,8 @@ export const LogoWithSkipLink: Story = {
  * > Example fixed header. Does not show correctly in Docs view as it will show how it looks when scrolled, check specifc story for non-scrolled view
  */
 export const Fixed: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -115,6 +127,8 @@ export const Fixed: Story = {
  * > Example of header with arrow button
  */
 export const WithArrow: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -129,6 +143,8 @@ export const WithArrow: Story = {
  * > Example of header with arrow button with onClick
  */
 export const WithArrowOnClick: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -149,6 +165,8 @@ export const WithArrowOnClick: Story = {
  * > Example of header with hamburger (only visible below xsl)
  */
 export const WithHamburger: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
@@ -163,6 +181,8 @@ export const WithHamburger: Story = {
  * > Example of header with hamburger (only visible below xsl) with onClick
  */
 export const WithHamburgerOnClick: Story = {
+  // for underscored property
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ brand: _, ...rest }, { globals: { theme } }) => {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
diff --git a/packages/ui/src/components/heading/heading.spec.tsx b/packages/ui/src/components/heading/heading.spec.tsx
index 3ebe6a6ad..98496bc9e 100644
--- a/packages/ui/src/components/heading/heading.spec.tsx
+++ b/packages/ui/src/components/heading/heading.spec.tsx
@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react';
 
 import { Heading } from './heading.component.js';
-import { styles } from './heading.styles.js';
 import { HeadingProps } from './heading.types.js';
 
 describe('Heading', () => {
@@ -12,9 +11,9 @@ describe('Heading', () => {
 
   it('should have the correct size', () => {
     const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    sizes.forEach((size: any) => {
+    sizes.forEach(size => {
       const { getByTestId } = render(
-        <Heading data-testid={size} size={size}>
+        <Heading data-testid={size} size={size as HeadingProps['size']}>
           Heading
         </Heading>,
       );
@@ -24,7 +23,7 @@ describe('Heading', () => {
 
   it('should have the heading tag', () => {
     const headingLevels = [1, 2, 3, 4, 5, 6];
-    headingLevels.forEach((level: any) => {
+    headingLevels.forEach(level => {
       const { getByRole } = render(
         <Heading tag={`h${level}` as keyof HeadingProps['tag']} size={1}>
           Heading
diff --git a/packages/ui/src/components/heading/heading.stories.tsx b/packages/ui/src/components/heading/heading.stories.tsx
index 5e74b2a53..062d8eb70 100644
--- a/packages/ui/src/components/heading/heading.stories.tsx
+++ b/packages/ui/src/components/heading/heading.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 
 import { Heading } from './heading.component.js';
 import { HeadingProps } from './heading.types.js';
@@ -14,7 +14,6 @@ const meta: Meta<typeof Heading> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
@@ -22,15 +21,19 @@ const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  * > Default usage example
  */
 export const Default = () => {
-  return sizes.map((size: any) => <Heading size={size}>Heading size: {size}</Heading>);
+  return sizes.map(size => (
+    <Heading key={size} size={size as HeadingProps['size']}>
+      Heading size: {size}
+    </Heading>
+  ));
 };
 
 /**
  * > With tag prop
  */
 export const WithTag = () => {
-  return sizes.map((size: any) => (
-    <Heading tag={size > 1 ? 'h1' : 'h2'} size={size}>
+  return sizes.map(size => (
+    <Heading key={size} tag={size > 1 ? 'h1' : 'h2'} size={size as HeadingProps['size']}>
       Heading tag:{size > 1 ? ' h1' : ' h2'} size: {size}
     </Heading>
   ));
@@ -40,8 +43,8 @@ export const WithTag = () => {
  * > Brand usage example
  */
 export const Brand = () => {
-  return sizes.map((size: any) => (
-    <Heading size={size} brandHeading>
+  return sizes.map(size => (
+    <Heading key={size} size={size as HeadingProps['size']} brandHeading>
       Heading size: {size}
     </Heading>
   ));
@@ -51,8 +54,8 @@ export const Brand = () => {
  * > With tag and brand prop
  */
 export const WithTagAndBrand = () => {
-  return sizes.map((size: any) => (
-    <Heading tag={size > 1 ? 'h1' : 'h2'} size={size} brandHeading>
+  return sizes.map(size => (
+    <Heading key={size} tag={size > 1 ? 'h1' : 'h2'} size={size as HeadingProps['size']} brandHeading>
       Heading tag:{size > 1 ? ' h1' : ' h2'} size: {size}
     </Heading>
   ));
@@ -62,8 +65,8 @@ export const WithTagAndBrand = () => {
  * > Uppercase usage example
  */
 export const Uppercase = () => {
-  return sizes.map((size: any) => (
-    <Heading size={size} uppercase>
+  return sizes.map(size => (
+    <Heading key={size} size={size as HeadingProps['size']} uppercase>
       Heading size: {size}
     </Heading>
   ));
diff --git a/packages/ui/src/components/icon/icon.stories.tsx b/packages/ui/src/components/icon/icon.stories.tsx
index faef6fa26..d17cae7ed 100644
--- a/packages/ui/src/components/icon/icon.stories.tsx
+++ b/packages/ui/src/components/icon/icon.stories.tsx
@@ -9,7 +9,7 @@ import * as AllIcons from './index.js';
 const AllIconsExample = (props: AllIcons.IconProps) => {
   const [search, setSearch] = useState('');
   const filteredIcons = useMemo(() => {
-    return Object.entries(AllIcons).reduce((acc: { Icon: any; key: string }[], [iconName, Icon]) => {
+    return Object.entries(AllIcons).reduce((acc: { Icon: typeof Icon; key: string }[], [iconName, Icon]) => {
       if (iconName.toUpperCase().indexOf(search.toUpperCase()) === -1) {
         return acc;
       }
@@ -21,17 +21,14 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
     setSearch(value);
   }, []);
 
-  const handleOnClick = useCallback(
-    async (key: string) => {
-      try {
-        await navigator.clipboard.writeText(`<${key} />`);
-        console.log('Content copied to clipboard');
-      } catch (err) {
-        console.error('Failed to copy: ', err);
-      }
-    },
-    [props.className],
-  );
+  const handleOnClick = useCallback(async (key: string) => {
+    try {
+      await navigator.clipboard.writeText(`<${key} />`);
+      console.log('Content copied to clipboard');
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }, []);
 
   return (
     <div className="flex flex-col gap-2">
diff --git a/packages/ui/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 b/packages/ui/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
index e85f4a40a..b9dba30b9 100644
--- a/packages/ui/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
+++ b/packages/ui/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}
diff --git a/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts b/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts
index 679433516..761285c16 100644
--- a/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts
+++ b/packages/ui/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: [
diff --git a/packages/ui/src/components/input-group/input-group.component.tsx b/packages/ui/src/components/input-group/input-group.component.tsx
index f216ddb68..9a8e75828 100644
--- a/packages/ui/src/components/input-group/input-group.component.tsx
+++ b/packages/ui/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]);
 
diff --git a/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx b/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx
index 23489ee7b..f7d20c2d4 100644
--- a/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx
+++ b/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { ClearIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } from '../icon/index.js';
@@ -14,161 +14,144 @@ const meta: Meta<typeof InputGroup> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Number of dependents
  */
-export const NumberStepper: Story = {
-  args: {},
-  render: () => {
-    const [numberOfDependents, setNumberOfDependents] = useState(0);
-    const minusButton = useCallback(() => setNumberOfDependents(state => --state), []);
-    const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []);
-
-    return (
-      <InputGroup
-        label="Number of dependents"
-        before={<Button onClick={minusButton}>-</Button>}
-        after={<Button onClick={plusButton}>+</Button>}
-      >
-        <Input value={numberOfDependents} />
-      </InputGroup>
-    );
-  },
+export const NumberStepper = () => {
+  const [numberOfDependents, setNumberOfDependents] = useState(0);
+  const minusButton = useCallback(() => setNumberOfDependents(state => --state), []);
+  const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []);
+
+  return (
+    <InputGroup
+      label="Number of dependents"
+      before={<Button onClick={minusButton}>-</Button>}
+      after={<Button onClick={plusButton}>+</Button>}
+    >
+      <Input value={numberOfDependents} />
+    </InputGroup>
+  );
 };
 
 /**
  * > Masked characters in field
  */
-export const MaskedCharacters: Story = {
-  args: {},
-  render: () => {
-    const [typeInput, setTypeInput] = useState<'password' | 'text'>('password');
-    const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []);
-
-    return (
-      <InputGroup
-        label="Password"
-        after={{
-          inset: true,
-          element: (
-            <Button
-              onClick={toggleType}
-              look="link"
-              iconAfter={typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon}
-              iconColor="muted"
-            />
-          ),
-        }}
-      >
-        <Input type={typeInput} />
-      </InputGroup>
-    );
-  },
+export const MaskedCharacters = () => {
+  const [typeInput, setTypeInput] = useState<'password' | 'text'>('password');
+  const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []);
+
+  return (
+    <InputGroup
+      label="Password"
+      after={{
+        inset: true,
+        element: (
+          <Button
+            onClick={toggleType}
+            look="link"
+            iconAfter={typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon}
+            iconColor="muted"
+          />
+        ),
+      }}
+    >
+      <Input type={typeInput} />
+    </InputGroup>
+  );
 };
 
 /**
  * > Search with left icon and clear button
  */
-export const SearchWithLeftIconAndClearButton: Story = {
-  args: {},
-  render: () => {
-    const [inputValue, setInputValue] = useState<string>('');
-    const clearInput = useCallback(() => setInputValue(''), []);
-
-    return (
-      <InputGroup
-        label="Search"
-        before={{
-          icon: SearchIcon,
-        }}
-        after={{
-          inset: true,
-          element: <Button onClick={clearInput} look="link" iconAfter={ClearIcon} iconColor="muted" />,
-        }}
-      >
-        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-      </InputGroup>
-    );
-  },
+export const SearchWithLeftIconAndClearButton = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const clearInput = useCallback(() => setInputValue(''), []);
+
+  return (
+    <InputGroup
+      label="Search"
+      before={{
+        icon: SearchIcon,
+      }}
+      after={{
+        inset: true,
+        element: <Button onClick={clearInput} look="link" iconAfter={ClearIcon} iconColor="muted" />,
+      }}
+    >
+      <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+    </InputGroup>
+  );
 };
 
 /**
  * > Inline field validation flow
  */
-export const InlineFieldValidationFlow: Story = {
-  args: {},
-  render: () => {
-    const [inputValue, setInputValue] = useState<string>('');
-    const [validating, setValidating] = useState<boolean>(false);
-    const [error, setError] = useState<string>();
-    const validate = useCallback(() => {
-      setValidating(true);
-      setError(undefined);
-      setTimeout(() => {
-        if (inputValue !== '647453') {
-          setError('Routing number not found');
-        }
-        setValidating(false);
-      }, 1500);
-    }, [inputValue]);
-
-    return (
-      <InputGroup
-        label="Enter ABA routing number"
-        hint="For a valid response use: 647453, all other numbers will show the invalid response"
-        after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}
-        errorMessage={error}
-      >
-        <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-      </InputGroup>
-    );
-  },
+export const InlineFieldValidationFlow = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [validating, setValidating] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const validate = useCallback(() => {
+    setValidating(true);
+    setError(undefined);
+    setTimeout(() => {
+      if (inputValue !== '647453') {
+        setError('Routing number not found');
+      }
+      setValidating(false);
+    }, 1500);
+  }, [inputValue]);
+
+  return (
+    <InputGroup
+      label="Enter ABA routing number"
+      hint="For a valid response use: 647453, all other numbers will show the invalid response"
+      after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}
+      errorMessage={error}
+    >
+      <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+    </InputGroup>
+  );
 };
+
 /**
  * > Search Currency and frequency
  */
-export const CurrencyAndFrequency: Story = {
-  args: {},
-  render: () => {
-    const [inputValue, setInputValue] = useState<string>('');
-
-    return (
-      <InputGroup
-        label="Salary"
-        before="$AUD"
-        after={
-          <Select>
-            <option>Select</option>
-            <option>Per Year</option>
-            <option>Per Month</option>
-            <option>Per Week</option>
-          </Select>
-        }
-      >
-        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-      </InputGroup>
-    );
-  },
+export const CurrencyAndFrequency = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  return (
+    <InputGroup
+      label="Salary"
+      before="$AUD"
+      after={
+        <Select>
+          <option>Select</option>
+          <option>Per Year</option>
+          <option>Per Month</option>
+          <option>Per Week</option>
+        </Select>
+      }
+    >
+      <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+    </InputGroup>
+  );
 };
+
 /**
  * > Search Textarea with character count
  */
 const MAX_LENGTH = 250;
-export const TextareaWithCharacterCount: Story = {
-  args: {},
-  render: () => {
-    const [inputValue, setInputValue] = useState<string>('');
-    const counterText = useMemo(() => {
-      const lengthLeft = MAX_LENGTH - inputValue.length;
-      return `${lengthLeft} remaining`;
-    }, [inputValue]);
-
-    return (
-      <InputGroup label="Comments" hint="I am a hint" supportingText={counterText}>
-        <Textarea onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-      </InputGroup>
-    );
-  },
+export const TextareaWithCharacterCount = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const counterText = useMemo(() => {
+    const lengthLeft = MAX_LENGTH - inputValue.length;
+    return `${lengthLeft} remaining`;
+  }, [inputValue]);
+
+  return (
+    <InputGroup label="Comments" hint="I am a hint" supportingText={counterText}>
+      <Textarea onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+    </InputGroup>
+  );
 };
diff --git a/packages/ui/src/components/input/input.stories.tsx b/packages/ui/src/components/input/input.stories.tsx
index b765e79f7..2ad820526 100644
--- a/packages/ui/src/components/input/input.stories.tsx
+++ b/packages/ui/src/components/input/input.stories.tsx
@@ -56,7 +56,7 @@ export const Disabled: Story = {
 export const Sizes = () => (
   <div className="flex flex-col gap-2">
     {SIZES.map(size => (
-      <Input size={size} placeholder={size} />
+      <Input key={size} size={size} placeholder={size} />
     ))}
   </div>
 );
diff --git a/packages/ui/src/components/link/link.stories.tsx b/packages/ui/src/components/link/link.stories.tsx
index 17b567732..6805f3611 100644
--- a/packages/ui/src/components/link/link.stories.tsx
+++ b/packages/ui/src/components/link/link.stories.tsx
@@ -33,14 +33,14 @@ const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 export const Standalone = () => (
   <div className="space-y-1">
     <h1 className="font-bold">Default</h1>
-    <Link href="#">Look I'm a standalone link</Link>
+    <Link href="#">Look I&#39;m a standalone link</Link>
     <h1 className="font-bold">Icon Before override</h1>
     <Link href="#" iconBefore={PdfFileIcon}>
-      Look I'm a standalone link
+      Look I&#39;m a standalone link
     </Link>
     <h1 className="font-bold">Icon Before override</h1>
     <Link href="#" iconAfter={ArrowRightIcon}>
-      Look I'm a standalone link
+      Look I&#39;m a standalone link
     </Link>
   </div>
 );
@@ -53,7 +53,7 @@ export const Inline = () => (
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline">
-        look, I'm an inline link
+        look, I&#39;m an inline link
       </Link>{' '}
       sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
       doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
@@ -61,7 +61,7 @@ export const Inline = () => (
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline" underline={false}>
-        look, I'm an inline link with no underline
+        look, I&#39;m an inline link with no underline
       </Link>{' '}
       sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
       doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
@@ -69,7 +69,7 @@ export const Inline = () => (
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline" iconBefore={PdfFileIcon}>
-        look, I'm an inline link
+        look, I&#39;m an inline link
       </Link>{' '}
       sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
       doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
@@ -77,13 +77,13 @@ export const Inline = () => (
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline" iconAfter={PdfFileIcon}>
-        look, I'm an inline link
+        look, I&#39;m an inline link
       </Link>{' '}
       sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
       doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
     </p>
     <Link href="#" type="inline" iconBefore={PdfFileIcon}>
-      look, I'm an inline link
+      look, I&#39;m an inline link
     </Link>
   </div>
 );
@@ -97,12 +97,12 @@ export const IconSizes = () => (
       <div key={size}>
         <h1 className="font-bold">{size}</h1>
         <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
-          Look I'm a standalone link
+          Look I&#39;m a standalone link
         </Link>
         <p className="typography-body-10">
           Lorem ipsum dolor{' '}
           <Link href="#" type="inline" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
-            look, I'm an inline link
+            look, I&#39;m an inline link
           </Link>{' '}
           sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
           doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
diff --git a/packages/ui/src/components/list/components/list-item/list-item.component.tsx b/packages/ui/src/components/list/components/list-item/list-item.component.tsx
index e36f5c722..30cbe60b7 100644
--- a/packages/ui/src/components/list/components/list-item/list-item.component.tsx
+++ b/packages/ui/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);
 
diff --git a/packages/ui/src/components/list/list.stories.tsx b/packages/ui/src/components/list/list.stories.tsx
index 1cf914793..2a8ec8583 100644
--- a/packages/ui/src/components/list/list.stories.tsx
+++ b/packages/ui/src/components/list/list.stories.tsx
@@ -24,7 +24,11 @@ const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered']
  */
 export const Default: Story = {
   args: {
-    children: [<ListItem>Styled list</ListItem>, <ListItem>Styled list</ListItem>, <ListItem>Styled list</ListItem>],
+    children: [
+      <ListItem key="one">Styled list</ListItem>,
+      <ListItem key="two">Styled list</ListItem>,
+      <ListItem key="three">Styled list</ListItem>,
+    ],
   },
 };
 
diff --git a/packages/ui/src/components/modal/modal.stories.tsx b/packages/ui/src/components/modal/modal.stories.tsx
index 31b2d50db..d65b537a8 100644
--- a/packages/ui/src/components/modal/modal.stories.tsx
+++ b/packages/ui/src/components/modal/modal.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 import { Fragment, useMemo } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
@@ -14,171 +14,136 @@ const meta: Meta<typeof Modal> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Default usage example
  */
-export const Default: Story = {
-  args: {
-    children: `
+export const Default = () => {
+  const state = useOverlayTriggerState({});
+  return (
+    <>
+      <Modal title="Title" isDismissable state={state} aria-label="Modal title" body>
+        {`
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-    `,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title" body>
-          {children}
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
+    `}
+      </Modal>
+      <Button onClick={state.open}>Open Modal</Button>
+    </>
+  );
 };
 
 /**
  * > WithFooter usage example
  */
-export const WithFooter: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
+export const WithFooter = () => {
+  const state = useOverlayTriggerState({});
 
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title">
-          <ModalBody>{children}</ModalBody>
-          <ModalFooter
-            primaryLabel="Label"
-            primaryOnClick={state.close}
-            secondaryLabel="Label"
-            secondaryOnClick={state.close}
-          />
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
+  return (
+    <>
+      <Modal title="Title" isDismissable state={state} aria-label="Modal title">
+        <ModalBody>{`I'm children`}</ModalBody>
+        <ModalFooter
+          primaryLabel="Label"
+          primaryOnClick={state.close}
+          secondaryLabel="Label"
+          secondaryOnClick={state.close}
+        />
+      </Modal>
+      <Button onClick={state.open}>Open Modal</Button>
+    </>
+  );
 };
 
 /**
  * > All sizes usage example
  */
-export const Sizes: Story = {
-  args: {
-    children: `Type something but keep it simple. Modals should be easy to digest so that the user can quickly get back to what they were doing.`,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const stateSM = useOverlayTriggerState({});
-    const stateMD = useOverlayTriggerState({});
-    const stateLG = useOverlayTriggerState({});
-    const stateFull = useOverlayTriggerState({});
-    const stateFluid = useOverlayTriggerState({});
+export const Sizes = () => {
+  const stateSM = useOverlayTriggerState({});
+  const stateMD = useOverlayTriggerState({});
+  const stateLG = useOverlayTriggerState({});
+  const stateFull = useOverlayTriggerState({});
+  const stateFluid = useOverlayTriggerState({});
 
-    const states = useMemo(() => {
-      return {
-        sm: stateSM,
-        md: stateMD,
-        lg: stateLG,
-        full: stateFull,
-        fluid: stateFluid,
-      };
-    }, [stateSM, stateMD, stateLG, stateFull, stateFluid]);
+  const states = useMemo(() => {
+    return {
+      sm: stateSM,
+      md: stateMD,
+      lg: stateLG,
+      full: stateFull,
+      fluid: stateFluid,
+    };
+  }, [stateSM, stateMD, stateLG, stateFull, stateFluid]);
 
-    return (
-      <div className="flex gap-2">
-        {(['sm', 'md', 'lg', 'full', 'fluid'] as const).map(size => (
-          <Fragment key={size}>
-            <Modal {...props} size={size} state={states[size]} title={`Modal ${size}`}>
-              <ModalBody>{children}</ModalBody>
-              <ModalFooter
-                primaryLabel="Label"
-                primaryOnClick={states[size].close}
-                secondaryLabel="Label"
-                secondaryOnClick={states[size].close}
-              />
-            </Modal>
-            <Button onClick={states[size].open}>Open Modal {size}</Button>
-          </Fragment>
-        ))}
-      </div>
-    );
-  },
+  return (
+    <div className="flex gap-2">
+      {(['sm', 'md', 'lg', 'full', 'fluid'] as const).map(size => (
+        <Fragment key={size}>
+          <Modal isDismissable size={size} state={states[size]} title={`Modal ${size}`}>
+            <ModalBody>{`Type something but keep it simple. Modals should be easy to digest so that the user can quickly get back to what they were doing.`}</ModalBody>
+            <ModalFooter
+              primaryLabel="Label"
+              primaryOnClick={states[size].close}
+              secondaryLabel="Label"
+              secondaryOnClick={states[size].close}
+            />
+          </Modal>
+          <Button onClick={states[size].open}>Open Modal {size}</Button>
+        </Fragment>
+      ))}
+    </div>
+  );
 };
 
 /**
  * > Not dismissable example
  */
-export const NotDismissible: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: false,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
+export const NotDismissible = () => {
+  const state = useOverlayTriggerState({});
 
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title">
-          <ModalBody>{children}</ModalBody>
-          <ModalFooter
-            primaryLabel="Label"
-            primaryOnClick={state.close}
-            secondaryLabel="Label"
-            secondaryOnClick={state.close}
-          />
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
+  return (
+    <>
+      <Modal title="title" isDismissable={false} state={state} aria-label="Modal title">
+        <ModalBody>{`I'm children`}</ModalBody>
+        <ModalFooter
+          primaryLabel="Label"
+          primaryOnClick={state.close}
+          secondaryLabel="Label"
+          secondaryOnClick={state.close}
+        />
+      </Modal>
+      <Button onClick={state.open}>Open Modal</Button>
+    </>
+  );
 };
 
 /**
  * > Responsive modal example, fluid on mobile and different sizes on desktop
  */
-export const Responsive: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
+export const Responsive = () => {
+  const state = useOverlayTriggerState({});
 
-    return (
-      <>
-        <Modal
-          {...props}
-          size={{ initial: 'fluid', md: 'sm', lg: 'md', xl: 'lg' }}
-          state={state}
-          aria-label="Modal title"
-        >
-          <ModalBody>{children}</ModalBody>
-          <ModalFooter
-            primaryLabel="Label"
-            primaryOnClick={state.close}
-            secondaryLabel="Label"
-            secondaryOnClick={state.close}
-          />
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
+  return (
+    <>
+      <Modal
+        title="title"
+        isDismissable
+        size={{ initial: 'fluid', md: 'sm', lg: 'md', xl: 'lg' }}
+        state={state}
+        aria-label="Modal title"
+      >
+        <ModalBody>{`I'm children`}</ModalBody>
+        <ModalFooter
+          primaryLabel="Label"
+          primaryOnClick={state.close}
+          secondaryLabel="Label"
+          secondaryOnClick={state.close}
+        />
+      </Modal>
+      <Button onClick={state.open}>Open Modal</Button>
+    </>
+  );
 };
diff --git a/packages/ui/src/components/pagination/components/pagination-item/pagination-item.types.ts b/packages/ui/src/components/pagination/components/pagination-item/pagination-item.types.ts
index 9c73c43b2..e67f143b9 100644
--- a/packages/ui/src/components/pagination/components/pagination-item/pagination-item.types.ts
+++ b/packages/ui/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>);
diff --git a/packages/ui/src/components/pagination/pagination.component.tsx b/packages/ui/src/components/pagination/pagination.component.tsx
index ea0bb47e1..c7cc5ed06 100644
--- a/packages/ui/src/components/pagination/pagination.component.tsx
+++ b/packages/ui/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}>
diff --git a/packages/ui/src/components/pagination/pagination.hooks.ts b/packages/ui/src/components/pagination/pagination.hooks.ts
index c21554fc6..0fbb2c8f5 100644
--- a/packages/ui/src/components/pagination/pagination.hooks.ts
+++ b/packages/ui/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];
diff --git a/packages/ui/src/components/pagination/pagination.stories.tsx b/packages/ui/src/components/pagination/pagination.stories.tsx
index fcc0376a2..46fef6381 100644
--- a/packages/ui/src/components/pagination/pagination.stories.tsx
+++ b/packages/ui/src/components/pagination/pagination.stories.tsx
@@ -1,9 +1,9 @@
 import { action } from '@storybook/addon-actions';
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
-import { Button, PaginationProps } from '../index.js';
+import { Button } from '../index.js';
 
 import { Pagination } from './pagination.component.js';
 import { usePagination } from './pagination.hooks.js';
@@ -20,39 +20,32 @@ export default meta;
 /**
  * > Button usage example
  */
-export const Default: unknown = {
-  args: {
-    current: 1,
-    onChange: action('onChange'),
-    pages: [
-      {
-        text: '1',
-      },
-      {
-        text: '2',
-      },
-      {
-        text: '3',
-      },
-    ],
-  },
-  render: (props: PaginationProps) => {
-    const [current, setCurrent] = useState(props.current);
-    useEffect(() => {
-      setCurrent(props.current);
-    }, [props.current]);
-
-    return (
-      <Pagination
-        {...props}
-        onChange={value => {
-          setCurrent(value);
-          props.onChange?.(value);
-        }}
-        current={current}
-      />
-    );
-  },
+export const Default = () => {
+  const [current, setCurrent] = useState(1);
+  useEffect(() => {
+    setCurrent(1);
+  }, []);
+
+  return (
+    <Pagination
+      pages={[
+        {
+          text: '1',
+        },
+        {
+          text: '2',
+        },
+        {
+          text: '3',
+        },
+      ]}
+      onChange={value => {
+        setCurrent(value);
+        action('onChange')(value);
+      }}
+      current={current}
+    />
+  );
 };
 
 /**
diff --git a/packages/ui/src/components/panel/panel.stories.tsx b/packages/ui/src/components/panel/panel.stories.tsx
index bd98480d1..3302dcd77 100644
--- a/packages/ui/src/components/panel/panel.stories.tsx
+++ b/packages/ui/src/components/panel/panel.stories.tsx
@@ -35,12 +35,12 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     children: [
-      <PanelBody>
+      <PanelBody key="panelBody">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
         suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
         excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       </PanelBody>,
-      <PanelFooter>Panel footer</PanelFooter>,
+      <PanelFooter key="panelFooter">Panel footer</PanelFooter>,
     ],
   },
 };
@@ -52,12 +52,12 @@ export const FaintLook: Story = {
   args: {
     look: 'faint',
     children: [
-      <PanelBody>
+      <PanelBody key="panelBody">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
         suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
         excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       </PanelBody>,
-      <PanelFooter>Panel footer</PanelFooter>,
+      <PanelFooter key="panelFooter">Panel footer</PanelFooter>,
     ],
   },
 };
@@ -68,7 +68,7 @@ export const FaintLook: Story = {
 export const WithTable: Story = {
   args: {
     children: [
-      <Table>
+      <Table key="table">
         <TableCaption>
           Caption this table width is: <em>(100%)</em>
         </TableCaption>
@@ -113,12 +113,12 @@ export const WithTable: Story = {
 export const WithTableAndBody: Story = {
   args: {
     children: [
-      <PanelBody>
+      <PanelBody key="panelBody">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
         suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
         excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       </PanelBody>,
-      <Table>
+      <Table key="table">
         <TableCaption>
           Caption this table width is: <em>(100%)</em>
         </TableCaption>
@@ -153,7 +153,7 @@ export const WithTableAndBody: Story = {
         </TableBody>
         <TableFooter colspan={3}>Footer goes here and should colSpan all columns</TableFooter>
       </Table>,
-      <PanelFooter>Panel footer</PanelFooter>,
+      <PanelFooter key="panelFooter">Panel footer</PanelFooter>,
     ],
   },
 };
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.types.ts b/packages/ui/src/components/pass-code-view/pass-code-view.types.ts
index 85305e155..9751f3e2d 100644
--- a/packages/ui/src/components/pass-code-view/pass-code-view.types.ts
+++ b/packages/ui/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
    */
diff --git a/packages/ui/src/components/pass-code/pass-code.component.tsx b/packages/ui/src/components/pass-code/pass-code.component.tsx
index 3528ddfcf..dbcd78ebf 100644
--- a/packages/ui/src/components/pass-code/pass-code.component.tsx
+++ b/packages/ui/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(
diff --git a/packages/ui/src/components/pass-code/pass-code.spec.tsx b/packages/ui/src/components/pass-code/pass-code.spec.tsx
index 6f2760a12..fc99db2f8 100644
--- a/packages/ui/src/components/pass-code/pass-code.spec.tsx
+++ b/packages/ui/src/components/pass-code/pass-code.spec.tsx
@@ -17,7 +17,7 @@ describe('PassCode', () => {
     const { container } = render(
       <PassCode
         length={4}
-        onComplete={(passcode: string) => {
+        onComplete={() => {
           throw new Error('Function not implemented.');
         }}
       />,
diff --git a/packages/ui/src/components/popover/components/panel/panel.component.tsx b/packages/ui/src/components/popover/components/panel/panel.component.tsx
index 81b83444d..a33a5f6c5 100644
--- a/packages/ui/src/components/popover/components/panel/panel.component.tsx
+++ b/packages/ui/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 {
diff --git a/packages/ui/src/components/popover/popover.component.tsx b/packages/ui/src/components/popover/popover.component.tsx
index dd7c2dceb..f274bb4c5 100644
--- a/packages/ui/src/components/popover/popover.component.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/popover/popover.hooks.tsx b/packages/ui/src/components/popover/popover.utils.tsx
similarity index 95%
rename from packages/ui/src/components/popover/popover.hooks.tsx
rename to packages/ui/src/components/popover/popover.utils.tsx
index 22745416b..94c4a3f38 100644
--- a/packages/ui/src/components/popover/popover.hooks.tsx
+++ b/packages/ui/src/components/popover/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>,
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
index 64238b852..c213a7e09 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
@@ -30,7 +30,7 @@ export const Sizes = () => {
   return (
     <>
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator size={size} className="mr-2" />
+        <ProgressIndicator key={size} size={size} className="mr-2" />
       ))}
     </>
   );
@@ -44,7 +44,7 @@ export const Inverted = () => {
   return (
     <div className="bg-black">
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator size={size} inverted className="mr-2" />
+        <ProgressIndicator key={size} size={size} inverted className="mr-2" />
       ))}
     </div>
   );
diff --git a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx b/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx
index c008c0a0c..fe2b5d466 100644
--- a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.types.ts b/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.types.ts
index f73cd1ee2..635fa08a2 100644
--- a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.types.ts
+++ b/packages/ui/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>;
diff --git a/packages/ui/src/components/progress-rope/progress-rope.component.tsx b/packages/ui/src/components/progress-rope/progress-rope.component.tsx
index 01263b0ed..ff16cf3c9 100644
--- a/packages/ui/src/components/progress-rope/progress-rope.component.tsx
+++ b/packages/ui/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}
diff --git a/packages/ui/src/components/progress-rope/progress-rope.stories.tsx b/packages/ui/src/components/progress-rope/progress-rope.stories.tsx
index f299b640b..437f2914e 100644
--- a/packages/ui/src/components/progress-rope/progress-rope.stories.tsx
+++ b/packages/ui/src/components/progress-rope/progress-rope.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 import { useCallback, useState } from 'react';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
@@ -15,130 +15,123 @@ const meta: Meta<typeof ProgressRope> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Default usage example
  */
-export const Default: Story = {
-  args: {},
-  render: () => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const handleClick = useCallback(
-      (index: number) => () => {
-        setActiveIndex(index);
-      },
-      [],
-    );
-    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-      { text: <div>Step 1</div>, onClick: handleClick(0) },
-      { text: <div>Step 2</div>, onClick: handleClick(1) },
-      { text: <div>Step 3</div>, onClick: handleClick(2) },
-      { text: <div>Step 4</div>, onClick: handleClick(3) },
-      { text: <div>Step 5</div>, onClick: handleClick(4) },
-      { text: <div>Review and Submit</div>, onClick: handleClick(5) },
-    ];
+export const Default = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const handleClick = useCallback(
+    (index: number) => () => {
+      setActiveIndex(index);
+    },
+    [],
+  );
+  const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+    { text: <div>Step 1</div>, onClick: handleClick(0) },
+    { text: <div>Step 2</div>, onClick: handleClick(1) },
+    { text: <div>Step 3</div>, onClick: handleClick(2) },
+    { text: <div>Step 4</div>, onClick: handleClick(3) },
+    { text: <div>Step 5</div>, onClick: handleClick(4) },
+    { text: <div>Review and Submit</div>, onClick: handleClick(5) },
+  ];
 
-    return (
-      <div>
-        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-        <Well className="flex items-center p-2 sm:p-2">
-          <div className="mr-2 flex items-center space-x-1">
-            <Button
-              iconBefore={ArrowLeftIcon}
-              soft
-              look="faint"
-              size="small"
-              onClick={() => setActiveIndex(state => --state)}
-            >
-              prev
-            </Button>{' '}
-            <Button
-              iconAfter={ArrowRightIcon}
-              soft
-              look="faint"
-              size="small"
-              onClick={() => setActiveIndex(state => ++state)}
-            >
-              next
-            </Button>
-          </div>
-          <code className="flex">Current: {activeIndex}</code>
-        </Well>
-      </div>
-    );
-  },
+  return (
+    <div>
+      <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+      <Well className="flex items-center p-2 sm:p-2">
+        <div className="mr-2 flex items-center space-x-1">
+          <Button
+            iconBefore={ArrowLeftIcon}
+            soft
+            look="faint"
+            size="small"
+            onClick={() => setActiveIndex(state => --state)}
+          >
+            prev
+          </Button>{' '}
+          <Button
+            iconAfter={ArrowRightIcon}
+            soft
+            look="faint"
+            size="small"
+            onClick={() => setActiveIndex(state => ++state)}
+          >
+            next
+          </Button>
+        </div>
+        <code className="flex">Current: {activeIndex}</code>
+      </Well>
+    </div>
+  );
 };
 
 /**
  * > Grouping steps story usage example
  */
-export const GroupingSteps: Story = {
-  args: {},
-  render: () => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const handleClick = useCallback(
-      (index: number) => () => {
-        setActiveIndex(index);
-      },
-      [],
-    );
-    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-      {
-        type: 'group',
-        text: 'Group 1',
-        steps: [
-          { text: 'Step 1', onClick: handleClick(0) },
-          { text: 'Step 2', onClick: handleClick(1) },
-        ],
-      },
-      {
-        type: 'group',
-        text: 'Group 2',
-        steps: [
-          { text: 'Step 3', onClick: handleClick(2) },
-          { text: 'Step 4', onClick: handleClick(3) },
-        ],
-      },
-      {
-        type: 'group',
-        text: 'Group 3',
-        steps: [
-          { text: 'Step 5', onClick: handleClick(4) },
-          { text: 'Step 6', onClick: handleClick(5) },
-          { text: 'Step 7', onClick: handleClick(6) },
-        ],
-      },
-      { text: 'Review and Submit', onClick: handleClick(7) },
-    ];
+export const GroupingSteps = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const handleClick = useCallback(
+    (index: number) => () => {
+      setActiveIndex(index);
+    },
+    [],
+  );
+  const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+    {
+      type: 'group',
+      text: 'Group 1',
+      steps: [
+        { text: 'Step 1', onClick: handleClick(0) },
+        { text: 'Step 2', onClick: handleClick(1) },
+      ],
+    },
+    {
+      type: 'group',
+      text: 'Group 2',
+      steps: [
+        { text: 'Step 3', onClick: handleClick(2) },
+        { text: 'Step 4', onClick: handleClick(3) },
+      ],
+    },
+    {
+      type: 'group',
+      text: 'Group 3',
+      steps: [
+        { text: 'Step 5', onClick: handleClick(4) },
+        { text: 'Step 6', onClick: handleClick(5) },
+        { text: 'Step 7', onClick: handleClick(6) },
+      ],
+    },
+    { text: 'Review and Submit', onClick: handleClick(7) },
+  ];
 
-    return (
-      <div>
-        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-        <Well className="flex items-center p-2 sm:p-2">
-          <div className="mr-2 flex items-center space-x-1">
-            <Button
-              iconBefore={ArrowLeftIcon}
-              soft
-              look="faint"
-              size="small"
-              onClick={() => setActiveIndex(state => --state)}
-            >
-              prev
-            </Button>{' '}
-            <Button
-              iconAfter={ArrowRightIcon}
-              soft
-              look="faint"
-              size="small"
-              onClick={() => setActiveIndex(state => ++state)}
-            >
-              next
-            </Button>
-          </div>
-          <code className="flex">Current: {activeIndex}</code>
-        </Well>
-      </div>
-    );
-  },
+  return (
+    <div>
+      <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+      <Well className="flex items-center p-2 sm:p-2">
+        <div className="mr-2 flex items-center space-x-1">
+          <Button
+            iconBefore={ArrowLeftIcon}
+            soft
+            look="faint"
+            size="small"
+            onClick={() => setActiveIndex(state => --state)}
+          >
+            prev
+          </Button>{' '}
+          <Button
+            iconAfter={ArrowRightIcon}
+            soft
+            look="faint"
+            size="small"
+            onClick={() => setActiveIndex(state => ++state)}
+          >
+            next
+          </Button>
+        </div>
+        <code className="flex">Current: {activeIndex}</code>
+      </Well>
+    </div>
+  );
 };
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
index cfb6efad3..629825e41 100644
--- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
+++ b/packages/ui/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);
diff --git a/packages/ui/src/components/radio-group/radio-group.component.tsx b/packages/ui/src/components/radio-group/radio-group.component.tsx
index 4ee172620..2b643387c 100644
--- a/packages/ui/src/components/radio-group/radio-group.component.tsx
+++ b/packages/ui/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 && (
diff --git a/packages/ui/src/components/select/select.spec.tsx b/packages/ui/src/components/select/select.spec.tsx
index 4b076742c..817367c76 100644
--- a/packages/ui/src/components/select/select.spec.tsx
+++ b/packages/ui/src/components/select/select.spec.tsx
@@ -12,7 +12,7 @@ describe('Select', () => {
     const style = styles({ size: 'medium' });
     // TODO: use some variants for test
     expect(style).toBe(
-      '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 form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+      '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 form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
     );
   });
 });
diff --git a/packages/ui/src/components/select/select.styles.ts b/packages/ui/src/components/select/select.styles.ts
index 8b8a862b9..9bd85e1cf 100644
--- a/packages/ui/src/components/select/select.styles.ts
+++ b/packages/ui/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)]',
diff --git a/packages/ui/src/components/selector/components/selector-button-group/components/selector-button-group-option/selector-button-group-option.component.tsx b/packages/ui/src/components/selector/components/selector-button-group/components/selector-button-group-option/selector-button-group-option.component.tsx
index e5495ab4e..11fea8e83 100644
--- a/packages/ui/src/components/selector/components/selector-button-group/components/selector-button-group-option/selector-button-group-option.component.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/selector/components/selector-button-group/selector-button-group.component.tsx b/packages/ui/src/components/selector/components/selector-button-group/selector-button-group.component.tsx
index 1439ed6ef..c5c7ea01e 100644
--- a/packages/ui/src/components/selector/components/selector-button-group/selector-button-group.component.tsx
+++ b/packages/ui/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({
diff --git a/packages/ui/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx b/packages/ui/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx
index 7b6113988..427772ad8 100644
--- a/packages/ui/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx
+++ b/packages/ui/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);
diff --git a/packages/ui/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx b/packages/ui/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx
index e77429b76..f260028f4 100644
--- a/packages/ui/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx
+++ b/packages/ui/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>
diff --git a/packages/ui/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.component.tsx b/packages/ui/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.component.tsx
index 9098e85d4..514e5eed4 100644
--- a/packages/ui/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.component.tsx
+++ b/packages/ui/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,
diff --git a/packages/ui/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx b/packages/ui/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx
index aa8e52eb3..de64ec729 100644
--- a/packages/ui/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx
+++ b/packages/ui/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);
diff --git a/packages/ui/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx b/packages/ui/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx
index fd66011c3..eaae2c5af 100644
--- a/packages/ui/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx
+++ b/packages/ui/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}
diff --git a/packages/ui/src/components/skip-link/skip-link.component.tsx b/packages/ui/src/components/skip-link/skip-link.component.tsx
index fd9db4a3e..d33977906 100644
--- a/packages/ui/src/components/skip-link/skip-link.component.tsx
+++ b/packages/ui/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>
   );
diff --git a/packages/ui/src/components/skip-link/skip-link.stories.tsx b/packages/ui/src/components/skip-link/skip-link.stories.tsx
index 7a31e2ad9..4176a67e2 100644
--- a/packages/ui/src/components/skip-link/skip-link.stories.tsx
+++ b/packages/ui/src/components/skip-link/skip-link.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { type Meta, StoryFn } from '@storybook/react';
 import { useRef } from 'react';
 
 import { Button } from '../index.js';
@@ -18,7 +18,7 @@ export default meta;
  * > Default usage example
  */
 export const Default = () => {
-  const skipLinkRef = useRef<HTMLAnchorElement>();
+  const skipLinkRef = useRef<HTMLAnchorElement>(null);
   return (
     <>
       <SkipLink href="#skiptohere" ref={skipLinkRef}>
diff --git a/packages/ui/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts b/packages/ui/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts
index 2158cf7d2..ebd79c392 100644
--- a/packages/ui/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts
+++ b/packages/ui/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts
@@ -7,7 +7,7 @@ import { styles } from './tabs-tab-panel.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsTabPanelProps<T = any> = {
+export type TabsTabPanelProps<T = object> = {
   /**
    * Table panel content
    */
diff --git a/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx b/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx
index 11b10157f..1aacc6e3e 100644
--- a/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.types.ts b/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.types.ts
index 34c4f418a..97ad45d5a 100644
--- a/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.types.ts
+++ b/packages/ui/src/components/tabs/components/tabs-tab/tabs-tab.types.ts
@@ -7,7 +7,7 @@ import { styles } from './tabs-tab.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsTabProps<T = any> = {
+export type TabsTabProps<T = object> = {
   /**
    * Color of tab
    */
diff --git a/packages/ui/src/components/tabs/tabs.component.tsx b/packages/ui/src/components/tabs/tabs.component.tsx
index 0a1135dab..e7961daef 100644
--- a/packages/ui/src/components/tabs/tabs.component.tsx
+++ b/packages/ui/src/components/tabs/tabs.component.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { AriaLinkOptions, useTabList } from 'react-aria';
+import { AriaLinkOptions, Key, useTabList } from 'react-aria';
 import { Item, ItemProps, useTabListState } from 'react-stately';
 
 import { TabsTab, TabsTabPanel } from './components/index.js';
@@ -24,9 +24,9 @@ export function Tabs({
 }: TabsProps) {
   const state = useTabListState({
     ...props,
-    disabledKeys: disabledKeys as any,
-    selectedKey: selectedKey as any,
-    defaultSelectedKey: defaultSelectedKey as any,
+    disabledKeys: disabledKeys as Iterable<Key>,
+    selectedKey: selectedKey as Key,
+    defaultSelectedKey: defaultSelectedKey as Key,
     children,
   });
   const styles = tabStyles({ orientation, look, sticky });
@@ -35,9 +35,9 @@ export function Tabs({
   const { tabListProps } = useTabList(
     {
       ...props,
-      disabledKeys: disabledKeys as any,
-      selectedKey: selectedKey as any,
-      defaultSelectedKey: defaultSelectedKey as any,
+      disabledKeys: disabledKeys as Iterable<Key>,
+      selectedKey: selectedKey as Key,
+      defaultSelectedKey: defaultSelectedKey as Key,
       orientation,
     },
     state,
diff --git a/packages/ui/src/components/tabs/tabs.types.ts b/packages/ui/src/components/tabs/tabs.types.ts
index 6f32e4367..c2b146a33 100644
--- a/packages/ui/src/components/tabs/tabs.types.ts
+++ b/packages/ui/src/components/tabs/tabs.types.ts
@@ -7,7 +7,7 @@ import { styles } from './tabs.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsProps<T = any> = SpectrumTabsProps<T> & {
+export type TabsProps<T = object> = SpectrumTabsProps<T> & {
   /**
    * Children
    */
diff --git a/packages/ui/src/components/well/well.stories.tsx b/packages/ui/src/components/well/well.stories.tsx
index b6fa65b91..58cd65432 100644
--- a/packages/ui/src/components/well/well.stories.tsx
+++ b/packages/ui/src/components/well/well.stories.tsx
@@ -36,7 +36,7 @@ export const Nested: Story = {
 };
 
 /**
- * > Tag as <article>
+ * > Tag as `<article>`
  */
 export const CustomTag: Story = {
   args: {
@@ -46,7 +46,7 @@ export const CustomTag: Story = {
 };
 
 /**
- * > Nested tag as <article>
+ * > Nested tag as `<article>`
  */
 export const CustomTagNested: Story = {
   args: {
@@ -61,11 +61,11 @@ export const CustomTagNested: Story = {
 };
 
 /**
- * > Tag as <aside> with child <san>, passed as a component
+ * > Tag as `<aside>` with child `<span>`, passed as a component
  */
 export const ComplexCustomTagNested: Story = {
   args: {
     tag: 'aside',
-    children: <span>Look, I'm in a well</span>,
+    children: <span>Look, I&#39;m in a well</span>,
   },
 };
diff --git a/packages/ui/src/stories/foundation/colours.stories.tsx b/packages/ui/src/stories/foundation/colours.stories.tsx
index 119abfb26..1f34937a4 100644
--- a/packages/ui/src/stories/foundation/colours.stories.tsx
+++ b/packages/ui/src/stories/foundation/colours.stories.tsx
@@ -20,6 +20,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // NOTE: Although unused this needs to be here so all colors load correctly
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const LOAD_COLORS = {
   background: [
     'bg-background',
@@ -291,6 +292,8 @@ export const BrandColors: Story = {
       'text',
     ];
     const TINTS = ['DEFAULT', 90, 80, 70, 60, 50, 40, 30, 20, 10, 5];
+    // NOTE: Below is ignored as we need global theme value from render
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selectedTint, setSelectedTint] = useState('DEFAULT');
     const tintString = selectedTint !== 'DEFAULT' ? `-${selectedTint}` : '';
 
@@ -310,6 +313,8 @@ export const BrandColors: Story = {
         <div className="flex flex-wrap">
           {brandColors.map(color => (
             <div className="w-[33%] min-w-[200px] max-w-[300px] p-2" key={color}>
+              {/* NOTE: Below disable tailwind classname warning for string interpolation */}
+              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
               <div className={`bg-${color}${tintString} h-[80px]`} />
               <div className="divide-y divide-border border border-border p-2">
                 <div className="pb-2 font-bold">{color}</div>
@@ -352,6 +357,8 @@ export const ReservedColors = () => {
       <div className="flex flex-wrap">
         {reservedColors.map(color => (
           <div className="w-[33%] min-w-[200px] max-w-[300px] p-2" key={color}>
+            {/* NOTE: Below disable tailwind classname warning for string interpolation */}
+            {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
             <div className={`bg-${color}${tintString} h-[80px]`} />
             <div className="divide-y divide-border border border-border p-2">
               <div className="pb-2 font-bold">{color}</div>
@@ -419,8 +426,10 @@ export const DataVisualisationColors: Story = {
       <>
         <div className="flex flex-wrap">
           {dataVisSolidColors.map(color => (
-            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+            <div key={color} className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
               <div className=" p-2" key={color}>
+                {/* NOTE: Below disable tailwind classname warning for string interpolation */}
+                {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
                 <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
@@ -434,8 +443,10 @@ export const DataVisualisationColors: Story = {
             </div>
           ))}
           {dataVisTintColors.map(color => (
-            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+            <div key={color} className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
               <div className=" p-2" key={color}>
+                {/* NOTE: Below disable tailwind classname warning for string interpolation */}
+                {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
                 <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
@@ -449,8 +460,10 @@ export const DataVisualisationColors: Story = {
             </div>
           ))}
           {dataVisSolidColors.map(color => (
-            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+            <div key={color} className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
               <div className=" p-2" key={`${color}/30`}>
+                {/* NOTE: Below disable tailwind classname warning for string interpolation */}
+                {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color}/30 h-[80px]`} />
                 <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{`${color}/30`}</div>
diff --git a/packages/ui/src/stories/foundation/spacing.stories.tsx b/packages/ui/src/stories/foundation/spacing.stories.tsx
index 810690acc..387a8c59e 100644
--- a/packages/ui/src/stories/foundation/spacing.stories.tsx
+++ b/packages/ui/src/stories/foundation/spacing.stories.tsx
@@ -118,7 +118,7 @@ export const MarginScale = () => {
               <TableCell>
                 <div className="flex flex-wrap gap-1 align-middle">
                   {VARIATION_MARGIN_PADDING.map(v => (
-                    <Badge color="faint">{`.m${v}-${spacing.value}`}</Badge>
+                    <Badge key={v} color="faint">{`.m${v}-${spacing.value}`}</Badge>
                   ))}
                 </div>
               </TableCell>
@@ -161,7 +161,7 @@ export const PaddingScale = () => {
               <TableCell>
                 <div className="flex flex-wrap gap-1 align-middle">
                   {VARIATION_MARGIN_PADDING.map(v => (
-                    <Badge color="faint">{`.p${v}-${spacing.value}`}</Badge>
+                    <Badge key={v} color="faint">{`.p${v}-${spacing.value}`}</Badge>
                   ))}
                 </div>
               </TableCell>
diff --git a/packages/ui/src/tailwind/tailwind-plugin.ts b/packages/ui/src/tailwind/tailwind-plugin.ts
index 3b7570982..d8138bdac 100644
--- a/packages/ui/src/tailwind/tailwind-plugin.ts
+++ b/packages/ui/src/tailwind/tailwind-plugin.ts
@@ -197,7 +197,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
           },
         },
         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',
diff --git a/packages/ui/src/tailwind/utils/create-font-sizes.ts b/packages/ui/src/tailwind/utils/create-font-sizes.ts
index db27e7d05..0b820f212 100644
--- a/packages/ui/src/tailwind/utils/create-font-sizes.ts
+++ b/packages/ui/src/tailwind/utils/create-font-sizes.ts
@@ -1,15 +1,26 @@
 import { FONT_SIZES } from '../constants/typography.js';
 
+type FontSizeType = Record<
+  string,
+  | string
+  | [fontSize: string, lineHeight: string]
+  | [
+      fontSize: string,
+      configuration: Partial<{
+        fontWeight: string | number;
+        letterSpacing: string;
+        lineHeight: string;
+      }>,
+    ]
+>;
+
 export const createFontSizes = (fontTypes: string[]) => {
-  return fontTypes.reduce(
-    (acc, fontType) => {
-      return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
-        return {
-          ...acc2,
-          [`${fontType}-${fontSize}`]: value.fontSize,
-        };
-      }, acc);
-    },
-    {} as Record<string, any>,
-  );
+  return fontTypes.reduce((acc, fontType) => {
+    return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
+      return {
+        ...acc2,
+        [`${fontType}-${fontSize}`]: value.fontSize,
+      };
+    }, acc);
+  }, {} as FontSizeType);
 };
diff --git a/packages/ui/src/tailwind/utils/generate-font-components.ts b/packages/ui/src/tailwind/utils/generate-font-components.ts
index 151ab3382..786f8577b 100644
--- a/packages/ui/src/tailwind/utils/generate-font-components.ts
+++ b/packages/ui/src/tailwind/utils/generate-font-components.ts
@@ -1,25 +1,22 @@
-import { PluginAPI } from 'tailwindcss/types/config.js';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config.js';
 
 export const generateFontComponents = (
   typographySizes: Record<string, { fontSize: string; lineHeight: string }>,
   theme: PluginAPI['theme'],
 ) => {
-  return Object.entries(typographySizes).reduce(
-    (acc, [size, value]) => {
-      return {
-        ...acc,
-        [`.typography-body-${size}`]: {
-          fontSize: theme(`fontSize.body-${size}`),
-          lineHeight: theme(`lineHeight.${value.lineHeight}`),
-          fontFamily: theme(`fontFamily.sans`),
-        },
-        [`.typography-brand-${size}`]: {
-          fontSize: theme(`fontSize.brand-${size}`),
-          lineHeight: theme(`lineHeight.${value.lineHeight}`),
-          fontFamily: theme(`fontFamily.brand`),
-        },
-      };
-    },
-    {} as Record<string, any>,
-  );
+  return Object.entries(typographySizes).reduce((acc, [size, value]) => {
+    return {
+      ...acc,
+      [`.typography-body-${size}`]: {
+        fontSize: theme(`fontSize.body-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.sans`),
+      },
+      [`.typography-brand-${size}`]: {
+        fontSize: theme(`fontSize.brand-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.brand`),
+      },
+    };
+  }, {} as CSSRuleObject[]);
 };
diff --git a/packages/ui/src/tailwind/utils/generate-form-control.ts b/packages/ui/src/tailwind/utils/generate-form-control.ts
index 703d7010d..455b93416 100644
--- a/packages/ui/src/tailwind/utils/generate-form-control.ts
+++ b/packages/ui/src/tailwind/utils/generate-form-control.ts
@@ -1,19 +1,18 @@
+import { CSSRuleObject } from 'tailwindcss/types/config.js';
+
 export const generateFormControlComponents = (formControlProps: {
   base: string;
   disabled: string;
   sizes: Record<string, string>;
 }) => {
-  const sizes = Object.entries(formControlProps.sizes).reduce(
-    (acc, [size, value]) => {
-      return {
-        ...acc,
-        [`.form-control-${size}`]: {
-          [`@apply ${value}`]: {},
-        },
-      };
-    },
-    {} as Record<string, any>,
-  );
+  const sizes = Object.entries(formControlProps.sizes).reduce((acc, [size, value]) => {
+    return {
+      ...acc,
+      [`.form-control-${size}`]: {
+        [`@apply ${value}`]: {},
+      },
+    };
+  }, {} as CSSRuleObject);
   return {
     '.form-control': {
       [`@apply ${formControlProps.base}`]: {},