diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c23b51fe3f..7ba1c4e3ba 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -323,7 +323,7 @@ jobs:
           mv /tmp/docs/.buildx-cache-new /tmp/docs/.buildx-cache
 
   e2e:
-    timeout-minutes: 10
+    timeout-minutes: 20
     runs-on: ubuntu-latest
     needs: [typecheck, format]
     env:
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 0891e81e20..514a44b619 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -1,64 +1,216 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "ignorePatterns": [
+    "**/app.config.d.ts",
+    "**/package.config.d.ts",
+    "eslint.config.mjs",
+    "next.config.js",
+    "*.d.ts",
+    "svgo.config.mjs"
+  ],
   "categories": {
-    "correctness": "error",
-    "nursery": "off",
-    "pedantic": "error",
-    "perf": "error",
-    "restriction": "error",
-    "style": "error",
-    "suspicious": "error"
+    "correctness": "deny",
+    "style": "deny",
+    "suspicious": "deny",
+    "perf": "deny",
+    "pedantic": "deny",
+    "restriction": "deny",
+    "nursery": "off"
   },
   "plugins": [
     "import",
-    "eslint",
     "node",
-    "react-perf",
+    "oxc",
     "react",
     "typescript",
-    "unicorn"
+    "unicorn",
+    "jsx-a11y"
   ],
   "overrides": [
     {
-      "files": ["**/__stories__/**/*.{ts,tsx}", "**/__tests__/**/*.{ts,tsx}"],
+      "files": ["**/__stories__/**/*.{ts,tsx}", "**/__tests__/**/*.{ts,tsx}", ".storybook/**/*.{ts,tsx}"],
       "rules": {
-        "react/jsx-key": "off",
-        "no-console": "off",
-        "no-alert": "off"
+        "eslint/no-console": "off",
+        "eslint/no-alert": "off",
+        "import/no-anonymous-default-export": "off",
+        "import/no-unassigned-import": "off"
       }
     },
     {
-      "files": ["**/__tests__/**/*.{ts,tsx}", "setup.ts"],
-      "plugins": ["vitest"]
+      "files": [
+        "**/__tests__/**/*.{ts,tsx}",
+        "**/__mocks__/**/*.{ts,tsx}",
+        "**/*.test.{ts,tsx}",
+        "test-utils.tsx",
+        "setup.ts",
+        "vitest.setup.ts",
+        "**/vitest.setup.ts",
+        "*.config.ts"
+      ],
+      "plugins": ["import", "oxc", "vitest"],
+      "rules": {
+        "@typescript-eslint/consistent-type-imports": "off",
+        "import/no-namespace": "off",
+        "import/export": "off",
+        "import/no-anonymous-default-export": "off",
+        "import/no-unassigned-import": "off",
+        "jsx_a11y/label-has-associated-control": "off",
+        "vitest/prefer-lowercase-title": "error"
+      }
     }
   ],
   "rules": {
-    "@typescript-eslint/no-unused-expressions": "error",
-    "@typescript-eslint/ban-tslint-comment": "error",
-    "@typescript-eslint/consistent-indexed-object-style": "error",
+    "jsx_a11y/label-has-associated-control": "off",
+    "jsx_a11y/no-autofocus": "off",
+    "jsx_a11y/prefer-tag-over-role": "off",
+    "import/default": "error",
+    "import/export": "off",
+    "import/exports-last": "off",
+    "import/max-dependencies": "off",
+    "import/named": "error",
+    "import/no-amd": "error",
+    "import/consistent-type-specifier-style": "error",
+    "import/group-exports": "off",
+    "import/import-no-namespace": "off",
+    "import/namespace": "off",
+    "import/no-cycle": "error",
+    "import/no-default-export": "off",
+    "import/no-duplicates": "error",
+    "import/no-named-as-default-member": "error",
+    "import/no-named-as-default": "error",
+    "import/no-self-import": "error",
+    "import/no-unassigned-import": "error",
+    "import/no-unused-modules": "off",
+    "import/prefer-default-export": "off",
+    "import/no-namespace": "off",
+    "import/unambiguous": "error",
+    "@typescript-eslint/adjacent-overload-signatures": "error",
+    "@typescript-eslint/array-type": "error",
+    "@typescript-eslint/ban-ts-comment": "error",
+    "@typescript-eslint/ban-tslint-comment": "off",
+    "@typescript-eslint/ban-types": "error",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/consistent-type-exports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-duplicate-enum-values": "error",
+    "@typescript-eslint/no-empty-interface": "error",
     "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-magic-numbers": "off",
+    "@typescript-eslint/no-extra-non-null-assertion": "error",
+    "@typescript-eslint/no-misused-new": "error",
+    "@typescript-eslint/no-namespace": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-this-alias": "error",
+    "@typescript-eslint/no-unnecessary-type-constraint": "error",
+    "@typescript-eslint/no-unsafe-declaration-merging": "error",
+    "@typescript-eslint/no-var-requires": "error",
+    "@typescript-eslint/prefer-as-const": "error",
+    "@typescript/no-unsafe-member-access": "error",
     "@typescript-eslint/prefer-enum-initializers": "off",
+    "@typescript-eslint/prefer-for-of": "error",
     "@typescript-eslint/prefer-function-type": "off",
     "@typescript-eslint/prefer-literal-enum-member": "off",
+    "@typescript-eslint/prefer-ts-expect-error": "off",
+    "@typescript-eslint/triple-slash-reference": "error",
+    "eslint/yoda": "error",
+    "eslint/array-callback-return": "error",
+    "eslint/constructor-super": "error",
+    "eslint/default-case-last": "error",
     "eslint/default-param-last": "off",
+    "eslint/eqeqeq": "error",
+    "eslint/for-direction": "error",
+    "eslint/getter-return": "error",
+    "eslint/guard-for-in": "error",
+    "eslint/max-classes-per-file": "error",
     "eslint/max-lines": "off",
     "eslint/max-params": "off",
+    "eslint/no-array-constructor": "error",
+    "eslint/no-async-promise-executor": "error",
     "eslint/no-await-in-loop": "off",
+    "eslint/no-bitwise": "error",
+    "eslint/no-caller": "error",
+    "eslint/id-length": "off",
+    "eslint/no-case-declarations": "error",
+    "eslint/no-class-assign": "error",
+    "eslint/no-compare-neg-zero": "error",
+    "eslint/no-cond-assign": "error",
+    "eslint/no-console": "error",
+    "eslint/no-const-assign": "error",
+    "eslint/no-constant-binary-expression": "error",
+    "eslint/no-constant-condition": "error",
+    "eslint/no-continue": "error",
+    "eslint/no-control-regex": "error",
+    "eslint/no-debugger": "error",
+    "eslint/no-delete-var": "error",
+    "eslint/no-dupe-class-members": "error",
+    "eslint/no-dupe-else-if": "error",
+    "eslint/no-dupe-keys": "error",
+    "eslint/no-duplicate-case": "error",
     "eslint/no-duplicate-imports": "off",
+    "eslint/no-empty-character-class": "error",
     "eslint/no-empty-function": "off",
+    "eslint/no-empty-pattern": "error",
+    "eslint/no-empty-static-block": "error",
+    "eslint/no-empty": "error",
+    "eslint/no-eq-null": "error",
+    "eslint/no-eval": "error",
+    "eslint/no-ex-assign": "error",
+    "eslint/no-extra-boolean-cast": "error",
+    "eslint/no-fallthrough": "error",
+    "eslint/no-func-assign": "error",
+    "eslint/no-global-assign": "error",
+    "eslint/no-import-assign": "error",
+    "eslint/no-inner-declarations": "error",
+    "eslint/no-irregular-whitespace": "error",
+    "eslint/no-iterator": "error",
+    "eslint/no-loss-of-precision": "error",
     "eslint/no-magic-numbers": "off",
+    "eslint/no-mixed-operators": "error",
+    "eslint/no-new-native-nonconstructor": "error",
+    "eslint/no-new-symbol": "error",
+    "eslint/no-new-wrappers": "error",
+    "eslint/no-nonoctal-decimal-escape": "error",
+    "eslint/no-obj-calls": "error",
+    "eslint/no-proto": "error",
+    "eslint/no-prototype-builtins": "error",
+    "eslint/no-redeclare": "error",
+    "eslint/no-regex-spaces": "error",
+    "eslint/no-return-await": "error",
+    "eslint/no-script-url": "error",
+    "eslint/no-self-assign": "error",
+    "eslint/no-self-compare": "error",
+    "eslint/no-setter-return": "error",
+    "eslint/no-shadow-restricted-names": "error",
+    "eslint/no-sparse-arrays": "error",
+    "eslint/no-template-curly-in-string": "error",
     "eslint/no-ternary": "off",
+    "eslint/no-this-before-super": "error",
+    "eslint/no-undef": "off",
     "eslint/no-undefined": "off",
+    "eslint/no-unsafe-finally": "error",
+    "eslint/no-unsafe-negation": "error",
+    "eslint/no-unsafe-optional-chaining": "error",
+    "eslint/no-unused-labels": "error",
+    "eslint/no-unused-private-class-members": "error",
     "eslint/sort-keys": "off",
+    "eslint/react-in-jsx-scope": "off",
     "eslint/no-unused-vars": [
       "error",
       {
         "ignoreRestSiblings": true
       }
     ],
+    "eslint/no-useless-catch": "error",
+    "eslint/no-useless-escape": "error",
+    "eslint/no-useless-rename": "error",
+    "eslint/no-var": "error",
+    "eslint/no-void": "error",
+    "eslint/no-with": "error",
+    "eslint/radix": "error",
     "eslint/require-await": "off",
+    "eslint/require-yield": "error",
     "eslint/sort-imports": [
       "off",
       {
@@ -66,69 +218,146 @@
         "memberSyntaxSortOrder": ["single", "multiple", "all", "none"]
       }
     ],
-    "eslint/yoda": "error",
+    "eslint/unicode-bom": "error",
+    "eslint/use-isnan": "error",
+    "eslint/valid-typeof": "error",
+    "eslint/init-declarations": "off",
+    "eslint/func-style": "off",
     "eslint/max-lines-per-function": "off",
     "eslint/max-nested-callbacks": "off",
     "eslint/max-depth": "off",
-    "eslint/init-declarations": "off",
-    "eslint/curly": "off",
-
-    "import/no-namespace": "off",
-    "import/max-dependencies": "off",
-    "import/namespace": "off",
-    "import/no-default-export": "off",
-    "import/no-duplicates": "off",
-    "import/unambiguous": "off",
-    "import/exports-last": "off",
-    "import/no-anonymous-default-export": "off",
-    "import/group-exports": "off",
+    "oxc/bad-bitwise-operator": "error",
+    "oxc/no-accumulating-spread": "off",
+    "oxc/no-async-await": "off",
+    "oxc/no-barrel-file": "off",
+    "oxc/no-const-enum": "error",
+    "oxc/no-optional-chaining": "off",
+    "oxc/no-rest-spread-properties": "off",
     "react-perf/jsx-no-jsx-as-prop": "off",
     "react-perf/jsx-no-new-array-as-prop": "off",
     "react-perf/jsx-no-new-function-as-prop": "off",
     "react-perf/jsx-no-new-object-as-prop": "off",
-    "react/jsx-no-useless-fragment": "off",
-    "react/iframe-missing-sandbox": "error",
-    "react/jsx-no-target-blank": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/no-array-index-key": "off",
+    "react_perf/jsx-no-jsx-as-prop": "error",
+    "react_perf/jsx-no-new-array-as-prop": "error",
+    "react_perf/jsx-no-new-function-as-props": "error",
+    "react_perf/jsx-no-new-object-as-prop": "error",
+    "react/button-has-type": "error",
+    "react/exhaustive-deps": "error",
     "react/jsx-filename-extension": [
       "error",
-      { "extensions": [".jsx", ".tsx"] }
+      {
+        "extensions": [".jsx", ".tsx"]
+      }
     ],
+    "react/iframe-missing-sandbox": "error",
+    "react/jsx-key": "error",
+    "react/jsx-no-comment-text-nodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "off",
+    "react/jsx-no-undef": "error",
+    "react/jsx-no-useless-fragment": "off",
+    "react/no-children-prop": "error",
+    "react/no-dangerously-set-inner-html": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-set-state": "off",
+    "react/no-string-refs": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unknown-property": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/require-render-return": "error",
     "react/no-danger": "off",
+    "unicorn/no-instanceof-builtins": "error",
+    "unicorn/prefer-array-index-of": "off",
+    "unicorn/prefer-array-find": "off",
+    "unicorn/no-for-loop": "off",
+    "unicorn/prefer-object-from-entries": "off",
+    "unicorn/prefer-global-this": "off",
+    "unicorn/catch-error-name": "error",
+    "unicorn/empty-brace-spaces": "error",
     "unicorn/error-message": "off",
+    "unicorn/escape-case": "error",
+    "unicorn/explicit-length-check": "error",
     "unicorn/filename-case": "off",
+    "unicorn/new-for-builtins": "error",
+    "unicorn/no-abusive-eslint-disable": "error",
+    "unicorn/no-anonymous-default-export": "off",
     "unicorn/no-array-for-each": "off",
     "unicorn/no-array-reduce": "off",
     "unicorn/no-await-expression-member": "off",
     "unicorn/no-await-in-promise-methods": "off",
-    "unicorn/no-lonely-if": "off",
     "unicorn/prefer-set-has": "off",
+    "unicorn/no-console-spaces": "error",
+    "unicorn/no-document-cookie": "off",
+    "unicorn/no-empty-file": "error",
+    "unicorn/no-hex-escape": "error",
+    "unicorn/no-instanceof-array": "error",
     "unicorn/no-invalid-remove-event-listener": "off",
+    "unicorn/no-lonely-if": "error",
+    "unicorn/no-magic-array-flat-depth": "off",
     "unicorn/no-negated-condition": "off",
+    "unicorn/no-nested-ternary": "error",
     "unicorn/no-new-array": "off",
+    "unicorn/no-new-buffer": "error",
     "unicorn/no-null": "off",
     "unicorn/no-object-as-default-parameter": "off",
     "unicorn/no-process-exit": "off",
     "unicorn/no-single-promise-in-promise-methods": "off",
+    "unicorn/no-static-only-class": "error",
+    "unicorn/no-thenable": "error",
+    "unicorn/no-this-assignment": "error",
+    "unicorn/no-typeof-undefined": "error",
+    "unicorn/no-unnecessary-await": "error",
+    "unicorn/no-unreadable-array-destructuring": "error",
+    "unicorn/no-unreadable-iife": "error",
+    "unicorn/no-useless-fallback-in-spread": "error",
+    "unicorn/no-useless-length-check": "error",
     "unicorn/no-useless-promise-resolve-reject": "off",
+    "unicorn/no-useless-spread": "error",
+    "unicorn/no-useless-switch-case": "error",
     "unicorn/no-useless-undefined": "off",
     "unicorn/no-zero-fractions": "off",
     "unicorn/number-literal-case": "off",
     "unicorn/numeric-separators-style": "off",
     "unicorn/prefer-add-event-listener": "off",
+    "unicorn/prefer-array-flat": "error",
+    "unicorn/prefer-array-flat-map": "error",
     "unicorn/prefer-array-some": "off",
     "unicorn/prefer-blob-reading-methods": "off",
     "unicorn/prefer-code-point": "off",
+    "unicorn/prefer-date-now": "error",
     "unicorn/prefer-dom-node-append": "off",
+    "unicorn/prefer-dom-node-dataset": "error",
     "unicorn/prefer-dom-node-remove": "off",
-    "unicorn/prefer-object-from-entries": "off",
+    "unicorn/prefer-dom-node-text-content": "error",
+    "unicorn/prefer-event-target": "error",
+    "unicorn/prefer-includes": "error",
     "unicorn/prefer-logical-operator-over-ternary": "off",
+    "unicorn/prefer-math-trunc": "error",
+    "unicorn/prefer-modern-dom-apis": "error",
+    "unicorn/prefer-modern-math-apis": "error",
+    "unicorn/prefer-native-coercion-functions": "error",
     "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-number-properties": "error",
+    "unicorn/prefer-optional-catch-binding": "error",
+    "unicorn/prefer-prototype-methods": "error",
     "unicorn/prefer-query-selector": "off",
+    "unicorn/prefer-reflect-apply": "error",
+    "unicorn/prefer-regexp-test": "error",
+    "unicorn/prefer-set-size": "error",
+    "unicorn/prefer-spread": "error",
     "unicorn/prefer-string-replace-all": "off",
     "unicorn/prefer-string-slice": "off",
-    "unicorn/prefer-global-this": "off"
+    "unicorn/prefer-string-starts-ends-with": "error",
+    "unicorn/prefer-string-trim-start-end": "error",
+    "unicorn/prefer-type-error": "error",
+    "unicorn/require-array-join-separator": "error",
+    "unicorn/require-number-to-fixed-digits-argument": "error",
+    "unicorn/switch-case-braces": "error",
+    "unicorn/text-encoding-identifier-case": "error",
+    "unicorn/throw-new-error": "error"
   },
   "settings": {
     "jsx-a11y": {
diff --git a/.storybook/components/DocsContainer.tsx b/.storybook/components/DocsContainer.tsx
index 73e3649613..71339cf53e 100644
--- a/.storybook/components/DocsContainer.tsx
+++ b/.storybook/components/DocsContainer.tsx
@@ -1,11 +1,13 @@
 import { Global, ThemeProvider } from '@emotion/react'
+import type {
+  DocsContainerProps as BaseContainerProps} from '@storybook/addon-docs/blocks';
 import {
   DocsContainer as BaseContainer,
-  DocsContainerProps as BaseContainerProps,
   Unstyled,
 } from '@storybook/addon-docs/blocks'
 import { consoleLightTheme as lightTheme } from '@ultraviolet/themes'
-import { ReactNode, cloneElement, isValidElement, useState } from 'react'
+import type { ReactNode } from 'react'
+import { cloneElement, isValidElement, useState } from 'react'
 import { globalStyles } from './globalStyle'
 import '@ultraviolet/fonts/fonts.css'
 import { GlobalAlert } from '@ultraviolet/ui'
diff --git a/examples/next/package.json b/examples/next/package.json
index 8d139a2b93..24ca987dd7 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -10,7 +10,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build:example": "next build",
+    "build": "next build",
     "export": "next export",
     "start": "next start"
   },
diff --git a/examples/next/src/components/Link.tsx b/examples/next/src/components/Link.tsx
index e8ea22da64..10cf5a9ab7 100644
--- a/examples/next/src/components/Link.tsx
+++ b/examples/next/src/components/Link.tsx
@@ -20,26 +20,19 @@ export const Link = forwardRef<HTMLAnchorElement, LinkPropsType>(
       ...uvprops
     },
     ref,
-  ) => {
-    return (
-      <NextLink
-        href={href}
-        legacyBehavior
-        locale={locale}
-        passHref
-        replace={replace}
-        scroll={scroll}
-        shallow={shallow}
-      >
-        <UVLink
-          href={href}
-          iconPosition={iconPosition}
-          ref={ref}
-          {...uvprops}
-        />
-      </NextLink>
-    )
-  },
+  ) => (
+    <NextLink
+      href={href}
+      legacyBehavior
+      locale={locale}
+      passHref
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+    >
+      <UVLink href={href} iconPosition={iconPosition} ref={ref} {...uvprops} />
+    </NextLink>
+  ),
 )
 
 export default Link
diff --git a/examples/next/src/pages/login/index.tsx b/examples/next/src/pages/login/index.tsx
index 0253fed5c9..0c967cbe7d 100644
--- a/examples/next/src/pages/login/index.tsx
+++ b/examples/next/src/pages/login/index.tsx
@@ -14,12 +14,14 @@ const StyledPage = styled(Stack)`
 const Content = (props: { tab: string }) => {
   let tabLoaded = undefined
   switch (props.tab) {
-    case 'login':
+    case 'login': {
       tabLoaded = <LogIn />
       break
+    }
 
-    default:
+    default: {
       tabLoaded = <SignUp />
+    }
   }
   return tabLoaded
 }
diff --git a/examples/next/src/pages/login/login.tsx b/examples/next/src/pages/login/login.tsx
index 620b531143..84d7faf31d 100644
--- a/examples/next/src/pages/login/login.tsx
+++ b/examples/next/src/pages/login/login.tsx
@@ -4,7 +4,7 @@ import {
   CheckboxField,
   Form,
   Submit,
-  TextInputFieldV2,
+  TextInputField,
   useForm,
   useWatch,
 } from '@ultraviolet/form'
@@ -25,7 +25,7 @@ const StyledLoginContainer = styled(Stack)`
   padding: ${({ theme }) => theme.space['4']};
 `
 
-const StyledInput = styled(TextInputFieldV2)`
+const StyledInput = styled(TextInputField)`
   padding: ${({ theme }) => theme.space['1.5']}
     ${({ theme }) => theme.space['5']};
   width: 100%;
diff --git a/examples/next/src/pages/login/signup.tsx b/examples/next/src/pages/login/signup.tsx
index cddfc24a0d..0365ae7394 100644
--- a/examples/next/src/pages/login/signup.tsx
+++ b/examples/next/src/pages/login/signup.tsx
@@ -4,7 +4,7 @@ import {
   Form,
   RadioGroupField,
   Submit,
-  TextInputFieldV2,
+  TextInputField,
   useForm,
   useWatch,
 } from '@ultraviolet/form'
@@ -28,7 +28,7 @@ const StyledSignUpContainer = styled(Stack)`
   padding: ${({ theme }) => theme.space['4']};
 `
 
-const StyledInput = styled(TextInputFieldV2)`
+const StyledInput = styled(TextInputField)`
   padding: ${({ theme }) => theme.space['1.5']}
     ${({ theme }) => theme.space['0']};
   width: 100%;
@@ -100,8 +100,8 @@ const SignUp = () => {
           </Text>
           <Stack width="100%">
             <RadioGroupField direction="row" name="gender">
-              <RadioGroupField.Radio label="Mr" name="mr" value="mr" />
-              <RadioGroupField.Radio label="Mrs" name="mrs" value="mrs" />
+              <RadioGroupField.Radio label="Mr" value="mr" />
+              <RadioGroupField.Radio label="Mrs" value="mrs" />
             </RadioGroupField>
             <Stack direction="row" gap={3}>
               <StyledInput
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index f18d8c5064..de64bd30a5 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -6,24 +6,22 @@ export const App = () => {
   const [count, setCount] = useState(0)
 
   return (
-    <>
-      <Row gap="3" templateColumns="9fr 3fr">
-        <Card>
-          <Text as="h1" variant="headingSmall">
-            Classic
-          </Text>
-          <Stack direction="row" gap="2">
-            <Button onClick={() => setCount(prevCount => prevCount + 1)}>
-              <PlusIcon />
-            </Button>
-            <Button onClick={() => setCount(0)}>Reset</Button>
-          </Stack>
-          <Text as="p" variant="body">
-            Count:{count}
-          </Text>
-        </Card>
-        <Alert sentiment="info">Alert</Alert>
-      </Row>
-    </>
+    <Row gap="3" templateColumns="9fr 3fr">
+      <Card>
+        <Text as="h1" variant="headingSmall">
+          Classic
+        </Text>
+        <Stack direction="row" gap="2">
+          <Button onClick={() => setCount(prevCount => prevCount + 1)}>
+            <PlusIcon />
+          </Button>
+          <Button onClick={() => setCount(0)}>Reset</Button>
+        </Stack>
+        <Text as="p" variant="body">
+          Count:{count}
+        </Text>
+      </Card>
+      <Alert sentiment="info">Alert</Alert>
+    </Row>
   )
 }
diff --git a/package.json b/package.json
index d9c3347c53..0307966daf 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "emoji-toolkit": "9.0.1",
     "esbuild-plugin-browserslist": "1.0.1",
     "eslint": "9.31.0",
-    "eslint-plugin-oxlint": "0.18.1",
+    "eslint-plugin-oxlint": "1.6.0",
     "eslint-plugin-storybook": "9.0.18",
     "eslint-plugin-testing-library": "7.5.3",
     "expect": "30.0.5",
@@ -160,7 +160,7 @@
     "identity-obj-proxy": "3.0.0",
     "jest-axe": "10.0.0",
     "lint-staged": "16.1.2",
-    "oxlint": "0.18.1",
+    "oxlint": "1.6.0",
     "postcss": "8.5.6",
     "publint": "0.3.12",
     "react": "19.1.1",
diff --git a/packages/form/src/components/DateInputField/index.tsx b/packages/form/src/components/DateInputField/index.tsx
index 0300ff2dde..7f973dc436 100644
--- a/packages/form/src/components/DateInputField/index.tsx
+++ b/packages/form/src/components/DateInputField/index.tsx
@@ -74,7 +74,9 @@ export const DateInputField = <
       format={
         format ||
         (value => {
-          if (!value) return ''
+          if (!value) {
+            return ''
+          }
           const date = parseDate(value)
 
           return showMonthYearPicker
diff --git a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap
index 12f9fe2ba8..74632fecfa 100644
--- a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -510,8 +510,8 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
         class="emotion-2 emotion-3"
       >
         <div
-          aria-controls="«rh»"
-          aria-describedby="«rh»"
+          aria-controls="«rl»"
+          aria-describedby="«rl»"
           class="emotion-4 emotion-5"
           data-container-full-width="true"
           tabindex="-1"
@@ -520,8 +520,8 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«rl»"
               aria-expanded="true"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="false"
@@ -530,7 +530,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id="«rg»"
+              id="«rk»"
               role="combobox"
               tabindex="0"
             >
@@ -560,7 +560,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
             class="emotion-17 emotion-18 emotion-19"
             data-animated="false"
             data-has-arrow="false"
-            id="«rh»"
+            id="«rl»"
             role="dialog"
             style="opacity: 1;"
           >
@@ -1098,8 +1098,8 @@ exports[`SelectInputField > should render correctly 1`] = `
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«r1»"
               aria-expanded="false"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="false"
@@ -1352,8 +1352,8 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
         class="emotion-2 emotion-3"
       >
         <div
-          aria-controls="«r5»"
-          aria-describedby="«r5»"
+          aria-controls="«r6»"
+          aria-describedby="«r6»"
           class="emotion-4 emotion-5"
           data-container-full-width="true"
           tabindex="-1"
@@ -1362,8 +1362,8 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«r6»"
               aria-expanded="false"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="true"
@@ -1372,7 +1372,7 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id="«r4»"
+              id="«r5»"
               role="combobox"
               tabindex="0"
             >
@@ -1616,8 +1616,8 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
         class="emotion-2 emotion-3"
       >
         <div
-          aria-controls="«rd»"
-          aria-describedby="«rd»"
+          aria-controls="«rg»"
+          aria-describedby="«rg»"
           class="emotion-4 emotion-5"
           data-container-full-width="true"
           tabindex="-1"
@@ -1626,8 +1626,8 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«rg»"
               aria-expanded="false"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="false"
@@ -1636,7 +1636,7 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id="«rc»"
+              id="«rf»"
               role="combobox"
               tabindex="0"
             >
@@ -1880,8 +1880,8 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
         class="emotion-2 emotion-3"
       >
         <div
-          aria-controls="«r9»"
-          aria-describedby="«r9»"
+          aria-controls="«rb»"
+          aria-describedby="«rb»"
           class="emotion-4 emotion-5"
           data-container-full-width="true"
           tabindex="-1"
@@ -1890,8 +1890,8 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«rb»"
               aria-expanded="false"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="false"
@@ -1900,7 +1900,7 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id="«r8»"
+              id="«ra»"
               role="combobox"
               tabindex="0"
             >
@@ -2143,8 +2143,8 @@ exports[`SelectInputField > should trigger events 1`] = `
         class="emotion-2 emotion-3"
       >
         <div
-          aria-controls="«r24»"
-          aria-describedby="«r24»"
+          aria-controls="«r29»"
+          aria-describedby="«r29»"
           class="emotion-4 emotion-5"
           data-container-full-width="true"
           tabindex="-1"
@@ -2153,8 +2153,8 @@ exports[`SelectInputField > should trigger events 1`] = `
             class="emotion-6 emotion-7"
           >
             <div
+              aria-controls="«r29»"
               aria-expanded="false"
-              aria-haspopup="listbox"
               aria-label=""
               class="emotion-8 emotion-9"
               data-disabled="false"
@@ -2163,7 +2163,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id="«r23»"
+              id="«r28»"
               role="combobox"
               tabindex="0"
             >
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
index 48798fc4c5..d0645c5959 100644
--- a/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -884,8 +884,8 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                           class="emotion-47 emotion-3"
                         >
                           <div
+                            aria-controls="«r7»"
                             aria-expanded="false"
-                            aria-haspopup="listbox"
                             class="emotion-49 emotion-50"
                             data-disabled="false"
                             data-dropdownvisible="false"
@@ -949,7 +949,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       class="emotion-21 emotion-22"
-                      id="«ra»"
+                      id="«rb»"
                       tabindex="-1"
                       type="radio"
                       value="debian"
@@ -1004,7 +1004,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       >
                         <label
                           class="emotion-8 emotion-85 emotion-10"
-                          for="«ra»"
+                          for="«rb»"
                         >
                           Debian
                         </label>
@@ -1015,8 +1015,8 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       class="emotion-42 emotion-43 emotion-44"
                     >
                       <div
-                        aria-controls="«rg»"
-                        aria-describedby="«rg»"
+                        aria-controls="«rh»"
+                        aria-describedby="«rh»"
                         class="emotion-45 emotion-46"
                         data-container-full-width="true"
                         tabindex="-1"
@@ -1026,8 +1026,8 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                           class="emotion-47 emotion-3"
                         >
                           <div
+                            aria-controls="«rh»"
                             aria-expanded="false"
-                            aria-haspopup="listbox"
                             class="emotion-49 emotion-50"
                             data-disabled="false"
                             data-dropdownvisible="false"
@@ -1035,7 +1035,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                             data-size="medium"
                             data-state="neutral"
                             data-testid="select-input-selectable-card-option"
-                            id="«rf»"
+                            id="«rg»"
                             role="combobox"
                             tabindex="0"
                           >
@@ -1091,7 +1091,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       class="emotion-21 emotion-22"
-                      id="«rj»"
+                      id="«rl»"
                       tabindex="-1"
                       type="radio"
                       value="centos"
@@ -1146,7 +1146,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       >
                         <label
                           class="emotion-8 emotion-85 emotion-10"
-                          for="«rj»"
+                          for="«rl»"
                         >
                           CentOS
                         </label>
@@ -1157,8 +1157,8 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                       class="emotion-42 emotion-43 emotion-44"
                     >
                       <div
-                        aria-controls="«rp»"
-                        aria-describedby="«rp»"
+                        aria-controls="«rr»"
+                        aria-describedby="«rr»"
                         class="emotion-45 emotion-46"
                         data-container-full-width="true"
                         tabindex="-1"
@@ -1168,8 +1168,8 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                           class="emotion-47 emotion-3"
                         >
                           <div
+                            aria-controls="«rr»"
                             aria-expanded="false"
-                            aria-haspopup="listbox"
                             class="emotion-49 emotion-50"
                             data-disabled="false"
                             data-dropdownvisible="false"
@@ -1177,7 +1177,7 @@ exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
                             data-size="medium"
                             data-state="neutral"
                             data-testid="select-input-selectable-card-option"
-                            id="«ro»"
+                            id="«rq»"
                             role="combobox"
                             tabindex="0"
                           >
diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
index c13a0d32d7..ec7994ee2a 100644
--- a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -547,7 +547,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
         >
           <label
             class="emotion-6 emotion-7 emotion-8"
-            for="«r6»"
+            for="«r7»"
           >
             Test
           </label>
@@ -569,7 +569,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
               class="emotion-16 emotion-17"
               data-size="large"
               data-testid="unit-input"
-              id="«r6»"
+              id="«r7»"
               max="9007199254740991"
               min="0"
               name="test-value"
@@ -585,8 +585,8 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
             class="emotion-18 emotion-19 emotion-20"
           >
             <div
-              aria-controls="«ra»"
-              aria-describedby="«ra»"
+              aria-controls="«rb»"
+              aria-describedby="«rb»"
               class="emotion-21 emotion-22"
               data-container-full-width="true"
               tabindex="-1"
@@ -595,8 +595,8 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
                 class="emotion-2 emotion-3"
               >
                 <div
+                  aria-controls="«rb»"
                   aria-expanded="false"
-                  aria-haspopup="listbox"
                   class="emotion-25 emotion-26"
                   data-disabled="false"
                   data-dropdownvisible="false"
@@ -1136,8 +1136,8 @@ exports[`UnitInputField > should render correctly 1`] = `
                 class="emotion-2 emotion-3"
               >
                 <div
+                  aria-controls="«r3»"
                   aria-expanded="false"
-                  aria-haspopup="listbox"
                   class="emotion-21 emotion-22"
                   data-disabled="false"
                   data-dropdownvisible="false"
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 49fe89f7a2..cffdf23528 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -11,6 +11,7 @@ export {
   useWatch,
 } from 'react-hook-form'
 export * from './components'
+
 export { Form } from './components'
 export { useOnFieldChange } from './hooks'
 export { ErrorProvider, useErrors } from './providers/ErrorContext'
diff --git a/packages/form/src/validators/index.ts b/packages/form/src/validators/index.ts
index aa6b9cb256..311938ca80 100644
--- a/packages/form/src/validators/index.ts
+++ b/packages/form/src/validators/index.ts
@@ -1,7 +1,9 @@
 import { maxDateValidator as maxDate } from './maxDate'
 import { minDateValidator as minDate } from './minDate'
 
-export default {
+const validators = {
   maxDate,
   minDate,
 }
+
+export default validators
diff --git a/packages/form/src/validators/isInteger.ts b/packages/form/src/validators/isInteger.ts
index 2df900e8a5..9843df772b 100644
--- a/packages/form/src/validators/isInteger.ts
+++ b/packages/form/src/validators/isInteger.ts
@@ -1,5 +1,7 @@
 export const isInteger = (step?: number | string) => (value: number) => {
-  if (value === undefined || step === undefined) return true
+  if (value === undefined || step === undefined) {
+    return true
+  }
   if (Number.isInteger(step)) {
     return Number.isInteger(value) && Number.isInteger(value)
   }
diff --git a/packages/icons/src/components/ProductIcon/__stories__/Sizes.stories.tsx b/packages/icons/src/components/ProductIcon/__stories__/Sizes.stories.tsx
index fa8843cf7d..c2a2087bfb 100644
--- a/packages/icons/src/components/ProductIcon/__stories__/Sizes.stories.tsx
+++ b/packages/icons/src/components/ProductIcon/__stories__/Sizes.stories.tsx
@@ -6,7 +6,7 @@ import { SIZES } from '../Icon'
 export const Sizes: StoryFn<typeof ConsoleProductIcon> = props => (
   <Stack gap={1}>
     {Object.keys(SIZES).map(size => (
-      <Stack alignItems="center" direction="row" gap={1}>
+      <Stack alignItems="center" direction="row" gap={1} key={size}>
         <ConsoleProductIcon {...props} size={size as keyof typeof SIZES} />
         <Text as="span" variant="bodyStrong">
           {size}
diff --git a/packages/icons/src/components/ProductIcon/__stories__/Variants.stories.tsx b/packages/icons/src/components/ProductIcon/__stories__/Variants.stories.tsx
index 0206aa0d44..62a624bc00 100644
--- a/packages/icons/src/components/ProductIcon/__stories__/Variants.stories.tsx
+++ b/packages/icons/src/components/ProductIcon/__stories__/Variants.stories.tsx
@@ -5,7 +5,7 @@ import { ConsoleProductIcon } from '../__generated__'
 export const Variants: StoryFn<typeof ConsoleProductIcon> = props => (
   <Stack gap={1}>
     {(['primary', 'original', 'danger', 'warning'] as const).map(variant => (
-      <Stack alignItems="center" direction="row" gap={1}>
+      <Stack alignItems="center" direction="row" gap={1} key={variant}>
         <ConsoleProductIcon {...props} size="large" variant={variant} />
         <Text as="span" variant="bodyStrong">
           {variant}
diff --git a/packages/illustrations/src/__stories__/List.tsx b/packages/illustrations/src/__stories__/List.tsx
index ebd1532da5..b311359bbe 100644
--- a/packages/illustrations/src/__stories__/List.tsx
+++ b/packages/illustrations/src/__stories__/List.tsx
@@ -85,7 +85,13 @@ const SubListElement = ({
           ]
 
           return (
-            <Card alignItems="center" direction="row" flex={1} gap={2}>
+            <Card
+              alignItems="center"
+              direction="row"
+              flex={1}
+              gap={2}
+              key={productImg}
+            >
               {category === 'products' ? (
                 <StyledImageProduct
                   alt={productName}
@@ -166,10 +172,12 @@ export const List = () => {
       </Button>
       <Stack gap={1}>
         {Object.keys(assets.default).map(category => {
-          if (category === 'components') return null
+          if (category === 'components') {
+            return null
+          }
 
           return (
-            <>
+            <div key={category}>
               <StyledButton
                 onClick={() => {
                   const newExpandedStates = { ...expandedStates }
@@ -188,6 +196,7 @@ export const List = () => {
                       <SubListElement
                         category={category}
                         isExpanded={expandedStates[productName]}
+                        key={`${category}-${productName}`}
                         productName={productName}
                         setIsExpanded={() => {
                           // Toggle the expanded state for a specific element
@@ -201,7 +210,7 @@ export const List = () => {
                   )}
                 </Stack>
               </Expandable>
-            </>
+            </div>
           )
         })}
       </Stack>
diff --git a/packages/illustrations/src/index.ts b/packages/illustrations/src/index.ts
index 86592ef8cd..6f908d5268 100644
--- a/packages/illustrations/src/index.ts
+++ b/packages/illustrations/src/index.ts
@@ -2,8 +2,10 @@ import * as products from './assets/products'
 import * as various from './assets/various'
 import * as components from './components'
 
-export default {
+const illustration = {
   components,
   products,
   various,
 }
+
+export default illustration
diff --git a/packages/plus/src/components/CodeEditor/CodeEditor.tsx b/packages/plus/src/components/CodeEditor/CodeEditor.tsx
index 56918a1bd1..9c6732d601 100644
--- a/packages/plus/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/plus/src/components/CodeEditor/CodeEditor.tsx
@@ -165,7 +165,9 @@ export const CodeEditor = ({
         onBlur={onBlur}
         onChange={onChange}
         onUpdate={() => {
-          if (disabled) document.getSelection()?.empty()
+          if (disabled) {
+            document.getSelection()?.empty()
+          }
         }}
         readOnly={readOnly || disabled}
         theme={material}
diff --git a/packages/plus/src/components/Conversation/__stories__/Playground.stories.tsx b/packages/plus/src/components/Conversation/__stories__/Playground.stories.tsx
index d5b80b3f87..0214a9d793 100644
--- a/packages/plus/src/components/Conversation/__stories__/Playground.stories.tsx
+++ b/packages/plus/src/components/Conversation/__stories__/Playground.stories.tsx
@@ -6,7 +6,7 @@ export const Playground = Template.bind({})
 
 Playground.args = {
   children: [
-    <>
+    <div key="conversation">
       <Conversation.Date>2022-03-02</Conversation.Date>
       <Conversation.Message
         align="right"
@@ -39,6 +39,6 @@ Playground.args = {
         <Conversation.Tag>few seconds ago</Conversation.Tag>
         sent
       </Conversation.MessageInfos>
-    </>,
+    </div>,
   ],
 }
diff --git a/packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx
index 21022cf390..76280f7669 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx
@@ -6,15 +6,15 @@ export const Design = Template.bind({})
 
 Design.args = {
   children: [
-    <EstimateCost.Region image={frFlag} label="PAR" />,
-    <EstimateCost.Item label="Server" noBorder price={0.01} />,
-    <EstimateCost.Item label="CPU" noBorder noPrice tabulation={3}>
+    <EstimateCost.Region image={frFlag} key={frFlag} label="PAR" />,
+    <EstimateCost.Item key="Server" label="Server" noBorder price={0.01} />,
+    <EstimateCost.Item key="CPU" label="CPU" noBorder noPrice tabulation={3}>
       <EstimateCost.Regular>4 Cores</EstimateCost.Regular>
     </EstimateCost.Item>,
-    <EstimateCost.Item label="RAM" noBorder noPrice tabulation={3}>
+    <EstimateCost.Item key="RAM" label="RAM" noBorder noPrice tabulation={3}>
       <EstimateCost.Regular>8 GB</EstimateCost.Regular>
     </EstimateCost.Item>,
-    <EstimateCost.Item label="SSD" noBorder noPrice tabulation={3}>
+    <EstimateCost.Item key="SSD" label="SSD" noBorder noPrice tabulation={3}>
       <EstimateCost.Regular>50 GB</EstimateCost.Regular>
     </EstimateCost.Item>,
   ],
diff --git a/packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx
index 98eb44edf2..3bb4fcbc04 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx
@@ -5,10 +5,22 @@ export const GlobalDiscount = Template.bind({})
 
 GlobalDiscount.args = {
   children: [
-    <EstimateCost.Item amount={100} label="Storage" price={0.001} unit="GB">
+    <EstimateCost.Item
+      amount={100}
+      key="Storage"
+      label="Storage"
+      price={0.001}
+      unit="GB"
+    >
       <EstimateCost.Unit unit="GB" />
     </EstimateCost.Item>,
-    <EstimateCost.Item amount={100} label="Screen pixels" price={1} unit="Px">
+    <EstimateCost.Item
+      amount={100}
+      key="Screen pixels"
+      label="Screen pixels"
+      price={1}
+      unit="Px"
+    >
       <EstimateCost.Unit />
     </EstimateCost.Item>,
   ],
diff --git a/packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx
index b713cd7167..8b53b261de 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx
@@ -6,6 +6,7 @@ export const Item = Template.bind({})
 Item.args = {
   children: [
     <EstimateCost.Item
+      key="My server"
       label="My server"
       price={0.017}
       subLabel="Here is subLabel text"
@@ -13,7 +14,7 @@ Item.args = {
       <EstimateCost.Strong>Powerful</EstimateCost.Strong>
       <EstimateCost.Regular>100 Cores</EstimateCost.Regular>
     </EstimateCost.Item>,
-    <EstimateCost.Item label="Some storage" price={0.001}>
+    <EstimateCost.Item key="Some storage" label="Some storage" price={0.001}>
       <EstimateCost.Strong>100 GB</EstimateCost.Strong>
     </EstimateCost.Item>,
   ],
diff --git a/packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx
index 0d4cf11a23..8ad66d972a 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx
@@ -5,12 +5,19 @@ export const LocalDiscount = Template.bind({})
 
 LocalDiscount.args = {
   children: [
-    <EstimateCost.Item amount={100} label="Storage" price={0.001} unit="GB">
+    <EstimateCost.Item
+      amount={100}
+      key="Storage"
+      label="Storage"
+      price={0.001}
+      unit="GB"
+    >
       <EstimateCost.Unit unit="GB" />
     </EstimateCost.Item>,
     <EstimateCost.Item
       amount={100}
       discount={0.5}
+      key="Screen pixels"
       label="Screen pixels"
       price={1}
       subLabel="This item is 50% discount"
diff --git a/packages/plus/src/components/EstimateCost/__stories__/NegativeValues.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/NegativeValues.stories.tsx
index 0e3243c567..bed0294797 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/NegativeValues.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/NegativeValues.stories.tsx
@@ -9,6 +9,7 @@ export const NegativeValues = Template.bind({})
 NegativeValues.args = {
   children: [
     <EstimateCost.Item
+      key="My Server"
       label="My server"
       monthlyPrice={100}
       subLabel="Here is subLabel text"
@@ -16,10 +17,14 @@ NegativeValues.args = {
       <EstimateCost.Strong>Powerful</EstimateCost.Strong>
       <EstimateCost.Regular>100 Cores</EstimateCost.Regular>
     </EstimateCost.Item>,
-    <EstimateCost.Item label="Some storage" monthlyPrice={100}>
+    <EstimateCost.Item
+      key="Some storage"
+      label="Some storage"
+      monthlyPrice={100}
+    >
       <EstimateCost.Strong>100 GB</EstimateCost.Strong>
     </EstimateCost.Item>,
-    <EstimateCost.Item label="Discount" monthlyPrice={-100}>
+    <EstimateCost.Item key="Discount" label="Discount" monthlyPrice={-100}>
       <EstimateCost.Strong>
         <Badge sentiment="success">50%</Badge>
       </EstimateCost.Strong>
diff --git a/packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx
index db7d21f628..7e5bdee6a5 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx
+++ b/packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx
@@ -8,9 +8,9 @@ export const Region = Template.bind({})
 
 Region.args = {
   children: [
-    <EstimateCost.Region image={frFlag} label="PAR" />,
-    <EstimateCost.Region image={nlFlag} label="AMS" />,
-    <EstimateCost.Region image={plFlag} label="WAW" />,
+    <EstimateCost.Region image={frFlag} key={frFlag} label="PAR" />,
+    <EstimateCost.Region image={nlFlag} key={nlFlag} label="AMS" />,
+    <EstimateCost.Region image={plFlag} key={plFlag} label="WAW" />,
   ],
 }
 
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/CustomUnitInput.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/CustomUnitInput.test.tsx.snap
index cc635471af..4909385764 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/CustomUnitInput.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/CustomUnitInput.test.tsx.snap
@@ -488,8 +488,8 @@ exports[`EstimateCost - CustomUnitInput > render default values 1`] = `
               class="emotion-14 emotion-1"
             >
               <div
+                aria-controls="«r2»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap
index f00b83b21d..7c475f1cd2 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap
@@ -1968,7 +1968,7 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rq»"
+                          id="«rs»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -1983,8 +1983,8 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«rs»"
-                          aria-describedby="«rs»"
+                          aria-controls="«ru»"
+                          aria-describedby="«ru»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -1993,8 +1993,8 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«ru»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -3189,8 +3189,8 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -5286,7 +5286,7 @@ exports[`EstimateCost - Item > render with notice 1`] = `
                           class="emotion-59 emotion-60"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r21»"
+                          id="«r26»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -5301,8 +5301,8 @@ exports[`EstimateCost - Item > render with notice 1`] = `
                         class="emotion-61 emotion-62 emotion-63"
                       >
                         <div
-                          aria-controls="«r23»"
-                          aria-describedby="«r23»"
+                          aria-controls="«r28»"
+                          aria-describedby="«r28»"
                           class="emotion-64 emotion-65"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -5311,8 +5311,8 @@ exports[`EstimateCost - Item > render with notice 1`] = `
                             class="emotion-66 emotion-1"
                           >
                             <div
+                              aria-controls="«r28»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-68 emotion-69"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -7402,7 +7402,7 @@ exports[`EstimateCost - Item > render with priceText 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r16»"
+                          id="«r19»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -7417,8 +7417,8 @@ exports[`EstimateCost - Item > render with priceText 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r18»"
-                          aria-describedby="«r18»"
+                          aria-controls="«r1b»"
+                          aria-describedby="«r1b»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -7427,8 +7427,8 @@ exports[`EstimateCost - Item > render with priceText 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r1b»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -9497,7 +9497,7 @@ exports[`EstimateCost - Item > render with tabulation 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«re»"
+                          id="«rf»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -9512,8 +9512,8 @@ exports[`EstimateCost - Item > render with tabulation 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«rg»"
-                          aria-describedby="«rg»"
+                          aria-controls="«rh»"
+                          aria-describedby="«rh»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -9522,8 +9522,8 @@ exports[`EstimateCost - Item > render with tabulation 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«rh»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -11524,8 +11524,8 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <div
-                        aria-controls="«r1h»"
-                        aria-describedby="«r1h»"
+                        aria-controls="«r1l»"
+                        aria-describedby="«r1l»"
                         class="emotion-18 emotion-19"
                         tabindex="0"
                       >
@@ -11646,7 +11646,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = `
                           class="emotion-62 emotion-63"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1j»"
+                          id="«r1n»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -11661,8 +11661,8 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = `
                         class="emotion-64 emotion-65 emotion-66"
                       >
                         <div
-                          aria-controls="«r1l»"
-                          aria-describedby="«r1l»"
+                          aria-controls="«r1p»"
+                          aria-describedby="«r1p»"
                           class="emotion-18 emotion-19"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -11671,8 +11671,8 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = `
                             class="emotion-69 emotion-1"
                           >
                             <div
+                              aria-controls="«r1p»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-71 emotion-72"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -11740,8 +11740,8 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = `
                         class="emotion-16 emotion-17"
                       >
                         <div
-                          aria-controls="«r1q»"
-                          aria-describedby="«r1q»"
+                          aria-controls="«r1v»"
+                          aria-describedby="«r1v»"
                           class="emotion-18 emotion-19"
                           tabindex="0"
                         >
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap
index c7469c1942..5f20ca6400 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap
@@ -1090,8 +1090,8 @@ exports[`EstimateCost - Region > render region component 1`] = `
                             class="emotion-65 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-67 emotion-68"
                               data-disabled="false"
                               data-dropdownvisible="false"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
index 016e00717a..07730dc606 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
@@ -1056,8 +1056,8 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = `
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -2182,7 +2182,7 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1`
                           class="emotion-53 emotion-54"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r2p»"
+                          id="«r2v»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -2197,8 +2197,8 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1`
                         class="emotion-55 emotion-56 emotion-57"
                       >
                         <div
-                          aria-controls="«r2r»"
-                          aria-describedby="«r2r»"
+                          aria-controls="«r31»"
+                          aria-describedby="«r31»"
                           class="emotion-58 emotion-59"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -2207,8 +2207,8 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1`
                             class="emotion-60 emotion-1"
                           >
                             <div
+                              aria-controls="«r31»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-62 emotion-63"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -3363,7 +3363,7 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di
                           class="emotion-55 emotion-56"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1j»"
+                          id="«r1m»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -3378,8 +3378,8 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di
                         class="emotion-57 emotion-58 emotion-59"
                       >
                         <div
-                          aria-controls="«r1l»"
-                          aria-describedby="«r1l»"
+                          aria-controls="«r1o»"
+                          aria-describedby="«r1o»"
                           class="emotion-60 emotion-61"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -3388,8 +3388,8 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r1o»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -4560,7 +4560,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = `
                           class="emotion-55 emotion-56"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r2c»"
+                          id="«r2h»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -4575,8 +4575,8 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = `
                         class="emotion-57 emotion-58 emotion-59"
                       >
                         <div
-                          aria-controls="«r2e»"
-                          aria-describedby="«r2e»"
+                          aria-controls="«r2j»"
+                          aria-describedby="«r2j»"
                           class="emotion-60 emotion-61"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -4585,8 +4585,8 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = `
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r2j»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -5762,7 +5762,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long
                           class="emotion-55 emotion-56"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1v»"
+                          id="«r23»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -5777,8 +5777,8 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long
                         class="emotion-57 emotion-58 emotion-59"
                       >
                         <div
-                          aria-controls="«r21»"
-                          aria-describedby="«r21»"
+                          aria-controls="«r25»"
+                          aria-describedby="«r25»"
                           class="emotion-60 emotion-61"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -5787,8 +5787,8 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r25»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -7104,7 +7104,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = `
                           class="emotion-76 emotion-77"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«ri»"
+                          id="«rj»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -7119,8 +7119,8 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = `
                         class="emotion-78 emotion-79 emotion-80"
                       >
                         <div
-                          aria-controls="«rk»"
-                          aria-describedby="«rk»"
+                          aria-controls="«rl»"
+                          aria-describedby="«rl»"
                           class="emotion-81 emotion-82"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -7129,8 +7129,8 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = `
                             class="emotion-83 emotion-1"
                           >
                             <div
+                              aria-controls="«rl»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-85 emotion-86"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -8499,7 +8499,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`]
                           class="emotion-66 emotion-67"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r14»"
+                          id="«r16»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -8514,8 +8514,8 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`]
                         class="emotion-68 emotion-69 emotion-70"
                       >
                         <div
-                          aria-controls="«r16»"
-                          aria-describedby="«r16»"
+                          aria-controls="«r18»"
+                          aria-describedby="«r18»"
                           class="emotion-71 emotion-72"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -8524,8 +8524,8 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`]
                             class="emotion-73 emotion-1"
                           >
                             <div
+                              aria-controls="«r18»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-75 emotion-76"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -9722,7 +9722,7 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = `
                           class="emotion-55 emotion-56"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r35»"
+                          id="«r3c»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -9737,8 +9737,8 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = `
                         class="emotion-57 emotion-58 emotion-59"
                       >
                         <div
-                          aria-controls="«r37»"
-                          aria-describedby="«r37»"
+                          aria-controls="«r3e»"
+                          aria-describedby="«r3e»"
                           class="emotion-60 emotion-61"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -9747,8 +9747,8 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = `
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r3e»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -10912,7 +10912,7 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1`
                           class="emotion-55 emotion-56"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r3i»"
+                          id="«r3q»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -10927,8 +10927,8 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1`
                         class="emotion-57 emotion-58 emotion-59"
                       >
                         <div
-                          aria-controls="«r3k»"
-                          aria-describedby="«r3k»"
+                          aria-controls="«r3s»"
+                          aria-describedby="«r3s»"
                           class="emotion-60 emotion-61"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -10937,8 +10937,8 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1`
                             class="emotion-62 emotion-1"
                           >
                             <div
+                              aria-controls="«r3s»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-64 emotion-65"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -12133,7 +12133,7 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = `
                           class="emotion-58 emotion-59"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r3v»"
+                          id="«r48»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -12148,8 +12148,8 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = `
                         class="emotion-60 emotion-61 emotion-62"
                       >
                         <div
-                          aria-controls="«r41»"
-                          aria-describedby="«r41»"
+                          aria-controls="«r4a»"
+                          aria-describedby="«r4a»"
                           class="emotion-63 emotion-64"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -12158,8 +12158,8 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = `
                             class="emotion-65 emotion-1"
                           >
                             <div
+                              aria-controls="«r4a»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-67 emotion-68"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -13500,7 +13500,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = `
                           class="emotion-69 emotion-70"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r4q»"
+                          id="«r55»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -13515,8 +13515,8 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = `
                         class="emotion-71 emotion-72 emotion-73"
                       >
                         <div
-                          aria-controls="«r4s»"
-                          aria-describedby="«r4s»"
+                          aria-controls="«r57»"
+                          aria-describedby="«r57»"
                           class="emotion-74 emotion-75"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -13525,8 +13525,8 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = `
                             class="emotion-76 emotion-1"
                           >
                             <div
+                              aria-controls="«r57»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-78 emotion-79"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -14664,7 +14664,7 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = `
                           class="emotion-53 emotion-54"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r4c»"
+                          id="«r4m»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -14679,8 +14679,8 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = `
                         class="emotion-55 emotion-56 emotion-57"
                       >
                         <div
-                          aria-controls="«r4e»"
-                          aria-describedby="«r4e»"
+                          aria-controls="«r4o»"
+                          aria-describedby="«r4o»"
                           class="emotion-58 emotion-59"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -14689,8 +14689,8 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = `
                             class="emotion-60 emotion-1"
                           >
                             <div
+                              aria-controls="«r4o»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-62 emotion-63"
                               data-disabled="false"
                               data-dropdownvisible="false"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap
index c0ab3db678..988d0829a7 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap
@@ -1330,8 +1330,8 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -1440,7 +1440,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
                               data-controls="true"
                               data-has-unit="false"
                               data-size="small"
-                              id="«ra»"
+                              id="«rb»"
                               max="100"
                               min="0"
                               placeholder=""
@@ -2829,7 +2829,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rj»"
+                          id="«rk»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -2844,8 +2844,8 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«rl»"
-                          aria-describedby="«rl»"
+                          aria-controls="«rm»"
+                          aria-describedby="«rm»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -2854,8 +2854,8 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«rm»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -2964,7 +2964,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
                               data-controls="true"
                               data-has-unit="false"
                               data-size="small"
-                              id="«rq»"
+                              id="«rs»"
                               max="100"
                               min="0"
                               placeholder=""
@@ -4353,7 +4353,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1l»"
+                          id="«r1o»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -4368,8 +4368,8 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r1n»"
-                          aria-describedby="«r1n»"
+                          aria-controls="«r1q»"
+                          aria-describedby="«r1q»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -4378,8 +4378,8 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r1q»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -4488,7 +4488,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
                               data-controls="true"
                               data-has-unit="false"
                               data-size="small"
-                              id="«r1s»"
+                              id="«r20»"
                               max="100"
                               min="0"
                               placeholder=""
@@ -5903,7 +5903,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r13»"
+                          id="«r15»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -5918,8 +5918,8 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r15»"
-                          aria-describedby="«r15»"
+                          aria-controls="«r17»"
+                          aria-describedby="«r17»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -5928,8 +5928,8 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r17»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -6043,7 +6043,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
                               data-controls="true"
                               data-has-unit="false"
                               data-size="small"
-                              id="«r1b»"
+                              id="«r1e»"
                               max="51"
                               min="0"
                               placeholder=""
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap
index 0e85a9af19..f85df40824 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap
@@ -1080,8 +1080,8 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -2231,7 +2231,7 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = `
                           class="emotion-53 emotion-54"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rr»"
+                          id="«rt»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -2246,8 +2246,8 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = `
                         class="emotion-55 emotion-56 emotion-57"
                       >
                         <div
-                          aria-controls="«rt»"
-                          aria-describedby="«rt»"
+                          aria-controls="«rv»"
+                          aria-describedby="«rv»"
                           class="emotion-58 emotion-59"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -2256,8 +2256,8 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = `
                             class="emotion-60 emotion-1"
                           >
                             <div
+                              aria-controls="«rv»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-62 emotion-63"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -3440,7 +3440,7 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rf»"
+                          id="«rg»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -3455,8 +3455,8 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«rh»"
-                          aria-describedby="«rh»"
+                          aria-controls="«ri»"
+                          aria-describedby="«ri»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -3465,8 +3465,8 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«ri»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap
index ac59cfdfd2..e0076e6a35 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap
@@ -1277,8 +1277,8 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -1371,7 +1371,7 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«ra»"
+                                id="«rb»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -3790,7 +3790,7 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] =
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rj»"
+                          id="«rk»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -3805,8 +3805,8 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] =
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«rl»"
-                          aria-describedby="«rl»"
+                          aria-controls="«rm»"
+                          aria-describedby="«rm»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -3815,8 +3815,8 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] =
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«rm»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -3909,7 +3909,7 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] =
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«rq»"
+                                id="«rs»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -6328,7 +6328,7 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r34»"
+                          id="«r39»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -6343,8 +6343,8 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r36»"
-                          aria-describedby="«r36»"
+                          aria-controls="«r3b»"
+                          aria-describedby="«r3b»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -6353,8 +6353,8 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r3b»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -6447,7 +6447,7 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r3b»"
+                                id="«r3h»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -8892,7 +8892,7 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r13»"
+                          id="«r15»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -8907,8 +8907,8 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r15»"
-                          aria-describedby="«r15»"
+                          aria-controls="«r17»"
+                          aria-describedby="«r17»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -8917,8 +8917,8 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r17»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -9016,7 +9016,7 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r1b»"
+                                id="«r1e»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -11466,7 +11466,7 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1l»"
+                          id="«r1o»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -11481,8 +11481,8 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r1n»"
-                          aria-describedby="«r1n»"
+                          aria-controls="«r1q»"
+                          aria-describedby="«r1q»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -11491,8 +11491,8 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r1q»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -11590,7 +11590,7 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r1t»"
+                                id="«r21»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -14120,7 +14120,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = `
                           class="emotion-73 emotion-74"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r29»"
+                          id="«r2d»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -14135,8 +14135,8 @@ exports[`EstimateCost - Unit Item > render test 1`] = `
                         class="emotion-75 emotion-76 emotion-77"
                       >
                         <div
-                          aria-controls="«r2b»"
-                          aria-describedby="«r2b»"
+                          aria-controls="«r2f»"
+                          aria-describedby="«r2f»"
                           class="emotion-78 emotion-79"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -14145,8 +14145,8 @@ exports[`EstimateCost - Unit Item > render test 1`] = `
                             class="emotion-80 emotion-1"
                           >
                             <div
+                              aria-controls="«r2f»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-82 emotion-83"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -14244,7 +14244,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r2h»"
+                                id="«r2m»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -14335,7 +14335,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r2p»"
+                                id="«r2u»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -16772,7 +16772,7 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r3k»"
+                          id="«r3q»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -16787,8 +16787,8 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r3m»"
-                          aria-describedby="«r3m»"
+                          aria-controls="«r3s»"
+                          aria-describedby="«r3s»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -16797,8 +16797,8 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r3s»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -16891,7 +16891,7 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r3r»"
+                                id="«r42»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -19322,7 +19322,7 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r44»"
+                          id="«r4b»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -19337,8 +19337,8 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r46»"
-                          aria-describedby="«r46»"
+                          aria-controls="«r4d»"
+                          aria-describedby="«r4d»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -19347,8 +19347,8 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r4d»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -19441,7 +19441,7 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r4b»"
+                                id="«r4j»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
@@ -21865,7 +21865,7 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = `
                           class="emotion-57 emotion-58"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r5l»"
+                          id="«r5v»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -21880,8 +21880,8 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = `
                         class="emotion-59 emotion-60 emotion-61"
                       >
                         <div
-                          aria-controls="«r5n»"
-                          aria-describedby="«r5n»"
+                          aria-controls="«r61»"
+                          aria-describedby="«r61»"
                           class="emotion-62 emotion-63"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -21890,8 +21890,8 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = `
                             class="emotion-64 emotion-1"
                           >
                             <div
+                              aria-controls="«r61»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-66 emotion-67"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -21984,7 +21984,7 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = `
                                 data-controls="false"
                                 data-has-unit="true"
                                 data-size="small"
-                                id="«r5s»"
+                                id="«r67»"
                                 max="9007199254740991"
                                 min="0"
                                 name="capacity"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap
index f3ab87ac90..06363d1934 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap
@@ -1083,7 +1083,7 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = `
                           class="emotion-58 emotion-59"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«rf»"
+                          id="«rg»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -1098,8 +1098,8 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = `
                         class="emotion-60 emotion-61 emotion-62"
                       >
                         <div
-                          aria-controls="«rh»"
-                          aria-describedby="«rh»"
+                          aria-controls="«ri»"
+                          aria-describedby="«ri»"
                           class="emotion-63 emotion-64"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -1108,8 +1108,8 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = `
                             class="emotion-65 emotion-1"
                           >
                             <div
+                              aria-controls="«ri»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-67 emotion-68"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -2332,8 +2332,8 @@ exports[`EstimateCost - Zone > render zone component 1`] = `
                             class="emotion-65 emotion-1"
                           >
                             <div
+                              aria-controls="«r5»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-67 emotion-68"
                               data-disabled="false"
                               data-dropdownvisible="false"
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap
index f2f49aaca9..85349a719d 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap
@@ -1139,7 +1139,7 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = `
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«ri»"
+                          id="«rj»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -1154,8 +1154,8 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = `
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«rk»"
-                          aria-describedby="«rk»"
+                          aria-controls="«rl»"
+                          aria-describedby="«rl»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -1164,8 +1164,8 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = `
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«rl»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -2443,7 +2443,7 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] =
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1e»"
+                          id="«r1h»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -2458,8 +2458,8 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] =
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r1g»"
-                          aria-describedby="«r1g»"
+                          aria-controls="«r1j»"
+                          aria-describedby="«r1j»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -2468,8 +2468,8 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] =
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r1j»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -3747,7 +3747,7 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] =
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r10»"
+                          id="«r12»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -3762,8 +3762,8 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] =
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r12»"
-                          aria-describedby="«r12»"
+                          aria-controls="«r14»"
+                          aria-describedby="«r14»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -3772,8 +3772,8 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] =
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r14»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -5076,8 +5076,8 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = `
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r6»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -6266,7 +6266,7 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r49»"
+                          id="«r4j»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -6281,8 +6281,8 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r4b»"
-                          aria-describedby="«r4b»"
+                          aria-controls="«r4l»"
+                          aria-describedby="«r4l»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -6291,8 +6291,8 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r4l»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -8321,7 +8321,7 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r7l»"
+                          id="«r87»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -8336,8 +8336,8 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r7n»"
-                          aria-describedby="«r7n»"
+                          aria-controls="«r89»"
+                          aria-describedby="«r89»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -8346,8 +8346,8 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r89»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -10392,7 +10392,7 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r84»"
+                          id="«r8n»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -10407,8 +10407,8 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r86»"
-                          aria-describedby="«r86»"
+                          aria-controls="«r8p»"
+                          aria-describedby="«r8p»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -10417,8 +10417,8 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r8p»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -12530,7 +12530,7 @@ exports[`EstimateCost - index > render with description as node 1`] = `
                           class="emotion-54 emotion-55"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r8i»"
+                          id="«r96»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -12545,8 +12545,8 @@ exports[`EstimateCost - index > render with description as node 1`] = `
                         class="emotion-56 emotion-57 emotion-58"
                       >
                         <div
-                          aria-controls="«r8k»"
-                          aria-describedby="«r8k»"
+                          aria-controls="«r98»"
+                          aria-describedby="«r98»"
                           class="emotion-59 emotion-60"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -12555,8 +12555,8 @@ exports[`EstimateCost - index > render with description as node 1`] = `
                             class="emotion-61 emotion-1"
                           >
                             <div
+                              aria-controls="«r98»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-63 emotion-64"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -13739,7 +13739,7 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r5f»"
+                          id="«r5s»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -13754,8 +13754,8 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r5h»"
-                          aria-describedby="«r5h»"
+                          aria-controls="«r5u»"
+                          aria-describedby="«r5u»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -13764,8 +13764,8 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r5u»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -15863,7 +15863,7 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r6n»"
+                          id="«r77»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -15878,8 +15878,8 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r6p»"
-                          aria-describedby="«r6p»"
+                          aria-controls="«r79»"
+                          aria-describedby="«r79»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -15888,8 +15888,8 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r79»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -17072,7 +17072,7 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r53»"
+                          id="«r5f»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -17087,8 +17087,8 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r55»"
-                          aria-describedby="«r55»"
+                          aria-controls="«r5h»"
+                          aria-describedby="«r5h»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -17097,8 +17097,8 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r5h»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -18370,7 +18370,7 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r4m»"
+                          id="«r51»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -18385,8 +18385,8 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r4o»"
-                          aria-describedby="«r4o»"
+                          aria-controls="«r53»"
+                          aria-describedby="«r53»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -18395,8 +18395,8 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r53»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -19585,7 +19585,7 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r1r»"
+                          id="«r1v»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -19600,8 +19600,8 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r1t»"
-                          aria-describedby="«r1t»"
+                          aria-controls="«r21»"
+                          aria-describedby="«r21»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -19610,8 +19610,8 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r21»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -22631,7 +22631,7 @@ exports[`EstimateCost - index > render with hideTotal 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r7a»"
+                          id="«r7r»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -22646,8 +22646,8 @@ exports[`EstimateCost - index > render with hideTotal 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r7c»"
-                          aria-describedby="«r7c»"
+                          aria-controls="«r7t»"
+                          aria-describedby="«r7t»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -22656,8 +22656,8 @@ exports[`EstimateCost - index > render with hideTotal 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r7t»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -23896,7 +23896,7 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] =
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r28»"
+                          id="«r2d»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -23911,8 +23911,8 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] =
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r2a»"
-                          aria-describedby="«r2a»"
+                          aria-controls="«r2f»"
+                          aria-describedby="«r2f»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -23921,8 +23921,8 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] =
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r2f»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -26199,7 +26199,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r5s»"
+                          id="«r6a»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -26214,8 +26214,8 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r5u»"
-                          aria-describedby="«r5u»"
+                          aria-controls="«r6c»"
+                          aria-describedby="«r6c»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -26224,8 +26224,8 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r6c»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -28492,7 +28492,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r6a»"
+                          id="«r6p»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -28507,8 +28507,8 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r6c»"
-                          aria-describedby="«r6c»"
+                          aria-controls="«r6r»"
+                          aria-describedby="«r6r»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -28517,8 +28517,8 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r6r»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -29791,7 +29791,7 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = `
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r2m»"
+                          id="«r2s»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -29806,8 +29806,8 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = `
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r2o»"
-                          aria-describedby="«r2o»"
+                          aria-controls="«r2u»"
+                          aria-describedby="«r2u»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -29816,8 +29816,8 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = `
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r2u»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -31006,7 +31006,7 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = `
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r33»"
+                          id="«r3a»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -31021,8 +31021,8 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = `
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r35»"
-                          aria-describedby="«r35»"
+                          aria-controls="«r3c»"
+                          aria-describedby="«r3c»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -31031,8 +31031,8 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = `
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r3c»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -32215,7 +32215,7 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni
                           class="emotion-56 emotion-57"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r3t»"
+                          id="«r46»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -32230,8 +32230,8 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni
                         class="emotion-58 emotion-59 emotion-60"
                       >
                         <div
-                          aria-controls="«r3v»"
-                          aria-describedby="«r3v»"
+                          aria-controls="«r48»"
+                          aria-describedby="«r48»"
                           class="emotion-61 emotion-62"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -32240,8 +32240,8 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni
                             class="emotion-63 emotion-1"
                           >
                             <div
+                              aria-controls="«r48»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-65 emotion-66"
                               data-disabled="false"
                               data-dropdownvisible="false"
@@ -33468,7 +33468,7 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = `
                           class="emotion-60 emotion-61"
                           data-size="medium"
                           data-testid="unit-input"
-                          id="«r3g»"
+                          id="«r3o»"
                           max="9007199254740991"
                           min="1"
                           name="iteration-value"
@@ -33483,8 +33483,8 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = `
                         class="emotion-62 emotion-63 emotion-64"
                       >
                         <div
-                          aria-controls="«r3i»"
-                          aria-describedby="«r3i»"
+                          aria-controls="«r3q»"
+                          aria-describedby="«r3q»"
                           class="emotion-65 emotion-66"
                           data-container-full-width="true"
                           tabindex="-1"
@@ -33493,8 +33493,8 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = `
                             class="emotion-67 emotion-1"
                           >
                             <div
+                              aria-controls="«r3q»"
                               aria-expanded="false"
-                              aria-haspopup="listbox"
                               class="emotion-69 emotion-70"
                               data-disabled="false"
                               data-dropdownvisible="false"
diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
index 8b56d95e90..e4135198b8 100644
--- a/packages/plus/src/components/Navigation/components/Item.tsx
+++ b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -431,7 +431,9 @@ export const Item = memo(
       pinnedFeature && !children && !noPinButton
     const isItemPinned = pinnedItems.includes(id)
     const shouldShowPinnedButton = useMemo(() => {
-      if (href || disabled) return false
+      if (href || disabled) {
+        return false
+      }
 
       if (hasPinnedFeatureAndNoChildren && type !== 'default') {
         return true
@@ -445,7 +447,9 @@ export const Item = memo(
     }, [disabled, hasPinnedFeatureAndNoChildren, href, type])
 
     const hasActiveChildren = useMemo(() => {
-      if (!children) return false
+      if (!children) {
+        return false
+      }
 
       return (
         Children.map(children, child => {
diff --git a/packages/plus/src/components/OfferList/__stories__/OnChangeSelect.stories.tsx b/packages/plus/src/components/OfferList/__stories__/OnChangeSelect.stories.tsx
index 03d2e4c5de..66ca783a77 100644
--- a/packages/plus/src/components/OfferList/__stories__/OnChangeSelect.stories.tsx
+++ b/packages/plus/src/components/OfferList/__stories__/OnChangeSelect.stories.tsx
@@ -16,8 +16,11 @@ export const OnChange: StoryFn<ComponentProps<typeof OfferList>> = props => {
       <Button
         onClick={() => {
           setSelectable(selectable === 'checkbox' ? 'radio' : 'checkbox')
-          if (selectable === 'checkbox') setSelectedRow('venus-offer')
-          else setSelectedRow(['mercury-offer', 'jupiter-offer'])
+          if (selectable === 'checkbox') {
+            setSelectedRow('venus-offer')
+          } else {
+            setSelectedRow(['mercury-offer', 'jupiter-offer'])
+          }
         }}
       >
         Set selectable to {selectable === 'checkbox' ? 'radio' : 'checkbox'}
diff --git a/packages/plus/src/components/OfferList/components/Row.tsx b/packages/plus/src/components/OfferList/components/Row.tsx
index 3282584c88..c793156a80 100644
--- a/packages/plus/src/components/OfferList/components/Row.tsx
+++ b/packages/plus/src/components/OfferList/components/Row.tsx
@@ -161,7 +161,9 @@ export const Row = ({
         </>
       )
     }
-    if (expandable && !loading) return expandableContent
+    if (expandable && !loading) {
+      return expandableContent
+    }
 
     return undefined
   }, [
@@ -176,7 +178,9 @@ export const Row = ({
   ])
 
   const isRowSelected = useMemo(() => {
-    if (selectable === 'radio') return radioSelectedRow === offerName
+    if (selectable === 'radio') {
+      return radioSelectedRow === offerName
+    }
 
     return checkboxSelectedRows.includes(offerName)
   }, [offerName, checkboxSelectedRows, radioSelectedRow, selectable])
diff --git a/packages/plus/src/components/OrderSummary/__stories__/Children.stories.tsx b/packages/plus/src/components/OrderSummary/__stories__/Children.stories.tsx
index f5e27e7b04..46780dc3c1 100644
--- a/packages/plus/src/components/OrderSummary/__stories__/Children.stories.tsx
+++ b/packages/plus/src/components/OrderSummary/__stories__/Children.stories.tsx
@@ -53,7 +53,9 @@ export const Children: StoryFn<ComponentProps<typeof OrderSummary>> = props => {
           setCommitment(event.target.value === 'false' ? 'false' : 'true')
           if (event.target.value === 'false') {
             setDiscount(0)
-          } else setDiscount(commitmentChoice === 'monthly' ? 0.07 : 0.1)
+          } else {
+            setDiscount(commitmentChoice === 'monthly' ? 0.07 : 0.1)
+          }
         }}
         value={commitment}
       >
diff --git a/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap
index 5185b61669..f631ec4b91 100644
--- a/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap
@@ -1548,7 +1548,7 @@ exports[`OrderSummary > should work with additionalInfo 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«r9h»"
+                  id="«r9m»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -1563,8 +1563,8 @@ exports[`OrderSummary > should work with additionalInfo 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«r9j»"
-                  aria-describedby="«r9j»"
+                  aria-controls="«r9o»"
+                  aria-describedby="«r9o»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -1573,8 +1573,8 @@ exports[`OrderSummary > should work with additionalInfo 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«r9o»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -1701,8 +1701,8 @@ exports[`OrderSummary > should work with additionalInfo 1`] = `
                 class="emotion-73 emotion-5"
               >
                 <div
-                  aria-controls="«r9u»"
-                  aria-describedby="«r9u»"
+                  aria-controls="«ra4»"
+                  aria-describedby="«ra4»"
                   class="emotion-20 emotion-21"
                   tabindex="0"
                 >
@@ -3874,7 +3874,7 @@ exports[`OrderSummary > should work with children 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«r3t»"
+                  id="«r3u»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -3889,8 +3889,8 @@ exports[`OrderSummary > should work with children 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«r3v»"
-                  aria-describedby="«r3v»"
+                  aria-controls="«r40»"
+                  aria-describedby="«r40»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -3899,8 +3899,8 @@ exports[`OrderSummary > should work with children 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«r40»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -4027,8 +4027,8 @@ exports[`OrderSummary > should work with children 1`] = `
                 class="emotion-73 emotion-5"
               >
                 <div
-                  aria-controls="«r4a»"
-                  aria-describedby="«r4a»"
+                  aria-controls="«r4c»"
+                  aria-describedby="«r4c»"
                   class="emotion-20 emotion-21"
                   tabindex="0"
                 >
@@ -6819,7 +6819,7 @@ exports[`OrderSummary > should work with discount 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«rcb»"
+                  id="«rcj»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -6834,8 +6834,8 @@ exports[`OrderSummary > should work with discount 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«rcd»"
-                  aria-describedby="«rcd»"
+                  aria-controls="«rcl»"
+                  aria-describedby="«rcl»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -6844,8 +6844,8 @@ exports[`OrderSummary > should work with discount 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«rcl»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -8492,7 +8492,7 @@ exports[`OrderSummary > should work with discount in  % 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«rbu»"
+                  id="«rc5»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -8507,8 +8507,8 @@ exports[`OrderSummary > should work with discount in  % 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«rc0»"
-                  aria-describedby="«rc0»"
+                  aria-controls="«rc7»"
+                  aria-describedby="«rc7»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -8517,8 +8517,8 @@ exports[`OrderSummary > should work with discount in  % 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«rc7»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -10190,7 +10190,7 @@ exports[`OrderSummary > should work with footer 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«r5l»"
+                  id="«r5n»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -10205,8 +10205,8 @@ exports[`OrderSummary > should work with footer 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«r5n»"
-                  aria-describedby="«r5n»"
+                  aria-controls="«r5p»"
+                  aria-describedby="«r5p»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -10215,8 +10215,8 @@ exports[`OrderSummary > should work with footer 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«r5p»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -10343,8 +10343,8 @@ exports[`OrderSummary > should work with footer 1`] = `
                 class="emotion-73 emotion-5"
               >
                 <div
-                  aria-controls="«r62»"
-                  aria-describedby="«r62»"
+                  aria-controls="«r65»"
+                  aria-describedby="«r65»"
                   class="emotion-20 emotion-21"
                   tabindex="0"
                 >
@@ -12303,7 +12303,7 @@ exports[`OrderSummary > should work with fractionDigits 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«rco»"
+                  id="«rd1»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -12318,8 +12318,8 @@ exports[`OrderSummary > should work with fractionDigits 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«rcq»"
-                  aria-describedby="«rcq»"
+                  aria-controls="«rd3»"
+                  aria-describedby="«rd3»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -12328,8 +12328,8 @@ exports[`OrderSummary > should work with fractionDigits 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«rd3»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -14325,7 +14325,7 @@ exports[`OrderSummary > should work with numberInputs 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«rb9»"
+                  id="«rbf»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -14340,8 +14340,8 @@ exports[`OrderSummary > should work with numberInputs 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«rbb»"
-                  aria-describedby="«rbb»"
+                  aria-controls="«rbh»"
+                  aria-describedby="«rbh»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -14350,8 +14350,8 @@ exports[`OrderSummary > should work with numberInputs 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«rbh»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -14445,7 +14445,7 @@ exports[`OrderSummary > should work with numberInputs 1`] = `
                       data-controls="true"
                       data-has-unit="false"
                       data-size="small"
-                      id="«rbf»"
+                      id="«rbm»"
                       max="9007199254740991"
                       min="0"
                       placeholder=""
@@ -14529,7 +14529,7 @@ exports[`OrderSummary > should work with numberInputs 1`] = `
                           data-controls="false"
                           data-has-unit="true"
                           data-size="small"
-                          id="«rbm»"
+                          id="«rbt»"
                           max="9007199254740991"
                           min="0"
                           placeholder=""
@@ -16113,7 +16113,7 @@ exports[`OrderSummary > should work with price as a range 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«r7d»"
+                  id="«r7g»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -16128,8 +16128,8 @@ exports[`OrderSummary > should work with price as a range 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«r7f»"
-                  aria-describedby="«r7f»"
+                  aria-controls="«r7i»"
+                  aria-describedby="«r7i»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -16138,8 +16138,8 @@ exports[`OrderSummary > should work with price as a range 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«r7i»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -17847,7 +17847,7 @@ exports[`OrderSummary > should work with totalPriceInfo 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«r7p»"
+                  id="«r7t»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -17862,8 +17862,8 @@ exports[`OrderSummary > should work with totalPriceInfo 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«r7r»"
-                  aria-describedby="«r7r»"
+                  aria-controls="«r7v»"
+                  aria-describedby="«r7v»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -17872,8 +17872,8 @@ exports[`OrderSummary > should work with totalPriceInfo 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«r7v»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
@@ -18000,8 +18000,8 @@ exports[`OrderSummary > should work with totalPriceInfo 1`] = `
                 class="emotion-73 emotion-5"
               >
                 <div
-                  aria-controls="«r86»"
-                  aria-describedby="«r86»"
+                  aria-controls="«r8b»"
+                  aria-describedby="«r8b»"
                   class="emotion-20 emotion-21"
                   tabindex="0"
                 >
@@ -21227,7 +21227,7 @@ exports[`OrderSummary > works with negative category price 1`] = `
                   class="emotion-15 emotion-16"
                   data-size="small"
                   data-testid="unit-input"
-                  id="«rdc»"
+                  id="«rdm»"
                   max="9007199254740991"
                   min="0"
                   name="-value"
@@ -21242,8 +21242,8 @@ exports[`OrderSummary > works with negative category price 1`] = `
                 class="emotion-17 emotion-18 emotion-19"
               >
                 <div
-                  aria-controls="«rde»"
-                  aria-describedby="«rde»"
+                  aria-controls="«rdo»"
+                  aria-describedby="«rdo»"
                   class="emotion-20 emotion-21"
                   data-container-full-width="true"
                   tabindex="-1"
@@ -21252,8 +21252,8 @@ exports[`OrderSummary > works with negative category price 1`] = `
                     class="emotion-22 emotion-9"
                   >
                     <div
+                      aria-controls="«rdo»"
                       aria-expanded="false"
-                      aria-haspopup="listbox"
                       class="emotion-24 emotion-25"
                       data-disabled="false"
                       data-dropdownvisible="false"
diff --git a/packages/plus/src/components/Plans/locales/en.ts b/packages/plus/src/components/Plans/locales/en.ts
index 70b64bb163..9a9e9063ed 100644
--- a/packages/plus/src/components/Plans/locales/en.ts
+++ b/packages/plus/src/components/Plans/locales/en.ts
@@ -1,5 +1,7 @@
-export default {
+const locales = {
   'plans.currentPlan': 'Current plan',
   'plans.features': 'Features',
   'plans.outOfStock': 'Out of stock',
 }
+
+export default locales
diff --git a/packages/plus/src/components/SteppedListCard/SteppedListCard.tsx b/packages/plus/src/components/SteppedListCard/SteppedListCard.tsx
index b57baffdd9..e5b6abc436 100644
--- a/packages/plus/src/components/SteppedListCard/SteppedListCard.tsx
+++ b/packages/plus/src/components/SteppedListCard/SteppedListCard.tsx
@@ -110,8 +110,11 @@ const SteppedListCard = ({
   )
 
   const onClickHideButton = () => {
-    if (onClickHide) onClickHide()
-    else setHidden(!hidden)
+    if (onClickHide) {
+      onClickHide()
+    } else {
+      setHidden(!hidden)
+    }
   }
 
   return (
diff --git a/packages/plus/src/components/SteppedListCard/helper.ts b/packages/plus/src/components/SteppedListCard/helper.ts
index 7d856a2752..aa88b3ab70 100644
--- a/packages/plus/src/components/SteppedListCard/helper.ts
+++ b/packages/plus/src/components/SteppedListCard/helper.ts
@@ -49,7 +49,11 @@ export const nextStep = ({
     index === stepNumber - 1 ? completed : item,
   )
   setCompleted(tempDone)
-  if (numberOfSteps > stepNumber) setCurrentStep(stepNumber + 1)
-  else if (onClickHide) onClickHide()
-  else setHidden(true)
+  if (numberOfSteps > stepNumber) {
+    setCurrentStep(stepNumber + 1)
+  } else if (onClickHide) {
+    onClickHide()
+  } else {
+    setHidden(true)
+  }
 }
diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx
index 98153dc9fa..d9c0eb414f 100644
--- a/packages/ui/src/components/Alert/index.tsx
+++ b/packages/ui/src/components/Alert/index.tsx
@@ -120,7 +120,9 @@ export const Alert = ({
   const [opened, setOpened] = useState(true)
   const Icon = sentimentIcons[sentiment]
 
-  if (!opened) return null
+  if (!opened) {
+    return null
+  }
 
   return (
     <StyledStackContainer
diff --git a/packages/ui/src/components/Badge/__stories__/Prominences.stories.tsx b/packages/ui/src/components/Badge/__stories__/Prominences.stories.tsx
index 3f087b445c..a846b1acb3 100644
--- a/packages/ui/src/components/Badge/__stories__/Prominences.stories.tsx
+++ b/packages/ui/src/components/Badge/__stories__/Prominences.stories.tsx
@@ -5,12 +5,15 @@ import { Badge, PROMINENCES } from '..'
 export const Prominences: StoryFn = props => (
   <>
     {Object.keys(PROMINENCES).map(prominence => (
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      <div
+        key={prominence}
+        style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
+      >
         {prominence}:
         {SENTIMENTS.map(sentiment => (
           <Badge
-            {...props}
             key={`${prominence}-${sentiment}`}
+            {...props}
             prominence={prominence as keyof typeof PROMINENCES}
             sentiment={sentiment}
           >
diff --git a/packages/ui/src/components/Badge/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Badge/__stories__/Sentiments.stories.tsx
index 630c146815..5005fb5bc8 100644
--- a/packages/ui/src/components/Badge/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/Badge/__stories__/Sentiments.stories.tsx
@@ -5,7 +5,7 @@ import { Badge } from '..'
 export const Sentiments: StoryFn = props => (
   <>
     {SENTIMENTS.map(sentiment => (
-      <Badge {...props} key={sentiment} sentiment={sentiment}>
+      <Badge key={sentiment} {...props} sentiment={sentiment}>
         {sentiment}
       </Badge>
     ))}
diff --git a/packages/ui/src/components/Badge/__stories__/Sizes.stories.tsx b/packages/ui/src/components/Badge/__stories__/Sizes.stories.tsx
index 57613afc38..c22b14e57d 100644
--- a/packages/ui/src/components/Badge/__stories__/Sizes.stories.tsx
+++ b/packages/ui/src/components/Badge/__stories__/Sizes.stories.tsx
@@ -4,7 +4,7 @@ import { Badge } from '..'
 export const Sizes: StoryFn = props => (
   <>
     {(['small', 'medium', 'large'] as const).map(size => (
-      <Badge {...props} key={size} sentiment="primary" size={size}>
+      <Badge key={size} {...props} sentiment="primary" size={size}>
         {size}
       </Badge>
     ))}
diff --git a/packages/ui/src/components/Badge/index.tsx b/packages/ui/src/components/Badge/index.tsx
index db603f2f82..0af351d21d 100644
--- a/packages/ui/src/components/Badge/index.tsx
+++ b/packages/ui/src/components/Badge/index.tsx
@@ -99,8 +99,12 @@ const StyledSpan = styled(Text, {
   border-radius: ${({ theme }) => theme.radii.xlarge};
   padding: 0
     ${({ theme, size }) => {
-      if (size === 'small') return theme.space['1']
-      if (size === 'large') return theme.space['2']
+      if (size === 'small') {
+        return theme.space['1']
+      }
+      if (size === 'large') {
+        return theme.space['2']
+      }
 
       return theme.space['1.5']
     }};
diff --git a/packages/ui/src/components/Banner/index.tsx b/packages/ui/src/components/Banner/index.tsx
index edbf33d930..9f0fb3d148 100644
--- a/packages/ui/src/components/Banner/index.tsx
+++ b/packages/ui/src/components/Banner/index.tsx
@@ -158,7 +158,9 @@ export const Banner = ({
 
   const [opened, setOpened] = useState(true)
 
-  if (!opened) return null
+  if (!opened) {
+    return null
+  }
 
   return (
     <Container
diff --git a/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx b/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx
index 1a1ef3f109..d0bb371f34 100644
--- a/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx
+++ b/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx
@@ -13,8 +13,12 @@ export const PositiveNegative: StoryFn<typeof BarChart> = props => {
       axisFormatters={{
         bottom: value => format(new Date(value), 'dd-MM-Y'),
         left: value => {
-          if (value === 1) return 'Active'
-          if (value === -1) return 'Inactive'
+          if (value === 1) {
+            return 'Active'
+          }
+          if (value === -1) {
+            return 'Inactive'
+          }
 
           return ''
         },
diff --git a/packages/ui/src/components/BarChart/__tests__/index.test.tsx b/packages/ui/src/components/BarChart/__tests__/index.test.tsx
index 79439f9fba..454a2080ec 100644
--- a/packages/ui/src/components/BarChart/__tests__/index.test.tsx
+++ b/packages/ui/src/components/BarChart/__tests__/index.test.tsx
@@ -57,7 +57,9 @@ describe('BarChart', () => {
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const bar = container.querySelector('svg[role="img"] g line')
-    if (!bar) throw new Error('BarChart column not found')
+    if (!bar) {
+      throw new Error('BarChart column not found')
+    }
     await userEvent.unhover(bar)
     await userEvent.hover(bar)
   })
diff --git a/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx
index 560b036092..ae3e7e55ba 100644
--- a/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx
@@ -11,7 +11,7 @@ export const Sentiments: StoryFn = props => (
         Prominence default:
       </Text>
       {SENTIMENTS.map(sentiment => (
-        <Bullet {...props} key={sentiment} sentiment={sentiment}>
+        <Bullet key={sentiment} {...props} sentiment={sentiment}>
           1
         </Bullet>
       ))}
@@ -22,8 +22,8 @@ export const Sentiments: StoryFn = props => (
       </Text>
       {SENTIMENTS.map(sentiment => (
         <Bullet
-          {...props}
           key={sentiment}
+          {...props}
           prominence="strong"
           sentiment={sentiment}
         >
diff --git a/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx b/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx
index 448efad9e4..7a60471957 100644
--- a/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx
+++ b/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx
@@ -9,8 +9,12 @@ const StyledRow = styled(Table.Row, {
   shouldForwardProp: prop => !['sentiment'].includes(prop),
 })<{ sentiment: ExtendedColor }>`
   background: ${({ sentiment }) => {
-    if (sentiment === 'white') return 'black'
-    if (sentiment === 'black') return 'white'
+    if (sentiment === 'white') {
+      return 'black'
+    }
+    if (sentiment === 'black') {
+      return 'white'
+    }
 
     return 'none'
   }};
diff --git a/packages/ui/src/components/Button/__stories__/Size.stories.tsx b/packages/ui/src/components/Button/__stories__/Size.stories.tsx
index 20f7ee983c..d2fad49623 100644
--- a/packages/ui/src/components/Button/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/Button/__stories__/Size.stories.tsx
@@ -6,7 +6,7 @@ import { Button, buttonSizes } from '..'
 export const Size: StoryFn<typeof Button> = args => (
   <Stack alignItems="center" direction="row" gap={2}>
     {buttonSizes.map(size => (
-      <Button {...args} key={size} onClick={() => {}} size={size}>
+      <Button key={size} {...args} onClick={() => {}} size={size}>
         <PencilIcon />
         {size}
       </Button>
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
index 398b47fc34..ddd68b8d8c 100644
--- a/packages/ui/src/components/Button/index.tsx
+++ b/packages/ui/src/components/Button/index.tsx
@@ -328,7 +328,9 @@ export const Button = forwardRef<Element, FinalProps>(
     const { theme } = useTheme()
     const computedSentimentLoader = useMemo(() => {
       if (variant === 'filled' && !['black', 'white'].includes(sentiment)) {
-        if (theme === 'light') return 'white'
+        if (theme === 'light') {
+          return 'white'
+        }
 
         return 'black'
       }
diff --git a/packages/ui/src/components/Chip/__stories__/Groups.stories.tsx.tsx b/packages/ui/src/components/Chip/__stories__/Groups.stories.tsx
similarity index 100%
rename from packages/ui/src/components/Chip/__stories__/Groups.stories.tsx.tsx
rename to packages/ui/src/components/Chip/__stories__/Groups.stories.tsx
diff --git a/packages/ui/src/components/Chip/__stories__/index.stories.tsx b/packages/ui/src/components/Chip/__stories__/index.stories.tsx
index d6908aa1f0..81fd905a16 100644
--- a/packages/ui/src/components/Chip/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/Chip/__stories__/index.stories.tsx
@@ -18,6 +18,6 @@ export default {
 
 export { Playground } from './Playground.stories'
 export { Icons } from './Icons.stories'
-export { Groups } from './Groups.stories.tsx'
+export { Groups } from './Groups.stories'
 export { Size } from './Size.stories'
 export { Disabled } from './Disabled.stories'
diff --git a/packages/ui/src/components/Chip/index.tsx b/packages/ui/src/components/Chip/index.tsx
index 20f4af08d6..6f248dc1a5 100644
--- a/packages/ui/src/components/Chip/index.tsx
+++ b/packages/ui/src/components/Chip/index.tsx
@@ -97,8 +97,12 @@ export const Chip = ({
   const chipRef = useRef<HTMLDivElement>(null) // ref to the parent container
   const iconRef = useRef<HTMLButtonElement>(null)
   const prominence = useMemo(() => {
-    if (isActive) return 'stronger'
-    if (disabled) return 'weak'
+    if (isActive) {
+      return 'stronger'
+    }
+    if (disabled) {
+      return 'weak'
+    }
 
     return 'default'
   }, [isActive, disabled])
@@ -118,7 +122,9 @@ export const Chip = ({
       // This will mean that there is a trailing icon
       if (lastChildNode === iconRef.current) {
         setTrailingIcon(true)
-      } else setTrailingIcon(false)
+      } else {
+        setTrailingIcon(false)
+      }
     }
   }, [children, iconRef])
 
diff --git a/packages/ui/src/components/CopyButton/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/CopyButton/__stories__/Sentiments.stories.tsx
index 1da6454afc..72caecadee 100644
--- a/packages/ui/src/components/CopyButton/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/CopyButton/__stories__/Sentiments.stories.tsx
@@ -4,6 +4,7 @@ import { CopyButton } from '../index'
 export const Sentiments = (props: ComponentProps<typeof CopyButton>) =>
   (['primary', 'neutral'] as const).map(sentiment => (
     <CopyButton
+      key={sentiment}
       {...props}
       sentiment={sentiment}
       value="Text that will be copied"
diff --git a/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
index 01c1fe3cf8..f2c0e9c50a 100644
--- a/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
@@ -5,7 +5,7 @@ import { DateInput } from '..'
 export const Size: StoryFn<typeof DateInput> = args => (
   <Stack gap="2">
     {(['small', 'medium', 'large'] as const).map(size => (
-      <DateInput {...args} key={size} label={size} size={size} />
+      <DateInput key={size} {...args} label={size} size={size} />
     ))}
   </Stack>
 )
diff --git a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
index ade4f45f01..11b8bd1dd4 100644
--- a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
+++ b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
@@ -259,17 +259,29 @@ export const Daily = () => {
         }
 
         const createTestId = () => {
-          if (isInHoveredRange) return 'rangeButton'
-          if (data.month === -1) return 'dayLastMonth'
-          if (data.month === 1) return 'dayNextMonth'
+          if (isInHoveredRange) {
+            return 'rangeButton'
+          }
+          if (data.month === -1) {
+            return 'dayLastMonth'
+          }
+          if (data.month === 1) {
+            return 'dayNextMonth'
+          }
 
           return undefined
         }
 
         const dayState = () => {
-          if (isSelected) return 'selected'
-          if (isInHoveredRange) return 'in-range'
-          if (data.month !== 0) return 'not-current'
+          if (isSelected) {
+            return 'selected'
+          }
+          if (isInHoveredRange) {
+            return 'in-range'
+          }
+          if (data.month !== 0) {
+            return 'not-current'
+          }
 
           return 'neutral'
         }
@@ -297,7 +309,9 @@ export const Daily = () => {
               }
             }}
             onMouseEnter={() => {
-              if (selectsRange && range?.start) setHoveredDate(constructedDate)
+              if (selectsRange && range?.start) {
+                setHoveredDate(constructedDate)
+              }
             }}
             sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'}
             variant={isSelected || isInHoveredRange ? 'filled' : 'ghost'}
diff --git a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
index d130a330c2..b79866dd04 100644
--- a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
+++ b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
@@ -152,8 +152,12 @@ export const Monthly = () => {
         }
 
         const monthState = () => {
-          if (isSelected) return 'selected'
-          if (isInHoveredRange) return 'in-range'
+          if (isSelected) {
+            return 'selected'
+          }
+          if (isInHoveredRange) {
+            return 'in-range'
+          }
 
           return 'neutral'
         }
diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
index 794d351606..96d6dc904e 100644
--- a/packages/ui/src/components/DateInput/index.tsx
+++ b/packages/ui/src/components/DateInput/index.tsx
@@ -115,17 +115,29 @@ export const DateInput = <IsRange extends undefined | boolean>({
   'data-testid': dataTestId,
 }: DateInputProps<IsRange>) => {
   const defaultMonthToShow = useMemo(() => {
-    if (value) return new Date(value).getMonth() + 1
-    if (startDate && selectsRange) return startDate.getMonth() + 1
-    if (endDate && selectsRange) return endDate.getMonth() + 1
+    if (value) {
+      return new Date(value).getMonth() + 1
+    }
+    if (startDate && selectsRange) {
+      return startDate.getMonth() + 1
+    }
+    if (endDate && selectsRange) {
+      return endDate.getMonth() + 1
+    }
 
     return new Date().getMonth() + 1
   }, [endDate, selectsRange, startDate, value])
 
   const defaultYearToShow = useMemo(() => {
-    if (value) return new Date(value).getFullYear()
-    if (startDate && selectsRange) return startDate.getFullYear()
-    if (endDate && selectsRange) return endDate.getFullYear()
+    if (value) {
+      return new Date(value).getFullYear()
+    }
+    if (startDate && selectsRange) {
+      return startDate.getFullYear()
+    }
+    if (endDate && selectsRange) {
+      return endDate.getFullYear()
+    }
 
     return new Date().getFullYear()
   }, [endDate, selectsRange, startDate, value])
@@ -241,12 +253,13 @@ export const DateInput = <IsRange extends undefined | boolean>({
   const manageOnChange = (event: ChangeEvent<HTMLInputElement>) => {
     const newValue = event.currentTarget.value
 
-    if (!newValue)
+    if (!newValue) {
       onChange?.(
         (selectsRange ? [null, null] : null) as
           | (Date[] & Date)
           | ([Date | null, Date | null] & Date),
       )
+    }
 
     if (selectsRange) {
       const computedNewRange = createDateRange(newValue, showMonthYearPicker)
@@ -301,7 +314,9 @@ export const DateInput = <IsRange extends undefined | boolean>({
         id={id}
         onBlur={onBlur}
         onClick={() => {
-          if (!isPopupVisible) setVisible(true)
+          if (!isPopupVisible) {
+            setVisible(true)
+          }
         }}
         onFocus={onFocus}
         ref={popupRef}
@@ -324,8 +339,9 @@ export const DateInput = <IsRange extends undefined | boolean>({
               labelDescription={labelDescription}
               name={name}
               onBlur={event => {
-                if (!popupRef.current?.contains(event.relatedTarget))
+                if (!popupRef.current?.contains(event.relatedTarget)) {
                   onBlurInput()
+                }
               }}
               onChange={manageOnChange}
               onKeyDown={event => {
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
index 1d19656c6e..86c672641b 100644
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@@ -28,8 +28,12 @@ const slideIn = (translation: number) => keyframes`
  `
 
 const slideAnimation = (size: 'small' | 'medium' | 'large') => {
-  if (size === 'small') return css`animation: ${slideIn(22)} linear 150ms;`
-  if (size === 'medium') return css`animation: ${slideIn(48)} linear 250ms;`
+  if (size === 'small') {
+    return css`animation: ${slideIn(22)} linear 150ms;`
+  }
+  if (size === 'medium') {
+    return css`animation: ${slideIn(48)} linear 250ms;`
+  }
 
   return css`animation: ${slideIn(70)} linear 300ms;`
 }
diff --git a/packages/ui/src/components/Expandable/index.tsx b/packages/ui/src/components/Expandable/index.tsx
index 26b1964012..ce411767c7 100644
--- a/packages/ui/src/components/Expandable/index.tsx
+++ b/packages/ui/src/components/Expandable/index.tsx
@@ -74,7 +74,9 @@ export const AnimatedExpandable = ({
 
   useEffect(() => {
     setTimeout(() => {
-      if (isFirstRender.current) isFirstRender.current = false
+      if (isFirstRender.current) {
+        isFirstRender.current = false
+      }
     }, 0)
   }, [])
   /**
diff --git a/packages/ui/src/components/GlobalAlert/__stories__/Variants.stories.tsx b/packages/ui/src/components/GlobalAlert/__stories__/Variants.stories.tsx
index 11a0da6163..1037a40beb 100644
--- a/packages/ui/src/components/GlobalAlert/__stories__/Variants.stories.tsx
+++ b/packages/ui/src/components/GlobalAlert/__stories__/Variants.stories.tsx
@@ -5,7 +5,7 @@ import { GlobalAlert } from '../index'
 
 export const Variants = (props: ComponentProps<typeof GlobalAlert>) =>
   (['info', 'danger', 'promotional'] as const).map(variant => (
-    <GlobalAlert {...props} key={variant} variant={variant}>
+    <GlobalAlert key={variant} {...props} variant={variant}>
       This is a global alert with the {variant} variant
     </GlobalAlert>
   ))
diff --git a/packages/ui/src/components/GlobalAlert/index.tsx b/packages/ui/src/components/GlobalAlert/index.tsx
index c4b41d379e..6a690798d6 100644
--- a/packages/ui/src/components/GlobalAlert/index.tsx
+++ b/packages/ui/src/components/GlobalAlert/index.tsx
@@ -68,7 +68,9 @@ export const GlobalAlert = ({
 }: GlobalAlertProps) => {
   const [opened, toggleOpened] = useReducer(value => !value, true)
 
-  if (!opened) return null
+  if (!opened) {
+    return null
+  }
 
   return (
     <Container
diff --git a/packages/ui/src/components/InfiniteScroll/index.tsx b/packages/ui/src/components/InfiniteScroll/index.tsx
index 36f50e338c..d01afd5878 100644
--- a/packages/ui/src/components/InfiniteScroll/index.tsx
+++ b/packages/ui/src/components/InfiniteScroll/index.tsx
@@ -74,8 +74,12 @@ export const InfiniteScroll = ({
 
   const handleScroll = useCallback(
     (scrollableContainer: HTMLElement) => {
-      if (!containerRef.current) return
-      if (!onLoadMore) return
+      if (!containerRef.current) {
+        return
+      }
+      if (!onLoadMore) {
+        return
+      }
 
       const { scrollTop, scrollHeight, clientHeight } = scrollableContainer
 
@@ -98,7 +102,9 @@ export const InfiniteScroll = ({
   )
 
   useEffect(() => {
-    if (!hasMore) return
+    if (!hasMore) {
+      return
+    }
     let scrollableContainer =
       scrollParentRef?.current || containerRef.current?.parentElement
     while (scrollableContainer && scrollableContainer !== document.body) {
@@ -109,7 +115,9 @@ export const InfiniteScroll = ({
       scrollableContainer = scrollableContainer.parentElement
     }
 
-    if (!scrollableContainer) return
+    if (!scrollableContainer) {
+      return
+    }
 
     const debouncedHandleScroll = debounce(
       () => handleScroll(scrollableContainer),
@@ -127,7 +135,9 @@ export const InfiniteScroll = ({
 
   const localLoader = useMemo(() => loader || <Loader active />, [loader])
 
-  if (isLoading) return localLoader
+  if (isLoading) {
+    return localLoader
+  }
 
   return (
     <Component
diff --git a/packages/ui/src/components/LineChart/__tests__/index.test.tsx b/packages/ui/src/components/LineChart/__tests__/index.test.tsx
index 5f103669a2..c5befd49bf 100644
--- a/packages/ui/src/components/LineChart/__tests__/index.test.tsx
+++ b/packages/ui/src/components/LineChart/__tests__/index.test.tsx
@@ -81,7 +81,9 @@ describe('LineChart', () => {
     )
     // eslint-disable-next-line testing-library/no-node-access
     const line = document.querySelector('svg[role="img"] g path')
-    if (!line) throw new Error('LineChart line path not found')
+    if (!line) {
+      throw new Error('LineChart line path not found')
+    }
     await userEvent.unhover(line)
     await userEvent.hover(line)
     expect(asFragment()).toMatchSnapshot()
diff --git a/packages/ui/src/components/LineChart/helpers.ts b/packages/ui/src/components/LineChart/helpers.ts
index 72d8c218f9..b3a47031de 100644
--- a/packages/ui/src/components/LineChart/helpers.ts
+++ b/packages/ui/src/components/LineChart/helpers.ts
@@ -1,9 +1,15 @@
 import type { DatumValue, Serie } from '@nivo/line'
 
 const parse = (data?: DatumValue | null): number => {
-  if (typeof data === 'number') return data || 0
-  if (typeof data === 'string') return Number.parseFloat(data) || 0
-  if (data instanceof Date) return data.getTime()
+  if (typeof data === 'number') {
+    return data || 0
+  }
+  if (typeof data === 'string') {
+    return Number.parseFloat(data) || 0
+  }
+  if (data instanceof Date) {
+    return data.getTime()
+  }
 
   return 0
 }
@@ -24,7 +30,9 @@ export const getAverage = (values: DatumValue[] = []): number =>
     : 0
 
 export const getMaxChartValue = (preppedData?: Serie[]): number => {
-  if (!preppedData?.length) return 0
+  if (!preppedData?.length) {
+    return 0
+  }
 
   const maximum = Math.max(
     ...preppedData.map(({ data }) => getMax(data.map(({ y }) => y || 0))),
@@ -34,7 +42,9 @@ export const getMaxChartValue = (preppedData?: Serie[]): number => {
 }
 
 export const getMinChartValue = (preppedData?: Serie[]): number => {
-  if (!preppedData?.length) return 0
+  if (!preppedData?.length) {
+    return 0
+  }
 
   const minimum = Math.min(
     ...preppedData.map(({ data }) => getMin(data.map(({ y }) => y || 0))),
diff --git a/packages/ui/src/components/Link/__stories__/Prominence.stories.tsx b/packages/ui/src/components/Link/__stories__/Prominence.stories.tsx
index ad1b2feaea..a233db1895 100644
--- a/packages/ui/src/components/Link/__stories__/Prominence.stories.tsx
+++ b/packages/ui/src/components/Link/__stories__/Prominence.stories.tsx
@@ -7,8 +7,8 @@ import { Link, PROMINENCES } from '..'
 export const Prominence = (props: ComponentProps<typeof Link>) =>
   Object.keys(PROMINENCES).map(prominence => (
     <Link
-      {...props}
       key={prominence}
+      {...props}
       prominence={prominence as ProminenceProps}
     >
       {prominence}
diff --git a/packages/ui/src/components/Link/__stories__/Variants.stories.tsx b/packages/ui/src/components/Link/__stories__/Variants.stories.tsx
index ef3b21e742..c1ad14cf77 100644
--- a/packages/ui/src/components/Link/__stories__/Variants.stories.tsx
+++ b/packages/ui/src/components/Link/__stories__/Variants.stories.tsx
@@ -5,7 +5,7 @@ import { Link } from '..'
 
 export const Variants = (props: ComponentProps<typeof Link>) =>
   (['inline', 'standalone'] as const).map(variant => (
-    <Link {...props} key={variant} variant={variant}>
+    <Link key={variant} {...props} variant={variant}>
       {variant}
     </Link>
   ))
diff --git a/packages/ui/src/components/Link/index.tsx b/packages/ui/src/components/Link/index.tsx
index 393e058086..ece67d8f70 100644
--- a/packages/ui/src/components/Link/index.tsx
+++ b/packages/ui/src/components/Link/index.tsx
@@ -236,8 +236,12 @@ export const Link = forwardRef(
 
     const finalStringChildren = recursivelyGetChildrenString(children)
     const textVariant = useMemo(() => {
-      if (size === 'xsmall') return 'captionStrong'
-      if (size === 'small') return 'bodySmallStrong'
+      if (size === 'xsmall') {
+        return 'captionStrong'
+      }
+      if (size === 'small') {
+        return 'bodySmallStrong'
+      }
 
       return 'bodyStrong'
     }, [size])
diff --git a/packages/ui/src/components/List/ListContext.tsx b/packages/ui/src/components/List/ListContext.tsx
index 079037b064..c70d7896fd 100644
--- a/packages/ui/src/components/List/ListContext.tsx
+++ b/packages/ui/src/components/List/ListContext.tsx
@@ -257,10 +257,8 @@ export const ListProvider = ({
           const end = Math.max(lastCheckedIndex, index)
 
           updatedRefList.forEach((checkbox, key) => {
-            if (start < key && key <= end) {
-              if (!checkbox.current?.disabled) {
-                checkboxesInRange.push(checkbox.current?.value)
-              }
+            if (start < key && key <= end && !checkbox.current?.disabled) {
+              checkboxesInRange.push(checkbox.current?.value)
             }
           })
 
diff --git a/packages/ui/src/components/Loader/__stories__/Percentages.stories.tsx b/packages/ui/src/components/Loader/__stories__/Percentages.stories.tsx
index f4991fcc01..3d87f19fe9 100644
--- a/packages/ui/src/components/Loader/__stories__/Percentages.stories.tsx
+++ b/packages/ui/src/components/Loader/__stories__/Percentages.stories.tsx
@@ -4,7 +4,7 @@ import { Loader } from '../index'
 export const Percentages: StoryFn = props => (
   <>
     {[8, 32, 50, 75, 90, 100].map(percentage => (
-      <Loader {...props} key={percentage} percentage={percentage} />
+      <Loader key={percentage} {...props} percentage={percentage} />
     ))}
   </>
 )
diff --git a/packages/ui/src/components/Loader/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Loader/__stories__/Sentiments.stories.tsx
index 4277c080fd..dad302c01a 100644
--- a/packages/ui/src/components/Loader/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/Loader/__stories__/Sentiments.stories.tsx
@@ -7,10 +7,10 @@ import { Loader } from '../index'
 export const Sentiments: StoryFn = props => (
   <Stack gap={4}>
     {[...SENTIMENTS, 'white', 'black'].map(sentiment => (
-      <Stack alignItems="center">
+      <Stack alignItems="center" key={sentiment}>
         <Loader
-          {...props}
           key={sentiment}
+          {...props}
           sentiment={sentiment as ExtendedColor}
         />
         {sentiment}
diff --git a/packages/ui/src/components/Loader/__stories__/Sizes.stories.tsx b/packages/ui/src/components/Loader/__stories__/Sizes.stories.tsx
index c730f7cc1e..139de87de6 100644
--- a/packages/ui/src/components/Loader/__stories__/Sizes.stories.tsx
+++ b/packages/ui/src/components/Loader/__stories__/Sizes.stories.tsx
@@ -4,7 +4,7 @@ import { Loader, SIZES } from '../index'
 export const Sizes: StoryFn = props => (
   <>
     {Object.keys(SIZES).map(size => (
-      <Loader {...props} key={size} size={size as keyof typeof SIZES} />
+      <Loader key={size} {...props} size={size as keyof typeof SIZES} />
     ))}
   </>
 )
diff --git a/packages/ui/src/components/Menu/MenuContent.tsx b/packages/ui/src/components/Menu/MenuContent.tsx
index 391bdd9f00..d9054c34b7 100644
--- a/packages/ui/src/components/Menu/MenuContent.tsx
+++ b/packages/ui/src/components/Menu/MenuContent.tsx
@@ -47,10 +47,10 @@ const StyledPopup = styled(Popup, {
 
   min-width: ${SIZES.small};
   max-width: ${SIZES.large};
-  
+
   ${({ searchable }) => (searchable ? `min-width: 20rem` : null)};
   padding: ${({ theme }) => `${theme.space['0.25']} 0`};
-  
+
 `
 
 const Content = styled(Stack)`
@@ -234,14 +234,18 @@ export const Menu = forwardRef(
 
               if (indexOfCurrent < listItem.length - 1) {
                 listItem[indexOfCurrent + 1].focus()
-              } else listItem[0].focus()
+              } else {
+                listItem[0].focus()
+              }
             } else if (event.key === 'ArrowUp') {
               event.preventDefault()
 
               const indexOfCurrent = listItem.indexOf(currentElement)
               if (indexOfCurrent > 0) {
                 listItem[indexOfCurrent - 1].focus()
-              } else listItem[listItem.length - 1].focus()
+              } else {
+                listItem[listItem.length - 1].focus()
+              }
             } else if (event.key === 'ArrowLeft' && triggerMethod === 'hover') {
               disclosureRef.current?.focus()
               setShouldBeVisible(undefined)
@@ -266,7 +270,9 @@ export const Menu = forwardRef(
         onClose={() => {
           setIsVisible(false)
           setLocalChild(null)
-          if (triggerMethod === 'click') disclosureRef.current?.focus()
+          if (triggerMethod === 'click') {
+            disclosureRef.current?.focus()
+          }
           setShouldBeVisible(undefined)
         }}
         onKeyDown={handleTabOpen}
diff --git a/packages/ui/src/components/Menu/MenuProvider.tsx b/packages/ui/src/components/Menu/MenuProvider.tsx
index dd3e6244da..f8f6901404 100644
--- a/packages/ui/src/components/Menu/MenuProvider.tsx
+++ b/packages/ui/src/components/Menu/MenuProvider.tsx
@@ -19,7 +19,9 @@ const MenuContext = createContext<MenuContextProps | undefined>(undefined)
 
 export const useMenu = () => {
   const context = useContext(MenuContext)
-  if (!context) throw new Error('useMenu must be used in MenuProvider')
+  if (!context) {
+    throw new Error('useMenu must be used in MenuProvider')
+  }
 
   return context
 }
diff --git a/packages/ui/src/components/Menu/__stories__/Playground.stories.tsx b/packages/ui/src/components/Menu/__stories__/Playground.stories.tsx
index ab699fc102..29b1dd1c95 100644
--- a/packages/ui/src/components/Menu/__stories__/Playground.stories.tsx
+++ b/packages/ui/src/components/Menu/__stories__/Playground.stories.tsx
@@ -5,11 +5,13 @@ export const Playground = Template.bind({})
 
 Playground.args = {
   children: [
-    <Menu.Item borderless>
+    <Menu.Item borderless key="borderless">
       Information with a very long name. Lorem ipsum dolor sit amet, consectetur
       adipiscing elit.
     </Menu.Item>,
-    <Menu.Item borderless>Power on</Menu.Item>,
+    <Menu.Item borderless key="power on">
+      Power on
+    </Menu.Item>,
   ],
 }
 
diff --git a/packages/ui/src/components/Menu/components/Item.tsx b/packages/ui/src/components/Menu/components/Item.tsx
index 0ecae4a145..906c44195f 100644
--- a/packages/ui/src/components/Menu/components/Item.tsx
+++ b/packages/ui/src/components/Menu/components/Item.tsx
@@ -165,7 +165,9 @@ const Item = forwardRef<HTMLElement, ItemProps>(
 
     const onClickHandle = useCallback(
       (event: MouseEvent<HTMLAnchorElement>) => {
-        if (disabled) return undefined
+        if (disabled) {
+          return undefined
+        }
         onClick?.(event)
         if (hideOnClickItem) {
           setIsVisible(false)
diff --git a/packages/ui/src/components/NumberInput/index.tsx b/packages/ui/src/components/NumberInput/index.tsx
index 1c2b5db484..e5eaa87c0c 100644
--- a/packages/ui/src/components/NumberInput/index.tsx
+++ b/packages/ui/src/components/NumberInput/index.tsx
@@ -304,7 +304,9 @@ export const NumberInput = forwardRef(
       }
 
       const numericValue = Number(localRef?.current?.value)
-      if (Number.isNaN(numericValue)) return false
+      if (Number.isNaN(numericValue)) {
+        return false
+      }
 
       const minValue = typeof min === 'number' ? min : Number(min)
 
@@ -317,7 +319,9 @@ export const NumberInput = forwardRef(
       }
 
       const numericValue = Number(localRef?.current?.value)
-      if (Number.isNaN(numericValue)) return false
+      if (Number.isNaN(numericValue)) {
+        return false
+      }
 
       const maxValue = typeof max === 'number' ? max : Number(max)
 
diff --git a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index 87ee3dc7b7..407ee2df7c 100644
--- a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -3201,8 +3201,8 @@ exports[`Pagination > should render correctly with perPage - default values 1`]
               class="emotion-11 emotion-1"
             >
               <div
+                aria-controls="«r1f»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-13 emotion-14"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -3900,8 +3900,8 @@ exports[`Pagination > should render correctly with perPage 1`] = `
           class="emotion-6 emotion-7 emotion-8"
         >
           <div
-            aria-controls="«r1u»"
-            aria-describedby="«r1u»"
+            aria-controls="«r1v»"
+            aria-describedby="«r1v»"
             class="emotion-9 emotion-10"
             data-container-full-width="true"
             tabindex="-1"
@@ -3910,8 +3910,8 @@ exports[`Pagination > should render correctly with perPage 1`] = `
               class="emotion-11 emotion-1"
             >
               <div
+                aria-controls="«r1v»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-13 emotion-14"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -3919,7 +3919,7 @@ exports[`Pagination > should render correctly with perPage 1`] = `
                 data-size="small"
                 data-state="neutral"
                 data-testid="select-input-select-items-per-page"
-                id="«r1t»"
+                id="«r1u»"
                 role="combobox"
                 tabindex="0"
               >
diff --git a/packages/ui/src/components/Pagination/index.tsx b/packages/ui/src/components/Pagination/index.tsx
index 30d1108d1a..fa530e1fe1 100644
--- a/packages/ui/src/components/Pagination/index.tsx
+++ b/packages/ui/src/components/Pagination/index.tsx
@@ -90,7 +90,9 @@ export const Pagination = ({
   }, [page, pageCount, onChange])
 
   useEffect(() => {
-    if (perPage) setPerPage(perPage)
+    if (perPage) {
+      setPerPage(perPage)
+    }
   }, [perPage])
 
   return (
diff --git a/packages/ui/src/components/PieChart/__tests__/index.test.tsx b/packages/ui/src/components/PieChart/__tests__/index.test.tsx
index 3a46d8bfef..d38538296e 100644
--- a/packages/ui/src/components/PieChart/__tests__/index.test.tsx
+++ b/packages/ui/src/components/PieChart/__tests__/index.test.tsx
@@ -13,7 +13,7 @@ import {
 describe('PieChart', () => {
   beforeAll(() => {
     // Have to mock ResizeObserver as Nivo doesn't add automatically ResizeObserver polyfill anymore (v0.79.0)
-    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    window.ResizeObserver = vi.fn().mockImplementation(() => ({
       disconnect: vi.fn(),
       observe: vi.fn(),
       unobserve: vi.fn(),
@@ -72,7 +72,9 @@ describe('PieChart', () => {
     )
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const slice = container.querySelector('svg g path')
-    if (!slice) throw new Error('PieChart slice path not found')
+    if (!slice) {
+      throw new Error('PieChart slice path not found')
+    }
     await userEvent.unhover(slice)
     await userEvent.hover(slice)
   })
diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
index 71a434f7fe..6d77a74460 100644
--- a/packages/ui/src/components/Popup/index.tsx
+++ b/packages/ui/src/components/Popup/index.tsx
@@ -244,11 +244,17 @@ export const Popup = forwardRef(
 
     const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
     const popupPortalTarget = useMemo(() => {
-      if (portalTarget) return portalTarget
+      if (portalTarget) {
+        return portalTarget
+      }
 
       if (role === 'dialog') {
-        if (childrenRef.current) return childrenRef.current
-        if (isClientSide) return document.body
+        if (childrenRef.current) {
+          return childrenRef.current
+        }
+        if (isClientSide) {
+          return document.body
+        }
 
         return null
       }
@@ -461,18 +467,19 @@ export const Popup = forwardRef(
         const popupCurrent = innerPopupRef.current
         const childrenCurrent = childrenRef.current
 
-        if (popupCurrent && hideOnClickOutside && !event.defaultPrevented) {
-          if (
-            event.target &&
-            event.target !== popupCurrent &&
-            event.target !== childrenCurrent &&
-            !childrenCurrent?.contains(event.target as Node) &&
-            !popupCurrent.contains(event.target as Node)
-          ) {
-            event.preventDefault()
-            event.stopPropagation()
-            closePopup()
-          }
+        if (
+          popupCurrent &&
+          hideOnClickOutside &&
+          !event.defaultPrevented &&
+          event.target &&
+          event.target !== popupCurrent &&
+          event.target !== childrenCurrent &&
+          !childrenCurrent?.contains(event.target as Node) &&
+          !popupCurrent.contains(event.target as Node)
+        ) {
+          event.preventDefault()
+          event.stopPropagation()
+          closePopup()
         }
       }
       if (visibleInDom) {
diff --git a/packages/ui/src/components/ProgressBar/__stories__/ShowProgress.stories.tsx b/packages/ui/src/components/ProgressBar/__stories__/ShowProgress.stories.tsx
index 4d7a2b0337..4940764125 100644
--- a/packages/ui/src/components/ProgressBar/__stories__/ShowProgress.stories.tsx
+++ b/packages/ui/src/components/ProgressBar/__stories__/ShowProgress.stories.tsx
@@ -6,8 +6,11 @@ export const ShowProgress: StoryFn = props => {
   const [value, setValue] = useState(0)
   useEffect(() => {
     const interval = setInterval(() => {
-      if (value >= 100) setValue(0)
-      else setValue(prevValue => prevValue + 1)
+      if (value >= 100) {
+        setValue(0)
+      } else {
+        setValue(prevValue => prevValue + 1)
+      }
     }, 200)
 
     return () => {
diff --git a/packages/ui/src/components/SelectInput/Dropdown.tsx b/packages/ui/src/components/SelectInput/Dropdown.tsx
index e6e999b41c..d2ab091512 100644
--- a/packages/ui/src/components/SelectInput/Dropdown.tsx
+++ b/packages/ui/src/components/SelectInput/Dropdown.tsx
@@ -33,6 +33,7 @@ import { INPUT_SIZE_HEIGHT } from './types'
 const DROPDOWN_MAX_HEIGHT = 256
 
 export type DropdownProps = {
+  id?: string
   children: ReactNode
   emptyState: ReactNode
   descriptionDirection: 'row' | 'column'
@@ -700,6 +701,7 @@ export const Dropdown = ({
   size,
   dropdownAlign,
   portalTarget,
+  id,
 }: DropdownProps) => {
   const {
     setIsDropdownVisible,
@@ -738,7 +740,9 @@ export const Dropdown = ({
               top: overflow,
             })
           }
-        } else window.scrollBy({ behavior: 'smooth', top: overflow })
+        } else {
+          window.scrollBy({ behavior: 'smooth', top: overflow })
+        }
       }
     }
     // oxlint-disable-next-line react/exhaustive-deps
@@ -817,7 +821,9 @@ export const Dropdown = ({
   // No data is displayed (because of the search or because no data is provided)
   // Set to true when noData by default
   const isEmpty = useMemo(() => {
-    if (numberOfOptions === 0) return true
+    if (numberOfOptions === 0) {
+      return true
+    }
     if (Array.isArray(displayedOptions)) {
       return displayedOptions.length === 0
     }
@@ -853,6 +859,7 @@ export const Dropdown = ({
       disableAnimation
       hasArrow={false}
       hideOnClickOutside
+      id={id}
       maxWidth={maxWidth ?? refSelect.current?.offsetWidth}
       onClose={() => setIsDropdownVisible(false)}
       placement="bottom"
diff --git a/packages/ui/src/components/SelectInput/SearchBarDropdown.tsx b/packages/ui/src/components/SelectInput/SearchBarDropdown.tsx
index cbbf9382ef..b7469477ea 100644
--- a/packages/ui/src/components/SelectInput/SearchBarDropdown.tsx
+++ b/packages/ui/src/components/SelectInput/SearchBarDropdown.tsx
@@ -22,8 +22,12 @@ const StyledInput = styled(TextInput)`
   padding-right: ${({ theme }) => theme.space[2]};
 `
 export const getReferenceText = (option: OptionType) => {
-  if (option.searchText) return normalizeString(option.searchText)
-  if (typeof option.label === 'string') return normalizeString(option.label)
+  if (option.searchText) {
+    return normalizeString(option.searchText)
+  }
+  if (typeof option.label === 'string') {
+    return normalizeString(option.label)
+  }
 
   return ''
 }
@@ -80,6 +84,10 @@ const findClosestOption = (
 
   return null
 }
+
+const escapeRegExp = (string: string) =>
+  string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`)
+
 export const SearchBarDropdown = ({
   placeholder,
   displayedOptions,
@@ -96,8 +104,6 @@ export const SearchBarDropdown = ({
     setSelectedData,
     selectedData,
   } = useSelectInput()
-  const escapeRegExp = (string: string) =>
-    string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`)
 
   const handleChange = (search: string) => {
     if (search.length > 0) {
diff --git a/packages/ui/src/components/SelectInput/SelectBar.tsx b/packages/ui/src/components/SelectInput/SelectBar.tsx
index 3cb74d2ee3..74af9378b9 100644
--- a/packages/ui/src/components/SelectInput/SelectBar.tsx
+++ b/packages/ui/src/components/SelectInput/SelectBar.tsx
@@ -41,6 +41,7 @@ type SelectBarProps = {
   'data-testid': string
   label?: string
   tooltip?: string
+  dropdownId?: string
 }
 
 type DisplayValuesProps = {
@@ -172,7 +173,7 @@ const CustomTag = styled(Tag, {
   width: fit-content;
   min-width: ${({ lastElementMaxWidth }) =>
     lastElementMaxWidth ? 'auto' : 'fit-content'};
-  
+
   max-width: ${({ lastElementMaxWidth, hidden }) =>
     lastElementMaxWidth && !hidden ? `${lastElementMaxWidth}px` : '100%'};
 
@@ -323,6 +324,7 @@ const SelectBar = ({
   id,
   'data-testid': dataTestId,
   label,
+  dropdownId,
 }: SelectBarProps) => {
   const {
     isDropdownVisible,
@@ -506,11 +508,12 @@ const SelectBar = ({
     const getWidth = () => {
       if (refTag.current) {
         setInnerWidth(refTag.current.offsetWidth)
-      } else
+      } else {
         setInnerWidth(
           innerRef.current?.offsetWidth ??
             0 - (arrowRef.current?.offsetWidth ?? 0) - SIZES_TAG.paddings,
         )
+      }
     }
     getWidth()
     window.addEventListener('resize', getWidth)
@@ -543,8 +546,8 @@ const SelectBar = ({
   return (
     <Tooltip text={tooltip}>
       <StyledInputWrapper
+        aria-controls={dropdownId}
         aria-expanded={isDropdownVisible}
-        aria-haspopup="listbox"
         aria-label={label}
         autoFocus={autoFocus}
         data-disabled={disabled}
diff --git a/packages/ui/src/components/SelectInput/SelectInputProvider.tsx b/packages/ui/src/components/SelectInput/SelectInputProvider.tsx
index 63f6b9b98a..8966523ce4 100644
--- a/packages/ui/src/components/SelectInput/SelectInputProvider.tsx
+++ b/packages/ui/src/components/SelectInput/SelectInputProvider.tsx
@@ -146,7 +146,7 @@ export const SelectInputProvider = <T extends boolean>({
     action: ReducerAction,
   ): ReducerState => {
     switch (action.type) {
-      case 'selectAll':
+      case 'selectAll': {
         if (state.allSelected) {
           return { allSelected: false, selectedGroups: [], selectedValues: [] }
         }
@@ -156,8 +156,9 @@ export const SelectInputProvider = <T extends boolean>({
           selectedGroups: allGroups,
           selectedValues: allValues.map(option => option.value),
         }
+      }
 
-      case 'selectGroup':
+      case 'selectGroup': {
         if (!Array.isArray(options)) {
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
@@ -190,8 +191,9 @@ export const SelectInputProvider = <T extends boolean>({
         }
 
         return state
+      }
 
-      case 'selectOption':
+      case 'selectOption': {
         if (multiselect) {
           if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
@@ -234,11 +236,13 @@ export const SelectInputProvider = <T extends boolean>({
           selectedGroups: state.selectedGroups,
           selectedValues: [action.clickedOption.value],
         }
+      }
 
-      case 'clearAll':
+      case 'clearAll': {
         return { allSelected: false, selectedGroups: [], selectedValues: [] }
+      }
 
-      case 'update':
+      case 'update': {
         return {
           allSelected: state.allSelected,
           selectedGroups: state.selectedGroups,
@@ -256,16 +260,19 @@ export const SelectInputProvider = <T extends boolean>({
             )
           }),
         }
+      }
 
-      case 'reset':
+      case 'reset': {
         return {
           allSelected: false,
           selectedGroups: action.selectedGroups,
           selectedValues: action.selectedValues,
         }
+      }
 
-      default:
+      default: {
         return state
+      }
     }
   }
 
diff --git a/packages/ui/src/components/SelectInput/__stories__/OnChange.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/OnChange.stories.tsx
index 32821fbae9..5269b2b185 100644
--- a/packages/ui/src/components/SelectInput/__stories__/OnChange.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/OnChange.stories.tsx
@@ -45,7 +45,9 @@ export const OnChange: StoryFn<typeof SelectInput> = args => {
       setOptions(newOptions)
       if (vals.length > 0) {
         setValues2(vals.filter(value => typeof value === 'string'))
-      } else setValues2([])
+      } else {
+        setValues2([])
+      }
     }
   }
 
diff --git a/packages/ui/src/components/SelectInput/index.tsx b/packages/ui/src/components/SelectInput/index.tsx
index bc2c611b69..984c1ed753 100644
--- a/packages/ui/src/components/SelectInput/index.tsx
+++ b/packages/ui/src/components/SelectInput/index.tsx
@@ -189,6 +189,7 @@ export const SelectInput = <IsMulti extends undefined | boolean>({
 }: SelectInputProps<IsMulti>) => {
   const localId = useId()
   const finalId = id ?? localId
+  const dropdownId = useId()
   const ref = useRef<HTMLDivElement | null>(null)
   const numberOfOptions = Array.isArray(options)
     ? options.length
@@ -222,6 +223,7 @@ export const SelectInput = <IsMulti extends undefined | boolean>({
           dropdownAlign={dropdownAlign}
           emptyState={emptyState}
           footer={footer}
+          id={dropdownId}
           isLoading={isLoading}
           loadMore={loadMore}
           optionalInfoPlacement={optionalInfoPlacement}
@@ -247,6 +249,7 @@ export const SelectInput = <IsMulti extends undefined | boolean>({
               clearable={clearable}
               data-testid={finalDataTestId}
               disabled={disabled}
+              dropdownId={dropdownId}
               error={error}
               id={finalId}
               innerRef={ref}
diff --git a/packages/ui/src/components/SelectableCard/index.tsx b/packages/ui/src/components/SelectableCard/index.tsx
index 06e31376c3..b9fea04689 100644
--- a/packages/ui/src/components/SelectableCard/index.tsx
+++ b/packages/ui/src/components/SelectableCard/index.tsx
@@ -323,8 +323,12 @@ export const SelectableCard = forwardRef(
     const childrenRef = useRef<HTMLDivElement>(null)
     const [svgContent, setSvgContent] = useState<string | null>(null)
     const image = useMemo(() => {
-      if (illustration) return 'illustration'
-      if (productIcon) return 'icon'
+      if (illustration) {
+        return 'illustration'
+      }
+      if (productIcon) {
+        return 'icon'
+      }
 
       return 'none'
     }, [illustration, productIcon])
@@ -416,11 +420,9 @@ export const SelectableCard = forwardRef(
 
     const onKeyDown: KeyboardEventHandler = useCallback(
       event => {
-        if (event.key === ' ') {
-          if (innerRef?.current) {
-            event.preventDefault()
-            innerRef.current.click()
-          }
+        if (event.key === ' ' && innerRef?.current) {
+          event.preventDefault()
+          innerRef.current.click()
         }
       },
       [innerRef],
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
index 8100509c71..141de62e8b 100644
--- a/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -781,7 +781,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r99»"
+                    id="«raa»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -836,7 +836,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r99»"
+                        for="«raa»"
                       >
                         Ubuntu
                       </label>
@@ -847,8 +847,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r9f»"
-                      aria-describedby="«r9f»"
+                      aria-controls="«rag»"
+                      aria-describedby="«rag»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -858,8 +858,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«rag»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -867,7 +867,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r9e»"
+                          id="«raf»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -923,7 +923,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r9i»"
+                    id="«rak»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -978,7 +978,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r9i»"
+                        for="«rak»"
                       >
                         Debian
                       </label>
@@ -989,8 +989,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r9o»"
-                      aria-describedby="«r9o»"
+                      aria-controls="«raq»"
+                      aria-describedby="«raq»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -1000,8 +1000,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«raq»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -1009,7 +1009,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r9n»"
+                          id="«rap»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -1065,7 +1065,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r9r»"
+                    id="«rau»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -1120,7 +1120,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r9r»"
+                        for="«rau»"
                       >
                         CentOS
                       </label>
@@ -1131,8 +1131,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«ra1»"
-                      aria-describedby="«ra1»"
+                      aria-controls="«rb4»"
+                      aria-describedby="«rb4»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -1142,8 +1142,8 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«rb4»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -1151,7 +1151,7 @@ exports[`SelectableCardOptionGroup > onChange and onChangeOption are being calle
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«ra0»"
+                          id="«rb3»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -2066,8 +2066,8 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                         class="emotion-45 emotion-1"
                       >
                         <div
+                          aria-controls="«r7»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-47 emotion-48"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -2131,7 +2131,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-19 emotion-20"
-                    id="«ra»"
+                    id="«rb»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -2186,7 +2186,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     >
                       <label
                         class="emotion-6 emotion-83 emotion-8"
-                        for="«ra»"
+                        for="«rb»"
                       >
                         Debian
                       </label>
@@ -2197,8 +2197,8 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     class="emotion-40 emotion-41 emotion-42"
                   >
                     <div
-                      aria-controls="«rg»"
-                      aria-describedby="«rg»"
+                      aria-controls="«rh»"
+                      aria-describedby="«rh»"
                       class="emotion-43 emotion-44"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -2208,8 +2208,8 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                         class="emotion-45 emotion-1"
                       >
                         <div
+                          aria-controls="«rh»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-47 emotion-48"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -2217,7 +2217,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«rf»"
+                          id="«rg»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -2273,7 +2273,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-19 emotion-20"
-                    id="«rj»"
+                    id="«rl»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -2328,7 +2328,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     >
                       <label
                         class="emotion-6 emotion-83 emotion-8"
-                        for="«rj»"
+                        for="«rl»"
                       >
                         CentOS
                       </label>
@@ -2339,8 +2339,8 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                     class="emotion-40 emotion-41 emotion-42"
                   >
                     <div
-                      aria-controls="«rp»"
-                      aria-describedby="«rp»"
+                      aria-controls="«rr»"
+                      aria-describedby="«rr»"
                       class="emotion-43 emotion-44"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -2350,8 +2350,8 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                         class="emotion-45 emotion-1"
                       >
                         <div
+                          aria-controls="«rr»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-47 emotion-48"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -2359,7 +2359,7 @@ exports[`SelectableCardOptionGroup > renders correctly 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«ro»"
+                          id="«rq»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -3179,7 +3179,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r7i»"
+                    id="«r8d»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -3234,7 +3234,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r7i»"
+                        for="«r8d»"
                       >
                         Ubuntu
                       </label>
@@ -3245,8 +3245,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r7o»"
-                      aria-describedby="«r7o»"
+                      aria-controls="«r8j»"
+                      aria-describedby="«r8j»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -3256,8 +3256,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r8j»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -3265,7 +3265,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r7n»"
+                          id="«r8i»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -3321,7 +3321,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r7r»"
+                    id="«r8n»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -3376,7 +3376,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r7r»"
+                        for="«r8n»"
                       >
                         Debian
                       </label>
@@ -3387,8 +3387,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r81»"
-                      aria-describedby="«r81»"
+                      aria-controls="«r8t»"
+                      aria-describedby="«r8t»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -3398,8 +3398,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r8t»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -3407,7 +3407,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r80»"
+                          id="«r8s»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -3463,7 +3463,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r84»"
+                    id="«r91»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -3518,7 +3518,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r84»"
+                        for="«r91»"
                       >
                         CentOS
                       </label>
@@ -3529,8 +3529,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r8a»"
-                      aria-describedby="«r8a»"
+                      aria-controls="«r97»"
+                      aria-describedby="«r97»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -3540,8 +3540,8 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r97»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -3549,7 +3549,7 @@ exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r89»"
+                          id="«r96»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -4369,7 +4369,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     checked=""
                     class="emotion-16 emotion-17"
                     disabled=""
-                    id="«r3a»"
+                    id="«r3m»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -4425,7 +4425,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r3a»"
+                        for="«r3m»"
                       >
                         Ubuntu
                       </label>
@@ -4436,8 +4436,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r3g»"
-                      aria-describedby="«r3g»"
+                      aria-controls="«r3s»"
+                      aria-describedby="«r3s»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -4447,8 +4447,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r3s»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="true"
                           data-dropdownvisible="false"
@@ -4456,7 +4456,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r3f»"
+                          id="«r3r»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -4512,7 +4512,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
                     disabled=""
-                    id="«r3j»"
+                    id="«r40»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -4568,7 +4568,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r3j»"
+                        for="«r40»"
                       >
                         Debian
                       </label>
@@ -4579,8 +4579,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r3p»"
-                      aria-describedby="«r3p»"
+                      aria-controls="«r46»"
+                      aria-describedby="«r46»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -4590,8 +4590,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r46»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="true"
                           data-dropdownvisible="false"
@@ -4599,7 +4599,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r3o»"
+                          id="«r45»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -4655,7 +4655,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
                     disabled=""
-                    id="«r3s»"
+                    id="«r4a»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -4711,7 +4711,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r3s»"
+                        for="«r4a»"
                       >
                         CentOS
                       </label>
@@ -4722,8 +4722,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r42»"
-                      aria-describedby="«r42»"
+                      aria-controls="«r4g»"
+                      aria-describedby="«r4g»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -4733,8 +4733,8 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r4g»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="true"
                           data-dropdownvisible="false"
@@ -4742,7 +4742,7 @@ exports[`SelectableCardOptionGroup > renders correctly with all options disabled
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r41»"
+                          id="«r4f»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -5537,7 +5537,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     aria-label="Ubuntu"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r1p»"
+                    id="«r1v»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -5596,8 +5596,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     class="emotion-34 emotion-35 emotion-36"
                   >
                     <div
-                      aria-controls="«r1s»"
-                      aria-describedby="«r1s»"
+                      aria-controls="«r22»"
+                      aria-describedby="«r22»"
                       class="emotion-37 emotion-38"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -5607,8 +5607,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                         class="emotion-39 emotion-1"
                       >
                         <div
+                          aria-controls="«r22»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-41 emotion-42"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -5616,7 +5616,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r1r»"
+                          id="«r21»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -5673,7 +5673,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     aria-invalid="false"
                     aria-label="Debian"
                     class="emotion-16 emotion-17"
-                    id="«r21»"
+                    id="«r28»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -5732,8 +5732,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     class="emotion-34 emotion-35 emotion-36"
                   >
                     <div
-                      aria-controls="«r24»"
-                      aria-describedby="«r24»"
+                      aria-controls="«r2b»"
+                      aria-describedby="«r2b»"
                       class="emotion-37 emotion-38"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -5743,8 +5743,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                         class="emotion-39 emotion-1"
                       >
                         <div
+                          aria-controls="«r2b»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-41 emotion-42"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -5752,7 +5752,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r23»"
+                          id="«r2a»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -5809,7 +5809,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     aria-invalid="false"
                     aria-label="CentOS"
                     class="emotion-16 emotion-17"
-                    id="«r29»"
+                    id="«r2h»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -5868,8 +5868,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                     class="emotion-34 emotion-35 emotion-36"
                   >
                     <div
-                      aria-controls="«r2c»"
-                      aria-describedby="«r2c»"
+                      aria-controls="«r2k»"
+                      aria-describedby="«r2k»"
                       class="emotion-37 emotion-38"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -5879,8 +5879,8 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                         class="emotion-39 emotion-1"
                       >
                         <div
+                          aria-controls="«r2k»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-41 emotion-42"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -5888,7 +5888,7 @@ exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r2b»"
+                          id="«r2j»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -6722,7 +6722,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     aria-invalid="true"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r5s»"
+                    id="«r6h»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -6777,7 +6777,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r5s»"
+                        for="«r6h»"
                       >
                         Ubuntu
                       </label>
@@ -6788,8 +6788,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r62»"
-                      aria-describedby="«r62»"
+                      aria-controls="«r6n»"
+                      aria-describedby="«r6n»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -6799,8 +6799,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r6n»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -6808,7 +6808,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r61»"
+                          id="«r6m»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -6874,7 +6874,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     aria-disabled="false"
                     aria-invalid="true"
                     class="emotion-16 emotion-17"
-                    id="«r65»"
+                    id="«r6r»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -6929,7 +6929,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     >
                       <label
                         class="emotion-34 emotion-82 emotion-36"
-                        for="«r65»"
+                        for="«r6r»"
                       >
                         Debian
                       </label>
@@ -6940,8 +6940,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r6b»"
-                      aria-describedby="«r6b»"
+                      aria-controls="«r71»"
+                      aria-describedby="«r71»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -6951,8 +6951,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r71»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -6960,7 +6960,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r6a»"
+                          id="«r70»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -7026,7 +7026,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     aria-disabled="false"
                     aria-invalid="true"
                     class="emotion-16 emotion-17"
-                    id="«r6e»"
+                    id="«r75»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -7081,7 +7081,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     >
                       <label
                         class="emotion-34 emotion-82 emotion-36"
-                        for="«r6e»"
+                        for="«r75»"
                       >
                         CentOS
                       </label>
@@ -7092,8 +7092,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r6k»"
-                      aria-describedby="«r6k»"
+                      aria-controls="«r7b»"
+                      aria-describedby="«r7b»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -7103,8 +7103,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r7b»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -7112,7 +7112,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`]
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r6j»"
+                          id="«r7a»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -7968,7 +7968,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     aria-invalid="true"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r50»"
+                    id="«r5i»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -8023,7 +8023,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r50»"
+                        for="«r5i»"
                       >
                         Ubuntu
                       </label>
@@ -8034,8 +8034,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r56»"
-                      aria-describedby="«r56»"
+                      aria-controls="«r5o»"
+                      aria-describedby="«r5o»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -8045,8 +8045,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r5o»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -8054,7 +8054,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r55»"
+                          id="«r5n»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -8120,7 +8120,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     aria-disabled="false"
                     aria-invalid="true"
                     class="emotion-16 emotion-17"
-                    id="«r59»"
+                    id="«r5s»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -8175,7 +8175,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     >
                       <label
                         class="emotion-34 emotion-82 emotion-36"
-                        for="«r59»"
+                        for="«r5s»"
                       >
                         Debian
                       </label>
@@ -8186,8 +8186,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r5f»"
-                      aria-describedby="«r5f»"
+                      aria-controls="«r62»"
+                      aria-describedby="«r62»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -8197,8 +8197,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r62»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -8206,7 +8206,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r5e»"
+                          id="«r61»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -8272,7 +8272,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     aria-disabled="false"
                     aria-invalid="true"
                     class="emotion-16 emotion-17"
-                    id="«r5i»"
+                    id="«r66»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -8327,7 +8327,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     >
                       <label
                         class="emotion-34 emotion-82 emotion-36"
-                        for="«r5i»"
+                        for="«r66»"
                       >
                         CentOS
                       </label>
@@ -8338,8 +8338,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r5o»"
-                      aria-describedby="«r5o»"
+                      aria-controls="«r6c»"
+                      aria-describedby="«r6c»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -8349,8 +8349,8 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r6c»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -8358,7 +8358,7 @@ exports[`SelectableCardOptionGroup > renders correctly with error message 1`] =
                           data-size="medium"
                           data-state="danger"
                           data-testid="select-input-selectable-card-option"
-                          id="«r5n»"
+                          id="«r6b»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -9205,7 +9205,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r8d»"
+                    id="«r9b»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -9260,7 +9260,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r8d»"
+                        for="«r9b»"
                       >
                         Ubuntu
                       </label>
@@ -9271,8 +9271,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r8j»"
-                      aria-describedby="«r8j»"
+                      aria-controls="«r9h»"
+                      aria-describedby="«r9h»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -9282,8 +9282,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r9h»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -9291,7 +9291,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r8i»"
+                          id="«r9g»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -9347,7 +9347,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r8m»"
+                    id="«r9l»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -9402,7 +9402,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r8m»"
+                        for="«r9l»"
                       >
                         Debian
                       </label>
@@ -9413,8 +9413,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r8s»"
-                      aria-describedby="«r8s»"
+                      aria-controls="«r9r»"
+                      aria-describedby="«r9r»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -9424,8 +9424,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r9r»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -9433,7 +9433,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r8r»"
+                          id="«r9q»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -9489,7 +9489,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r8v»"
+                    id="«r9v»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -9544,7 +9544,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r8v»"
+                        for="«r9v»"
                       >
                         CentOS
                       </label>
@@ -9555,8 +9555,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r95»"
-                      aria-describedby="«r95»"
+                      aria-controls="«ra5»"
+                      aria-describedby="«ra5»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -9566,8 +9566,8 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«ra5»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -9575,7 +9575,7 @@ exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r94»"
+                          id="«ra4»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -10466,8 +10466,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r2l»"
-                      aria-describedby="«r2l»"
+                      aria-controls="«r2u»"
+                      aria-describedby="«r2u»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -10477,8 +10477,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r2u»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -10486,7 +10486,7 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r2k»"
+                          id="«r2t»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -10608,8 +10608,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r2u»"
-                      aria-describedby="«r2u»"
+                      aria-controls="«r38»"
+                      aria-describedby="«r38»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -10619,8 +10619,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r38»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -10628,7 +10628,7 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r2t»"
+                          id="«r37»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -10750,8 +10750,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r37»"
-                      aria-describedby="«r37»"
+                      aria-controls="«r3i»"
+                      aria-describedby="«r3i»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -10761,8 +10761,8 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r3i»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -10770,7 +10770,7 @@ exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r36»"
+                          id="«r3h»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -11585,7 +11585,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r6n»"
+                    id="«r7f»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -11637,7 +11637,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     >
                       <label
                         class="emotion-32 emotion-33 emotion-34"
-                        for="«r6n»"
+                        for="«r7f»"
                       >
                         Ubuntu
                       </label>
@@ -11648,8 +11648,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     class="emotion-35 emotion-36 emotion-37"
                   >
                     <div
-                      aria-controls="«r6t»"
-                      aria-describedby="«r6t»"
+                      aria-controls="«r7l»"
+                      aria-describedby="«r7l»"
                       class="emotion-38 emotion-39"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -11659,8 +11659,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                         class="emotion-40 emotion-1"
                       >
                         <div
+                          aria-controls="«r7l»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-42 emotion-43"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -11668,7 +11668,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r6s»"
+                          id="«r7k»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -11724,7 +11724,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r70»"
+                    id="«r7p»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -11776,7 +11776,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     >
                       <label
                         class="emotion-32 emotion-76 emotion-34"
-                        for="«r70»"
+                        for="«r7p»"
                       >
                         Debian
                       </label>
@@ -11787,8 +11787,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     class="emotion-35 emotion-36 emotion-37"
                   >
                     <div
-                      aria-controls="«r76»"
-                      aria-describedby="«r76»"
+                      aria-controls="«r7v»"
+                      aria-describedby="«r7v»"
                       class="emotion-38 emotion-39"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -11798,8 +11798,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                         class="emotion-40 emotion-1"
                       >
                         <div
+                          aria-controls="«r7v»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-42 emotion-43"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -11807,7 +11807,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r75»"
+                          id="«r7u»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -11863,7 +11863,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r79»"
+                    id="«r83»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -11915,7 +11915,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     >
                       <label
                         class="emotion-32 emotion-76 emotion-34"
-                        for="«r79»"
+                        for="«r83»"
                       >
                         CentOS
                       </label>
@@ -11926,8 +11926,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                     class="emotion-35 emotion-36 emotion-37"
                   >
                     <div
-                      aria-controls="«r7f»"
-                      aria-describedby="«r7f»"
+                      aria-controls="«r89»"
+                      aria-describedby="«r89»"
                       class="emotion-38 emotion-39"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -11937,8 +11937,8 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                         class="emotion-40 emotion-1"
                       >
                         <div
+                          aria-controls="«r89»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-42 emotion-43"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -11946,7 +11946,7 @@ exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r7e»"
+                          id="«r88»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -12766,7 +12766,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«rs»"
+                    id="«rv»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -12821,7 +12821,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«rs»"
+                        for="«rv»"
                       >
                         Ubuntu
                       </label>
@@ -12832,8 +12832,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r12»"
-                      aria-describedby="«r12»"
+                      aria-controls="«r15»"
+                      aria-describedby="«r15»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -12843,8 +12843,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r15»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -12852,7 +12852,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r11»"
+                          id="«r14»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -12908,7 +12908,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r15»"
+                    id="«r19»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -12963,7 +12963,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r15»"
+                        for="«r19»"
                       >
                         Debian
                       </label>
@@ -12974,8 +12974,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r1b»"
-                      aria-describedby="«r1b»"
+                      aria-controls="«r1f»"
+                      aria-describedby="«r1f»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -12985,8 +12985,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r1f»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -12994,7 +12994,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r1a»"
+                          id="«r1e»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -13050,7 +13050,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r1e»"
+                    id="«r1j»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -13105,7 +13105,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r1e»"
+                        for="«r1j»"
                       >
                         CentOS
                       </label>
@@ -13116,8 +13116,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r1k»"
-                      aria-describedby="«r1k»"
+                      aria-controls="«r1p»"
+                      aria-describedby="«r1p»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -13127,8 +13127,8 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r1p»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -13136,7 +13136,7 @@ exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r1j»"
+                          id="«r1o»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -14020,7 +14020,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     aria-invalid="false"
                     checked=""
                     class="emotion-16 emotion-17"
-                    id="«r45»"
+                    id="«r4k»"
                     tabindex="-1"
                     type="radio"
                     value="ubuntu"
@@ -14075,7 +14075,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     >
                       <label
                         class="emotion-34 emotion-35 emotion-36"
-                        for="«r45»"
+                        for="«r4k»"
                       >
                         Ubuntu
                       </label>
@@ -14086,8 +14086,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r4b»"
-                      aria-describedby="«r4b»"
+                      aria-controls="«r4q»"
+                      aria-describedby="«r4q»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -14097,8 +14097,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r4q»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -14106,7 +14106,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r4a»"
+                          id="«r4p»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -14162,7 +14162,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
                     disabled=""
-                    id="«r4e»"
+                    id="«r4u»"
                     tabindex="-1"
                     type="radio"
                     value="debian"
@@ -14218,7 +14218,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     >
                       <label
                         class="emotion-34 emotion-80 emotion-36"
-                        for="«r4e»"
+                        for="«r4u»"
                       >
                         Debian
                       </label>
@@ -14229,8 +14229,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     class="emotion-37 emotion-83 emotion-39"
                   >
                     <div
-                      aria-controls="«r4k»"
-                      aria-describedby="«r4k»"
+                      aria-controls="«r54»"
+                      aria-describedby="«r54»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -14240,8 +14240,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r54»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="true"
                           data-dropdownvisible="false"
@@ -14249,7 +14249,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r4j»"
+                          id="«r53»"
                           role="combobox"
                           tabindex="0"
                         >
@@ -14305,7 +14305,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="«r4n»"
+                    id="«r58»"
                     tabindex="-1"
                     type="radio"
                     value="centos"
@@ -14360,7 +14360,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     >
                       <label
                         class="emotion-34 emotion-125 emotion-36"
-                        for="«r4n»"
+                        for="«r58»"
                       >
                         CentOS
                       </label>
@@ -14371,8 +14371,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                     class="emotion-37 emotion-38 emotion-39"
                   >
                     <div
-                      aria-controls="«r4t»"
-                      aria-describedby="«r4t»"
+                      aria-controls="«r5e»"
+                      aria-describedby="«r5e»"
                       class="emotion-40 emotion-41"
                       data-container-full-width="true"
                       tabindex="-1"
@@ -14382,8 +14382,8 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                         class="emotion-42 emotion-1"
                       >
                         <div
+                          aria-controls="«r5e»"
                           aria-expanded="false"
-                          aria-haspopup="listbox"
                           class="emotion-44 emotion-45"
                           data-disabled="false"
                           data-dropdownvisible="false"
@@ -14391,7 +14391,7 @@ exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`]
                           data-size="medium"
                           data-state="neutral"
                           data-testid="select-input-selectable-card-option"
-                          id="«r4s»"
+                          id="«r5d»"
                           role="combobox"
                           tabindex="0"
                         >
diff --git a/packages/ui/src/components/Slider/__stories__/PrefixSuffix.stories.tsx b/packages/ui/src/components/Slider/__stories__/PrefixSuffix.stories.tsx
index e52a4e230b..c52aae1dd5 100644
--- a/packages/ui/src/components/Slider/__stories__/PrefixSuffix.stories.tsx
+++ b/packages/ui/src/components/Slider/__stories__/PrefixSuffix.stories.tsx
@@ -33,13 +33,13 @@ export const PrefixSuffix: StoryFn<typeof Slider> = args => {
 
   const suffixDouble = useMemo(
     () => [
-      <Text as="span" variant="bodySmall">
+      <Text as="span" key="first suffix" variant="bodySmall">
         GB -{' '}
         <Text as="span" variant="bodySmallStrong">
           ${prices[0]}€/month
         </Text>
       </Text>,
-      <Text as="span" variant="bodySmall">
+      <Text as="span" key="second suffix" variant="bodySmall">
         GB -{' '}
         <Text as="span" variant="bodySmallStrong">
           ${prices[1]}€/month
diff --git a/packages/ui/src/components/Slider/components/DoubleSlider.tsx b/packages/ui/src/components/Slider/components/DoubleSlider.tsx
index 4fabad6a50..034cc87b4b 100644
--- a/packages/ui/src/components/Slider/components/DoubleSlider.tsx
+++ b/packages/ui/src/components/Slider/components/DoubleSlider.tsx
@@ -162,7 +162,9 @@ export const DoubleSlider = ({
   const activeValue = (side: 'left' | 'right') => {
     // Find the index of the min value (if side="left") and max value (side="right")
     if (side === 'left') {
-      if (selectedIndexes[0] === null) return 0
+      if (selectedIndexes[0] === null) {
+        return 0
+      }
       if (
         selectedIndexes[1] !== null &&
         selectedIndexes[1] < selectedIndexes[0]
@@ -173,7 +175,9 @@ export const DoubleSlider = ({
       return 0
     }
 
-    if (selectedIndexes[1] === null) return 1
+    if (selectedIndexes[1] === null) {
+      return 1
+    }
     if (
       selectedIndexes[0] !== null &&
       selectedIndexes[1] < selectedIndexes[0]
@@ -258,14 +262,18 @@ export const DoubleSlider = ({
               const index = activeValue('left')
               if (index === 0) {
                 internalOnChangeRef([min, selectedIndexes[1]])
-              } else internalOnChangeRef([selectedIndexes[0], max])
+              } else {
+                internalOnChangeRef([selectedIndexes[0], max])
+              }
             }
 
             if (side === 'right') {
               const index = activeValue('right')
               if (index === 0) {
                 internalOnChangeRef([min, selectedIndexes[1]])
-              } else internalOnChangeRef([selectedIndexes[0], max])
+              } else {
+                internalOnChangeRef([selectedIndexes[0], max])
+              }
             }
           } else {
             const newValue = Number.parseFloat(event.target.value)
@@ -310,9 +318,13 @@ export const DoubleSlider = ({
     if (tooltip === true) {
       return [Math.min(...selectedIndexes), Math.max(...selectedIndexes)]
     }
-    if (Array.isArray(tooltip)) return tooltip
+    if (Array.isArray(tooltip)) {
+      return tooltip
+    }
 
-    if (typeof tooltip === 'string') return tooltip
+    if (typeof tooltip === 'string') {
+      return tooltip
+    }
 
     return [null, null]
   }, [tooltip, selectedIndexes])
diff --git a/packages/ui/src/components/Slider/index.tsx b/packages/ui/src/components/Slider/index.tsx
index 144f5d02fd..4004056382 100644
--- a/packages/ui/src/components/Slider/index.tsx
+++ b/packages/ui/src/components/Slider/index.tsx
@@ -46,8 +46,12 @@ export const Slider = ({
     ? { max: Array.isArray(options) ? options.length - 1 : max, min: 0 }
     : { max, min }
   const gap = useMemo(() => {
-    if (options) return 3
-    if (input && double && !helper) return 0
+    if (options) {
+      return 3
+    }
+    if (input && double && !helper) {
+      return 0
+    }
 
     return 1
   }, [options, input, double, helper])
diff --git a/packages/ui/src/components/Snippet/__stories__/Prefixes.stories.tsx b/packages/ui/src/components/Snippet/__stories__/Prefixes.stories.tsx
index dfd72ab497..7bf9c4b923 100644
--- a/packages/ui/src/components/Snippet/__stories__/Prefixes.stories.tsx
+++ b/packages/ui/src/components/Snippet/__stories__/Prefixes.stories.tsx
@@ -8,7 +8,7 @@ pnpm start`
 
 export const Prefixes = (props: ComponentProps<typeof Snippet>) =>
   (['command', 'lines'] as const).map(suffix => (
-    <Snippet {...props} prefix={suffix} />
+    <Snippet key={suffix} {...props} prefix={suffix} />
   ))
 
 Prefixes.args = {
diff --git a/packages/ui/src/components/Stack/__stories__/helper.tsx b/packages/ui/src/components/Stack/__stories__/helper.tsx
index 6f13371e4b..d3cdd4e092 100644
--- a/packages/ui/src/components/Stack/__stories__/helper.tsx
+++ b/packages/ui/src/components/Stack/__stories__/helper.tsx
@@ -24,7 +24,7 @@ const ThirdChild = styled(Child)`
 `
 
 export const coloredChildren = [
-  <FirstChild>1</FirstChild>,
-  <SecondChild>2</SecondChild>,
-  <ThirdChild>3</ThirdChild>,
+  <FirstChild key="1">1</FirstChild>,
+  <SecondChild key="2">2</SecondChild>,
+  <ThirdChild key="3">3</ThirdChild>,
 ]
diff --git a/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx b/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx
index 124613c577..903a3d00aa 100644
--- a/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx
+++ b/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx
@@ -18,6 +18,7 @@ Sizes.decorators = [
       {['small', 'medium'].map((size, index) => (
         <StepList.Item
           bulletContent={(index + 1).toString()}
+          key={size}
           size={size as SizesType}
         >
           {size}
diff --git a/packages/ui/src/components/Stepper/__stories__/Disabled.stories.tsx b/packages/ui/src/components/Stepper/__stories__/Disabled.stories.tsx
index 626a2609fa..53c02e93c5 100644
--- a/packages/ui/src/components/Stepper/__stories__/Disabled.stories.tsx
+++ b/packages/ui/src/components/Stepper/__stories__/Disabled.stories.tsx
@@ -5,11 +5,11 @@ export const Disabled = Template.bind({})
 
 Disabled.args = {
   children: [
-    <Stepper.Step title="Step 1" />,
-    <Stepper.Step disabled title="Step 2" />,
-    <Stepper.Step title="Step 3" />,
-    <Stepper.Step disabled title="Step 4" />,
-    <Stepper.Step title="Step 5" />,
+    <Stepper.Step key="step-1" title="Step 1" />,
+    <Stepper.Step disabled key="step-2" title="Step 2" />,
+    <Stepper.Step key="step-3" title="Step 3" />,
+    <Stepper.Step disabled key="step-4" title="Step 4" />,
+    <Stepper.Step key="step-5" title="Step 5" />,
   ],
   interactive: true,
   selected: 2,
diff --git a/packages/ui/src/components/Stepper/__stories__/Interactive.stories.tsx b/packages/ui/src/components/Stepper/__stories__/Interactive.stories.tsx
index cc57f7d8b4..5085ba26ae 100644
--- a/packages/ui/src/components/Stepper/__stories__/Interactive.stories.tsx
+++ b/packages/ui/src/components/Stepper/__stories__/Interactive.stories.tsx
@@ -6,11 +6,11 @@ export const Interactive = Template.bind({})
 Interactive.args = {
   ...Template.args,
   children: [
-    <Stepper.Step title="Step 1" />,
-    <Stepper.Step title="Step 2" />,
-    <Stepper.Step title="Step 3" />,
-    <Stepper.Step title="Step 4" />,
-    <Stepper.Step title="Step 5" />,
+    <Stepper.Step key="step-1" title="Step 1" />,
+    <Stepper.Step key="step-2" title="Step 2" />,
+    <Stepper.Step key="step-3" title="Step 3" />,
+    <Stepper.Step key="step-4" title="Step 4" />,
+    <Stepper.Step key="step-5" title="Step 5" />,
   ],
   interactive: true,
   selected: 3,
diff --git a/packages/ui/src/components/Stepper/__stories__/Separator.stories.tsx b/packages/ui/src/components/Stepper/__stories__/Separator.stories.tsx
index fa04e442d6..b9db84e8ab 100644
--- a/packages/ui/src/components/Stepper/__stories__/Separator.stories.tsx
+++ b/packages/ui/src/components/Stepper/__stories__/Separator.stories.tsx
@@ -15,9 +15,9 @@ export const Separator: StoryFn<typeof Stepper> = args => (
 
 Separator.args = {
   children: [
-    <Stepper.Step title="Step 1" />,
-    <Stepper.Step title="Step 2" />,
-    <Stepper.Step title="Step 3" />,
+    <Stepper.Step key="step-1" title="Step 1" />,
+    <Stepper.Step key="step-2" title="Step 2" />,
+    <Stepper.Step key="step-3" title="Step 3" />,
   ],
   interactive: true,
   selected: 1,
diff --git a/packages/ui/src/components/Stepper/__stories__/Template.stories.tsx b/packages/ui/src/components/Stepper/__stories__/Template.stories.tsx
index 0c47877caa..8fa97a5906 100644
--- a/packages/ui/src/components/Stepper/__stories__/Template.stories.tsx
+++ b/packages/ui/src/components/Stepper/__stories__/Template.stories.tsx
@@ -5,8 +5,8 @@ export const Template: StoryFn<typeof Stepper> = args => <Stepper {...args} />
 
 Template.args = {
   children: [
-    <Stepper.Step title="Initialize" />,
-    <Stepper.Step title="Create" />,
-    <Stepper.Step title="Done" />,
+    <Stepper.Step key="initialize" title="Initialize" />,
+    <Stepper.Step key="create" title="Create" />,
+    <Stepper.Step key="done" title="Done" />,
   ],
 }
diff --git a/packages/ui/src/components/Stepper/__stories__/WithAnimation.stories.tsx b/packages/ui/src/components/Stepper/__stories__/WithAnimation.stories.tsx
index 72c1018df7..0f3be1351b 100644
--- a/packages/ui/src/components/Stepper/__stories__/WithAnimation.stories.tsx
+++ b/packages/ui/src/components/Stepper/__stories__/WithAnimation.stories.tsx
@@ -14,9 +14,9 @@ WithAnimation.parameters = {
 WithAnimation.args = {
   animated: true,
   children: [
-    <Stepper.Step title="Step 1" />,
-    <Stepper.Step title="Step 2" />,
-    <Stepper.Step title="Step 3" />,
+    <Stepper.Step key="step-1" title="Step 1" />,
+    <Stepper.Step key="step-2" title="Step 2" />,
+    <Stepper.Step key="step-3" title="Step 3" />,
   ],
   selected: 1,
 }
diff --git a/packages/ui/src/components/Stepper/index.tsx b/packages/ui/src/components/Stepper/index.tsx
index 945078f700..055b4753f0 100644
--- a/packages/ui/src/components/Stepper/index.tsx
+++ b/packages/ui/src/components/Stepper/index.tsx
@@ -89,7 +89,9 @@ const StyledLine = styled.div<{
       border-radius: ${({ theme }) => theme.radii.default};
       background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
       ${({ temporal }) => {
-        if (temporal === 'done') return 'width: 100%;'
+        if (temporal === 'done') {
+          return 'width: 100%;'
+        }
 
         return null
       }}
@@ -130,9 +132,13 @@ export const Stepper = ({
       >
         {Children.map(cleanChildren, (child, index) => {
           const getTemporal = () => {
-            if (index < selected) return 'done'
+            if (index < selected) {
+              return 'done'
+            }
 
-            if (index === selected) return 'current'
+            if (index === selected) {
+              return 'current'
+            }
 
             return 'next'
           }
diff --git a/packages/ui/src/components/SwitchButton/__tests__/index.test.tsx b/packages/ui/src/components/SwitchButton/__tests__/index.test.tsx
index 3453c4c91e..b13ec2abbc 100644
--- a/packages/ui/src/components/SwitchButton/__tests__/index.test.tsx
+++ b/packages/ui/src/components/SwitchButton/__tests__/index.test.tsx
@@ -5,6 +5,8 @@ import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
 import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest'
 import { SwitchButton } from '..'
 
+let resizeCallback: ResizeObserverCallback = () => {}
+
 describe('SwitchButton', () => {
   beforeAll(() => {
     Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
@@ -41,8 +43,6 @@ describe('SwitchButton', () => {
     ))
 
   test('renders correctly with children changing', () => {
-    let resizeCallback: ResizeObserverCallback = () => {}
-
     ResizeObserver = vi.fn((cb: ResizeObserverCallback) => {
       resizeCallback = cb
 
diff --git a/packages/ui/src/components/SwitchButton/index.tsx b/packages/ui/src/components/SwitchButton/index.tsx
index f8c7d8ce5b..6cb46bd3c5 100644
--- a/packages/ui/src/components/SwitchButton/index.tsx
+++ b/packages/ui/src/components/SwitchButton/index.tsx
@@ -86,7 +86,9 @@ export const SwitchButton = ({
   )
 
   const getPosition = (curentElement?: HTMLInputElement) => {
-    if (!curentElement) return 0
+    if (!curentElement) {
+      return 0
+    }
     const currentPosition = curentElement.getBoundingClientRect().left
     const containerPosition =
       containerRef.current?.getBoundingClientRect().left ?? 0
@@ -102,7 +104,9 @@ export const SwitchButton = ({
 
   useEffect(() => {
     const element = getElement(localValue)
-    if (!element) return undefined
+    if (!element) {
+      return undefined
+    }
 
     const resizeObserver = new ResizeObserver(() => {
       if (
@@ -190,11 +194,15 @@ export const SwitchButton = ({
             }}
             onMouseLeave={() => {
               setMouseDownSide(null)
-              if (mouseDownSide) setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              if (mouseDownSide) {
+                setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              }
             }}
             onMouseUp={() => {
               setMouseDownSide(null)
-              if (mouseDownSide) setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              if (mouseDownSide) {
+                setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              }
             }}
             ref={containerRef}
           >
diff --git a/packages/ui/src/components/Tabs/Tab.tsx b/packages/ui/src/components/Tabs/Tab.tsx
index e9c0acebc5..521b8363d6 100644
--- a/packages/ui/src/components/Tabs/Tab.tsx
+++ b/packages/ui/src/components/Tabs/Tab.tsx
@@ -173,7 +173,9 @@ export const Tab = forwardRef(
           }}
           onKeyDown={event => {
             onKeyDown?.(event)
-            if (!event.defaultPrevented && !disabled && value) onChange(value)
+            if (!event.defaultPrevented && !disabled && value) {
+              onChange(value)
+            }
           }}
           ref={ref as unknown as Ref<HTMLButtonElement>}
           role="tab"
diff --git a/packages/ui/src/components/Tabs/TabMenu.tsx b/packages/ui/src/components/Tabs/TabMenu.tsx
index c78ff0f988..f7fa7e8d79 100644
--- a/packages/ui/src/components/Tabs/TabMenu.tsx
+++ b/packages/ui/src/components/Tabs/TabMenu.tsx
@@ -50,6 +50,7 @@ export const TabMenu = forwardRef(
       id,
       disabled,
       className,
+      'aria-selected': ariaSelected,
       ...props
     }: TabMenuProps,
     ref: Ref<HTMLButtonElement>,
@@ -60,6 +61,7 @@ export const TabMenu = forwardRef(
           <StyledMenu
             aria-disabled={disabled ?? 'false'}
             aria-haspopup="menu"
+            aria-selected={ariaSelected}
             className={className}
             disabled={disabled}
             role="tab"
diff --git a/packages/ui/src/components/Tabs/__stories__/MenuDisabled.stories.tsx b/packages/ui/src/components/Tabs/__stories__/MenuDisabled.stories.tsx
index c2143f9e66..2e9649f9de 100644
--- a/packages/ui/src/components/Tabs/__stories__/MenuDisabled.stories.tsx
+++ b/packages/ui/src/components/Tabs/__stories__/MenuDisabled.stories.tsx
@@ -5,15 +5,27 @@ export const MenuDisabled = Template.bind({})
 
 MenuDisabled.args = {
   children: [
-    <Tabs.Tab value={1}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={2}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={3}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={4}>Choice</Tabs.Tab>,
-    <Tabs.Menu disabled disclosure={<span>I am a menu</span>}>
-      <Tabs.MenuItem value={5}>Choice</Tabs.MenuItem>
-      <Tabs.MenuItem value={6}>Choice</Tabs.MenuItem>
+    <Tabs.Tab key={1} value={1}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={2} value={2}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={3} value={3}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={4} value={4}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Menu disabled disclosure={<span>I am a menu</span>} key="menu">
+      <Tabs.MenuItem key={5} value={5}>
+        Choice
+      </Tabs.MenuItem>
+      <Tabs.MenuItem key={6} value={6}>
+        Choice
+      </Tabs.MenuItem>
     </Tabs.Menu>,
-    <Tabs.Tab>Choice</Tabs.Tab>,
+    <Tabs.Tab key="last">Choice</Tabs.Tab>,
   ],
   selected: 1,
 }
diff --git a/packages/ui/src/components/Tabs/__stories__/WithBadge.stories.tsx b/packages/ui/src/components/Tabs/__stories__/WithBadge.stories.tsx
index 6a4d126953..cf4557f451 100644
--- a/packages/ui/src/components/Tabs/__stories__/WithBadge.stories.tsx
+++ b/packages/ui/src/components/Tabs/__stories__/WithBadge.stories.tsx
@@ -12,6 +12,7 @@ WithBadge.args = {
           Beta
         </Badge>
       }
+      key={1}
       value={1}
     >
       Text
@@ -23,6 +24,7 @@ WithBadge.args = {
         </Badge>
       }
       counter={1}
+      key={2}
       value={2}
     >
       Text
@@ -34,6 +36,7 @@ WithBadge.args = {
         </Badge>
       }
       counter={10}
+      key={3}
       value={3}
     >
       Text
@@ -45,6 +48,7 @@ WithBadge.args = {
         </Badge>
       }
       disabled
+      key={4}
       value={4}
     >
       Text
@@ -57,6 +61,7 @@ WithBadge.args = {
       }
       counter={1}
       disabled
+      key={5}
       value={5}
     >
       Text
@@ -69,6 +74,7 @@ WithBadge.args = {
       }
       counter={10}
       disabled
+      key={6}
       value={6}
     >
       Text
diff --git a/packages/ui/src/components/Tabs/__stories__/WithCounter.stories.tsx b/packages/ui/src/components/Tabs/__stories__/WithCounter.stories.tsx
index 4e085b8f20..e56f353984 100644
--- a/packages/ui/src/components/Tabs/__stories__/WithCounter.stories.tsx
+++ b/packages/ui/src/components/Tabs/__stories__/WithCounter.stories.tsx
@@ -5,20 +5,22 @@ export const WithCounter = Template.bind({})
 
 WithCounter.args = {
   children: [
-    <Tabs.Tab value={1}>No Counter</Tabs.Tab>,
-    <Tabs.Tab counter={0} value={2}>
+    <Tabs.Tab key={1} value={1}>
+      No Counter
+    </Tabs.Tab>,
+    <Tabs.Tab counter={0} key={2} value={2}>
       No items
     </Tabs.Tab>,
-    <Tabs.Tab counter={8} value={3}>
+    <Tabs.Tab counter={8} key={3} value={3}>
       Some items
     </Tabs.Tab>,
-    <Tabs.Tab counter={80} value={4}>
+    <Tabs.Tab counter={80} key={4} value={4}>
       Some items
     </Tabs.Tab>,
-    <Tabs.Tab counter={8000} value={5}>
+    <Tabs.Tab counter={8000} key={5} value={5}>
       Some items
     </Tabs.Tab>,
-    <Tabs.Tab counter="99+" value={6}>
+    <Tabs.Tab counter="99+" key={6} value={6}>
       Some items
     </Tabs.Tab>,
   ],
diff --git a/packages/ui/src/components/Tabs/__stories__/WithMenu.stories.tsx b/packages/ui/src/components/Tabs/__stories__/WithMenu.stories.tsx
index 5323485696..6fb05f92c3 100644
--- a/packages/ui/src/components/Tabs/__stories__/WithMenu.stories.tsx
+++ b/packages/ui/src/components/Tabs/__stories__/WithMenu.stories.tsx
@@ -5,15 +5,27 @@ export const WithMenu = Template.bind({})
 
 WithMenu.args = {
   children: [
-    <Tabs.Tab value={1}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={2}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={3}>Choice</Tabs.Tab>,
-    <Tabs.Tab value={4}>Choice</Tabs.Tab>,
-    <Tabs.Menu disclosure={<span>I am a menu</span>}>
-      <Tabs.MenuItem value={5}>Choice</Tabs.MenuItem>
-      <Tabs.MenuItem value={6}>Choice</Tabs.MenuItem>
+    <Tabs.Tab key={1} value={1}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={2} value={2}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={3} value={3}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Tab key={4} value={4}>
+      Choice
+    </Tabs.Tab>,
+    <Tabs.Menu disclosure={<span>I am a menu</span>} key="menu">
+      <Tabs.MenuItem key={5} value={5}>
+        Choice
+      </Tabs.MenuItem>
+      <Tabs.MenuItem key={6} value={6}>
+        Choice
+      </Tabs.MenuItem>
     </Tabs.Menu>,
-    <Tabs.Tab>Choice</Tabs.Tab>,
+    <Tabs.Tab key="last">Choice</Tabs.Tab>,
   ],
   selected: 1,
 }
diff --git a/packages/ui/src/components/Tabs/__stories__/WithSubtitle.stories.tsx b/packages/ui/src/components/Tabs/__stories__/WithSubtitle.stories.tsx
index 97196149cc..3a9c33717c 100644
--- a/packages/ui/src/components/Tabs/__stories__/WithSubtitle.stories.tsx
+++ b/packages/ui/src/components/Tabs/__stories__/WithSubtitle.stories.tsx
@@ -12,6 +12,7 @@ WithSubtitle.args = {
           Beta
         </Badge>
       }
+      key={1}
       subtitle="Subtitle"
       value={1}
     >
@@ -24,6 +25,7 @@ WithSubtitle.args = {
         </Badge>
       }
       counter={1}
+      key={2}
       subtitle="Subtitle"
       value={2}
     >
@@ -36,6 +38,7 @@ WithSubtitle.args = {
         </Badge>
       }
       counter={10}
+      key={3}
       subtitle="Subtitle"
       value={3}
     >
@@ -48,6 +51,7 @@ WithSubtitle.args = {
         </Badge>
       }
       disabled
+      key={4}
       subtitle="Subtitle Beta"
       value={4}
     >
@@ -61,6 +65,7 @@ WithSubtitle.args = {
       }
       counter={1}
       disabled
+      key={5}
       subtitle="Subtitle short"
       value={5}
     >
@@ -69,6 +74,7 @@ WithSubtitle.args = {
     <Tabs.Tab
       counter={10}
       disabled
+      key={6}
       subtitle="Subtitle with a long long long long long long text"
       value={6}
     >
@@ -76,6 +82,7 @@ WithSubtitle.args = {
     </Tabs.Tab>,
     <Tabs.Tab
       counter={10}
+      key={7}
       subtitle="Subtitle with a long long long long long long text"
       value={6}
     >
diff --git a/packages/ui/src/components/Tabs/index.tsx b/packages/ui/src/components/Tabs/index.tsx
index e1ee045a1c..c613b44f55 100644
--- a/packages/ui/src/components/Tabs/index.tsx
+++ b/packages/ui/src/components/Tabs/index.tsx
@@ -139,7 +139,9 @@ export const Tabs = ({
     }
 
     return () => {
-      if (displayMore) element.removeEventListener('scroll', handler)
+      if (displayMore) {
+        element.removeEventListener('scroll', handler)
+      }
     }
   }, [displayMore])
 
diff --git a/packages/ui/src/components/Tag/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Tag/__stories__/Sentiments.stories.tsx
index 4ec364e729..7c910e30f5 100644
--- a/packages/ui/src/components/Tag/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/Tag/__stories__/Sentiments.stories.tsx
@@ -5,7 +5,7 @@ import { Tag } from '..'
 
 export const Sentiments = (props: ComponentProps<typeof Tag>) =>
   SENTIMENTS.map(sentiment => (
-    <Tag {...props} key={sentiment} sentiment={sentiment}>
+    <Tag key={sentiment} {...props} sentiment={sentiment}>
       {sentiment}
     </Tag>
   ))
diff --git a/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx
index 2cf8dd7a04..e162546ba6 100644
--- a/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx
+++ b/packages/ui/src/components/Text/__stories__/Sentiments.stories.tsx
@@ -7,9 +7,9 @@ export const Sentiments: StoryFn<ComponentProps<typeof Text>> = args => (
   <div>
     {SENTIMENTS.map(sentiment => (
       <Text
+        key={sentiment}
         {...args}
         as="div"
-        key={sentiment}
         sentiment={sentiment}
         variant="body"
       >
diff --git a/packages/ui/src/components/Text/__stories__/Variants.stories.tsx b/packages/ui/src/components/Text/__stories__/Variants.stories.tsx
index ac4977ff5b..b98f488532 100644
--- a/packages/ui/src/components/Text/__stories__/Variants.stories.tsx
+++ b/packages/ui/src/components/Text/__stories__/Variants.stories.tsx
@@ -4,7 +4,7 @@ import { Text, textVariants } from '../index'
 export const Variants: StoryFn<typeof Text> = props => (
   <>
     {textVariants.map(variant => (
-      <Text {...props} as="div" key={variant} variant={variant}>
+      <Text key={variant} {...props} as="div" variant={variant}>
         {variant}
       </Text>
     ))}
diff --git a/packages/ui/src/components/TextInput/__stories__/Size.stories.tsx b/packages/ui/src/components/TextInput/__stories__/Size.stories.tsx
index cfc8d6da68..215fd4f69d 100644
--- a/packages/ui/src/components/TextInput/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/TextInput/__stories__/Size.stories.tsx
@@ -14,8 +14,8 @@ export const Size: StoryFn<typeof TextInput> = args => {
         ) as (keyof typeof TEXTINPUT_SIZE_HEIGHT)[]
       ).map(size => (
         <TextInput
-          {...args}
           key={size}
+          {...args}
           label={size}
           onChange={event => setValue(event.target.value)}
           placeholder="Placeholder"
diff --git a/packages/ui/src/components/TimeInput/helpers.ts b/packages/ui/src/components/TimeInput/helpers.ts
index 1ab199b8e5..b76bf76c19 100644
--- a/packages/ui/src/components/TimeInput/helpers.ts
+++ b/packages/ui/src/components/TimeInput/helpers.ts
@@ -12,8 +12,12 @@ const isValidNewHour = (old: number, key: number, timeFormat: number) => {
 }
 
 export const isCompleteHour = (timeFormat: number, value: number) => {
-  if (timeFormat === 12 && value > 1) return true
-  if (timeFormat === 24 && value > 2) return true
+  if (timeFormat === 12 && value > 1) {
+    return true
+  }
+  if (timeFormat === 24 && value > 2) {
+    return true
+  }
 
   return false
 }
@@ -30,7 +34,9 @@ export const canConcat = (
 
 export const getLastTypedChar = (value: string, oldValue?: number) => {
   // Detect the newly typed character(s)
-  if (!oldValue) return value
+  if (!oldValue) {
+    return value
+  }
 
   const oldValueString = oldValue.toString()
   const valueCorrected = value.startsWith('0') ? value.slice(1) : value
@@ -48,9 +54,15 @@ export const getValueByType = (
   type: (typeof TIME_KEYS)[number],
   value?: Date | null,
 ) => {
-  if (!value) return 0
-  if (type === 'h') return value.getHours()
-  if (type === 'm') return value.getMinutes()
+  if (!value) {
+    return 0
+  }
+  if (type === 'h') {
+    return value.getHours()
+  }
+  if (type === 'm') {
+    return value.getMinutes()
+  }
 
   return value.getSeconds()
 }
@@ -60,8 +72,12 @@ export const setValueByType = (
   date: Date | undefined,
   value: number,
 ) => {
-  if (type === 'h') return date?.setHours(value)
-  if (type === 'm') return date?.setMinutes(value)
+  if (type === 'h') {
+    return date?.setHours(value)
+  }
+  if (type === 'm') {
+    return date?.setMinutes(value)
+  }
 
   return date?.setSeconds(value)
 }
diff --git a/packages/ui/src/components/TimeInput/index.tsx b/packages/ui/src/components/TimeInput/index.tsx
index e0fc64451b..0cbd5b07db 100644
--- a/packages/ui/src/components/TimeInput/index.tsx
+++ b/packages/ui/src/components/TimeInput/index.tsx
@@ -223,7 +223,9 @@ export const TimeInput = ({
 }: TimeInputProps) => {
   const localId = useId()
   const defaultPeriod = useMemo(() => {
-    if (value) return value.getHours() >= 12 ? 'pm' : 'am'
+    if (value) {
+      return value.getHours() >= 12 ? 'pm' : 'am'
+    }
 
     return undefined
   }, [value])
@@ -281,7 +283,9 @@ export const TimeInput = ({
       const newValue = (valueToChange % 10) * 10 + key
 
       setValueByType(type, newTime, newValue)
-    } else setValueByType(type, newTime, key)
+    } else {
+      setValueByType(type, newTime, key)
+    }
 
     const newValue = getValueByType(type, newTime)
     // Focus to next input if the current input has a valid time
@@ -291,10 +295,8 @@ export const TimeInput = ({
       refSeconds.current?.focus()
     }
 
-    if (type === 'h') {
-      if (isCompleteHour(timeFormat, newValue)) {
-        refMinutes.current?.focus()
-      }
+    if (type === 'h' && isCompleteHour(timeFormat, newValue)) {
+      refMinutes.current?.focus()
     }
     const newFilled = { ...filled }
     newFilled[type] = true
@@ -346,15 +348,25 @@ export const TimeInput = ({
 
   // Go to next input
   const handleNext = (type: 'h' | 'm' | 's') => {
-    if (type === 'h') refMinutes.current?.focus()
-    if (type === 'm') refSeconds.current?.focus()
-    if (type === 's' && timeFormat === 12) refPeriod.current?.focus()
+    if (type === 'h') {
+      refMinutes.current?.focus()
+    }
+    if (type === 'm') {
+      refSeconds.current?.focus()
+    }
+    if (type === 's' && timeFormat === 12) {
+      refPeriod.current?.focus()
+    }
   }
 
   // Go to previous input
   const handlePrevious = (type: 'h' | 'm' | 's') => {
-    if (type === 'm') refHours.current?.focus()
-    if (type === 's') refMinutes.current?.focus()
+    if (type === 'm') {
+      refHours.current?.focus()
+    }
+    if (type === 's') {
+      refMinutes.current?.focus()
+    }
   }
 
   return (
@@ -388,21 +400,33 @@ export const TimeInput = ({
         <Stack direction="row">
           {TIME_KEYS.map(type => {
             const computedRef = () => {
-              if (type === 'h') return refHours
-              if (type === 'm') return refMinutes
+              if (type === 'h') {
+                return refHours
+              }
+              if (type === 'm') {
+                return refMinutes
+              }
 
               return refSeconds
             }
             const fullName = () => {
-              if (type === 'h') return 'hours'
-              if (type === 'm') return 'minutes'
+              if (type === 'h') {
+                return 'hours'
+              }
+              if (type === 'm') {
+                return 'minutes'
+              }
 
               return 'seconds'
             }
 
             const computeMaxValue = () => {
-              if (type === 'h' && timeFormat === 12) return 12
-              if (type === 'h' && timeFormat === 24) return 23
+              if (type === 'h' && timeFormat === 12) {
+                return 12
+              }
+              if (type === 'h' && timeFormat === 24) {
+                return 23
+              }
 
               return 59
             }
@@ -495,7 +519,9 @@ export const TimeInput = ({
               onChange={event => {
                 if (!readOnly && !disabled) {
                   const key = event.target.value.slice(-1)
-                  if (isAOrP(key)) handleChangePeriod(key as 'a' | 'p')
+                  if (isAOrP(key)) {
+                    handleChangePeriod(key as 'a' | 'p')
+                  }
                 }
               }}
               onClick={event => event.stopPropagation()}
diff --git a/packages/ui/src/components/Tooltip/__stories__/Placement.stories.tsx b/packages/ui/src/components/Tooltip/__stories__/Placement.stories.tsx
index 6c88d2ac5c..6e9d8ed74d 100644
--- a/packages/ui/src/components/Tooltip/__stories__/Placement.stories.tsx
+++ b/packages/ui/src/components/Tooltip/__stories__/Placement.stories.tsx
@@ -13,8 +13,8 @@ const PLACEMENTS: ComponentProps<typeof Tooltip>['placement'][] = [
 export const Placement = (props: ComponentProps<typeof Tooltip>) =>
   PLACEMENTS.map(placement => (
     <Tooltip
-      {...props}
       key={placement}
+      {...props}
       placement={placement}
       text="Hello there"
     >
diff --git a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
index eb7aafbedb..cb44d67c55 100644
--- a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -1089,7 +1089,7 @@ exports[`UnitInput > renders click 1`] = `
             class="emotion-7 emotion-8"
             data-size="medium"
             data-testid="unit-input"
-            id="«rk»"
+            id="«ro»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -1103,8 +1103,8 @@ exports[`UnitInput > renders click 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«rm»"
-            aria-describedby="«rm»"
+            aria-controls="«rq»"
+            aria-describedby="«rq»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -1113,8 +1113,8 @@ exports[`UnitInput > renders click 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«rq»"
                 aria-expanded="true"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="true"
@@ -1152,7 +1152,7 @@ exports[`UnitInput > renders click 1`] = `
               class="emotion-25 emotion-26 emotion-27"
               data-animated="false"
               data-has-arrow="false"
-              id="«rm»"
+              id="«rq»"
               role="dialog"
               style="opacity: 1;"
             >
@@ -1720,8 +1720,8 @@ exports[`UnitInput > renders with default props 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r2»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -2629,7 +2629,7 @@ exports[`UnitInput > renders with default value 1`] = `
       >
         <label
           class="emotion-4 emotion-5 emotion-6"
-          for="«r37»"
+          for="«r3n»"
         />
         <span
           class="emotion-7 emotion-6"
@@ -2650,7 +2650,7 @@ exports[`UnitInput > renders with default value 1`] = `
             data-size="large"
             data-testid="unit-input"
             disabled=""
-            id="«r37»"
+            id="«r3n»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -2665,8 +2665,8 @@ exports[`UnitInput > renders with default value 1`] = `
           class="emotion-16 emotion-17 emotion-18"
         >
           <div
-            aria-controls="«r3b»"
-            aria-describedby="«r3b»"
+            aria-controls="«r3r»"
+            aria-describedby="«r3r»"
             class="emotion-19 emotion-20"
             data-container-full-width="true"
             tabindex="-1"
@@ -2675,8 +2675,8 @@ exports[`UnitInput > renders with default value 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r3r»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-23 emotion-24"
                 data-disabled="true"
                 data-dropdownvisible="false"
@@ -3546,7 +3546,7 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
             data-size="large"
             data-testid="unit-input"
             disabled=""
-            id="«r14»"
+            id="«r1a»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -3560,8 +3560,8 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«r16»"
-            aria-describedby="«r16»"
+            aria-controls="«r1c»"
+            aria-describedby="«r1c»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -3570,8 +3570,8 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r1c»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="true"
                 data-dropdownvisible="false"
@@ -4454,7 +4454,7 @@ exports[`UnitInput > renders with dropdownAlign center 1`] = `
             class="emotion-7 emotion-8"
             data-size="large"
             data-testid="unit-input"
-            id="«r19»"
+            id="«r1g»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -4468,8 +4468,8 @@ exports[`UnitInput > renders with dropdownAlign center 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«r1b»"
-            aria-describedby="«r1b»"
+            aria-controls="«r1i»"
+            aria-describedby="«r1i»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -4478,8 +4478,8 @@ exports[`UnitInput > renders with dropdownAlign center 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r1i»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -5390,7 +5390,7 @@ exports[`UnitInput > renders with error  and success 1`] = `
             data-size="large"
             data-success="success"
             data-testid="unit-input"
-            id="«r1q»"
+            id="«r24»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -5414,8 +5414,8 @@ exports[`UnitInput > renders with error  and success 1`] = `
           class="emotion-11 emotion-12 emotion-13"
         >
           <div
-            aria-controls="«r1s»"
-            aria-describedby="«r1s»"
+            aria-controls="«r26»"
+            aria-describedby="«r26»"
             class="emotion-14 emotion-15"
             data-container-full-width="true"
             tabindex="-1"
@@ -5424,8 +5424,8 @@ exports[`UnitInput > renders with error  and success 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r26»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-18 emotion-19"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -6338,7 +6338,7 @@ exports[`UnitInput > renders with error 1`] = `
             data-error="error"
             data-size="large"
             data-testid="unit-input"
-            id="«r1k»"
+            id="«r1t»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -6362,8 +6362,8 @@ exports[`UnitInput > renders with error 1`] = `
           class="emotion-11 emotion-12 emotion-13"
         >
           <div
-            aria-controls="«r1m»"
-            aria-describedby="«r1m»"
+            aria-controls="«r1v»"
+            aria-describedby="«r1v»"
             class="emotion-14 emotion-15"
             data-container-full-width="true"
             tabindex="-1"
@@ -6372,8 +6372,8 @@ exports[`UnitInput > renders with error 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r1v»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-18 emotion-19"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -7287,7 +7287,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
       >
         <label
           class="emotion-4 emotion-5 emotion-6"
-          for="«r2p»"
+          for="«r37»"
         >
           label
         </label>
@@ -7310,7 +7310,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
             data-size="large"
             data-testid="unit-input"
             disabled=""
-            id="«r2p»"
+            id="«r37»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -7324,8 +7324,8 @@ exports[`UnitInput > renders with label and label information 1`] = `
           class="emotion-16 emotion-17 emotion-18"
         >
           <div
-            aria-controls="«r2t»"
-            aria-describedby="«r2t»"
+            aria-controls="«r3b»"
+            aria-describedby="«r3b»"
             class="emotion-19 emotion-20"
             data-container-full-width="true"
             tabindex="-1"
@@ -7334,8 +7334,8 @@ exports[`UnitInput > renders with label and label information 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r3b»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-23 emotion-24"
                 data-disabled="true"
                 data-dropdownvisible="false"
@@ -8207,7 +8207,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
     >
       <label
         class="emotion-2 emotion-3 emotion-4"
-        for="«r2j»"
+        for="«r30»"
       >
         label
       </label>
@@ -8224,7 +8224,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
             data-size="large"
             data-testid="unit-input"
             disabled=""
-            id="«r2j»"
+            id="«r30»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -8238,8 +8238,8 @@ exports[`UnitInput > renders with label and no label information 1`] = `
           class="emotion-12 emotion-13 emotion-14"
         >
           <div
-            aria-controls="«r2m»"
-            aria-describedby="«r2m»"
+            aria-controls="«r33»"
+            aria-describedby="«r33»"
             class="emotion-15 emotion-16"
             data-container-full-width="true"
             tabindex="-1"
@@ -8248,8 +8248,8 @@ exports[`UnitInput > renders with label and no label information 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r33»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-19 emotion-20"
                 data-disabled="true"
                 data-dropdownvisible="false"
@@ -8731,7 +8731,7 @@ exports[`UnitInput > renders with min max 1`] = `
             class="emotion-7 emotion-8"
             data-size="large"
             data-testid="unit-input"
-            id="«r5»"
+            id="«r6»"
             max="100"
             min="10"
             name="-value"
@@ -8745,8 +8745,8 @@ exports[`UnitInput > renders with min max 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«r7»"
-            aria-describedby="«r7»"
+            aria-controls="«r8»"
+            aria-describedby="«r8»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -8755,8 +8755,8 @@ exports[`UnitInput > renders with min max 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r8»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -9665,7 +9665,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
       >
         <label
           class="emotion-4 emotion-5 emotion-6"
-          for="«r30»"
+          for="«r3f»"
         />
         <span
           class="emotion-7 emotion-6"
@@ -9686,7 +9686,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
             data-size="large"
             data-testid="unit-input"
             disabled=""
-            id="«r30»"
+            id="«r3f»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -9700,8 +9700,8 @@ exports[`UnitInput > renders with no label and label information 1`] = `
           class="emotion-16 emotion-17 emotion-18"
         >
           <div
-            aria-controls="«r34»"
-            aria-describedby="«r34»"
+            aria-controls="«r3j»"
+            aria-describedby="«r3j»"
             class="emotion-19 emotion-20"
             data-container-full-width="true"
             tabindex="-1"
@@ -9710,8 +9710,8 @@ exports[`UnitInput > renders with no label and label information 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r3j»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-23 emotion-24"
                 data-disabled="true"
                 data-dropdownvisible="false"
@@ -10594,7 +10594,7 @@ exports[`UnitInput > renders with size large 1`] = `
             class="emotion-7 emotion-8"
             data-size="large"
             data-testid="unit-input"
-            id="«rv»"
+            id="«r14»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -10608,8 +10608,8 @@ exports[`UnitInput > renders with size large 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«r11»"
-            aria-describedby="«r11»"
+            aria-controls="«r16»"
+            aria-describedby="«r16»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -10618,8 +10618,8 @@ exports[`UnitInput > renders with size large 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r16»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -11101,7 +11101,7 @@ exports[`UnitInput > renders with size medioum 1`] = `
             class="emotion-7 emotion-8"
             data-size="medium"
             data-testid="unit-input"
-            id="«rf»"
+            id="«ri»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -11115,8 +11115,8 @@ exports[`UnitInput > renders with size medioum 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«rh»"
-            aria-describedby="«rh»"
+            aria-controls="«rk»"
+            aria-describedby="«rk»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -11125,8 +11125,8 @@ exports[`UnitInput > renders with size medioum 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«rk»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -11608,7 +11608,7 @@ exports[`UnitInput > renders with size small 1`] = `
             class="emotion-7 emotion-8"
             data-size="small"
             data-testid="unit-input"
-            id="«ra»"
+            id="«rc»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -11622,8 +11622,8 @@ exports[`UnitInput > renders with size small 1`] = `
           class="emotion-9 emotion-10 emotion-11"
         >
           <div
-            aria-controls="«rc»"
-            aria-describedby="«rc»"
+            aria-controls="«re»"
+            aria-describedby="«re»"
             class="emotion-12 emotion-13"
             data-container-full-width="true"
             tabindex="-1"
@@ -11632,8 +11632,8 @@ exports[`UnitInput > renders with size small 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«re»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-16 emotion-17"
                 data-disabled="false"
                 data-dropdownvisible="false"
@@ -12543,7 +12543,7 @@ exports[`UnitInput > renders with success 1`] = `
             data-size="large"
             data-success="true"
             data-testid="unit-input"
-            id="«r1e»"
+            id="«r1m»"
             max="9007199254740991"
             min="0"
             name="test-value"
@@ -12567,8 +12567,8 @@ exports[`UnitInput > renders with success 1`] = `
           class="emotion-11 emotion-12 emotion-13"
         >
           <div
-            aria-controls="«r1g»"
-            aria-describedby="«r1g»"
+            aria-controls="«r1o»"
+            aria-describedby="«r1o»"
             class="emotion-14 emotion-15"
             data-container-full-width="true"
             tabindex="-1"
@@ -12577,8 +12577,8 @@ exports[`UnitInput > renders with success 1`] = `
               class="emotion-0 emotion-1"
             >
               <div
+                aria-controls="«r1o»"
                 aria-expanded="false"
-                aria-haspopup="listbox"
                 class="emotion-18 emotion-19"
                 data-disabled="false"
                 data-dropdownvisible="false"
diff --git a/packages/ui/src/components/VerificationCode/__stories__/Size.stories.tsx b/packages/ui/src/components/VerificationCode/__stories__/Size.stories.tsx
index 41f8b03a6e..ec1cbdadfa 100644
--- a/packages/ui/src/components/VerificationCode/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/VerificationCode/__stories__/Size.stories.tsx
@@ -6,10 +6,10 @@ export const Size: StoryFn<typeof VerificationCode> = args => (
   <Stack direction="column" gap={2}>
     {verificationCodeSizes.map(size => (
       <VerificationCode
+        key={size}
         {...args}
         fields={4}
         initialValue="1"
-        key={size}
         label={size}
         size={size}
       />
diff --git a/packages/ui/src/components/VerificationCode/index.tsx b/packages/ui/src/components/VerificationCode/index.tsx
index 5d49863d9c..86fabbc20d 100644
--- a/packages/ui/src/components/VerificationCode/index.tsx
+++ b/packages/ui/src/components/VerificationCode/index.tsx
@@ -239,7 +239,7 @@ export const VerificationCode = ({
       const vals = [...values]
 
       switch (event.key) {
-        case 'Backspace':
+        case 'Backspace': {
           event.preventDefault()
 
           if (values[index]) {
@@ -253,30 +253,36 @@ export const VerificationCode = ({
             triggerChange(vals)
           }
           break
+        }
 
-        case 'ArrowLeft':
+        case 'ArrowLeft': {
           event.preventDefault()
           prev?.current?.focus()
           break
+        }
 
-        case 'ArrowRight':
+        case 'ArrowRight': {
           event.preventDefault()
           next?.current?.focus()
           break
+        }
 
-        case 'ArrowUp':
+        case 'ArrowUp': {
           event.preventDefault()
           first?.current?.focus()
           break
+        }
 
-        case 'ArrowDown':
+        case 'ArrowDown': {
           event.preventDefault()
           last?.current?.focus()
 
           break
+        }
 
-        default:
+        default: {
           break
+        }
       }
     }
 
diff --git a/packages/ui/src/helpers/recursivelyGetChildrenString.ts b/packages/ui/src/helpers/recursivelyGetChildrenString.ts
index 559734d63f..3e9d1162e9 100644
--- a/packages/ui/src/helpers/recursivelyGetChildrenString.ts
+++ b/packages/ui/src/helpers/recursivelyGetChildrenString.ts
@@ -1,8 +1,12 @@
 import type { ReactNode } from 'react'
 
 const recursivelyGetChildrenString = (children: ReactNode): string => {
-  if (typeof children === 'string') return children
-  if (Array.isArray(children)) return '' // We can't determine which string to display in tooltip
+  if (typeof children === 'string') {
+    return children
+  }
+  if (Array.isArray(children)) {
+    return ''
+  } // We can't determine which string to display in tooltip
   if (typeof children === 'object') {
     const childProps = (
       (children as unknown as Record<string, unknown>)?.['props'] as Record<
@@ -10,7 +14,9 @@ const recursivelyGetChildrenString = (children: ReactNode): string => {
         unknown
       >
     )?.['children'] as ReactNode
-    if (childProps) return recursivelyGetChildrenString(childProps)
+    if (childProps) {
+      return recursivelyGetChildrenString(childProps)
+    }
   }
 
   return ''
diff --git a/packages/ui/src/hooks/useIsOverflowing.ts b/packages/ui/src/hooks/useIsOverflowing.ts
index 7b41403850..4befdc6b6a 100644
--- a/packages/ui/src/hooks/useIsOverflowing.ts
+++ b/packages/ui/src/hooks/useIsOverflowing.ts
@@ -20,7 +20,9 @@ export const useIsOverflowing = (
 
       const hasOverflow = element.clientWidth < element.scrollWidth
       setIsOverflowing(hasOverflow)
-      if (callback) callback(hasOverflow)
+      if (callback) {
+        callback(hasOverflow)
+      }
     }
 
     // This will add the function into the browser event queue after the DOM is painted
diff --git a/packages/ui/src/mocks/list.ts b/packages/ui/src/mocks/list.ts
index de0416000b..33812707d9 100644
--- a/packages/ui/src/mocks/list.ts
+++ b/packages/ui/src/mocks/list.ts
@@ -15,6 +15,6 @@ export const generateData = (count?: number, prefix?: string): MockData[] =>
     reference: prefix ? `${prefix}-${index}` : index,
   }))
 
-export default {
-  generateData,
-}
+const listMock = { generateData }
+
+export default listMock
diff --git a/packages/ui/src/utils/orderBy.ts b/packages/ui/src/utils/orderBy.ts
index d382f618ff..9422f237b2 100644
--- a/packages/ui/src/utils/orderBy.ts
+++ b/packages/ui/src/utils/orderBy.ts
@@ -14,7 +14,9 @@ export const orderBy = <T extends Record<string, unknown>>(
   return (a, b) => {
     const transformedA = transform(a) as ComparableType
     const transformedB = transform(b) as ComparableType
-    if (transformedA > transformedB) return direction
+    if (transformedA > transformedB) {
+      return direction
+    }
 
     return transformedB > transformedA ? -1 * direction : 0
   }
diff --git a/packages/ui/src/utils/responsive/utilities.ts b/packages/ui/src/utils/responsive/utilities.ts
index 4114bbce0f..04c8f92806 100644
--- a/packages/ui/src/utils/responsive/utilities.ts
+++ b/packages/ui/src/utils/responsive/utilities.ts
@@ -2,13 +2,17 @@ import type { ScreenSize } from '../../theme'
 import { screens } from '../../theme'
 
 export const up = (size: ScreenSize, rules: string): string => {
-  if (!(size in screens)) return ''
+  if (!(size in screens)) {
+    return ''
+  }
 
   return `@media (min-width: ${screens[size]}px) { ${rules} }`
 }
 
 export const down = (size: ScreenSize, rules: string): string => {
-  if (!(size in screens)) return ''
+  if (!(size in screens)) {
+    return ''
+  }
 
   return `@media (max-width: calc(${screens[size]} - 1px)) { ${rules} }`
 }
diff --git a/packages/ui/src/utils/searchAlgorithm.ts b/packages/ui/src/utils/searchAlgorithm.ts
index b2855580d1..c86955cad7 100644
--- a/packages/ui/src/utils/searchAlgorithm.ts
+++ b/packages/ui/src/utils/searchAlgorithm.ts
@@ -7,8 +7,12 @@ export const normalizeString = (string: string) =>
     .toLowerCase()
 
 export const levenshteinDistance = (query: string, slice: string): number => {
-  if (query.length === 0) return slice.length
-  if (slice.length === 0) return query.length
+  if (query.length === 0) {
+    return slice.length
+  }
+  if (slice.length === 0) {
+    return query.length
+  }
   const distancesArray = []
   for (let i = 0; i <= slice.length; i += 1) {
     distancesArray[i] = [i]
@@ -45,13 +49,19 @@ export const isFuzzyMatch = (
   const normQuery = normalizeString(query)
   const normTarget = normalizeString(target)
 
-  if (normQuery.length === 0) return true
-  if (normQuery.length > normTarget.length) return false
+  if (normQuery.length === 0) {
+    return true
+  }
+  if (normQuery.length > normTarget.length) {
+    return false
+  }
 
   for (let i = 0; i <= normTarget.length - normQuery.length; i += 1) {
     const slice = normTarget.slice(i, i + normQuery.length)
     const dist = levenshteinDistance(normQuery, slice)
-    if (dist <= maxDistance) return true
+    if (dist <= maxDistance) {
+      return true
+    }
   }
 
   return false
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c98104259..d37400e3b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -186,8 +186,8 @@ importers:
         specifier: 9.31.0
         version: 9.31.0(jiti@2.4.2)
       eslint-plugin-oxlint:
-        specifier: 0.18.1
-        version: 0.18.1
+        specifier: 1.6.0
+        version: 1.6.0
       eslint-plugin-storybook:
         specifier: 9.0.18
         version: 9.0.18(eslint@9.31.0(jiti@2.4.2))(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@2.8.8))(typescript@5.8.3)
@@ -222,8 +222,8 @@ importers:
         specifier: 16.1.2
         version: 16.1.2
       oxlint:
-        specifier: 0.18.1
-        version: 0.18.1
+        specifier: 1.6.0
+        version: 1.6.0
       postcss:
         specifier: 8.5.6
         version: 8.5.6
@@ -2539,43 +2539,43 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@oxlint/darwin-arm64@0.18.1':
-    resolution: {integrity: sha512-FqDrcQJmEGNkgmZgI4wbCrGyJl1tiRZa3udxvyYaXag8W80A0zLFNCyWVvHIgUJ0DHlZjRc7O72xUGjiyvQrqQ==}
+  '@oxlint/darwin-arm64@1.6.0':
+    resolution: {integrity: sha512-m3wyqBh1TOHjpr/dXeIZY7OoX+MQazb+bMHQdDtwUvefrafUx+5YHRvulYh1sZSQ449nQ3nk3qj5qj535vZRjg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/darwin-x64@0.18.1':
-    resolution: {integrity: sha512-YUcyWBJdNuMcJxAwdV/i25/kvnKrVsA+vLn7SsL87cAwiD//rqGdOixk0r8sKUYa71Kx3h0Fg2ToUOjdE6ddYw==}
+  '@oxlint/darwin-x64@1.6.0':
+    resolution: {integrity: sha512-75fJfF/9xNypr7cnOYoZBhfmG1yP7ex3pUOeYGakmtZRffO9z1i1quLYhjZsmaDXsAIZ3drMhenYHMmFKS3SRg==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/linux-arm64-gnu@0.18.1':
-    resolution: {integrity: sha512-ol3jhmUv5VI/omMrt6DkwY/jVTSVJlflFyU1SnSb/BuVVf3TyBiCHmZ4wVtcrcT5k3sWjrvYWw2kSozvmuE4tg==}
+  '@oxlint/linux-arm64-gnu@1.6.0':
+    resolution: {integrity: sha512-YhXGf0FXa72bEt4F7eTVKx5X3zWpbAOPnaA/dZ6/g8tGhw1m9IFjrabVHFjzcx3dQny4MgA59EhyElkDvpUe8A==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint/linux-arm64-musl@0.18.1':
-    resolution: {integrity: sha512-iKDj1ZwlU4KpXuIL1qkVP6NJzri2VSJreqXCIAe1Bf5RZXMAGSO3xjldgiX+HBvFOKSBIarLcqONYDbYco9uaQ==}
+  '@oxlint/linux-arm64-musl@1.6.0':
+    resolution: {integrity: sha512-T3JDhx8mjGjvh5INsPZJrlKHmZsecgDYvtvussKRdkc1Nnn7WC+jH9sh5qlmYvwzvmetlPVNezAoNvmGO9vtMg==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint/linux-x64-gnu@0.18.1':
-    resolution: {integrity: sha512-A3g+fZhlOivUdK7xU/IrbhBcMHig5GLrfMX0HYjXL1fiSqKYu9n1o1p42WpT6KfPL3L2uncSg/iyg7hspcN6qA==}
+  '@oxlint/linux-x64-gnu@1.6.0':
+    resolution: {integrity: sha512-Dx7ghtAl8aXBdqofJpi338At6lkeCtTfoinTYQXd9/TEJx+f+zCGNlQO6nJz3ydJBX48FDuOFKkNC+lUlWrd8w==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint/linux-x64-musl@0.18.1':
-    resolution: {integrity: sha512-LA02SdATWZEZBy8ZZpR2GlUbDg7+Jq1/WKkywMXqxdClkcoyyFozj8aQD2iTMKELSra4OSyqqZpOYroqjSSKmw==}
+  '@oxlint/linux-x64-musl@1.6.0':
+    resolution: {integrity: sha512-7KvMGdWmAZtAtg6IjoEJHKxTXdAcrHnUnqfgs0JpXst7trquV2mxBeRZusQXwxpu4HCSomKMvJfsp1qKaqSFDg==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint/win32-arm64@0.18.1':
-    resolution: {integrity: sha512-FNL+OxDflqLGXRgLxfBM/X4RnLYgtOKTsb1mNSqsjSCEfUi1Oqivh7KvZ09IfAMZeJ85/fL6EI6hSOyY7nNYUg==}
+  '@oxlint/win32-arm64@1.6.0':
+    resolution: {integrity: sha512-iSGC9RwX+dl7o5KFr5aH7Gq3nFbkq/3Gda6mxNPMvNkWrgXdIyiINxpyD8hJu566M+QSv1wEAu934BZotFDyoQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/win32-x64@0.18.1':
-    resolution: {integrity: sha512-W+aVE9Siqs6Oe3NDaDOTTOYsN9X3znl+whfqWK1EcLpqJXX1kdB8Hf45HkGjqnHoFoP96GRgUnXQHQvmUybjvg==}
+  '@oxlint/win32-x64@1.6.0':
+    resolution: {integrity: sha512-jOj3L/gfLc0IwgOTkZMiZ5c673i/hbAmidlaylT0gE6H18hln9HxPgp5GCf4E4y6mwEJlW8QC5hQi221+9otdA==}
     cpu: [x64]
     os: [win32]
 
@@ -4870,8 +4870,8 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  eslint-plugin-oxlint@0.18.1:
-    resolution: {integrity: sha512-QmwUWiihxS4MimFTzJQqrC5H8os8s1ZIiWj290dvAkIlhCP/CIBJdauYZRE7kNAPeLGJoR7DZGRX1Bcn2JHYbQ==}
+  eslint-plugin-oxlint@1.6.0:
+    resolution: {integrity: sha512-DH5p3sCf0nIAPscl3yGnBWXXraV0bdl66hpLxvfnabvg/GzpgXf+pOCWpGK3qDb0+AIUkh1R/7A8GkOXtlj0oA==}
 
   eslint-plugin-react-hooks@5.2.0:
     resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
@@ -6380,8 +6380,8 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxlint@0.18.1:
-    resolution: {integrity: sha512-JGcQvbhd00Qb+nq4f9sYYRh7mZIb0K/7rbMepNdJDMzo8pbmBpx1N2XOG61RjHDsNnY6ImAmVk3h4QVwFenwUQ==}
+  oxlint@1.6.0:
+    resolution: {integrity: sha512-jtaD65PqzIa1udvSxxscTKBxYKuZoFXyKGLiU1Qjo1ulq3uv/fQDtoV1yey1FrQZrQjACGPi1Widsy1TucC7Jg==}
     engines: {node: '>=8.*'}
     hasBin: true
 
@@ -10477,28 +10477,28 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@oxlint/darwin-arm64@0.18.1':
+  '@oxlint/darwin-arm64@1.6.0':
     optional: true
 
-  '@oxlint/darwin-x64@0.18.1':
+  '@oxlint/darwin-x64@1.6.0':
     optional: true
 
-  '@oxlint/linux-arm64-gnu@0.18.1':
+  '@oxlint/linux-arm64-gnu@1.6.0':
     optional: true
 
-  '@oxlint/linux-arm64-musl@0.18.1':
+  '@oxlint/linux-arm64-musl@1.6.0':
     optional: true
 
-  '@oxlint/linux-x64-gnu@0.18.1':
+  '@oxlint/linux-x64-gnu@1.6.0':
     optional: true
 
-  '@oxlint/linux-x64-musl@0.18.1':
+  '@oxlint/linux-x64-musl@1.6.0':
     optional: true
 
-  '@oxlint/win32-arm64@0.18.1':
+  '@oxlint/win32-arm64@1.6.0':
     optional: true
 
-  '@oxlint/win32-x64@0.18.1':
+  '@oxlint/win32-x64@1.6.0':
     optional: true
 
   '@pivanov/utils@0.0.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
@@ -13053,8 +13053,8 @@ snapshots:
       '@typescript-eslint/parser': 8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.31.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.7(eslint-plugin-import@2.31.0)(eslint@9.31.0(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7)(eslint@9.31.0(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.31.0(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.31.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.31.0(jiti@2.4.2))
@@ -13084,7 +13084,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0)(eslint@9.31.0(jiti@2.4.2)):
+  eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.1
@@ -13095,7 +13095,7 @@ snapshots:
       stable-hash: 0.0.4
       tinyglobby: 0.2.14
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7)(eslint@9.31.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -13125,14 +13125,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.7)(eslint@9.31.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.31.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.7(eslint-plugin-import@2.31.0)(eslint@9.31.0(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -13171,7 +13171,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7)(eslint@9.31.0(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13182,7 +13182,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.31.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.7)(eslint@9.31.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.7(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2)))(eslint@9.31.0(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -13219,7 +13219,7 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-oxlint@0.18.1:
+  eslint-plugin-oxlint@1.6.0:
     dependencies:
       jsonc-parser: 3.3.1
 
@@ -15004,16 +15004,16 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxlint@0.18.1:
+  oxlint@1.6.0:
     optionalDependencies:
-      '@oxlint/darwin-arm64': 0.18.1
-      '@oxlint/darwin-x64': 0.18.1
-      '@oxlint/linux-arm64-gnu': 0.18.1
-      '@oxlint/linux-arm64-musl': 0.18.1
-      '@oxlint/linux-x64-gnu': 0.18.1
-      '@oxlint/linux-x64-musl': 0.18.1
-      '@oxlint/win32-arm64': 0.18.1
-      '@oxlint/win32-x64': 0.18.1
+      '@oxlint/darwin-arm64': 1.6.0
+      '@oxlint/darwin-x64': 1.6.0
+      '@oxlint/linux-arm64-gnu': 1.6.0
+      '@oxlint/linux-arm64-musl': 1.6.0
+      '@oxlint/linux-x64-gnu': 1.6.0
+      '@oxlint/linux-x64-musl': 1.6.0
+      '@oxlint/win32-arm64': 1.6.0
+      '@oxlint/win32-x64': 1.6.0
 
   p-filter@2.1.0:
     dependencies:
diff --git a/utils/test/src/vitest/helpers/shouldMatchEmotionSnapshotWithPortal.tsx b/utils/test/src/vitest/helpers/shouldMatchEmotionSnapshotWithPortal.tsx
index bf23fc29e1..72800df2d6 100644
--- a/utils/test/src/vitest/helpers/shouldMatchEmotionSnapshotWithPortal.tsx
+++ b/utils/test/src/vitest/helpers/shouldMatchEmotionSnapshotWithPortal.tsx
@@ -19,8 +19,8 @@ export const makeShouldMatchEmotionSnapshotWithPortal = (
   },
 ) => {
   // Save the instance of console (disable warning about adding element directly to document.body which is necessary when testing portal components)
-  const { console } = global
-  global.console = { ...console, error: vi.fn() }
+  const { console } = globalThis
+  globalThis.console = { ...console, error: vi.fn() }
 
   const { asFragment, unmount } = render(
     <CacheProvider value={emotionCache}>{children}</CacheProvider>,
@@ -30,5 +30,5 @@ export const makeShouldMatchEmotionSnapshotWithPortal = (
 
   // Unmounting to don't see the warning message described above
   unmount()
-  global.console = console
+  globalThis.console = console
 }