diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46ab695a9..2923f608d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+### Code Refactoring
+
+- fixing remaining TS errors ([918544c](https://github.com/adevinta/spark/commit/918544c278a370ec82384842cc8f60b59982eb9f))
+
+### BREAKING CHANGES
+
+- forwardRef has been removed from all packages
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package spark
diff --git a/lerna.json b/lerna.json
index 6c8b35704..310d00d2e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "command": {
     "publish": {
       "conventionalCommits": true,
diff --git a/package-lock.json b/package-lock.json
index cc458a5c5..8f5f701e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29573,14 +29573,14 @@
     },
     "packages/components/accordion": {
       "name": "@spark-ui/accordion",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/collapsible": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/collapsible": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
         "@zag-js/accordion": "0.81.0",
         "@zag-js/react": "0.81.0"
       },
@@ -29594,12 +29594,12 @@
     },
     "packages/components/alert-dialog": {
       "name": "@spark-ui/alert-dialog",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.0.1",
-        "@spark-ui/dialog": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7",
+        "@spark-ui/dialog": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29618,10 +29618,10 @@
     },
     "packages/components/badge": {
       "name": "@spark-ui/badge",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29634,13 +29634,13 @@
     },
     "packages/components/breadcrumb": {
       "name": "@spark-ui/breadcrumb",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
-        "@spark-ui/text-link": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
+        "@spark-ui/text-link": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29653,12 +29653,12 @@
     },
     "packages/components/button": {
       "name": "@spark-ui/button",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
-        "@spark-ui/spinner": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
+        "@spark-ui/spinner": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29671,16 +29671,16 @@
     },
     "packages/components/checkbox": {
       "name": "@spark-ui/checkbox",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-checkbox": "1.0.4",
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/label": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/label": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29693,13 +29693,13 @@
     },
     "packages/components/chip": {
       "name": "@spark-ui/chip",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
         "emulate-tab": "^1.2.1"
       },
       "peerDependencies": {
@@ -29712,11 +29712,11 @@
     },
     "packages/components/collapsible": {
       "name": "@spark-ui/collapsible",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
         "@zag-js/collapsible": "0.81.0",
         "@zag-js/react": "0.81.0"
       },
@@ -29730,22 +29730,22 @@
     },
     "packages/components/combobox": {
       "name": "@spark-ui/combobox",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/popover": "^7.3.7",
-        "@spark-ui/spinner": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7",
-        "@spark-ui/visually-hidden": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/popover": "^8.0.0",
+        "@spark-ui/spinner": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0",
+        "@spark-ui/visually-hidden": "^8.0.0",
         "class-variance-authority": "0.7.0",
         "downshift": "9.0.7"
       },
       "devDependencies": {
-        "@spark-ui/dialog": "^7.3.7"
+        "@spark-ui/dialog": "^8.0.0"
       },
       "peerDependencies": {
         "react": "^19.0",
@@ -29755,13 +29755,13 @@
     },
     "packages/components/dialog": {
       "name": "@spark-ui/dialog",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-dialog": "1.1.2",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29774,11 +29774,11 @@
     },
     "packages/components/divider": {
       "name": "@spark-ui/divider",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-separator": "1.1.0",
-        "@spark-ui/internal-utils": "^7.3.7"
+        "@spark-ui/internal-utils": "^8.0.0"
       },
       "peerDependencies": {
         "react": "^19.0",
@@ -29788,13 +29788,13 @@
     },
     "packages/components/drawer": {
       "name": "@spark-ui/drawer",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-dialog": "1.1.2",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29807,15 +29807,15 @@
     },
     "packages/components/dropdown": {
       "name": "@spark-ui/dropdown",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/popover": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7",
-        "@spark-ui/visually-hidden": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/popover": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0",
+        "@spark-ui/visually-hidden": "^8.0.0",
         "class-variance-authority": "0.7.0",
         "downshift": "9.0.7"
       },
@@ -29827,13 +29827,13 @@
     },
     "packages/components/form-field": {
       "name": "@spark-ui/form-field",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/label": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7"
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/label": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0"
       },
       "peerDependencies": {
         "@spark-ui/tailwind-plugins": "latest",
@@ -29845,11 +29845,11 @@
     },
     "packages/components/icon": {
       "name": "@spark-ui/icon",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/visually-hidden": "^7.3.7"
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/visually-hidden": "^8.0.0"
       },
       "peerDependencies": {
         "@spark-ui/tailwind-plugins": "latest",
@@ -29861,10 +29861,10 @@
     },
     "packages/components/icon-button": {
       "name": "@spark-ui/icon-button",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/button": "^7.3.7",
+        "@spark-ui/button": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29877,7 +29877,7 @@
     },
     "packages/components/icons": {
       "name": "@spark-ui/icons",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "devDependencies": {
         "change-case": "4.1.2",
@@ -29916,15 +29916,15 @@
     },
     "packages/components/input": {
       "name": "@spark-ui/input",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
-        "@spark-ui/use-combined-state": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
+        "@spark-ui/use-combined-state": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29937,7 +29937,7 @@
     },
     "packages/components/kbd": {
       "name": "@spark-ui/kbd",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "class-variance-authority": "0.7.0"
@@ -29952,7 +29952,7 @@
     },
     "packages/components/label": {
       "name": "@spark-ui/label",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-label": "2.1.0",
@@ -29968,10 +29968,10 @@
     },
     "packages/components/link-box": {
       "name": "@spark-ui/link-box",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/slot": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -29982,14 +29982,14 @@
     },
     "packages/components/pagination": {
       "name": "@spark-ui/pagination",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/button": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
+        "@spark-ui/button": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
         "@zag-js/pagination": "0.81.0",
         "@zag-js/react": "0.81.0"
       },
@@ -30003,13 +30003,13 @@
     },
     "packages/components/popover": {
       "name": "@spark-ui/popover",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-popover": "1.1.1",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7"
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0"
       },
       "devDependencies": {
         "jsdom-testing-mocks": "1.13.1"
@@ -30024,7 +30024,7 @@
     },
     "packages/components/portal": {
       "name": "@spark-ui/portal",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-portal": "1.1.2",
@@ -30098,11 +30098,11 @@
     },
     "packages/components/progress": {
       "name": "@spark-ui/progress",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-progress": "1.1.0",
-        "@spark-ui/use-merge-refs": "^7.3.7",
+        "@spark-ui/use-merge-refs": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30115,11 +30115,11 @@
     },
     "packages/components/progress-tracker": {
       "name": "@spark-ui/progress-tracker",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30132,13 +30132,13 @@
     },
     "packages/components/radio-group": {
       "name": "@spark-ui/radio-group",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-label": "2.1.0",
         "@radix-ui/react-radio-group": "1.2.1",
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30151,11 +30151,11 @@
     },
     "packages/components/rating": {
       "name": "@spark-ui/rating",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "devDependencies": {
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7"
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0"
       },
       "peerDependencies": {
         "react": "^19.0",
@@ -30165,13 +30165,13 @@
     },
     "packages/components/select": {
       "name": "@spark-ui/select",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/use-combined-state": "^7.3.7"
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/use-combined-state": "^8.0.0"
       },
       "peerDependencies": {
         "react": "^19.0",
@@ -30181,11 +30181,11 @@
     },
     "packages/components/skeleton": {
       "name": "@spark-ui/skeleton",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/visually-hidden": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/visually-hidden": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30198,7 +30198,7 @@
     },
     "packages/components/slider": {
       "name": "@spark-ui/slider",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-slider": "1.2.1",
@@ -30217,7 +30217,7 @@
     },
     "packages/components/slot": {
       "name": "@spark-ui/slot",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-slot": "1.1.1"
@@ -30230,14 +30230,14 @@
     },
     "packages/components/snackbar": {
       "name": "@spark-ui/snackbar",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@react-aria/toast": "^3.0.0-beta.18",
         "@react-stately/toast": "3.0.0-beta.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30250,11 +30250,11 @@
     },
     "packages/components/spinner": {
       "name": "@spark-ui/spinner",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/visually-hidden": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/visually-hidden": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30267,17 +30267,17 @@
     },
     "packages/components/stepper": {
       "name": "@spark-ui/stepper",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@react-aria/button": "3.11.0",
         "@react-aria/numberfield": "3.11.9",
         "@react-stately/numberfield": "3.9.6",
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icon-button": "^7.3.7",
-        "@spark-ui/input": "^7.3.7",
-        "@spark-ui/use-merge-refs": "^7.3.7"
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icon-button": "^8.0.0",
+        "@spark-ui/input": "^8.0.0",
+        "@spark-ui/use-merge-refs": "^8.0.0"
       },
       "peerDependencies": {
         "@react-types/numberfield": "3.8.5",
@@ -30290,16 +30290,16 @@
     },
     "packages/components/switch": {
       "name": "@spark-ui/switch",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-switch": "1.1.0",
-        "@spark-ui/form-field": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/label": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
-        "@spark-ui/use-combined-state": "^7.3.7",
+        "@spark-ui/form-field": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/label": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
+        "@spark-ui/use-combined-state": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30354,13 +30354,13 @@
     },
     "packages/components/tabs": {
       "name": "@spark-ui/tabs",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-tabs": "1.1.1",
-        "@spark-ui/button": "^7.3.7",
-        "@spark-ui/icon": "^7.3.7",
-        "@spark-ui/icons": "^7.3.7",
+        "@spark-ui/button": "^8.0.0",
+        "@spark-ui/icon": "^8.0.0",
+        "@spark-ui/icons": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "devDependencies": {
@@ -30376,11 +30376,11 @@
     },
     "packages/components/tag": {
       "name": "@spark-ui/tag",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/internal-utils": "^7.3.7",
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/internal-utils": "^8.0.0",
+        "@spark-ui/slot": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30391,10 +30391,10 @@
     },
     "packages/components/text-link": {
       "name": "@spark-ui/text-link",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/slot": "^7.3.7",
+        "@spark-ui/slot": "^8.0.0",
         "class-variance-authority": "0.7.0"
       },
       "peerDependencies": {
@@ -30405,10 +30405,10 @@
     },
     "packages/components/textarea": {
       "name": "@spark-ui/textarea",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/input": "^7.3.7"
+        "@spark-ui/input": "^8.0.0"
       },
       "peerDependencies": {
         "@spark-ui/tailwind-plugins": "latest",
@@ -30420,7 +30420,7 @@
     },
     "packages/components/visually-hidden": {
       "name": "@spark-ui/visually-hidden",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "peerDependencies": {
         "react": "^19.0",
@@ -30430,10 +30430,10 @@
     },
     "packages/hooks/use-combined-state": {
       "name": "@spark-ui/use-combined-state",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/use-mounted-state": "^7.3.7",
+        "@spark-ui/use-mounted-state": "^8.0.0",
         "@types/lodash.isequal": "4.5.8",
         "lodash.isequal": "4.5.0"
       },
@@ -30444,7 +30444,7 @@
     },
     "packages/hooks/use-merge-refs": {
       "name": "@spark-ui/use-merge-refs",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "peerDependencies": {
         "react": "^19.0",
@@ -30453,7 +30453,7 @@
     },
     "packages/hooks/use-mounted-state": {
       "name": "@spark-ui/use-mounted-state",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "peerDependencies": {
         "react": "^19.0",
@@ -30462,7 +30462,7 @@
     },
     "packages/utils/cli": {
       "name": "@spark-ui/cli-utils",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "0.7.0",
@@ -30574,7 +30574,7 @@
     },
     "packages/utils/internal-utils": {
       "name": "@spark-ui/internal-utils",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "peerDependencies": {
         "react": "^19.0",
@@ -30583,10 +30583,10 @@
     },
     "packages/utils/tailwind-plugins": {
       "name": "@spark-ui/tailwind-plugins",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
-        "@spark-ui/theme-utils": "^7.3.7",
+        "@spark-ui/theme-utils": "^8.0.0",
         "tailwindcss-radix": "2.9.0"
       },
       "peerDependencies": {
@@ -30595,7 +30595,7 @@
     },
     "packages/utils/theme": {
       "name": "@spark-ui/theme-utils",
-      "version": "7.3.7",
+      "version": "8.0.0",
       "license": "MIT",
       "dependencies": {
         "deepmerge": "4.3.1",
diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md
index c5cb82862..5d43b4ec5 100644
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/accordion
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/accordion
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 4e5dad3e3..dcad4af90 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/accordion",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "An accordion is a vertically stacked set of interactive headings containing a title, content snippet, or thumbnail representing a section of content.",
   "publishConfig": {
     "access": "public"
@@ -45,11 +45,11 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/collapsible": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/collapsible": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
     "@zag-js/accordion": "0.81.0",
     "@zag-js/react": "0.81.0"
   }
diff --git a/packages/components/accordion/src/Accordion.tsx b/packages/components/accordion/src/Accordion.tsx
index 56eb005bc..a20211eec 100644
--- a/packages/components/accordion/src/Accordion.tsx
+++ b/packages/components/accordion/src/Accordion.tsx
@@ -3,7 +3,7 @@ import { Slot } from '@spark-ui/slot'
 import * as accordion from '@zag-js/accordion'
 import { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, createContext, forwardRef, useContext, useId } from 'react'
+import { type ComponentPropsWithoutRef, createContext, Ref, useContext, useId } from 'react'
 
 type ExtentedZagInterface = Omit<
   accordion.Context,
@@ -38,6 +38,7 @@ export interface AccordionProps extends ExtentedZagInterface {
    */
   onValueChange?: (value: string[]) => void
   design?: 'filled' | 'outlined'
+  ref?: Ref<HTMLDivElement>
 }
 
 const AccordionContext = createContext<
@@ -47,68 +48,64 @@ const AccordionContext = createContext<
   | null
 >(null)
 
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  (
-    {
-      asChild = false,
-      children,
-      collapsible = true,
-      className,
-      defaultValue,
-      design = 'outlined',
-      disabled = false,
-      multiple = false,
-      value,
-      onValueChange,
-      ...props
-    },
-    ref
-  ) => {
-    const [machineProps, localProps] = accordion.splitProps({
-      children,
-      multiple,
-      collapsible,
-      value,
-      disabled,
-      // onValueChange,
-      className: cx('bg-surface rounded-lg h-fit', className),
-      ...props,
-    })
+export const Accordion = ({
+  asChild = false,
+  children,
+  collapsible = true,
+  className,
+  defaultValue,
+  design = 'outlined',
+  disabled = false,
+  multiple = false,
+  value,
+  onValueChange,
+  ref,
+  ...props
+}: AccordionProps) => {
+  const [machineProps, localProps] = accordion.splitProps({
+    children,
+    multiple,
+    collapsible,
+    value,
+    disabled,
+    // onValueChange,
+    className: cx('bg-surface rounded-lg h-fit', className),
+    ...props,
+  })
 
-    const [state, send] = useMachine(
-      // Initial state
-      accordion.machine({
+  const [state, send] = useMachine(
+    // Initial state
+    accordion.machine({
+      ...machineProps,
+      value: defaultValue,
+      id: useId(),
+      onValueChange(details) {
+        onValueChange?.(details.value)
+      },
+    }),
+    // Dynamic state
+    {
+      context: {
         ...machineProps,
-        value: defaultValue,
-        id: useId(),
-        onValueChange(details) {
+        onValueChange: useEvent((details: accordion.ValueChangeDetails) => {
           onValueChange?.(details.value)
-        },
-      }),
-      // Dynamic state
-      {
-        context: {
-          ...machineProps,
-          onValueChange: useEvent((details: accordion.ValueChangeDetails) => {
-            onValueChange?.(details.value)
-          }),
-        },
-      }
-    )
+        }),
+      },
+    }
+  )
 
-    const Component = asChild ? Slot : 'div'
-    const api = accordion.connect(state, send, normalizeProps)
-    const mergedProps = mergeProps(api.getRootProps(), localProps)
+  const Component = asChild ? Slot : 'div'
+  const api = accordion.connect(state, send, normalizeProps)
+  const mergedProps = mergeProps(api.getRootProps(), localProps)
 
-    return (
-      <AccordionContext.Provider value={{ ...api, design }}>
-        <Component data-spark-component="accordion" ref={ref} {...mergedProps}>
-          {children}
-        </Component>
-      </AccordionContext.Provider>
-    )
-  }
-)
+  return (
+    <AccordionContext.Provider value={{ ...api, design }}>
+      <Component data-spark-component="accordion" ref={ref} {...mergedProps}>
+        {children}
+      </Component>
+    </AccordionContext.Provider>
+  )
+}
 
 Accordion.displayName = 'Accordion'
 
diff --git a/packages/components/accordion/src/AccordionItem.tsx b/packages/components/accordion/src/AccordionItem.tsx
index de3859c31..735a6c24e 100644
--- a/packages/components/accordion/src/AccordionItem.tsx
+++ b/packages/components/accordion/src/AccordionItem.tsx
@@ -1,7 +1,7 @@
 import { Collapsible } from '@spark-ui/collapsible'
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, Ref } from 'react'
 
 import { useAccordionContext } from './Accordion'
 import { AccordionItemProvider } from './AccordionItemContext'
@@ -10,43 +10,50 @@ export interface AccordionItemProps extends ComponentPropsWithoutRef<'div'> {
   value: string
   asChild?: boolean
   disabled?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Item = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ asChild = false, className, children, disabled = false, value, ...props }, ref) => {
-    const accordion = useAccordionContext()
-
-    const localProps = {
-      className: cx(
-        'relative first:rounded-t-lg last:rounded-b-lg',
-        '[&:not(:last-child)]:border-b-none',
-        { 'border-sm border-outline': accordion.design === 'outlined' },
-        className
-      ),
-      asChild,
-      ...props,
-    }
-
-    const itemProps = accordion.getItemProps({ value, ...(disabled && { disabled }) })
-    const mergedProps = mergeProps(itemProps, localProps)
-
-    const item = accordion.getItemState({ value })
-    const itemContentProps = accordion.getItemContentProps({ value })
-
-    return (
-      <AccordionItemProvider value={value} disabled={disabled}>
-        <Collapsible
-          ref={ref}
-          open={item.expanded}
-          data-spark-component="accordion-item"
-          ids={{ content: itemContentProps.id }}
-          {...mergedProps}
-        >
-          {children}
-        </Collapsible>
-      </AccordionItemProvider>
-    )
+export const Item = ({
+  asChild = false,
+  className,
+  children,
+  disabled = false,
+  value,
+  ref,
+  ...props
+}: AccordionItemProps) => {
+  const accordion = useAccordionContext()
+
+  const localProps = {
+    className: cx(
+      'relative first:rounded-t-lg last:rounded-b-lg',
+      '[&:not(:last-child)]:border-b-none',
+      { 'border-sm border-outline': accordion.design === 'outlined' },
+      className
+    ),
+    asChild,
+    ...props,
   }
-)
+
+  const itemProps = accordion.getItemProps({ value, ...(disabled && { disabled }) })
+  const mergedProps = mergeProps(itemProps, localProps)
+
+  const item = accordion.getItemState({ value })
+  const itemContentProps = accordion.getItemContentProps({ value })
+
+  return (
+    <AccordionItemProvider value={value} disabled={disabled}>
+      <Collapsible
+        ref={ref}
+        open={item.expanded}
+        data-spark-component="accordion-item"
+        ids={{ content: itemContentProps.id }}
+        {...mergedProps}
+      >
+        {children}
+      </Collapsible>
+    </AccordionItemProvider>
+  )
+}
 
 Item.displayName = 'Accordion.Item'
diff --git a/packages/components/accordion/src/AccordionItemContent.tsx b/packages/components/accordion/src/AccordionItemContent.tsx
index 9904e713f..78fa3401b 100644
--- a/packages/components/accordion/src/AccordionItemContent.tsx
+++ b/packages/components/accordion/src/AccordionItemContent.tsx
@@ -2,13 +2,14 @@ import { Collapsible } from '@spark-ui/collapsible'
 import { createSplitProps } from '@spark-ui/internal-utils'
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, Ref } from 'react'
 
 import { useAccordionContext } from './Accordion'
 import { useAccordionItemContext } from './AccordionItemContext'
 
 export interface AccordionItemContentProps extends ComponentPropsWithoutRef<'div'> {
   asChild?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
 const splitVisibilityProps = createSplitProps<{
@@ -16,31 +17,35 @@ const splitVisibilityProps = createSplitProps<{
   'data-state'?: string
 }>()
 
-export const ItemContent = forwardRef<HTMLDivElement, AccordionItemContentProps>(
-  ({ asChild = false, className, children, ...props }, ref) => {
-    const accordion = useAccordionContext()
-    const accordionItem = useAccordionItemContext()
-
-    const localProps = {
-      className: cx('[&>:first-child]:p-lg', 'text-body-1 text-on-surface', className),
-      asChild,
-      ...props,
-    }
-    const contentProps = accordion.getItemContentProps({
-      value: accordionItem.value,
-      ...(accordionItem.disabled && { disabled: accordionItem.disabled }),
-    })
-
-    const [, itemContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state'])
-
-    const mergedProps = mergeProps(itemContentProps, localProps)
-
-    return (
-      <Collapsible.Content ref={ref} data-spark-component="accordion-item-content" {...mergedProps}>
-        {children}
-      </Collapsible.Content>
-    )
+export const ItemContent = ({
+  asChild = false,
+  className,
+  children,
+  ref,
+  ...props
+}: AccordionItemContentProps) => {
+  const accordion = useAccordionContext()
+  const accordionItem = useAccordionItemContext()
+
+  const localProps = {
+    className: cx('[&>:first-child]:p-lg', 'text-body-1 text-on-surface', className),
+    asChild,
+    ...props,
   }
-)
+  const contentProps = accordion.getItemContentProps({
+    value: accordionItem.value,
+    ...(accordionItem.disabled && { disabled: accordionItem.disabled }),
+  })
+
+  const [, itemContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state'])
+
+  const mergedProps = mergeProps(itemContentProps, localProps)
+
+  return (
+    <Collapsible.Content ref={ref} data-spark-component="accordion-item-content" {...mergedProps}>
+      {children}
+    </Collapsible.Content>
+  )
+}
 
 ItemContent.displayName = 'Accordion.ItemContent'
diff --git a/packages/components/accordion/src/AccordionItemHeader.tsx b/packages/components/accordion/src/AccordionItemHeader.tsx
index e7a6cd18b..5905bd729 100644
--- a/packages/components/accordion/src/AccordionItemHeader.tsx
+++ b/packages/components/accordion/src/AccordionItemHeader.tsx
@@ -1,25 +1,29 @@
 import { Slot } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { type ComponentProps, forwardRef } from 'react'
+import { type ComponentProps, Ref } from 'react'
 
 export interface AccordionItemHeaderProps extends ComponentProps<'h3'> {
   asChild?: boolean
+  ref?: Ref<HTMLHeadingElement>
 }
 
-export const ItemHeader = forwardRef<HTMLHeadingElement, AccordionItemHeaderProps>(
-  ({ asChild = false, children, className }, ref) => {
-    const Component = asChild ? Slot : 'h3'
+export const ItemHeader = ({
+  asChild = false,
+  children,
+  className,
+  ref,
+}: AccordionItemHeaderProps) => {
+  const Component = asChild ? Slot : 'h3'
 
-    return (
-      <Component
-        ref={ref}
-        data-spark-component="accordion-item-header"
-        className={cx('rounded-[inherit]', className)}
-      >
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component
+      ref={ref}
+      data-spark-component="accordion-item-header"
+      className={cx('rounded-[inherit]', className)}
+    >
+      {children}
+    </Component>
+  )
+}
 
 ItemHeader.displayName = 'Accordion.ItemHeader'
diff --git a/packages/components/accordion/src/AccordionItemTrigger.tsx b/packages/components/accordion/src/AccordionItemTrigger.tsx
index 0e8d544fc..03c7f3272 100644
--- a/packages/components/accordion/src/AccordionItemTrigger.tsx
+++ b/packages/components/accordion/src/AccordionItemTrigger.tsx
@@ -3,56 +3,61 @@ import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalD
 import { Slot } from '@spark-ui/slot'
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, Ref } from 'react'
 
 import { useAccordionContext } from './Accordion'
 import { useAccordionItemContext } from './AccordionItemContext'
 
 export interface AccordionItemTriggerProps extends ComponentPropsWithoutRef<'button'> {
   asChild?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const ItemTrigger = forwardRef<HTMLButtonElement, AccordionItemTriggerProps>(
-  ({ asChild = false, children, className, ...props }, ref) => {
-    const { getItemTriggerProps } = useAccordionContext()
-    const { value, disabled } = useAccordionItemContext()
-
-    const Component = asChild ? Slot : 'button'
-
-    const localProps = {
-      ...props,
-      className: cx(
-        'relative flex gap-lg justify-between items-center min-h-sz-48',
-        'w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-none',
-        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',
-        'focus-visible:u-ring focus-visible:outline-none focus-visible:z-raised',
-        'disabled:opacity-dim-3 disabled:cursor-not-allowed',
-        className
-      ),
-    }
-
-    const mergedProps = mergeProps(
-      getItemTriggerProps({ value, ...(disabled && { disabled }) }),
-      localProps
-    )
-
-    const isOpen = !!mergedProps['aria-expanded']
-
-    return (
-      <Component ref={ref} data-spark-component="accordion-item-trigger" {...mergedProps}>
-        <div className="flex grow items-center gap-lg">{children}</div>
-        <Icon
-          intent="neutral"
-          className={cx('shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none', {
-            'rotate-180': isOpen,
-          })}
-          size="sm"
-        >
-          <ArrowHorizontalDown />
-        </Icon>
-      </Component>
-    )
+export const ItemTrigger = ({
+  asChild = false,
+  children,
+  className,
+  ref,
+  ...props
+}: AccordionItemTriggerProps) => {
+  const { getItemTriggerProps } = useAccordionContext()
+  const { value, disabled } = useAccordionItemContext()
+
+  const Component = asChild ? Slot : 'button'
+
+  const localProps = {
+    ...props,
+    className: cx(
+      'relative flex gap-lg justify-between items-center min-h-sz-48',
+      'w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-none',
+      'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',
+      'focus-visible:u-ring focus-visible:outline-none focus-visible:z-raised',
+      'disabled:opacity-dim-3 disabled:cursor-not-allowed',
+      className
+    ),
   }
-)
+
+  const mergedProps = mergeProps(
+    getItemTriggerProps({ value, ...(disabled && { disabled }) }),
+    localProps
+  )
+
+  const isOpen = !!mergedProps['aria-expanded']
+
+  return (
+    <Component ref={ref} data-spark-component="accordion-item-trigger" {...mergedProps}>
+      <div className="flex grow items-center gap-lg">{children}</div>
+      <Icon
+        intent="neutral"
+        className={cx('shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none', {
+          'rotate-180': isOpen,
+        })}
+        size="sm"
+      >
+        <ArrowHorizontalDown />
+      </Icon>
+    </Component>
+  )
+}
 
 ItemTrigger.displayName = 'Accordion.ItemTrigger'
diff --git a/packages/components/alert-dialog/CHANGELOG.md b/packages/components/alert-dialog/CHANGELOG.md
index 51715caaa..bcc6e8510 100644
--- a/packages/components/alert-dialog/CHANGELOG.md
+++ b/packages/components/alert-dialog/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/alert-dialog
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/alert-dialog
diff --git a/packages/components/alert-dialog/package.json b/packages/components/alert-dialog/package.json
index c9dd36bc5..a5e06a27a 100644
--- a/packages/components/alert-dialog/package.json
+++ b/packages/components/alert-dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/alert-dialog",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A modal dialog that interrupts the user with important content and expects a response.",
   "publishConfig": {
     "access": "public"
@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@radix-ui/primitive": "1.0.1",
-    "@spark-ui/dialog": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7",
+    "@spark-ui/dialog": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/alert-dialog/src/AlertDialogAction.tsx b/packages/components/alert-dialog/src/AlertDialogAction.tsx
index f294a1639..5d64301d1 100644
--- a/packages/components/alert-dialog/src/AlertDialogAction.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogAction.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogCloseProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogActionElement = ElementRef<typeof Dialog.Close>
-export type AlertDialogActionProps = DialogCloseProps
+export type AlertDialogActionProps = DialogCloseProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const AlertDialogAction = forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
-  (props, ref) => {
-    return <Dialog.Close ref={ref} data-spark-component="alert-dialog-action" {...props} />
-  }
-)
+export const AlertDialogAction = (props: AlertDialogActionProps) => {
+  return <Dialog.Close data-spark-component="alert-dialog-action" {...props} />
+}
 
 AlertDialogAction.displayName = 'AlertDialog.Action'
diff --git a/packages/components/alert-dialog/src/AlertDialogBody.tsx b/packages/components/alert-dialog/src/AlertDialogBody.tsx
index 6f02b001a..08a964729 100644
--- a/packages/components/alert-dialog/src/AlertDialogBody.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogBody.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogBodyProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogBodyElement = ElementRef<typeof Dialog.Body>
-export type AlertDialogBodyProps = DialogBodyProps
+export type AlertDialogBodyProps = DialogBodyProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const AlertDialogBody = forwardRef<AlertDialogBodyElement, AlertDialogBodyProps>(
-  (props, ref) => {
-    return <Dialog.Body ref={ref} data-spark-component="alert-dialog-body" {...props} />
-  }
-)
+export const AlertDialogBody = (props: AlertDialogBodyProps) => {
+  return <Dialog.Body data-spark-component="alert-dialog-body" {...props} />
+}
 
 AlertDialogBody.displayName = 'AlertDialog.Body'
diff --git a/packages/components/alert-dialog/src/AlertDialogCancel.tsx b/packages/components/alert-dialog/src/AlertDialogCancel.tsx
index 8967c2a14..066f1bde0 100644
--- a/packages/components/alert-dialog/src/AlertDialogCancel.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogCancel.tsx
@@ -1,19 +1,18 @@
 import { Dialog, DialogCloseProps } from '@spark-ui/dialog'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { useAlertDialog } from './AlertDialogContext'
 
-export type AlertDialogCancelElement = ElementRef<typeof Dialog.Close>
-export type AlertDialogCancelProps = DialogCloseProps
+export type AlertDialogCancelProps = DialogCloseProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const AlertDialogCancel = forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
-  (props, forwardedRef) => {
-    const { cancelRef } = useAlertDialog()
-    const ref = useMergeRefs(forwardedRef, cancelRef)
+export const AlertDialogCancel = ({ ref: forwardedRef, ...props }: AlertDialogCancelProps) => {
+  const { cancelRef } = useAlertDialog()
+  const ref = useMergeRefs(forwardedRef, cancelRef)
 
-    return <Dialog.Close ref={ref} data-spark-component="alert-dialog-cancel" {...props} />
-  }
-)
+  return <Dialog.Close ref={ref} data-spark-component="alert-dialog-cancel" {...props} />
+}
 
 AlertDialogCancel.displayName = 'AlertDialog.Cancel'
diff --git a/packages/components/alert-dialog/src/AlertDialogContent.tsx b/packages/components/alert-dialog/src/AlertDialogContent.tsx
index 144a90210..aab0197a8 100644
--- a/packages/components/alert-dialog/src/AlertDialogContent.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogContent.tsx
@@ -1,54 +1,58 @@
 import { composeEventHandlers } from '@radix-ui/primitive'
 import { Dialog, DialogContentProps } from '@spark-ui/dialog'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef, useMemo, useRef } from 'react'
+import { Ref, useMemo, useRef } from 'react'
 
 import { AlertDialogContext } from './AlertDialogContext'
 
-export type AlertDialogContentElement = ElementRef<typeof Dialog.Content>
 export type AlertDialogContentProps = Omit<
   DialogContentProps,
   'size' | 'isNarrow' | 'onPointerDownOutside' | 'onInteractOutside'
->
-
-export const AlertDialogContent = forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ className, onOpenAutoFocus, ...others }, ref) => {
-    const cancelRef = useRef<HTMLButtonElement | null>(null)
-
-    const value = useMemo(() => {
-      return { cancelRef }
-    }, [])
-
-    const handleOpenAutoFocus = (event: Event) => {
-      event.preventDefault()
-      cancelRef.current?.focus({ preventScroll: true })
-    }
-
-    const handlePointerDownOutside = (event: Event) => {
-      event.preventDefault()
-    }
-
-    const handleInteractOutside = (event: Event) => {
-      event.preventDefault()
-    }
-
-    return (
-      <AlertDialogContext.Provider value={value}>
-        <Dialog.Content
-          ref={ref}
-          data-spark-component="alert-dialog-content"
-          {...others}
-          className={cx(className, 'min-w-sz-288')}
-          role="alertdialog"
-          size="md"
-          onOpenAutoFocus={composeEventHandlers(onOpenAutoFocus, handleOpenAutoFocus)}
-          onPointerDownOutside={handlePointerDownOutside}
-          onInteractOutside={handleInteractOutside}
-          isNarrow
-        />
-      </AlertDialogContext.Provider>
-    )
+> & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export const AlertDialogContent = ({
+  className,
+  onOpenAutoFocus,
+  ref,
+  ...others
+}: AlertDialogContentProps) => {
+  const cancelRef = useRef<HTMLButtonElement | null>(null)
+
+  const value = useMemo(() => {
+    return { cancelRef }
+  }, [])
+
+  const handleOpenAutoFocus = (event: Event) => {
+    event.preventDefault()
+    cancelRef.current?.focus({ preventScroll: true })
   }
-)
+
+  const handlePointerDownOutside = (event: Event) => {
+    event.preventDefault()
+  }
+
+  const handleInteractOutside = (event: Event) => {
+    event.preventDefault()
+  }
+
+  return (
+    <AlertDialogContext.Provider value={value}>
+      <Dialog.Content
+        ref={ref}
+        data-spark-component="alert-dialog-content"
+        {...others}
+        className={cx(className, 'min-w-sz-288')}
+        role="alertdialog"
+        size="md"
+        onOpenAutoFocus={composeEventHandlers(onOpenAutoFocus, handleOpenAutoFocus)}
+        onPointerDownOutside={handlePointerDownOutside}
+        onInteractOutside={handleInteractOutside}
+        isNarrow
+      />
+    </AlertDialogContext.Provider>
+  )
+}
 
 AlertDialogContent.displayName = 'AlertDialog.Content'
diff --git a/packages/components/alert-dialog/src/AlertDialogDescription.tsx b/packages/components/alert-dialog/src/AlertDialogDescription.tsx
index a06e19c0c..3a686d573 100644
--- a/packages/components/alert-dialog/src/AlertDialogDescription.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogDescription.tsx
@@ -1,14 +1,12 @@
 import { Dialog, DialogDescriptionProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogDescriptionElement = ElementRef<typeof Dialog.Description>
-export type AlertDialogDescriptionProps = DialogDescriptionProps
+export type AlertDialogDescriptionProps = DialogDescriptionProps & {
+  ref?: Ref<HTMLParagraphElement>
+}
 
-export const AlertDialogDescription = forwardRef<
-  AlertDialogDescriptionElement,
-  AlertDialogDescriptionProps
->((props, ref) => {
-  return <Dialog.Description ref={ref} data-spark-component="alert-dialog-description" {...props} />
-})
+export const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {
+  return <Dialog.Description data-spark-component="alert-dialog-description" {...props} />
+}
 
 AlertDialogDescription.displayName = 'AlertDialog.Description'
diff --git a/packages/components/alert-dialog/src/AlertDialogFooter.tsx b/packages/components/alert-dialog/src/AlertDialogFooter.tsx
index 59761fd42..a54d46875 100644
--- a/packages/components/alert-dialog/src/AlertDialogFooter.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogFooter.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogFooterProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogFooterElement = ElementRef<typeof Dialog.Footer>
-export type AlertDialogFooterProps = DialogFooterProps
+export type AlertDialogFooterProps = DialogFooterProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const AlertDialogFooter = forwardRef<AlertDialogFooterElement, AlertDialogFooterProps>(
-  (props, ref) => {
-    return <Dialog.Footer ref={ref} data-spark-component="alert-dialog-footer" {...props} />
-  }
-)
+export const AlertDialogFooter = (props: AlertDialogFooterProps) => {
+  return <Dialog.Footer data-spark-component="alert-dialog-footer" {...props} />
+}
 
 AlertDialogFooter.displayName = 'AlertDialog.Footer'
diff --git a/packages/components/alert-dialog/src/AlertDialogHeader.tsx b/packages/components/alert-dialog/src/AlertDialogHeader.tsx
index 26ca6480d..ac2dbee3b 100644
--- a/packages/components/alert-dialog/src/AlertDialogHeader.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogHeader.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogHeaderProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogHeaderElement = ElementRef<typeof Dialog.Header>
-export type AlertDialogHeaderProps = DialogHeaderProps
+export type AlertDialogHeaderProps = DialogHeaderProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const AlertDialogHeader = forwardRef<AlertDialogHeaderElement, AlertDialogHeaderProps>(
-  (props, ref) => {
-    return <Dialog.Header ref={ref} data-spark-component="alert-dialog-header" {...props} />
-  }
-)
+export const AlertDialogHeader = (props: AlertDialogHeaderProps) => {
+  return <Dialog.Header data-spark-component="alert-dialog-header" {...props} />
+}
 
 AlertDialogHeader.displayName = 'AlertDialog.Header'
diff --git a/packages/components/alert-dialog/src/AlertDialogOverlay.tsx b/packages/components/alert-dialog/src/AlertDialogOverlay.tsx
index 4de7d87ad..0b016f89e 100644
--- a/packages/components/alert-dialog/src/AlertDialogOverlay.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogOverlay.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogOverlayProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogOverlayElement = ElementRef<typeof Dialog.Overlay>
-export type AlertDialogOverlayProps = DialogOverlayProps
+export type AlertDialogOverlayProps = DialogOverlayProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const AlertDialogOverlay = forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(
-  (props, ref) => {
-    return <Dialog.Overlay ref={ref} data-spark-component="alert-dialog-overlay" {...props} />
-  }
-)
+export const AlertDialogOverlay = (props: AlertDialogOverlayProps) => {
+  return <Dialog.Overlay data-spark-component="alert-dialog-overlay" {...props} />
+}
 
 AlertDialogOverlay.displayName = 'AlertDialog.Overlay'
diff --git a/packages/components/alert-dialog/src/AlertDialogTitle.tsx b/packages/components/alert-dialog/src/AlertDialogTitle.tsx
index cabcd1f85..8fb803c22 100644
--- a/packages/components/alert-dialog/src/AlertDialogTitle.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogTitle.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogTitleProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogTitleElement = ElementRef<typeof Dialog.Description>
-export type AlertDialogTitleProps = DialogTitleProps
+export type AlertDialogTitleProps = DialogTitleProps & {
+  ref?: Ref<HTMLParagraphElement>
+}
 
-export const AlertDialogTitle = forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
-  (props, ref) => {
-    return <Dialog.Title ref={ref} data-spark-component="alert-dialog-title" {...props} />
-  }
-)
+export const AlertDialogTitle = (props: AlertDialogTitleProps) => {
+  return <Dialog.Title data-spark-component="alert-dialog-title" {...props} />
+}
 
 AlertDialogTitle.displayName = 'AlertDialog.Title'
diff --git a/packages/components/alert-dialog/src/AlertDialogTrigger.tsx b/packages/components/alert-dialog/src/AlertDialogTrigger.tsx
index 4a8434812..2bd4edb40 100644
--- a/packages/components/alert-dialog/src/AlertDialogTrigger.tsx
+++ b/packages/components/alert-dialog/src/AlertDialogTrigger.tsx
@@ -1,13 +1,12 @@
 import { Dialog, DialogTriggerProps } from '@spark-ui/dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AlertDialogTriggetElement = ElementRef<typeof Dialog.Trigger>
-export type AlertDialogTriggerProps = DialogTriggerProps
+export type AlertDialogTriggerProps = DialogTriggerProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const AlertDialogTrigger = forwardRef<AlertDialogTriggetElement, AlertDialogTriggerProps>(
-  (props, ref) => {
-    return <Dialog.Trigger ref={ref} data-spark-component="alert-dialog-title" {...props} />
-  }
-)
+export const AlertDialogTrigger = (props: AlertDialogTriggerProps) => {
+  return <Dialog.Trigger data-spark-component="alert-dialog-title" {...props} />
+}
 
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger'
diff --git a/packages/components/badge/CHANGELOG.md b/packages/components/badge/CHANGELOG.md
index c7cb940fa..2c6be2040 100644
--- a/packages/components/badge/CHANGELOG.md
+++ b/packages/components/badge/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/badge
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/badge
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
index 58ddeea63..3c3332b9c 100644
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/badge",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Badge component is a visual indicator for numeric values such as tallies and scores.",
   "publishConfig": {
     "access": "public"
@@ -35,7 +35,7 @@
     "url": "https://github.com/adevinta/spark/issues?q=is%3Aopen+is%3Aissue+label%3A%22Component%3A+badge%22"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
index 2b7ce1972..5746777fb 100644
--- a/packages/components/badge/src/Badge.tsx
+++ b/packages/components/badge/src/Badge.tsx
@@ -1,20 +1,22 @@
-import { forwardRef, PropsWithChildren } from 'react'
+import { PropsWithChildren, Ref } from 'react'
 
 import { BadgeItem, BadgeItemProps } from './BadgeItem'
 
-export type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>>
+export type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
+  ref?: Ref<HTMLElement>
+}
 
-export const Badge = forwardRef<HTMLElement, BadgeProps>(({ children, ...props }, ref) => {
+export const Badge = ({ children, ...props }: BadgeProps) => {
   const isStandalone = !children
 
   return isStandalone ? (
-    <BadgeItem ref={ref} type="standalone" {...props} />
+    <BadgeItem type="standalone" {...props} />
   ) : (
     <div className="relative inline-flex">
       {children}
-      <BadgeItem ref={ref} {...props} />
+      <BadgeItem {...props} />
     </div>
   )
-})
+}
 
 Badge.displayName = 'Badge'
diff --git a/packages/components/badge/src/BadgeItem.tsx b/packages/components/badge/src/BadgeItem.tsx
index 8e1e34df2..ae3fc26c9 100644
--- a/packages/components/badge/src/BadgeItem.tsx
+++ b/packages/components/badge/src/BadgeItem.tsx
@@ -1,9 +1,9 @@
-import { forwardRef, HTMLAttributes, PropsWithRef } from 'react'
+import { HTMLAttributes, Ref } from 'react'
 
 import { styles, type StylesProps } from './BadgeItem.styles'
 
 export interface BadgeItemProps
-  extends PropsWithRef<Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>>,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,
     StylesProps {
   /**
    * Numeric value used as indicator inside the component.
@@ -26,43 +26,38 @@ export interface BadgeItemProps
    * @default 'relative'
    */
   type?: 'relative' | 'standalone'
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const BadgeItem = forwardRef<HTMLSpanElement, BadgeItemProps>(
-  (
-    {
-      intent = 'danger',
-      size = 'md',
-      type = 'relative',
-      count,
-      overflowCount = 99,
-      'aria-label': label,
-      className,
-      ...others
-    },
-    ref
-  ) => {
-    const hasOverflow = count && count > overflowCount
-    const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label
-    const props = { ...others, 'aria-label': ariaLabel }
+export const BadgeItem = ({
+  intent = 'danger',
+  size = 'md',
+  type = 'relative',
+  count,
+  overflowCount = 99,
+  'aria-label': label,
+  className,
+  ...others
+}: BadgeItemProps) => {
+  const hasOverflow = count && count > overflowCount
+  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label
+  const props = { ...others, 'aria-label': ariaLabel }
 
-    return (
-      <span
-        ref={ref}
-        data-spark-component="badge"
-        role="status"
-        className={styles({
-          intent,
-          size,
-          type,
-          className,
-        })}
-        {...props}
-      >
-        {hasOverflow ? `${overflowCount}+` : count}
-      </span>
-    )
-  }
-)
+  return (
+    <span
+      data-spark-component="badge"
+      role="status"
+      className={styles({
+        intent,
+        size,
+        type,
+        className,
+      })}
+      {...props}
+    >
+      {hasOverflow ? `${overflowCount}+` : count}
+    </span>
+  )
+}
 
 BadgeItem.displayName = 'BadgeItem'
diff --git a/packages/components/breadcrumb/CHANGELOG.md b/packages/components/breadcrumb/CHANGELOG.md
index f309c918d..5377dae1b 100644
--- a/packages/components/breadcrumb/CHANGELOG.md
+++ b/packages/components/breadcrumb/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/breadcrumb
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/breadcrumb
diff --git a/packages/components/breadcrumb/package.json b/packages/components/breadcrumb/package.json
index 8bbce5fad..c4ce61c4e 100644
--- a/packages/components/breadcrumb/package.json
+++ b/packages/components/breadcrumb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/breadcrumb",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "navigation pattern that helps users understand the hierarchy of a website",
   "publishConfig": {
     "access": "public"
@@ -30,10 +30,10 @@
     "tailwindcss": "^3.0.0"
   },
   "dependencies": {
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
-    "@spark-ui/text-link": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
+    "@spark-ui/text-link": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "repository": {
diff --git a/packages/components/breadcrumb/src/Breadcrumb.tsx b/packages/components/breadcrumb/src/Breadcrumb.tsx
index 4e62a0410..7efde7f6d 100644
--- a/packages/components/breadcrumb/src/Breadcrumb.tsx
+++ b/packages/components/breadcrumb/src/Breadcrumb.tsx
@@ -1,24 +1,28 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
   className?: string
   ['aria-label']: string
+  ref?: Ref<HTMLElement>
 }
 
-export const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
-  ({ className, 'aria-label': ariaLabel, ...rest }, ref) => {
-    return (
-      <nav
-        data-spark-component="breadcrumb"
-        ref={ref}
-        aria-label={ariaLabel}
-        className={cx('text-caption text-neutral', className)}
-      >
-        <ol className={cx('flex flex-wrap items-center gap-sm break-words')} {...rest} />
-      </nav>
-    )
-  }
-)
+export const Breadcrumb = ({
+  className,
+  'aria-label': ariaLabel,
+  ref,
+  ...rest
+}: BreadcrumbProps) => {
+  return (
+    <nav
+      data-spark-component="breadcrumb"
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cx('text-caption text-neutral', className)}
+    >
+      <ol className={cx('flex flex-wrap items-center gap-sm break-words')} {...rest} />
+    </nav>
+  )
+}
 
 Breadcrumb.displayName = 'Breadcrumb.Breadcrumb'
diff --git a/packages/components/breadcrumb/src/BreadcrumbCurrentPage.tsx b/packages/components/breadcrumb/src/BreadcrumbCurrentPage.tsx
index 5361aa1aa..1878bc782 100644
--- a/packages/components/breadcrumb/src/BreadcrumbCurrentPage.tsx
+++ b/packages/components/breadcrumb/src/BreadcrumbCurrentPage.tsx
@@ -1,34 +1,37 @@
 import { Slot } from '@spark-ui/slot'
 import { TextLink } from '@spark-ui/text-link'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {
   asChild?: boolean
   className?: string
+  ref?: Ref<HTMLAnchorElement>
 }
 
-export const CurrentPage = forwardRef<HTMLAnchorElement, CurrentPageProps>(
-  ({ asChild = false, className, children, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'span'
+export const CurrentPage = ({
+  asChild = false,
+  className,
+  children,
+  ...rest
+}: CurrentPageProps) => {
+  const Component = asChild ? Slot : 'span'
 
-    return (
-      <Component
-        data-spark-component="breadcrumb-current-page"
-        role="link"
-        aria-disabled
-        aria-current="page"
-        className={cx(
-          '!inline overflow-hidden text-ellipsis whitespace-nowrap font-bold text-current',
-          className
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component
+      data-spark-component="breadcrumb-current-page"
+      role="link"
+      aria-disabled
+      aria-current="page"
+      className={cx(
+        '!inline overflow-hidden text-ellipsis whitespace-nowrap font-bold text-current',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
 
 CurrentPage.displayName = 'Breadcrumb.CurrentPage'
diff --git a/packages/components/breadcrumb/src/BreadcrumbItem.tsx b/packages/components/breadcrumb/src/BreadcrumbItem.tsx
index af454769c..d7d708803 100644
--- a/packages/components/breadcrumb/src/BreadcrumbItem.tsx
+++ b/packages/components/breadcrumb/src/BreadcrumbItem.tsx
@@ -1,19 +1,19 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export interface ItemProps extends ComponentPropsWithoutRef<'li'> {
   className?: string
+  ref?: Ref<HTMLLIElement>
 }
 
-export const Item = forwardRef<HTMLLIElement, ItemProps>(({ className, ...rest }, ref) => {
+export const Item = ({ className, ...rest }: ItemProps) => {
   return (
     <li
       data-spark-component="breadcrumb-item"
-      ref={ref}
       className={cx('inline-flex min-w-none items-center gap-sm', className)}
       {...rest}
     />
   )
-})
+}
 
 Item.displayName = 'Breadcrumb.Item'
diff --git a/packages/components/breadcrumb/src/BreadcrumbLink.tsx b/packages/components/breadcrumb/src/BreadcrumbLink.tsx
index 8c10c107a..c792743c9 100644
--- a/packages/components/breadcrumb/src/BreadcrumbLink.tsx
+++ b/packages/components/breadcrumb/src/BreadcrumbLink.tsx
@@ -1,42 +1,39 @@
 import { Slot } from '@spark-ui/slot'
 import { TextLink } from '@spark-ui/text-link'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
   asChild?: boolean
   className?: string
   href?: string
+  ref?: Ref<HTMLAnchorElement>
 }
 
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      asChild = false,
-      className,
-      bold = true,
-      intent = 'current',
-      underline = true,
-      href,
-      ...rest
-    },
-    ref
-  ) => {
-    const Component = asChild ? Slot : TextLink
+export const Link = ({
+  asChild = false,
+  className,
+  bold = true,
+  intent = 'current',
+  underline = true,
+  href,
+  ref,
+  ...rest
+}: LinkProps) => {
+  const Component = asChild ? Slot : TextLink
 
-    return (
-      <Component
-        data-spark-component="breadcrumb-link"
-        href={href}
-        ref={ref}
-        className={cx('!inline overflow-hidden text-ellipsis whitespace-nowrap', className)}
-        bold={bold}
-        intent={intent}
-        underline={underline}
-        {...rest}
-      />
-    )
-  }
-)
+  return (
+    <Component
+      data-spark-component="breadcrumb-link"
+      href={href}
+      ref={ref}
+      className={cx('!inline overflow-hidden text-ellipsis whitespace-nowrap', className)}
+      bold={bold}
+      intent={intent}
+      underline={underline}
+      {...rest}
+    />
+  )
+}
 
 Link.displayName = 'Breadcrumb.Link'
diff --git a/packages/components/breadcrumb/src/BreadcrumbSeparator.tsx b/packages/components/breadcrumb/src/BreadcrumbSeparator.tsx
index e4d8559da..d40bacada 100644
--- a/packages/components/breadcrumb/src/BreadcrumbSeparator.tsx
+++ b/packages/components/breadcrumb/src/BreadcrumbSeparator.tsx
@@ -2,34 +2,39 @@ import { Icon } from '@spark-ui/icon'
 import { ArrowVerticalRight } from '@spark-ui/icons/dist/icons/ArrowVerticalRight'
 import { Slot } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {
   asChild?: boolean
   className?: string
+  ref?: Ref<HTMLLIElement>
 }
 
-export const Separator = forwardRef<HTMLLIElement, SeparatorProps>(
-  ({ asChild = false, className, children, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'li'
+export const Separator = ({
+  asChild = false,
+  className,
+  children,
+  ref,
+  ...rest
+}: SeparatorProps) => {
+  const Component = asChild ? Slot : 'li'
 
-    return (
-      <Component
-        role="presentation"
-        aria-hidden
-        data-spark-component="breadcrumb-separator"
-        ref={ref}
-        className={cx('inline-flex items-center gap-sm', className)}
-        {...rest}
-      >
-        {children ?? (
-          <Icon>
-            <ArrowVerticalRight />
-          </Icon>
-        )}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component
+      role="presentation"
+      aria-hidden
+      data-spark-component="breadcrumb-separator"
+      ref={ref}
+      className={cx('inline-flex items-center gap-sm', className)}
+      {...rest}
+    >
+      {children ?? (
+        <Icon>
+          <ArrowVerticalRight />
+        </Icon>
+      )}
+    </Component>
+  )
+}
 
 Separator.displayName = 'Breadcrumb.Separator'
diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md
index 0e6abc330..c048b1158 100644
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/button
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/button
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index 4238b32a0..40c5701e9 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/button",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
   "publishConfig": {
     "access": "public"
@@ -23,9 +23,9 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
-    "@spark-ui/spinner": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
+    "@spark-ui/spinner": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
index 6ccb441eb..6811a3c07 100644
--- a/packages/components/button/src/Button.tsx
+++ b/packages/components/button/src/Button.tsx
@@ -1,7 +1,7 @@
 import { Slot, wrapPolymorphicSlot } from '@spark-ui/slot'
 import { Spinner, type SpinnerProps } from '@spark-ui/spinner'
 import { cx } from 'class-variance-authority'
-import React, { ComponentPropsWithoutRef, type DOMAttributes, forwardRef, useMemo } from 'react'
+import React, { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'
 
 import { buttonStyles, type ButtonStylesProps } from './Button.styles'
 
@@ -25,6 +25,7 @@ export interface ButtonProps
    * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
    */
   loadingText?: string
+  ref?: Ref<HTMLButtonElement>
 }
 
 type DOMAttributesEventHandler = keyof Omit<
@@ -46,83 +47,79 @@ const blockedEventHandlers: DOMAttributesEventHandler[] = [
   'onSubmit',
 ]
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      design = 'filled',
-      disabled = false,
-      intent = 'main',
-      isLoading = false,
-      loadingLabel,
-      loadingText,
-      shape = 'rounded',
-      size = 'md',
-      asChild,
-      className,
-      ...others
-    },
-    ref
-  ) => {
-    const Component = asChild ? Slot : 'button'
+export const Button = ({
+  children,
+  design = 'filled',
+  disabled = false,
+  intent = 'main',
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = 'rounded',
+  size = 'md',
+  asChild,
+  className,
+  ref,
+  ...others
+}: ButtonProps) => {
+  const Component = asChild ? Slot : 'button'
 
-    const shouldNotInteract = !!disabled || isLoading
+  const shouldNotInteract = !!disabled || isLoading
 
-    const disabledEventHandlers = useMemo(() => {
-      const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}
+  const disabledEventHandlers = useMemo(() => {
+    const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}
 
-      if (shouldNotInteract) {
-        blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))
-      }
-
-      return result
-    }, [shouldNotInteract])
-
-    const spinnerProps = {
-      size: 'current' as SpinnerProps['size'],
-      className: loadingText ? 'inline-block' : 'absolute',
-      ...(loadingLabel && { 'aria-label': loadingLabel }),
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))
     }
 
-    return (
-      <Component
-        data-spark-component="button"
-        {...(Component === 'button' && { type: 'button' })}
-        ref={ref}
-        className={buttonStyles({
-          className,
-          design,
-          disabled: shouldNotInteract,
-          intent,
-          shape,
-          size,
-        })}
-        disabled={!!disabled}
-        aria-busy={isLoading}
-        aria-live={isLoading ? 'assertive' : 'off'}
-        {...others}
-        {...disabledEventHandlers}
-      >
-        {wrapPolymorphicSlot(asChild, children, slotted =>
-          isLoading ? (
-            <>
-              <Spinner {...spinnerProps} />
-              {loadingText && loadingText}
+    return result
+  }, [shouldNotInteract])
 
-              <div
-                aria-hidden
-                className={cx('inline-flex gap-md', loadingText ? 'hidden' : 'opacity-0')}
-              >
-                {slotted}
-              </div>
-            </>
-          ) : (
-            slotted
-          )
-        )}
-      </Component>
-    )
+  const spinnerProps = {
+    size: 'current' as SpinnerProps['size'],
+    className: loadingText ? 'inline-block' : 'absolute',
+    ...(loadingLabel && { 'aria-label': loadingLabel }),
   }
-)
+
+  return (
+    <Component
+      data-spark-component="button"
+      {...(Component === 'button' && { type: 'button' })}
+      ref={ref}
+      className={buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size,
+      })}
+      disabled={!!disabled}
+      aria-busy={isLoading}
+      aria-live={isLoading ? 'assertive' : 'off'}
+      {...others}
+      {...disabledEventHandlers}
+    >
+      {wrapPolymorphicSlot(asChild, children, slotted =>
+        isLoading ? (
+          <>
+            <Spinner {...spinnerProps} />
+            {loadingText && loadingText}
+
+            <div
+              aria-hidden
+              className={cx('inline-flex gap-md', loadingText ? 'hidden' : 'opacity-0')}
+            >
+              {slotted}
+            </div>
+          </>
+        ) : (
+          slotted
+        )
+      )}
+    </Component>
+  )
+}
 
 Button.displayName = 'Button'
diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md
index 0f21c44a9..987e67e27 100644
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+### Code Refactoring
+
+- fixing remaining TS errors ([918544c](https://github.com/adevinta/spark/commit/918544c278a370ec82384842cc8f60b59982eb9f))
+
+### BREAKING CHANGES
+
+- forwardRef has been removed from all packages
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/checkbox
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 55a22b023..7f402e6ad 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/checkbox",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "1.0.4",
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/label": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/label": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/checkbox/src/Checkbox.tsx b/packages/components/checkbox/src/Checkbox.tsx
index c59f94d16..55ea204c6 100644
--- a/packages/components/checkbox/src/Checkbox.tsx
+++ b/packages/components/checkbox/src/Checkbox.tsx
@@ -2,142 +2,141 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cx } from 'class-variance-authority'
-import { forwardRef, useId, useMemo, useRef } from 'react'
+import { Ref, useId, useMemo, useRef } from 'react'
 
 import { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'
 import { CheckboxInput, CheckboxInputProps } from './CheckboxInput'
 import { CheckboxLabel } from './CheckboxLabel'
 
-export type CheckboxProps = CheckboxInputProps & Pick<CheckboxGroupContextState, 'reverse'>
+export type CheckboxProps = CheckboxInputProps &
+  Pick<CheckboxGroupContextState, 'reverse'> & {
+    ref?: Ref<HTMLButtonElement>
+  }
 
 const ID_PREFIX = ':checkbox'
 
-export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
-  (
-    {
-      id: idProp,
-      className,
-      intent: intentProp,
-      checked: checkedProp,
-      value,
-      disabled,
-      reverse = false,
-      onCheckedChange,
-      children,
-      ...others
-    },
-    forwardedRef
-  ) => {
-    const checkboxId = `${ID_PREFIX}-${useId()}`
-    const innerId = idProp || checkboxId
-
-    const innerLabelId = `${ID_PREFIX}-${useId()}`
-
-    const field = useFormFieldControl()
-    const group = useCheckboxGroup()
-
-    const rootRef = useRef<HTMLButtonElement | undefined>(null)
-    const ref = useMergeRefs(forwardedRef, rootRef)
-
-    const getCheckboxAttributes = ({
-      fieldState,
-      groupState,
-      checkboxIntent,
-    }: {
-      fieldState: ReturnType<typeof useFormFieldControl>
-      groupState: ReturnType<typeof useCheckboxGroup>
-      checkboxIntent: CheckboxInputProps['intent']
-    }) => {
-      const name = fieldState.name ?? groupState.name
-      const isRequired = fieldState.isRequired ?? groupState.isRequired
-      const state = fieldState.state ?? groupState.state
-      const isInvalid = fieldState.isInvalid ?? groupState.isInvalid
-
-      const isFieldEnclosed = fieldState.id !== groupState.id
-      const id = isFieldEnclosed ? fieldState.id : undefined
-      const description = isFieldEnclosed ? fieldState.description : undefined
-
-      const intent = state ?? checkboxIntent ?? groupState.intent
-
-      return { name, isRequired, isInvalid, id, description, intent }
-    }
+export const Checkbox = ({
+  id: idProp,
+  className,
+  intent: intentProp,
+  checked: checkedProp,
+  value,
+  disabled,
+  reverse = false,
+  onCheckedChange,
+  children,
+  ref: forwardedRef,
+  ...others
+}: CheckboxProps) => {
+  const checkboxId = `${ID_PREFIX}-${useId()}`
+  const innerId = idProp || checkboxId
+
+  const innerLabelId = `${ID_PREFIX}-${useId()}`
+
+  const field = useFormFieldControl()
+  const group = useCheckboxGroup()
+
+  const rootRef = useRef<HTMLButtonElement | undefined>(null)
+  const ref = useMergeRefs(forwardedRef, rootRef)
+
+  const getCheckboxAttributes = ({
+    fieldState,
+    groupState,
+    checkboxIntent,
+  }: {
+    fieldState: ReturnType<typeof useFormFieldControl>
+    groupState: ReturnType<typeof useCheckboxGroup>
+    checkboxIntent: CheckboxInputProps['intent']
+  }) => {
+    const name = fieldState.name ?? groupState.name
+    const isRequired = fieldState.isRequired ?? groupState.isRequired
+    const state = fieldState.state ?? groupState.state
+    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid
+
+    const isFieldEnclosed = fieldState.id !== groupState.id
+    const id = isFieldEnclosed ? fieldState.id : undefined
+    const description = isFieldEnclosed ? fieldState.description : undefined
+
+    const intent = state ?? checkboxIntent ?? groupState.intent
+
+    return { name, isRequired, isInvalid, id, description, intent }
+  }
 
-    const checked = value ? group.value?.includes(value) : checkedProp
+  const checked = value ? group.value?.includes(value) : checkedProp
 
-    const handleCheckedChange = (isChecked: boolean) => {
-      onCheckedChange?.(isChecked)
+  const handleCheckedChange = (isChecked: boolean) => {
+    onCheckedChange?.(isChecked)
 
-      const rootRefValue = rootRef.current?.value
-      if (rootRefValue && group.onCheckedChange) {
-        group.onCheckedChange(isChecked, rootRefValue)
-      }
+    const rootRefValue = rootRef.current?.value
+    if (rootRefValue && group.onCheckedChange) {
+      group.onCheckedChange(isChecked, rootRefValue)
     }
+  }
 
-    const {
-      id,
-      name,
-      isInvalid,
-      description,
-      intent,
-      isRequired: isRequiredAttr,
-    } = getCheckboxAttributes({
-      fieldState: field,
-      groupState: group,
-      checkboxIntent: intentProp,
-    })
-
-    const isRequired = useMemo(() => {
-      if (!group) return isRequiredAttr
-
-      return isRequiredAttr ? !group.value?.length : false
-    }, [group, isRequiredAttr])
-
-    const checkboxLabel = children && (
-      <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>
-        {children}
-      </CheckboxLabel>
-    )
-
-    const checkboxInput = (
-      <CheckboxInput
-        ref={ref}
-        id={id || innerId}
-        name={name}
-        value={value}
-        intent={intent}
-        checked={checked}
-        disabled={disabled}
-        required={isRequired}
-        aria-describedby={description}
-        aria-invalid={isInvalid}
-        onCheckedChange={handleCheckedChange}
-        aria-labelledby={children ? innerLabelId : field.labelId}
-        {...others}
-      />
+  const {
+    id,
+    name,
+    isInvalid,
+    description,
+    intent,
+    isRequired: isRequiredAttr,
+  } = getCheckboxAttributes({
+    fieldState: field,
+    groupState: group,
+    checkboxIntent: intentProp,
+  })
+
+  const isRequired = useMemo(() => {
+    if (!group) return isRequiredAttr
+
+    return isRequiredAttr ? !group.value?.length : false
+  }, [group, isRequiredAttr])
+
+  const checkboxLabel = children && (
+    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>
+      {children}
+    </CheckboxLabel>
+  )
+
+  const checkboxInput = (
+    <CheckboxInput
+      ref={ref}
+      id={id || innerId}
+      name={name}
+      value={value}
+      intent={intent}
+      checked={checked}
+      disabled={disabled}
+      required={isRequired}
+      aria-describedby={description}
+      aria-invalid={isInvalid}
+      onCheckedChange={handleCheckedChange}
+      aria-labelledby={children ? innerLabelId : field.labelId}
+      {...others}
+    />
+  )
+
+  const content =
+    group.reverse || reverse ? (
+      <>
+        {checkboxLabel}
+        {checkboxInput}
+      </>
+    ) : (
+      <>
+        {checkboxInput}
+        {checkboxLabel}
+      </>
     )
 
-    const content =
-      group.reverse || reverse ? (
-        <>
-          {checkboxLabel}
-          {checkboxInput}
-        </>
-      ) : (
-        <>
-          {checkboxInput}
-          {checkboxLabel}
-        </>
-      )
-
-    return (
-      <div
-        data-spark-component="checkbox"
-        className={cx('relative flex items-start gap-md text-body-1', className)}
-      >
-        {content}
-      </div>
-    )
-  }
-)
+  return (
+    <div
+      data-spark-component="checkbox"
+      className={cx('relative flex items-start gap-md text-body-1', className)}
+    >
+      {content}
+    </div>
+  )
+}
 
 Checkbox.displayName = 'Checkbox'
diff --git a/packages/components/checkbox/src/CheckboxGroup.tsx b/packages/components/checkbox/src/CheckboxGroup.tsx
index 01dd2d790..e44e43dcd 100644
--- a/packages/components/checkbox/src/CheckboxGroup.tsx
+++ b/packages/components/checkbox/src/CheckboxGroup.tsx
@@ -1,6 +1,6 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
 import { useCombinedState } from '@spark-ui/use-combined-state'
-import { ComponentPropsWithoutRef, forwardRef, useEffect, useMemo, useRef } from 'react'
+import { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'
 
 import { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'
 import { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'
@@ -17,76 +17,73 @@ export interface CheckboxGroupProps
    * The callback fired when any children Checkbox is checked or unchecked
    */
   onCheckedChange?: (value: string[]) => void
+  ref?: Ref<HTMLDivElement>
 }
 
-export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
-  (
-    {
-      name: nameProp,
-      value: valueProp,
-      defaultValue,
-      className,
-      intent,
-      orientation = 'vertical',
-      onCheckedChange: onCheckedChangeProp,
-      reverse = false,
-      children,
-      ...others
-    },
-    ref
-  ) => {
-    const [value, setValue] = useCombinedState(valueProp, defaultValue)
-    const field = useFormFieldControl()
-    const onCheckedChangeRef = useRef(onCheckedChangeProp)
+export const CheckboxGroup = ({
+  name: nameProp,
+  value: valueProp,
+  defaultValue,
+  className,
+  intent,
+  orientation = 'vertical',
+  onCheckedChange: onCheckedChangeProp,
+  reverse = false,
+  children,
+  ref,
+  ...others
+}: CheckboxGroupProps) => {
+  const [value, setValue] = useCombinedState(valueProp, defaultValue)
+  const field = useFormFieldControl()
+  const onCheckedChangeRef = useRef(onCheckedChangeProp)
 
-    const { id, labelId, description, state, isInvalid, isRequired } = field
-    const name = nameProp ?? field.name
+  const { id, labelId, description, state, isInvalid, isRequired } = field
+  const name = nameProp ?? field.name
 
-    const current = useMemo(() => {
-      const handleCheckedChange = (checked: boolean, changed: string) => {
-        const values = value || []
-        const modified = checked ? [...values, changed] : values.filter(val => val !== changed)
+  const current = useMemo(() => {
+    const handleCheckedChange = (checked: boolean, changed: string) => {
+      const values = value || []
+      const modified = checked ? [...values, changed] : values.filter(val => val !== changed)
 
-        setValue(modified)
+      setValue(modified)
 
-        if (onCheckedChangeRef.current) {
-          onCheckedChangeRef.current(modified)
-        }
+      if (onCheckedChangeRef.current) {
+        onCheckedChangeRef.current(modified)
       }
+    }
 
-      return {
-        id,
-        name,
-        value,
-        intent,
-        state,
-        isInvalid,
-        description,
-        isRequired,
-        reverse,
-        onCheckedChange: handleCheckedChange,
-      }
-    }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])
+    return {
+      id,
+      name,
+      value,
+      intent,
+      state,
+      isInvalid,
+      description,
+      isRequired,
+      reverse,
+      onCheckedChange: handleCheckedChange,
+    }
+  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])
 
-    useEffect(() => {
-      onCheckedChangeRef.current = onCheckedChangeProp
-    }, [onCheckedChangeProp])
+  useEffect(() => {
+    onCheckedChangeRef.current = onCheckedChangeProp
+  }, [onCheckedChangeProp])
 
-    return (
-      <CheckboxGroupContext.Provider value={current}>
-        <div
-          ref={ref}
-          className={checkboxGroupStyles({ className, orientation })}
-          role="group"
-          aria-labelledby={labelId}
-          aria-describedby={description}
-          {...others}
-        >
-          {children}
-        </div>
-      </CheckboxGroupContext.Provider>
-    )
-  }
-)
+  return (
+    <CheckboxGroupContext.Provider value={current}>
+      <div
+        ref={ref}
+        className={checkboxGroupStyles({ className, orientation })}
+        role="group"
+        aria-labelledby={labelId}
+        aria-describedby={description}
+        {...others}
+      >
+        {children}
+      </div>
+    </CheckboxGroupContext.Provider>
+  )
+}
 
 CheckboxGroup.displayName = 'CheckboxGroup'
diff --git a/packages/components/checkbox/src/CheckboxIndicator.tsx b/packages/components/checkbox/src/CheckboxIndicator.tsx
index cb992b516..b1a16e9de 100644
--- a/packages/components/checkbox/src/CheckboxIndicator.tsx
+++ b/packages/components/checkbox/src/CheckboxIndicator.tsx
@@ -2,18 +2,14 @@ import {
   CheckboxIndicator as CheckboxIndicatorPrimitive,
   CheckboxIndicatorProps as CheckboxIndicatorPrimitiveProps,
 } from '@radix-ui/react-checkbox'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type CheckboxIndicatorProps = CheckboxIndicatorPrimitiveProps
+export type CheckboxIndicatorProps = CheckboxIndicatorPrimitiveProps & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const CheckboxIndicator = forwardRef<HTMLSpanElement, CheckboxIndicatorProps>(
-  (props, ref) => (
-    <CheckboxIndicatorPrimitive
-      ref={ref}
-      className="flex size-full items-center justify-center"
-      {...props}
-    />
-  )
+export const CheckboxIndicator = (props: CheckboxIndicatorProps) => (
+  <CheckboxIndicatorPrimitive className="flex size-full items-center justify-center" {...props} />
 )
 
 CheckboxIndicator.displayName = 'CheckboxIndicator'
diff --git a/packages/components/checkbox/src/CheckboxInput.tsx b/packages/components/checkbox/src/CheckboxInput.tsx
index 7af25070d..74d980416 100644
--- a/packages/components/checkbox/src/CheckboxInput.tsx
+++ b/packages/components/checkbox/src/CheckboxInput.tsx
@@ -2,7 +2,7 @@ import { Checkbox as CheckboxPrimitive } from '@radix-ui/react-checkbox'
 import { Icon } from '@spark-ui/icon'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { Minus } from '@spark-ui/icons/dist/icons/Minus'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'
 
 import { CheckboxIndicator } from './CheckboxIndicator'
 import { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'
@@ -48,24 +48,28 @@ export interface CheckboxInputProps
    * Event handler called when the checked state of the checkbox changes.
    */
   onCheckedChange?: (checked: boolean) => void
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const CheckboxInput = forwardRef<HTMLButtonElement, CheckboxInputProps>(
-  (
-    { className, icon = <Check />, indeterminateIcon = <Minus />, intent, checked, ...others },
-    ref
-  ) => (
-    <CheckboxPrimitive
-      ref={ref}
-      className={checkboxInputStyles({ intent, className })}
-      checked={checked}
-      {...others}
-    >
-      <CheckboxIndicator>
-        <Icon size="sm">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>
-      </CheckboxIndicator>
-    </CheckboxPrimitive>
-  )
+export const CheckboxInput = ({
+  className,
+  icon = <Check />,
+  indeterminateIcon = <Minus />,
+  intent,
+  checked,
+  ref,
+  ...others
+}: CheckboxInputProps) => (
+  <CheckboxPrimitive
+    ref={ref}
+    className={checkboxInputStyles({ intent, className })}
+    checked={checked}
+    {...others}
+  >
+    <CheckboxIndicator>
+      <Icon size="sm">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>
+    </CheckboxIndicator>
+  </CheckboxPrimitive>
 )
 
 CheckboxInput.displayName = 'CheckboxInput'
diff --git a/packages/components/chip/CHANGELOG.md b/packages/components/chip/CHANGELOG.md
index 8a1707237..a3a98e3c2 100644
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/chip
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/chip
diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
index 496d3067a..202ceb22d 100644
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/chip",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "To help people enter information, make selections, filter content, or trigger actions.",
   "publishConfig": {
     "access": "public"
@@ -44,10 +44,10 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
     "emulate-tab": "^1.2.1"
   }
 }
diff --git a/packages/components/chip/src/Chip.tsx b/packages/components/chip/src/Chip.tsx
index 1f8d616ad..75e733a78 100644
--- a/packages/components/chip/src/Chip.tsx
+++ b/packages/components/chip/src/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
+import React, { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { chipStyles, type ChipStylesProps } from './Chip.styles'
 import { ChipContext } from './useChipContext'
@@ -30,65 +30,62 @@ export interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'ha
    * Clear chip handler
    */
   onClear?: (event?: React.MouseEvent<HTMLButtonElement>) => void
+  ref?: Ref<HTMLButtonElement | HTMLDivElement>
 }
 
-export const Chip = forwardRef<HTMLButtonElement | HTMLDivElement, ChipProps>(
-  (
-    {
-      design = 'outlined',
-      disabled,
-      children,
-      intent = 'basic',
-      defaultPressed,
-      pressed,
-      asChild,
-      className,
-      onClick,
-      onClear,
-      ...otherProps
-    },
-    forwardedRef
-  ) => {
-    const {
-      Element: ChipElement,
-      chipProps: { children: formattedChildren, ...chipProps },
-      compoundElements,
-    } = useChipElement({
-      asChild,
-      pressed,
-      defaultPressed,
-      onClick,
-      disabled: !!disabled,
-      value: otherProps.value,
-      defaultValue: otherProps.defaultValue,
-      children,
-      onClear,
-    })
+export const Chip = ({
+  design = 'outlined',
+  disabled,
+  children,
+  intent = 'basic',
+  defaultPressed,
+  pressed,
+  asChild,
+  className,
+  onClick,
+  onClear,
+  ref: forwardedRef,
+  ...otherProps
+}: ChipProps) => {
+  const {
+    Element: ChipElement,
+    chipProps: { children: formattedChildren, ...chipProps },
+    compoundElements,
+  } = useChipElement({
+    asChild,
+    pressed,
+    defaultPressed,
+    onClick,
+    disabled: !!disabled,
+    value: otherProps.value,
+    defaultValue: otherProps.defaultValue,
+    children,
+    onClear,
+  })
 
-    const { clearButton } = compoundElements
+  const { clearButton } = compoundElements
 
-    return (
-      <ChipContext.Provider value={{ disabled, design, intent, onClear }}>
-        <ChipElement
-          ref={forwardedRef}
-          className={chipStyles({
-            className,
-            design,
-            disabled,
-            intent,
-            hasClearButton: !!clearButton,
-          })}
-          {...{
-            ...chipProps,
-            ...otherProps,
-          }}
-          data-spark-component="chip"
-        >
-          {formattedChildren}
-        </ChipElement>
-      </ChipContext.Provider>
-    )
-  }
-)
+  return (
+    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>
+      <ChipElement
+        ref={forwardedRef}
+        className={chipStyles({
+          className,
+          design,
+          disabled,
+          intent,
+          hasClearButton: !!clearButton,
+        })}
+        {...{
+          ...chipProps,
+          ...otherProps,
+        }}
+        data-spark-component="chip"
+      >
+        {formattedChildren}
+      </ChipElement>
+    </ChipContext.Provider>
+  )
+}
 
 Chip.displayName = 'Chip'
diff --git a/packages/components/chip/src/ChipClearButton.tsx b/packages/components/chip/src/ChipClearButton.tsx
index 254984d38..851d2abd9 100644
--- a/packages/components/chip/src/ChipClearButton.tsx
+++ b/packages/components/chip/src/ChipClearButton.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@spark-ui/icon'
 import { Close } from '@spark-ui/icons/dist/icons/Close'
-import React, { cloneElement, ComponentPropsWithoutRef, forwardRef, useCallback } from 'react'
+import React, { cloneElement, ComponentPropsWithoutRef, Ref, useCallback } from 'react'
 
 import {
   chipClearButtonStyles,
@@ -13,54 +13,51 @@ export interface ChipClearButtonProps
   extends ComponentPropsWithoutRef<'span'>,
     ChipClearButtonStylesProps {
   label: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const ChipClearButton = forwardRef<HTMLSpanElement, ChipClearButtonProps>(
-  (
-    {
-      children = (
-        <Icon>
-          <Close />
-        </Icon>
-      ),
-      tabIndex = 0,
-      label,
-    },
-    forwardedRef
-  ) => {
-    const { design, disabled, onClear } = useChipContext()
+export const ChipClearButton = ({
+  children = (
+    <Icon>
+      <Close />
+    </Icon>
+  ),
+  tabIndex = 0,
+  label,
+  ref: forwardedRef,
+}: ChipClearButtonProps) => {
+  const { design, disabled, onClear } = useChipContext()
 
-    const onClearHandler = useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.stopPropagation()
-        !disabled && onClear && onClear(event)
-      },
-      [disabled, onClear]
-    )
+  const onClearHandler = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+      !disabled && onClear && onClear(event)
+    },
+    [disabled, onClear]
+  )
 
-    return (
-      <span
-        className={chipClearButtonWrapperStyles({
-          isBordered: ['outline', 'dashed'].includes(`${design}`),
-          disabled: !!disabled,
-          design,
-        })}
-        onClick={onClearHandler}
-        ref={forwardedRef}
+  return (
+    <span
+      className={chipClearButtonWrapperStyles({
+        isBordered: ['outline', 'dashed'].includes(`${design}`),
+        disabled: !!disabled,
+        design,
+      })}
+      onClick={onClearHandler}
+      ref={forwardedRef}
+    >
+      <button
+        tabIndex={tabIndex}
+        type="button"
+        disabled={!!disabled}
+        className={chipClearButtonStyles({ disabled })}
+        aria-label={label}
       >
-        <button
-          tabIndex={tabIndex}
-          type="button"
-          disabled={!!disabled}
-          className={chipClearButtonStyles({ disabled })}
-          aria-label={label}
-        >
-          {children &&
-            cloneElement(children as React.ReactElement<HTMLElement>, { ariaLabel: label })}
-        </button>
-      </span>
-    )
-  }
-)
+        {children &&
+          cloneElement(children as React.ReactElement<HTMLElement>, { ariaLabel: label })}
+      </button>
+    </span>
+  )
+}
 
 ChipClearButton.displayName = 'Chip.ClearButton'
diff --git a/packages/components/chip/src/ChipContent.tsx b/packages/components/chip/src/ChipContent.tsx
index ab82d18a7..834bd8cf2 100644
--- a/packages/components/chip/src/ChipContent.tsx
+++ b/packages/components/chip/src/ChipContent.tsx
@@ -1,16 +1,16 @@
 import { cx } from 'class-variance-authority'
-import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
+import React, { ComponentPropsWithoutRef, Ref } from 'react'
 
-export type ChipContentProps = ComponentPropsWithoutRef<'span'>
+export type ChipContentProps = ComponentPropsWithoutRef<'span'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const ChipContent = forwardRef<HTMLSpanElement, ChipContentProps>(
-  ({ children, className }, forwardedRef) => {
-    return (
-      <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>
-        {children}
-      </span>
-    )
-  }
-)
+export const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {
+  return (
+    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>
+      {children}
+    </span>
+  )
+}
 
 ChipContent.displayName = 'Chip.Content'
diff --git a/packages/components/chip/src/ChipIcon.tsx b/packages/components/chip/src/ChipIcon.tsx
index b67de5c72..3d0220e26 100644
--- a/packages/components/chip/src/ChipIcon.tsx
+++ b/packages/components/chip/src/ChipIcon.tsx
@@ -1,16 +1,16 @@
 import { cx } from 'class-variance-authority'
-import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
+import React, { ComponentPropsWithoutRef, Ref } from 'react'
 
-export type ChipIconProps = ComponentPropsWithoutRef<'span'>
+export type ChipIconProps = ComponentPropsWithoutRef<'span'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const ChipIcon = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<'span'>>(
-  ({ children, className }, forwardedRef) => {
-    return (
-      <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>
-        {children}
-      </span>
-    )
-  }
-)
+export const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {
+  return (
+    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>
+      {children}
+    </span>
+  )
+}
 
 ChipIcon.displayName = 'Chip.Icon'
diff --git a/packages/components/chip/src/ChipLeadingIcon.tsx b/packages/components/chip/src/ChipLeadingIcon.tsx
index 13b0d2e05..c22ed0481 100644
--- a/packages/components/chip/src/ChipLeadingIcon.tsx
+++ b/packages/components/chip/src/ChipLeadingIcon.tsx
@@ -1,14 +1,18 @@
 import { cx } from 'class-variance-authority'
-import React, { forwardRef } from 'react'
+import React, { Ref } from 'react'
 
 import { ChipIcon, type ChipIconProps } from './ChipIcon'
 
-export type ChipLeadingIconProps = ChipIconProps
+export type ChipLeadingIconProps = ChipIconProps & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const ChipLeadingIcon = forwardRef<HTMLSpanElement, ChipLeadingIconProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />
-  )
+export const ChipLeadingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}: ChipLeadingIconProps) => (
+  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />
 )
 
 ChipLeadingIcon.displayName = 'Chip.LeadingIcon'
diff --git a/packages/components/chip/src/ChipTrailingIcon.tsx b/packages/components/chip/src/ChipTrailingIcon.tsx
index ff5fcf4fe..abe18b6e9 100644
--- a/packages/components/chip/src/ChipTrailingIcon.tsx
+++ b/packages/components/chip/src/ChipTrailingIcon.tsx
@@ -1,14 +1,18 @@
 import { cx } from 'class-variance-authority'
-import React, { forwardRef } from 'react'
+import React, { Ref } from 'react'
 
 import { ChipIcon, type ChipIconProps } from './ChipIcon'
 
-export type ChipTrailingIconProps = ChipIconProps
+export type ChipTrailingIconProps = ChipIconProps & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const ChipTrailingIcon = forwardRef<HTMLSpanElement, ChipTrailingIconProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />
-  )
+export const ChipTrailingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}: ChipTrailingIconProps) => (
+  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />
 )
 
 ChipTrailingIcon.displayName = 'Chip.TrailingIcon'
diff --git a/packages/components/collapsible/CHANGELOG.md b/packages/components/collapsible/CHANGELOG.md
index 1126361d6..5cb51a015 100644
--- a/packages/components/collapsible/CHANGELOG.md
+++ b/packages/components/collapsible/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/collapsible
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/collapsible
diff --git a/packages/components/collapsible/package.json b/packages/components/collapsible/package.json
index bc0696ced..5e5f12635 100644
--- a/packages/components/collapsible/package.json
+++ b/packages/components/collapsible/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/collapsible",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "An interactive component which expands/collapses a panel.",
   "publishConfig": {
     "access": "public"
@@ -45,8 +45,8 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
     "@zag-js/collapsible": "0.81.0",
     "@zag-js/react": "0.81.0"
   }
diff --git a/packages/components/collapsible/src/Collapsible.tsx b/packages/components/collapsible/src/Collapsible.tsx
index 7d601632d..359b61ecb 100644
--- a/packages/components/collapsible/src/Collapsible.tsx
+++ b/packages/components/collapsible/src/Collapsible.tsx
@@ -2,7 +2,7 @@ import { useEvent } from '@spark-ui/internal-utils'
 import { Slot } from '@spark-ui/slot'
 import * as collapsible from '@zag-js/collapsible'
 import { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'
-import { type ComponentProps, createContext, forwardRef, useContext, useId } from 'react'
+import { type ComponentProps, createContext, Ref, useContext, useId } from 'react'
 
 export interface CollapsibleProps extends ComponentProps<'div'> {
   /**
@@ -29,59 +29,56 @@ export interface CollapsibleProps extends ComponentProps<'div'> {
    * The ids of the elements in the collapsible. Useful for composition
    */
   ids?: collapsible.Context['ids']
+  ref?: Ref<HTMLDivElement>
 }
 
 const CollapsibleContext = createContext<collapsible.Api<PropTypes> | null>(null)
 
-export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
-  (
-    {
-      asChild = false,
-      children,
-      defaultOpen = false,
-      disabled = false,
-      onOpenChange,
-      open,
-      ids,
-      ...props
-    },
-    ref
-  ) => {
-    const initialContext: collapsible.Context = {
-      'open.controlled': open !== undefined,
-      open: defaultOpen || open,
-      disabled,
-      id: useId(),
-      ids,
-    }
+export const Collapsible = ({
+  asChild = false,
+  children,
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange,
+  open,
+  ids,
+  ref,
+  ...props
+}: CollapsibleProps) => {
+  const initialContext: collapsible.Context = {
+    'open.controlled': open !== undefined,
+    open: defaultOpen || open,
+    disabled,
+    id: useId(),
+    ids,
+  }
 
-    const context: collapsible.Context = {
-      ...initialContext,
-      onOpenChange: useEvent(
-        (details: collapsible.OpenChangeDetails) => {
-          onOpenChange?.(details.open)
-        },
-        { sync: true }
-      ),
-      open,
-      disabled,
-    }
+  const context: collapsible.Context = {
+    ...initialContext,
+    onOpenChange: useEvent(
+      (details: collapsible.OpenChangeDetails) => {
+        onOpenChange?.(details.open)
+      },
+      { sync: true }
+    ),
+    open,
+    disabled,
+  }
 
-    const [state, send] = useMachine(collapsible.machine(initialContext), { context })
-    const api = collapsible.connect(state, send, normalizeProps)
-    const Component = asChild ? Slot : 'div'
+  const [state, send] = useMachine(collapsible.machine(initialContext), { context })
+  const api = collapsible.connect(state, send, normalizeProps)
+  const Component = asChild ? Slot : 'div'
 
-    const mergedProps = mergeProps(api.getRootProps(), props)
+  const mergedProps = mergeProps(api.getRootProps(), props)
 
-    return (
-      <CollapsibleContext.Provider value={api}>
-        <Component data-spark-component="collapsible" ref={ref} {...mergedProps}>
-          {children}
-        </Component>
-      </CollapsibleContext.Provider>
-    )
-  }
-)
+  return (
+    <CollapsibleContext.Provider value={api}>
+      <Component data-spark-component="collapsible" ref={ref} {...mergedProps}>
+        {children}
+      </Component>
+    </CollapsibleContext.Provider>
+  )
+}
 
 Collapsible.displayName = 'Collapsible'
 
diff --git a/packages/components/collapsible/src/CollapsibleContent.tsx b/packages/components/collapsible/src/CollapsibleContent.tsx
index 82a530a3e..30435cf1e 100644
--- a/packages/components/collapsible/src/CollapsibleContent.tsx
+++ b/packages/components/collapsible/src/CollapsibleContent.tsx
@@ -1,37 +1,42 @@
 import { Slot } from '@spark-ui/slot'
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, Ref } from 'react'
 
 import { useCollapsibleContext } from './Collapsible'
 
 export interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
   asChild?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Content = forwardRef<HTMLDivElement, CollapsibleContentProps>(
-  ({ asChild = false, className, children, ...props }, ref) => {
-    const { getContentProps } = useCollapsibleContext()
+export const Content = ({
+  asChild = false,
+  className,
+  children,
+  ref,
+  ...props
+}: CollapsibleContentProps) => {
+  const { getContentProps } = useCollapsibleContext()
 
-    const Component = asChild ? Slot : 'div'
-    const contentProps = getContentProps()
-    const mergedProps = mergeProps(contentProps, {
-      className: cx(
-        'overflow-hidden',
-        'motion-reduce:!animate-none',
-        '[&[hidden]]:hidden',
-        'data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out',
-        className
-      ),
-      ...props,
-    })
+  const Component = asChild ? Slot : 'div'
+  const contentProps = getContentProps()
+  const mergedProps = mergeProps(contentProps, {
+    className: cx(
+      'overflow-hidden',
+      'motion-reduce:!animate-none',
+      '[&[hidden]]:hidden',
+      'data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out',
+      className
+    ),
+    ...props,
+  })
 
-    return (
-      <Component ref={ref} data-spark-component="collapsible-content" {...mergedProps}>
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component ref={ref} data-spark-component="collapsible-content" {...mergedProps}>
+      {children}
+    </Component>
+  )
+}
 
 Content.displayName = 'Collapsible.Content'
diff --git a/packages/components/collapsible/src/CollapsibleTrigger.tsx b/packages/components/collapsible/src/CollapsibleTrigger.tsx
index 1b5ce6193..78bdfa5a5 100644
--- a/packages/components/collapsible/src/CollapsibleTrigger.tsx
+++ b/packages/components/collapsible/src/CollapsibleTrigger.tsx
@@ -1,25 +1,24 @@
 import { Slot } from '@spark-ui/slot'
 import { mergeProps } from '@zag-js/react'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, Ref } from 'react'
 
 import { useCollapsibleContext } from './Collapsible'
 
 export interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
   asChild?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const Trigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
-  ({ asChild = false, children, ...props }, ref) => {
-    const collapsibleContext = useCollapsibleContext()
-    const Component = asChild ? Slot : 'button'
-    const mergedProps = mergeProps(collapsibleContext.getTriggerProps(), props)
+export const Trigger = ({ asChild = false, children, ref, ...props }: CollapsibleTriggerProps) => {
+  const collapsibleContext = useCollapsibleContext()
+  const Component = asChild ? Slot : 'button'
+  const mergedProps = mergeProps(collapsibleContext.getTriggerProps(), props)
 
-    return (
-      <Component ref={ref} data-spark-component="collapsible-trigger" {...mergedProps}>
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component ref={ref} data-spark-component="collapsible-trigger" {...mergedProps}>
+      {children}
+    </Component>
+  )
+}
 
 Trigger.displayName = 'Collapsible.Trigger'
diff --git a/packages/components/combobox/CHANGELOG.md b/packages/components/combobox/CHANGELOG.md
index ee053d16c..d8a0cd0a5 100644
--- a/packages/components/combobox/CHANGELOG.md
+++ b/packages/components/combobox/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/combobox
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/combobox
diff --git a/packages/components/combobox/package.json b/packages/components/combobox/package.json
index c8a712b78..849c87d0f 100644
--- a/packages/components/combobox/package.json
+++ b/packages/components/combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/combobox",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "An input that behaves similarly to a select, with the addition of a free text input to filter options.",
   "publishConfig": {
     "access": "public"
@@ -28,17 +28,17 @@
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "@spark-ui/dialog": "^7.3.7"
+    "@spark-ui/dialog": "^8.0.0"
   },
   "dependencies": {
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/popover": "^7.3.7",
-    "@spark-ui/spinner": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7",
-    "@spark-ui/visually-hidden": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/popover": "^8.0.0",
+    "@spark-ui/spinner": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0",
+    "@spark-ui/visually-hidden": "^8.0.0",
     "class-variance-authority": "0.7.0",
     "downshift": "9.0.7"
   },
diff --git a/packages/components/combobox/src/ComboboxClearButton.tsx b/packages/components/combobox/src/ComboboxClearButton.tsx
index d81e85d5f..3f91d0462 100644
--- a/packages/components/combobox/src/ComboboxClearButton.tsx
+++ b/packages/components/combobox/src/ComboboxClearButton.tsx
@@ -1,53 +1,58 @@
 import { Icon } from '@spark-ui/icon'
 import { DeleteOutline } from '@spark-ui/icons/dist/icons/DeleteOutline'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from 'react'
+import { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
 export interface ClearButtonProps extends ComponentPropsWithoutRef<'button'> {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const ClearButton = forwardRef<HTMLButtonElement, ClearButtonProps>(
-  ({ className, tabIndex = -1, onClick, ...others }, ref) => {
-    const ctx = useComboboxContext()
-
-    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
-      event.stopPropagation()
-
-      if (ctx.multiple) {
-        ctx.setSelectedItems([])
-      } else {
-        ctx.selectItem(null)
-      }
-
-      ctx.setInputValue('')
+export const ClearButton = ({
+  className,
+  tabIndex = -1,
+  onClick,
+  ref,
+  ...others
+}: ClearButtonProps) => {
+  const ctx = useComboboxContext()
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    event.stopPropagation()
+
+    if (ctx.multiple) {
+      ctx.setSelectedItems([])
+    } else {
+      ctx.selectItem(null)
+    }
 
-      if (ctx.innerInputRef.current) {
-        ctx.innerInputRef.current.focus()
-      }
+    ctx.setInputValue('')
 
-      if (onClick) {
-        onClick(event)
-      }
+    if (ctx.innerInputRef.current) {
+      ctx.innerInputRef.current.focus()
     }
 
-    return (
-      <button
-        ref={ref}
-        className={cx(className, 'h-sz-44 text-neutral hover:text-neutral-hovered')}
-        tabIndex={tabIndex}
-        onClick={handleClick}
-        type="button"
-        {...others}
-      >
-        <Icon size="sm">
-          <DeleteOutline />
-        </Icon>
-      </button>
-    )
+    if (onClick) {
+      onClick(event)
+    }
   }
-)
+
+  return (
+    <button
+      ref={ref}
+      className={cx(className, 'h-sz-44 text-neutral hover:text-neutral-hovered')}
+      tabIndex={tabIndex}
+      onClick={handleClick}
+      type="button"
+      {...others}
+    >
+      <Icon size="sm">
+        <DeleteOutline />
+      </Icon>
+    </button>
+  )
+}
 
 ClearButton.displayName = 'Combobox.ClearButton'
diff --git a/packages/components/combobox/src/ComboboxDisclosure.tsx b/packages/components/combobox/src/ComboboxDisclosure.tsx
index ed08f8f9a..e076dd4fa 100644
--- a/packages/components/combobox/src/ComboboxDisclosure.tsx
+++ b/packages/components/combobox/src/ComboboxDisclosure.tsx
@@ -4,7 +4,7 @@ import { IconButton } from '@spark-ui/icon-button'
 import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cx } from 'class-variance-authority'
-import { ComponentProps, forwardRef, type Ref } from 'react'
+import { ComponentProps, Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
@@ -12,55 +12,52 @@ interface DisclosureProps extends Omit<ComponentProps<typeof IconButton>, 'aria-
   className?: string
   closedLabel: string
   openedLabel: string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const Disclosure = forwardRef(
-  (
-    {
-      className,
-      closedLabel,
-      openedLabel,
-      intent = 'neutral',
-      design = 'ghost',
-      size = 'sm',
-      ...props
-    }: DisclosureProps,
-    forwardedRef: Ref<HTMLButtonElement>
-  ) => {
-    const ctx = useComboboxContext()
+export const Disclosure = ({
+  className,
+  closedLabel,
+  openedLabel,
+  intent = 'neutral',
+  design = 'ghost',
+  size = 'sm',
+  ref: forwardedRef,
+  ...props
+}: DisclosureProps) => {
+  const ctx = useComboboxContext()
 
-    const { ref: downshiftRef, ...downshiftDisclosureProps } = ctx.getToggleButtonProps({
-      disabled: ctx.disabled || ctx.readOnly,
-      onClick: event => {
-        event.stopPropagation()
-      },
-    })
-    const isExpanded = downshiftDisclosureProps['aria-expanded']
-    const ref = useMergeRefs(forwardedRef, downshiftRef)
+  const { ref: downshiftRef, ...downshiftDisclosureProps } = ctx.getToggleButtonProps({
+    disabled: ctx.disabled || ctx.readOnly,
+    onClick: event => {
+      event.stopPropagation()
+    },
+  })
+  const isExpanded = downshiftDisclosureProps['aria-expanded']
+  const ref = useMergeRefs(forwardedRef, downshiftRef)
 
-    return (
-      <IconButton
-        ref={ref}
-        className={cx(className, 'mt-[calc((44px-32px)/2)]')}
-        intent={intent}
-        design={design}
-        size={size}
-        {...downshiftDisclosureProps}
-        {...props}
-        aria-label={isExpanded ? openedLabel : closedLabel}
-        disabled={ctx.disabled}
+  return (
+    <IconButton
+      ref={ref}
+      className={cx(className, 'mt-[calc((44px-32px)/2)]')}
+      intent={intent}
+      design={design}
+      size={size}
+      {...downshiftDisclosureProps}
+      {...props}
+      aria-label={isExpanded ? openedLabel : closedLabel}
+      disabled={ctx.disabled}
+    >
+      <Icon
+        className={cx('shrink-0', 'rotate-0 transition duration-100 ease-in', {
+          'rotate-180': isExpanded,
+        })}
+        size="sm"
       >
-        <Icon
-          className={cx('shrink-0', 'rotate-0 transition duration-100 ease-in', {
-            'rotate-180': isExpanded,
-          })}
-          size="sm"
-        >
-          <ArrowHorizontalDown />
-        </Icon>
-      </IconButton>
-    )
-  }
-)
+        <ArrowHorizontalDown />
+      </Icon>
+    </IconButton>
+  )
+}
 
 Disclosure.displayName = 'Combobox.Disclosure'
diff --git a/packages/components/combobox/src/ComboboxEmpty.tsx b/packages/components/combobox/src/ComboboxEmpty.tsx
index 08db7b428..b4533f7fa 100644
--- a/packages/components/combobox/src/ComboboxEmpty.tsx
+++ b/packages/components/combobox/src/ComboboxEmpty.tsx
@@ -1,27 +1,26 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactNode, type Ref } from 'react'
+import { type ReactNode, Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
 interface EmptyProps {
   className?: string
   children: ReactNode
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Empty = forwardRef(
-  ({ className, children }: EmptyProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const ctx = useComboboxContext()
-    const hasNoItemVisible = ctx.filteredItemsMap.size === 0
+export const Empty = ({ className, children, ref: forwardedRef }: EmptyProps) => {
+  const ctx = useComboboxContext()
+  const hasNoItemVisible = ctx.filteredItemsMap.size === 0
 
-    return hasNoItemVisible ? (
-      <div
-        ref={forwardedRef}
-        className={cx('px-lg py-md text-body-1 text-on-surface/dim-1', className)}
-      >
-        {children}
-      </div>
-    ) : null
-  }
-)
+  return hasNoItemVisible ? (
+    <div
+      ref={forwardedRef}
+      className={cx('px-lg py-md text-body-1 text-on-surface/dim-1', className)}
+    >
+      {children}
+    </div>
+  ) : null
+}
 
 Empty.displayName = 'Combobox.Empty'
diff --git a/packages/components/combobox/src/ComboboxGroup.tsx b/packages/components/combobox/src/ComboboxGroup.tsx
index 2d455da36..41ce39aea 100644
--- a/packages/components/combobox/src/ComboboxGroup.tsx
+++ b/packages/components/combobox/src/ComboboxGroup.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import React, { forwardRef, ReactNode, type Ref } from 'react'
+import React, { ReactNode, Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 import { ComboboxGroupProvider, useComboboxGroupContext } from './ComboboxItemsGroupContext'
@@ -7,43 +7,40 @@ import { ComboboxGroupProvider, useComboboxGroupContext } from './ComboboxItemsG
 interface GroupProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Group = forwardRef(
-  ({ children, ...props }: GroupProps, forwardedRef: Ref<HTMLDivElement>) => {
-    return (
-      <ComboboxGroupProvider>
-        <GroupContent ref={forwardedRef} {...props}>
-          {children}
-        </GroupContent>
-      </ComboboxGroupProvider>
-    )
-  }
-)
+export const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {
+  return (
+    <ComboboxGroupProvider>
+      <GroupContent ref={forwardedRef} {...props}>
+        {children}
+      </GroupContent>
+    </ComboboxGroupProvider>
+  )
+}
 
-const GroupContent = forwardRef(
-  ({ children, className }: GroupProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const ctx = useComboboxContext()
-    const groupCtx = useComboboxGroupContext()
+const GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {
+  const ctx = useComboboxContext()
+  const groupCtx = useComboboxGroupContext()
 
-    const hasVisibleOptions = React.Children.toArray(children).some(child => {
-      return (
-        React.isValidElement(child) &&
-        ctx.filteredItemsMap.get((child.props as { value: string }).value)
-      )
-    })
+  const hasVisibleOptions = React.Children.toArray(children).some(child => {
+    return (
+      React.isValidElement(child) &&
+      ctx.filteredItemsMap.get((child.props as { value: string }).value)
+    )
+  })
 
-    return hasVisibleOptions ? (
-      <div
-        ref={forwardedRef}
-        role="group"
-        aria-labelledby={groupCtx.groupLabelId}
-        className={cx(className)}
-      >
-        {children}
-      </div>
-    ) : null
-  }
-)
+  return hasVisibleOptions ? (
+    <div
+      ref={forwardedRef}
+      role="group"
+      aria-labelledby={groupCtx.groupLabelId}
+      className={cx(className)}
+    >
+      {children}
+    </div>
+  ) : null
+}
 
 Group.displayName = 'Combobox.Group'
diff --git a/packages/components/combobox/src/ComboboxInput.tsx b/packages/components/combobox/src/ComboboxInput.tsx
index 20e1436ba..de4a9df66 100644
--- a/packages/components/combobox/src/ComboboxInput.tsx
+++ b/packages/components/combobox/src/ComboboxInput.tsx
@@ -3,7 +3,7 @@ import { useCombinedState } from '@spark-ui/use-combined-state'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, Fragment, type Ref, useEffect } from 'react'
+import { ComponentPropsWithoutRef, Fragment, Ref, useEffect } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
@@ -15,99 +15,96 @@ interface InputProps extends Omit<InputPrimitiveProps, 'value' | 'placeholder'>
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
+  ref?: Ref<HTMLInputElement>
 }
 
-export const Input = forwardRef(
-  (
-    {
-      'aria-label': ariaLabel,
-      className,
-      placeholder,
-      value,
-      defaultValue,
-      onValueChange,
-      ...props
-    }: InputProps,
-    forwardedRef: Ref<HTMLInputElement>
-  ) => {
-    const ctx = useComboboxContext()
-    const [inputValue] = useCombinedState(value, defaultValue)
+export const Input = ({
+  'aria-label': ariaLabel,
+  className,
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  ref: forwardedRef,
+  ...props
+}: InputProps) => {
+  const ctx = useComboboxContext()
+  const [inputValue] = useCombinedState(value, defaultValue)
 
-    useEffect(() => {
-      if (inputValue != null) {
-        ctx.setInputValue(inputValue)
-      }
-    }, [inputValue])
+  useEffect(() => {
+    if (inputValue != null) {
+      ctx.setInputValue(inputValue)
+    }
+  }, [inputValue])
 
-    useEffect(() => {
-      if (onValueChange) {
-        ctx.setOnInputValueChange(() => onValueChange)
-      }
+  useEffect(() => {
+    if (onValueChange) {
+      ctx.setOnInputValueChange(() => onValueChange)
+    }
 
-      // Sync input with combobox default value
-      if (!ctx.multiple && ctx.selectedItem) {
-        ctx.setInputValue(ctx.selectedItem.text)
-      }
-    }, [])
+    // Sync input with combobox default value
+    if (!ctx.multiple && ctx.selectedItem) {
+      ctx.setInputValue(ctx.selectedItem.text)
+    }
+  }, [])
 
-    const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover
-      ? [Popover.Trigger, { asChild: true, type: undefined }]
-      : [Fragment, {}]
+  const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover
+    ? [Popover.Trigger, { asChild: true, type: undefined }]
+    : [Fragment, {}]
 
-    const multiselectInputProps = ctx.getDropdownProps()
-    const inputRef = useMergeRefs(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref)
-    const downshiftInputProps = ctx.getInputProps({
-      disabled: ctx.disabled || ctx.readOnly,
-      ...multiselectInputProps,
-      onKeyDown: event => {
-        multiselectInputProps.onKeyDown?.(event)
-        ctx.setLastInteractionType('keyboard')
-        ctx.setIsTyping(true)
-      },
-      /**
-       *
-       * Important:
-       * - without this, the input cursor is moved to the end after every change.
-       * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
-       */
-      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-        ctx.setInputValue(e.target.value)
-      },
-      ref: inputRef,
-    })
+  const multiselectInputProps = ctx.getDropdownProps()
+  const inputRef = useMergeRefs(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref)
+  const downshiftInputProps = ctx.getInputProps({
+    disabled: ctx.disabled || ctx.readOnly,
+    ...multiselectInputProps,
+    onKeyDown: event => {
+      multiselectInputProps.onKeyDown?.(event)
+      ctx.setLastInteractionType('keyboard')
+      ctx.setIsTyping(true)
+    },
+    /**
+     *
+     * Important:
+     * - without this, the input cursor is moved to the end after every change.
+     * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
+     */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      ctx.setInputValue(e.target.value)
+    },
+    ref: inputRef,
+  })
 
-    const hasPlaceholder = ctx.multiple ? ctx.selectedItems.length === 0 : ctx.selectedItem === null
+  const hasPlaceholder = ctx.multiple ? ctx.selectedItems.length === 0 : ctx.selectedItem === null
 
-    return (
-      <>
-        {ariaLabel && (
-          <VisuallyHidden>
-            <label {...ctx.getLabelProps()}>{ariaLabel}</label>
-          </VisuallyHidden>
-        )}
-        <PopoverTrigger {...popoverTriggerProps}>
-          <input
-            data-spark-component="combobox-input"
-            type="text"
-            {...(hasPlaceholder && { placeholder })}
-            className={cx(
-              'max-w-full shrink-0 grow basis-[80px]',
-              'h-sz-28 text-ellipsis bg-surface px-sm text-body-1 outline-none',
-              'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-on-surface/dim-3',
-              'read-only:cursor-default read-only:bg-transparent read-only:text-on-surface',
-              className
-            )}
-            {...props}
-            {...downshiftInputProps}
-            value={ctx.inputValue}
-            aria-label={ariaLabel}
-            disabled={ctx.disabled}
-            readOnly={ctx.readOnly}
-          />
-        </PopoverTrigger>
-      </>
-    )
-  }
-)
+  return (
+    <>
+      {ariaLabel && (
+        <VisuallyHidden>
+          <label {...ctx.getLabelProps()}>{ariaLabel}</label>
+        </VisuallyHidden>
+      )}
+      <PopoverTrigger {...popoverTriggerProps}>
+        <input
+          data-spark-component="combobox-input"
+          type="text"
+          {...(hasPlaceholder && { placeholder })}
+          className={cx(
+            'max-w-full shrink-0 grow basis-[80px]',
+            'h-sz-28 text-ellipsis bg-surface px-sm text-body-1 outline-none',
+            'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-on-surface/dim-3',
+            'read-only:cursor-default read-only:bg-transparent read-only:text-on-surface',
+            className
+          )}
+          {...props}
+          {...downshiftInputProps}
+          value={ctx.inputValue}
+          aria-label={ariaLabel}
+          disabled={ctx.disabled}
+          readOnly={ctx.readOnly}
+        />
+      </PopoverTrigger>
+    </>
+  )
+}
 
 Input.displayName = 'Combobox.Input'
diff --git a/packages/components/combobox/src/ComboboxItem.tsx b/packages/components/combobox/src/ComboboxItem.tsx
index 08deeda13..46aaaad94 100644
--- a/packages/components/combobox/src/ComboboxItem.tsx
+++ b/packages/components/combobox/src/ComboboxItem.tsx
@@ -1,6 +1,6 @@
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cva, cx } from 'class-variance-authority'
-import { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react'
+import { type HTMLAttributes, type ReactNode, Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 import { ComboboxItemProvider, useComboboxItemContext } from './ComboboxItemContext'
@@ -10,21 +10,20 @@ export interface ItemProps extends HTMLAttributes<HTMLLIElement> {
   value: string
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLLIElement>
 }
 
-export const Item = forwardRef(
-  ({ children, ...props }: ItemProps, forwardedRef: Ref<HTMLLIElement>) => {
-    const { value, disabled } = props
+export const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {
+  const { value, disabled } = props
 
-    return (
-      <ComboboxItemProvider value={value} disabled={disabled}>
-        <ItemContent ref={forwardedRef} {...props}>
-          {children}
-        </ItemContent>
-      </ComboboxItemProvider>
-    )
-  }
-)
+  return (
+    <ComboboxItemProvider value={value} disabled={disabled}>
+      <ItemContent ref={forwardedRef} {...props}>
+        {children}
+      </ItemContent>
+    </ComboboxItemProvider>
+  )
+}
 
 const styles = cva('px-lg py-md text-body-1', {
   variants: {
@@ -57,46 +56,47 @@ const styles = cva('px-lg py-md text-body-1', {
   ],
 })
 
-const ItemContent = forwardRef(
-  (
-    { className, disabled = false, value, children }: ItemProps,
-    forwardedRef: Ref<HTMLLIElement>
-  ) => {
-    const ctx = useComboboxContext()
-    const itemCtx = useComboboxItemContext()
+const ItemContent = ({
+  className,
+  disabled = false,
+  value,
+  children,
+  ref: forwardedRef,
+}: ItemProps) => {
+  const ctx = useComboboxContext()
+  const itemCtx = useComboboxItemContext()
 
-    const isVisible = !!ctx.filteredItemsMap.get(value)
+  const isVisible = !!ctx.filteredItemsMap.get(value)
 
-    const { ref: downshiftRef, ...downshiftItemProps } = ctx.getItemProps({
-      item: itemCtx.itemData,
-      index: itemCtx.index,
-    })
+  const { ref: downshiftRef, ...downshiftItemProps } = ctx.getItemProps({
+    item: itemCtx.itemData,
+    index: itemCtx.index,
+  })
 
-    const ref = useMergeRefs(forwardedRef, downshiftRef)
+  const ref = useMergeRefs(forwardedRef, downshiftRef)
 
-    if (!isVisible) return null
+  if (!isVisible) return null
 
-    return (
-      <li
-        ref={ref}
-        className={cx(
-          styles({
-            selected: itemCtx.isSelected,
-            disabled,
-            highlighted: ctx.highlightedItem?.value === value,
-            interactionType: ctx.lastInteractionType,
-            className,
-          })
-        )}
-        key={value}
-        {...downshiftItemProps}
-        aria-selected={itemCtx.isSelected}
-        aria-labelledby={itemCtx.textId}
-      >
-        {children}
-      </li>
-    )
-  }
-)
+  return (
+    <li
+      ref={ref}
+      className={cx(
+        styles({
+          selected: itemCtx.isSelected,
+          disabled,
+          highlighted: ctx.highlightedItem?.value === value,
+          interactionType: ctx.lastInteractionType,
+          className,
+        })
+      )}
+      key={value}
+      {...downshiftItemProps}
+      aria-selected={itemCtx.isSelected}
+      aria-labelledby={itemCtx.textId}
+    >
+      {children}
+    </li>
+  )
+}
 
 Item.displayName = 'Combobox.Item'
diff --git a/packages/components/combobox/src/ComboboxItemIndicator.tsx b/packages/components/combobox/src/ComboboxItemIndicator.tsx
index 51d44c801..dde871315 100644
--- a/packages/components/combobox/src/ComboboxItemIndicator.tsx
+++ b/packages/components/combobox/src/ComboboxItemIndicator.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@spark-ui/icon'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, Ref } from 'react'
 
 import { useComboboxItemContext } from './ComboboxItemContext'
 
@@ -9,27 +9,31 @@ export interface ItemIndicatorProps {
   children?: ReactNode
   className?: string
   label?: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const ItemIndicator = forwardRef(
-  ({ className, children, label }: ItemIndicatorProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const { disabled, isSelected } = useComboboxItemContext()
+export const ItemIndicator = ({
+  className,
+  children,
+  label,
+  ref: forwardedRef,
+}: ItemIndicatorProps) => {
+  const { disabled, isSelected } = useComboboxItemContext()
 
-    const childElement = children || (
-      <Icon size="sm">
-        <Check aria-label={label} />
-      </Icon>
-    )
+  const childElement = children || (
+    <Icon size="sm">
+      <Check aria-label={label} />
+    </Icon>
+  )
 
-    return (
-      <span
-        ref={forwardedRef}
-        className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}
-      >
-        {isSelected && childElement}
-      </span>
-    )
-  }
-)
+  return (
+    <span
+      ref={forwardedRef}
+      className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}
+    >
+      {isSelected && childElement}
+    </span>
+  )
+}
 
 ItemIndicator.displayName = 'Combobox.ItemIndicator'
diff --git a/packages/components/combobox/src/ComboboxItemText.tsx b/packages/components/combobox/src/ComboboxItemText.tsx
index 782c6154a..4f28bee24 100644
--- a/packages/components/combobox/src/ComboboxItemText.tsx
+++ b/packages/components/combobox/src/ComboboxItemText.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type Ref, useEffect, useId } from 'react'
+import { Ref, useEffect, useId } from 'react'
 
 import { ID_PREFIX } from './ComboboxContext'
 import { useComboboxItemContext } from './ComboboxItemContext'
@@ -7,26 +7,25 @@ import { useComboboxItemContext } from './ComboboxItemContext'
 export interface ItemTextProps {
   children: string
   className?: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const ItemText = forwardRef(
-  ({ children, className }: ItemTextProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const id = `${ID_PREFIX}-item-text-${useId()}`
+export const ItemText = ({ children, className, ref: forwardedRef }: ItemTextProps) => {
+  const id = `${ID_PREFIX}-item-text-${useId()}`
 
-    const { setTextId } = useComboboxItemContext()
+  const { setTextId } = useComboboxItemContext()
 
-    useEffect(() => {
-      setTextId(id)
+  useEffect(() => {
+    setTextId(id)
 
-      return () => setTextId(undefined)
-    })
+    return () => setTextId(undefined)
+  })
 
-    return (
-      <span id={id} className={cx('inline', className)} ref={forwardedRef}>
-        {children}
-      </span>
-    )
-  }
-)
+  return (
+    <span id={id} className={cx('inline', className)} ref={forwardedRef}>
+      {children}
+    </span>
+  )
+}
 
 ItemText.displayName = 'Combobox.ItemText'
diff --git a/packages/components/combobox/src/ComboboxItems.tsx b/packages/components/combobox/src/ComboboxItems.tsx
index 7468c549a..78f0d98bb 100644
--- a/packages/components/combobox/src/ComboboxItems.tsx
+++ b/packages/components/combobox/src/ComboboxItems.tsx
@@ -1,66 +1,58 @@
 import { Spinner } from '@spark-ui/spinner'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cx } from 'class-variance-authority'
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  ReactNode,
-  type Ref,
-  useLayoutEffect,
-  useRef,
-} from 'react'
+import { ComponentPropsWithoutRef, ReactNode, Ref, useLayoutEffect, useRef } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
 interface ItemsProps extends ComponentPropsWithoutRef<'ul'> {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLUListElement>
 }
 
-export const Items = forwardRef(
-  ({ children, className, ...props }: ItemsProps, forwardedRef: Ref<HTMLUListElement>) => {
-    const ctx = useComboboxContext()
-
-    const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
-      onMouseMove: () => {
-        ctx.setLastInteractionType('mouse')
-      },
-    })
-
-    const innerRef = useRef<HTMLElement>(null)
-
-    const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)
-
-    const isOpen = ctx.hasPopover ? ctx.isOpen : true
-
-    const isPointerEventsDisabled = ctx.hasPopover && !isOpen
-
-    useLayoutEffect(() => {
-      if (innerRef.current?.parentElement) {
-        innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''
-        innerRef.current.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''
-      }
-    }, [isPointerEventsDisabled])
-
-    return (
-      <ul
-        ref={ref}
-        className={cx(
-          className,
-          'flex flex-col',
-          isOpen ? 'block' : 'pointer-events-none invisible opacity-0',
-          ctx.hasPopover && 'p-lg',
-          ctx.isLoading && 'items-center overflow-y-auto'
-        )}
-        {...props}
-        {...downshiftMenuProps}
-        aria-busy={ctx.isLoading}
-        data-spark-component="combobox-items"
-      >
-        {ctx.isLoading ? <Spinner size="sm" /> : children}
-      </ul>
-    )
-  }
-)
+export const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {
+  const ctx = useComboboxContext()
+
+  const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
+    onMouseMove: () => {
+      ctx.setLastInteractionType('mouse')
+    },
+  })
+
+  const innerRef = useRef<HTMLElement>(null)
+
+  const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)
+
+  const isOpen = ctx.hasPopover ? ctx.isOpen : true
+
+  const isPointerEventsDisabled = ctx.hasPopover && !isOpen
+
+  useLayoutEffect(() => {
+    if (innerRef.current?.parentElement) {
+      innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''
+      innerRef.current.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''
+    }
+  }, [isPointerEventsDisabled])
+
+  return (
+    <ul
+      ref={ref}
+      className={cx(
+        className,
+        'flex flex-col',
+        isOpen ? 'block' : 'pointer-events-none invisible opacity-0',
+        ctx.hasPopover && 'p-lg',
+        ctx.isLoading && 'items-center overflow-y-auto'
+      )}
+      {...props}
+      {...downshiftMenuProps}
+      aria-busy={ctx.isLoading}
+      data-spark-component="combobox-items"
+    >
+      {ctx.isLoading ? <Spinner size="sm" /> : children}
+    </ul>
+  )
+}
 
 Items.displayName = 'Combobox.Items'
diff --git a/packages/components/combobox/src/ComboboxLabel.tsx b/packages/components/combobox/src/ComboboxLabel.tsx
index 432eb4a68..c9e798343 100644
--- a/packages/components/combobox/src/ComboboxLabel.tsx
+++ b/packages/components/combobox/src/ComboboxLabel.tsx
@@ -1,27 +1,26 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type Ref } from 'react'
+import { Ref } from 'react'
 
 import { useComboboxGroupContext } from './ComboboxItemsGroupContext'
 
 interface LabelProps {
   children: string
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Label = forwardRef(
-  ({ children, className }: LabelProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const groupCtx = useComboboxGroupContext()
+export const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {
+  const groupCtx = useComboboxGroupContext()
 
-    return (
-      <div
-        ref={forwardedRef}
-        id={groupCtx.groupLabelId}
-        className={cx('px-md py-sm text-body-2 italic text-neutral', className)}
-      >
-        {children}
-      </div>
-    )
-  }
-)
+  return (
+    <div
+      ref={forwardedRef}
+      id={groupCtx.groupLabelId}
+      className={cx('px-md py-sm text-body-2 italic text-neutral', className)}
+    >
+      {children}
+    </div>
+  )
+}
 
 Label.displayName = 'Combobox.Label'
diff --git a/packages/components/combobox/src/ComboboxPopover.tsx b/packages/components/combobox/src/ComboboxPopover.tsx
index 88d406369..667d7b1ea 100644
--- a/packages/components/combobox/src/ComboboxPopover.tsx
+++ b/packages/components/combobox/src/ComboboxPopover.tsx
@@ -1,50 +1,50 @@
 import { Popover as SparkPopover } from '@spark-ui/popover'
 import { cx } from 'class-variance-authority'
-import { ComponentProps, forwardRef, Ref, useEffect } from 'react'
+import { ComponentProps, Ref, useEffect } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 
-export const Popover = forwardRef(
-  (
-    {
-      children,
-      matchTriggerWidth = true,
-      sideOffset = 4,
-      className,
-      ...props
-    }: ComponentProps<typeof SparkPopover.Content>,
-    forwardedRef: Ref<HTMLDivElement>
-  ) => {
-    const ctx = useComboboxContext()
+interface PopoverProps extends ComponentProps<typeof SparkPopover.Content> {
+  ref?: Ref<HTMLDivElement>
+}
 
-    useEffect(() => {
-      ctx.setHasPopover(true)
+export const Popover = ({
+  children,
+  matchTriggerWidth = true,
+  sideOffset = 4,
+  className,
+  ref: forwardedRef,
+  ...props
+}: PopoverProps) => {
+  const ctx = useComboboxContext()
 
-      return () => ctx.setHasPopover(false)
-    }, [])
+  useEffect(() => {
+    ctx.setHasPopover(true)
 
-    return (
-      <SparkPopover.Content
-        ref={forwardedRef}
-        inset
-        asChild
-        matchTriggerWidth={matchTriggerWidth}
-        className={cx('relative !z-dropdown', className)}
-        sideOffset={sideOffset}
-        onOpenAutoFocus={e => {
-          /**
-           * With a combobox pattern, the focus should remain on the trigger at all times.
-           * Passing the focus to the combobox popover would break keyboard navigation.
-           */
-          e.preventDefault()
-        }}
-        {...props}
-        data-spark-component="combobox-popover"
-      >
-        {children}
-      </SparkPopover.Content>
-    )
-  }
-)
+    return () => ctx.setHasPopover(false)
+  }, [])
+
+  return (
+    <SparkPopover.Content
+      ref={forwardedRef}
+      inset
+      asChild
+      matchTriggerWidth={matchTriggerWidth}
+      className={cx('relative !z-dropdown', className)}
+      sideOffset={sideOffset}
+      onOpenAutoFocus={e => {
+        /**
+         * With a combobox pattern, the focus should remain on the trigger at all times.
+         * Passing the focus to the combobox popover would break keyboard navigation.
+         */
+        e.preventDefault()
+      }}
+      {...props}
+      data-spark-component="combobox-popover"
+    >
+      {children}
+    </SparkPopover.Content>
+  )
+}
 
 Popover.displayName = 'Combobox.Popover'
diff --git a/packages/components/combobox/src/ComboboxTrigger.tsx b/packages/components/combobox/src/ComboboxTrigger.tsx
index 15e00b3ee..13ce4766c 100644
--- a/packages/components/combobox/src/ComboboxTrigger.tsx
+++ b/packages/components/combobox/src/ComboboxTrigger.tsx
@@ -2,7 +2,7 @@ import { useFormFieldControl } from '@spark-ui/form-field'
 import { Popover } from '@spark-ui/popover'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cx } from 'class-variance-authority'
-import React, { forwardRef, Fragment, ReactNode, type Ref, useEffect, useRef } from 'react'
+import React, { Fragment, ReactNode, Ref, useEffect, useRef } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 import { styles } from './ComboboxTrigger.styles'
@@ -12,102 +12,101 @@ import { useWidthIncreaseCallback } from './utils/useWidthIncreaseCallback'
 interface TriggerProps {
   className?: string
   children: ReactNode
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Trigger = forwardRef(
-  ({ className, children }: TriggerProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const ctx = useComboboxContext()
-    const field = useFormFieldControl()
-
-    // Trigger compound elements
-    const leadingIcon = findElement(children, 'Combobox.LeadingIcon')
-    const selectedItems = findElement(children, 'Combobox.SelectedItems')
-    const input = findElement(children, 'Combobox.Input')
-    const clearButton = findElement(children, 'Combobox.ClearButton')
-    const disclosure = findElement(children, 'Combobox.Disclosure')
-
-    const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover
-      ? [Popover.Anchor, { asChild: true, type: undefined }]
-      : [Fragment, {}]
-
-    const ref = useMergeRefs(forwardedRef, ctx.triggerAreaRef)
-    const scrollableAreaRef = useRef<HTMLDivElement>(null)
-
-    const disabled = field.disabled || ctx.disabled
-    const readOnly = field.readOnly || ctx.readOnly
-
-    const hasClearButton = !!clearButton && !disabled && !readOnly
-
-    /**
-     * In case wrap behaviour is disabled, we sometimes need to scroll to the right-side of the trigger:
-     * - when a selected item chip is added.
-     * - when the component width changes (window resizing, etc.)
-     *
-     * The goal is that the typing area remains visible at all times.
-     */
-    const scrollToRight = () => {
-      if (scrollableAreaRef.current && !ctx.wrap) {
-        const { scrollWidth, clientWidth } = scrollableAreaRef.current
-        // Scroll to the rightmost position
-        scrollableAreaRef.current.scrollLeft = scrollWidth - clientWidth
-      }
+export const Trigger = ({ className, children, ref: forwardedRef }: TriggerProps) => {
+  const ctx = useComboboxContext()
+  const field = useFormFieldControl()
+
+  // Trigger compound elements
+  const leadingIcon = findElement(children, 'Combobox.LeadingIcon')
+  const selectedItems = findElement(children, 'Combobox.SelectedItems')
+  const input = findElement(children, 'Combobox.Input')
+  const clearButton = findElement(children, 'Combobox.ClearButton')
+  const disclosure = findElement(children, 'Combobox.Disclosure')
+
+  const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover
+    ? [Popover.Anchor, { asChild: true, type: undefined }]
+    : [Fragment, {}]
+
+  const ref = useMergeRefs(forwardedRef, ctx.triggerAreaRef)
+  const scrollableAreaRef = useRef<HTMLDivElement>(null)
+
+  const disabled = field.disabled || ctx.disabled
+  const readOnly = field.readOnly || ctx.readOnly
+
+  const hasClearButton = !!clearButton && !disabled && !readOnly
+
+  /**
+   * In case wrap behaviour is disabled, we sometimes need to scroll to the right-side of the trigger:
+   * - when a selected item chip is added.
+   * - when the component width changes (window resizing, etc.)
+   *
+   * The goal is that the typing area remains visible at all times.
+   */
+  const scrollToRight = () => {
+    if (scrollableAreaRef.current && !ctx.wrap) {
+      const { scrollWidth, clientWidth } = scrollableAreaRef.current
+      // Scroll to the rightmost position
+      scrollableAreaRef.current.scrollLeft = scrollWidth - clientWidth
     }
+  }
 
-    useWidthIncreaseCallback(scrollableAreaRef, scrollToRight)
-
-    useEffect(() => {
-      const resizeObserver = new ResizeObserver(scrollToRight)
+  useWidthIncreaseCallback(scrollableAreaRef, scrollToRight)
 
-      if (scrollableAreaRef.current) {
-        resizeObserver.observe(scrollableAreaRef.current)
-      }
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(scrollToRight)
 
-      return () => {
-        resizeObserver.disconnect()
-      }
-    }, [])
+    if (scrollableAreaRef.current) {
+      resizeObserver.observe(scrollableAreaRef.current)
+    }
 
-    return (
-      <>
-        <PopoverAnchor {...popoverAnchorProps}>
-          <div
-            ref={ref}
-            className={styles({
-              className,
-              state: ctx.state,
-              disabled,
-              readOnly,
-              allowWrap: ctx.wrap,
-            })}
-            onClick={() => {
-              if (!ctx.isOpen && !disabled && !readOnly) {
-                ctx.openMenu()
-                if (ctx.innerInputRef.current) {
-                  ctx.innerInputRef.current.focus()
-                }
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <>
+      <PopoverAnchor {...popoverAnchorProps}>
+        <div
+          ref={ref}
+          className={styles({
+            className,
+            state: ctx.state,
+            disabled,
+            readOnly,
+            allowWrap: ctx.wrap,
+          })}
+          onClick={() => {
+            if (!ctx.isOpen && !disabled && !readOnly) {
+              ctx.openMenu()
+              if (ctx.innerInputRef.current) {
+                ctx.innerInputRef.current.focus()
               }
-            }}
+            }
+          }}
+        >
+          {leadingIcon}
+          <div
+            ref={scrollableAreaRef}
+            className={cx(
+              'inline-flex min-w-none grow items-start gap-sm py-md',
+              ctx.wrap ? 'flex-wrap' : 'overflow-x-auto p-[2px] u-no-scrollbar'
+            )}
           >
-            {leadingIcon}
-            <div
-              ref={scrollableAreaRef}
-              className={cx(
-                'inline-flex min-w-none grow items-start gap-sm py-md',
-                ctx.wrap ? 'flex-wrap' : 'overflow-x-auto p-[2px] u-no-scrollbar'
-              )}
-            >
-              {selectedItems}
-              {input}
-            </div>
-
-            {hasClearButton && clearButton}
-
-            {disclosure}
+            {selectedItems}
+            {input}
           </div>
-        </PopoverAnchor>
-      </>
-    )
-  }
-)
+
+          {hasClearButton && clearButton}
+
+          {disclosure}
+        </div>
+      </PopoverAnchor>
+    </>
+  )
+}
 
 Trigger.displayName = 'Combobox.Trigger'
diff --git a/packages/components/dialog/CHANGELOG.md b/packages/components/dialog/CHANGELOG.md
index 55e3b48bd..6cb031c25 100644
--- a/packages/components/dialog/CHANGELOG.md
+++ b/packages/components/dialog/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/dialog
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/dialog
diff --git a/packages/components/dialog/package.json b/packages/components/dialog/package.json
index d25bc7a09..6ade45978 100644
--- a/packages/components/dialog/package.json
+++ b/packages/components/dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/dialog",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
   "publishConfig": {
     "access": "public"
@@ -45,9 +45,9 @@
   "license": "MIT",
   "dependencies": {
     "@radix-ui/react-dialog": "1.1.2",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
     "class-variance-authority": "0.7.0"
   }
 }
diff --git a/packages/components/dialog/src/DialogBody.tsx b/packages/components/dialog/src/DialogBody.tsx
index b9d78f073..3e705fb4c 100644
--- a/packages/components/dialog/src/DialogBody.tsx
+++ b/packages/components/dialog/src/DialogBody.tsx
@@ -1,21 +1,23 @@
-import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react'
+import { type ReactElement, type ReactNode, Ref } from 'react'
 
 import { dialogBodyStyles, type DialogBodyStylesProps } from './DialogBody.styles'
 export interface BodyProps extends DialogBodyStylesProps {
   children: ReactNode
   className?: string
   tabIndex?: number
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Body = forwardRef(
-  (
-    { children, className, inset = false, ...rest }: BodyProps,
-    ref: Ref<HTMLDivElement>
-  ): ReactElement => (
-    <div ref={ref} className={dialogBodyStyles({ inset, className })} {...rest}>
-      {children}
-    </div>
-  )
+export const Body = ({
+  children,
+  className,
+  inset = false,
+  ref,
+  ...rest
+}: BodyProps): ReactElement => (
+  <div ref={ref} className={dialogBodyStyles({ inset, className })} {...rest}>
+    {children}
+  </div>
 )
 
 Body.displayName = 'Dialog.Body'
diff --git a/packages/components/dialog/src/DialogClose.tsx b/packages/components/dialog/src/DialogClose.tsx
index 2b8a3c811..c33eaa9d3 100644
--- a/packages/components/dialog/src/DialogClose.tsx
+++ b/packages/components/dialog/src/DialogClose.tsx
@@ -1,11 +1,10 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-type CloseElement = ElementRef<typeof RadixDialog.Close>
-export type CloseProps = RadixDialog.DialogCloseProps
+export type CloseProps = RadixDialog.DialogCloseProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const Close = forwardRef<CloseElement, CloseProps>((props, ref) => (
-  <RadixDialog.Close ref={ref} {...props} />
-))
+export const Close = (props: CloseProps) => <RadixDialog.Close {...props} />
 
 Close.displayName = 'Dialog.Close'
diff --git a/packages/components/dialog/src/DialogCloseButton.tsx b/packages/components/dialog/src/DialogCloseButton.tsx
index 1ce9a3029..56bfe8430 100644
--- a/packages/components/dialog/src/DialogCloseButton.tsx
+++ b/packages/components/dialog/src/DialogCloseButton.tsx
@@ -2,45 +2,39 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
 import { Close as CloseSVG } from '@spark-ui/icons/dist/icons/Close'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef } from 'react'
 
 import { Close, CloseProps } from './DialogClose'
 
-type CloseButtonElement = ElementRef<typeof Close>
 export type CloseButtonProps = CloseProps &
   Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>
 
-const Root = forwardRef<CloseButtonElement, CloseButtonProps>(
-  (
-    {
-      'aria-label': ariaLabel,
-      className,
-      size = 'md',
-      intent = 'neutral',
-      design = 'ghost',
-      children = <CloseSVG />,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <Close
-        data-part="close"
-        ref={ref}
-        className={cx(['absolute', 'top-md', 'right-xl'], className)}
-        asChild
-        {...rest}
-      >
-        <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
-          <Icon>{children}</Icon>
-        </IconButton>
-      </Close>
-    )
-  }
-)
+const Root = ({
+  'aria-label': ariaLabel,
+  className,
+  size = 'md',
+  intent = 'neutral',
+  design = 'ghost',
+  children = <CloseSVG />,
+  ref,
+  ...rest
+}: CloseButtonProps) => {
+  return (
+    <Close
+      data-part="close"
+      ref={ref}
+      className={cx(['absolute', 'top-md', 'right-xl'], className)}
+      asChild
+      {...rest}
+    >
+      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
+        <Icon>{children}</Icon>
+      </IconButton>
+    </Close>
+  )
+}
 
 export const CloseButton = Object.assign(Root, {
   id: 'CloseButton',
 })
 
-CloseButton.displayName = 'Dialog.CloseButton'
+Root.displayName = 'Dialog.CloseButton'
diff --git a/packages/components/dialog/src/DialogContent.tsx b/packages/components/dialog/src/DialogContent.tsx
index 1d36c0468..5ba02504d 100644
--- a/packages/components/dialog/src/DialogContent.tsx
+++ b/packages/components/dialog/src/DialogContent.tsx
@@ -1,5 +1,5 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { forwardRef, type ReactElement, type Ref, useEffect } from 'react'
+import { type ReactElement, Ref, useEffect } from 'react'
 
 import { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'
 import { useDialog } from './DialogContext'
@@ -9,58 +9,55 @@ export interface ContentProps extends RadixDialog.DialogContentProps, DialogCont
    * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.
    */
   isNarrow?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Content = forwardRef(
-  (
-    {
-      children,
-      className,
-      isNarrow = false,
-      size = 'md',
-      onInteractOutside,
-      ...rest
-    }: ContentProps,
-    ref: Ref<HTMLDivElement>
-  ): ReactElement => {
-    const { setIsFullScreen } = useDialog()
-
-    useEffect(() => {
-      if (size === 'fullscreen') setIsFullScreen(true)
-
-      return () => setIsFullScreen(false)
-    }, [setIsFullScreen, size])
-
-    return (
-      <RadixDialog.Content
-        data-spark-component="dialog-content"
-        ref={ref}
-        className={dialogContentStyles({
-          className,
-          isNarrow,
-          size,
-        })}
-        onInteractOutside={e => {
-          const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')
-
-          /**
-           * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but
-           * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).
-           *
-           * Clicking on the snackbar will be considered as an "outside click" and close the dialog. We want to prevent this.
-           */
-          if (isForegroundElement) {
-            e.preventDefault()
-          }
-
-          onInteractOutside?.(e)
-        }}
-        {...rest}
-      >
-        {children}
-      </RadixDialog.Content>
-    )
-  }
-)
+export const Content = ({
+  children,
+  className,
+  isNarrow = false,
+  size = 'md',
+  onInteractOutside,
+  ref,
+  ...rest
+}: ContentProps): ReactElement => {
+  const { setIsFullScreen } = useDialog()
+
+  useEffect(() => {
+    if (size === 'fullscreen') setIsFullScreen(true)
+
+    return () => setIsFullScreen(false)
+  }, [setIsFullScreen, size])
+
+  return (
+    <RadixDialog.Content
+      data-spark-component="dialog-content"
+      ref={ref}
+      className={dialogContentStyles({
+        className,
+        isNarrow,
+        size,
+      })}
+      onInteractOutside={e => {
+        const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')
+
+        /**
+         * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but
+         * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).
+         *
+         * Clicking on the snackbar will be considered as an "outside click" and close the dialog. We want to prevent this.
+         */
+        if (isForegroundElement) {
+          e.preventDefault()
+        }
+
+        onInteractOutside?.(e)
+      }}
+      {...rest}
+    >
+      {children}
+    </RadixDialog.Content>
+  )
+}
 
 Content.displayName = 'Dialog.Content'
diff --git a/packages/components/dialog/src/DialogDescription.tsx b/packages/components/dialog/src/DialogDescription.tsx
index 98809349c..eedb3a0d6 100644
--- a/packages/components/dialog/src/DialogDescription.tsx
+++ b/packages/components/dialog/src/DialogDescription.tsx
@@ -1,11 +1,10 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type DescriptionElement = ElementRef<typeof RadixDialog.Description>
-export type DescriptionProps = RadixDialog.DialogDescriptionProps
+export type DescriptionProps = RadixDialog.DialogDescriptionProps & {
+  ref?: Ref<HTMLParagraphElement>
+}
 
-export const Description = forwardRef<DescriptionElement, DescriptionProps>((props, ref) => (
-  <RadixDialog.Description ref={ref} {...props} />
-))
+export const Description = (props: DescriptionProps) => <RadixDialog.Description {...props} />
 
 Description.displayName = 'Dialog.Description'
diff --git a/packages/components/dialog/src/DialogFooter.tsx b/packages/components/dialog/src/DialogFooter.tsx
index 3bf35b9eb..6253ed5b6 100644
--- a/packages/components/dialog/src/DialogFooter.tsx
+++ b/packages/components/dialog/src/DialogFooter.tsx
@@ -1,17 +1,16 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react'
+import { type ReactElement, type ReactNode, Ref } from 'react'
 
 export interface FooterProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Footer = forwardRef(
-  ({ children, className, ...rest }: FooterProps, ref: Ref<HTMLDivElement>): ReactElement => (
-    <footer ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>
-      {children}
-    </footer>
-  )
+export const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (
+  <footer ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>
+    {children}
+  </footer>
 )
 
 Footer.displayName = 'Dialog.Footer'
diff --git a/packages/components/dialog/src/DialogHeader.tsx b/packages/components/dialog/src/DialogHeader.tsx
index de0d43bbf..54576cef3 100644
--- a/packages/components/dialog/src/DialogHeader.tsx
+++ b/packages/components/dialog/src/DialogHeader.tsx
@@ -1,17 +1,16 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react'
+import { type ReactElement, type ReactNode, Ref } from 'react'
 
 export interface HeaderProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Header = forwardRef(
-  ({ children, className, ...rest }: HeaderProps, ref: Ref<HTMLDivElement>): ReactElement => (
-    <header ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>
-      {children}
-    </header>
-  )
+export const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (
+  <header ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>
+    {children}
+  </header>
 )
 
 Header.displayName = 'Dialog.Header'
diff --git a/packages/components/dialog/src/DialogOverlay.tsx b/packages/components/dialog/src/DialogOverlay.tsx
index 6e76009fc..c2a08b74a 100644
--- a/packages/components/dialog/src/DialogOverlay.tsx
+++ b/packages/components/dialog/src/DialogOverlay.tsx
@@ -1,30 +1,30 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactElement, type Ref } from 'react'
+import { type ReactElement, Ref } from 'react'
 
 import { useDialog } from './DialogContext'
 
-export type OverlayProps = RadixDialog.DialogOverlayProps
+export type OverlayProps = RadixDialog.DialogOverlayProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const Overlay = forwardRef(
-  ({ className, ...rest }: OverlayProps, ref: Ref<HTMLDivElement>): ReactElement | null => {
-    const { isFullScreen } = useDialog()
+export const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {
+  const { isFullScreen } = useDialog()
 
-    return (
-      <RadixDialog.Overlay
-        ref={ref}
-        className={cx(
-          isFullScreen ? 'hidden' : 'fixed',
-          ['top-none', 'left-none', 'w-screen', 'h-screen', 'z-overlay'],
-          ['bg-overlay/dim-3'],
-          ['data-[state=open]:animate-fade-in'],
-          ['data-[state=closed]:animate-fade-out'],
-          className
-        )}
-        {...rest}
-      />
-    )
-  }
-)
+  return (
+    <RadixDialog.Overlay
+      ref={ref}
+      className={cx(
+        isFullScreen ? 'hidden' : 'fixed',
+        ['top-none', 'left-none', 'w-screen', 'h-screen', 'z-overlay'],
+        ['bg-overlay/dim-3'],
+        ['data-[state=open]:animate-fade-in'],
+        ['data-[state=closed]:animate-fade-out'],
+        className
+      )}
+      {...rest}
+    />
+  )
+}
 
 Overlay.displayName = 'Dialog.Overlay'
diff --git a/packages/components/dialog/src/DialogTitle.tsx b/packages/components/dialog/src/DialogTitle.tsx
index 9baaa795d..8d29ae773 100644
--- a/packages/components/dialog/src/DialogTitle.tsx
+++ b/packages/components/dialog/src/DialogTitle.tsx
@@ -1,11 +1,12 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type TitleElement = ElementRef<typeof RadixDialog.Title>
-export type TitleProps = RadixDialog.DialogTitleProps
+export type TitleProps = RadixDialog.DialogTitleProps & {
+  ref?: Ref<HTMLHeadingElement>
+}
 
-export const Title = forwardRef<TitleElement, TitleProps>(({ className, ...others }, ref) => {
+export const Title = ({ className, ref, ...others }: TitleProps) => {
   return (
     <RadixDialog.Title
       ref={ref}
@@ -17,6 +18,6 @@ export const Title = forwardRef<TitleElement, TitleProps>(({ className, ...other
       {...others}
     />
   )
-})
+}
 
 Title.displayName = 'Dialog.Title'
diff --git a/packages/components/dialog/src/DialogTrigger.tsx b/packages/components/dialog/src/DialogTrigger.tsx
index 5d5243908..e9923b509 100644
--- a/packages/components/dialog/src/DialogTrigger.tsx
+++ b/packages/components/dialog/src/DialogTrigger.tsx
@@ -1,7 +1,6 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef, type ReactElement } from 'react'
+import { type ReactElement, Ref } from 'react'
 
-type TriggerElement = ElementRef<typeof RadixDialog.Trigger>
 export interface TriggerProps {
   /**
    * Children of the component.
@@ -11,10 +10,9 @@ export interface TriggerProps {
    * Change the component to the HTML tag or custom component of the only child.
    */
   asChild?: RadixDialog.DialogTriggerProps['asChild']
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const Trigger = forwardRef<TriggerElement, TriggerProps>(
-  (props: TriggerProps, ref): ReactElement => <RadixDialog.Trigger ref={ref} {...props} />
-)
+export const Trigger = (props: TriggerProps): ReactElement => <RadixDialog.Trigger {...props} />
 
 Trigger.displayName = 'Dialog.Trigger'
diff --git a/packages/components/divider/CHANGELOG.md b/packages/components/divider/CHANGELOG.md
index 3c4ff3b93..358acea8a 100644
--- a/packages/components/divider/CHANGELOG.md
+++ b/packages/components/divider/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+### Code Refactoring
+
+- fixing remaining TS errors ([918544c](https://github.com/adevinta/spark/commit/918544c278a370ec82384842cc8f60b59982eb9f))
+
+### BREAKING CHANGES
+
+- forwardRef has been removed from all packages
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/divider
diff --git a/packages/components/divider/package.json b/packages/components/divider/package.json
index 31be2a13f..310a7a716 100644
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/divider",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A separator between two elements, usually consisting of a horizontal line.",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@radix-ui/react-separator": "1.1.0",
-    "@spark-ui/internal-utils": "^7.3.7"
+    "@spark-ui/internal-utils": "^8.0.0"
   },
   "peerDependencies": {
     "react": "^19.0",
diff --git a/packages/components/divider/src/Divider.tsx b/packages/components/divider/src/Divider.tsx
index 51344012b..1d24a53c6 100644
--- a/packages/components/divider/src/Divider.tsx
+++ b/packages/components/divider/src/Divider.tsx
@@ -1,11 +1,11 @@
 import { Root as Separator } from '@radix-ui/react-separator'
 import { cx } from 'class-variance-authority'
-import { forwardRef, HTMLAttributes, PropsWithRef, ReactElement, ReactNode } from 'react'
+import { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'
 
 import { dividerStyles, type DividerStylesProps } from './Divider.styles'
 
 export interface DividerProps
-  extends PropsWithRef<HTMLAttributes<HTMLDivElement>>,
+  extends HTMLAttributes<HTMLDivElement>,
     Omit<DividerStylesProps, 'isEmpty'> {
   /**
    * Change the component to the HTML tag or custom component of the only child.
@@ -28,36 +28,35 @@ export interface DividerProps
    * Color scheme of the divider.
    */
   intent?: 'outline' | 'current'
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-  (
-    {
-      asChild,
-      className,
-      isDecorative = false,
-      children,
-      orientation = 'horizontal',
-      alignment = 'center',
-      intent = 'outline',
-      ...props
-    },
-    ref
-  ) => {
-    const isEmpty = asChild ? !(children?.props as { children: ReactNode })?.children : !children
+export const Divider = ({
+  asChild,
+  className,
+  isDecorative = false,
+  children,
+  orientation = 'horizontal',
+  alignment = 'center',
+  intent = 'outline',
+  ref,
+  ...props
+}: DividerProps) => {
+  const isEmpty = asChild ? !(children?.props as { children: ReactNode })?.children : !children
 
-    return (
-      <Separator
-        data-spark-component="divider"
-        asChild={asChild}
-        className={cx(dividerStyles({ isEmpty, orientation, alignment, intent }), className)}
-        orientation={orientation}
-        ref={ref}
-        decorative={isDecorative}
-        {...props}
-      >
-        {children}
-      </Separator>
-    )
-  }
-)
+  return (
+    <Separator
+      data-spark-component="divider"
+      asChild={asChild}
+      className={cx(dividerStyles({ isEmpty, orientation, alignment, intent }), className)}
+      orientation={orientation}
+      ref={ref}
+      decorative={isDecorative}
+      {...props}
+    >
+      {children}
+    </Separator>
+  )
+}
+
+Divider.displayName = 'Divider'
diff --git a/packages/components/divider/src/DividerContent.tsx b/packages/components/divider/src/DividerContent.tsx
index d3c169aa6..4503859c1 100644
--- a/packages/components/divider/src/DividerContent.tsx
+++ b/packages/components/divider/src/DividerContent.tsx
@@ -1,21 +1,20 @@
-import { forwardRef, HTMLAttributes, PropsWithRef, ReactNode } from 'react'
+import { HTMLAttributes, ReactNode, Ref } from 'react'
 
-export interface DividerContentProps extends PropsWithRef<HTMLAttributes<HTMLSpanElement>> {
+export interface DividerContentProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * Change the component to the HTML tag or custom component of the only child.
    */
   asChild?: boolean
   children?: ReactNode
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const DividerContent = forwardRef<HTMLSpanElement, DividerContentProps>(
-  ({ children, ...props }, ref) => {
-    return children ? (
-      <span ref={ref} {...props}>
-        {children}
-      </span>
-    ) : null
-  }
-)
+export const DividerContent = ({ children, ref, ...props }: DividerContentProps) => {
+  return children ? (
+    <span ref={ref} {...props}>
+      {children}
+    </span>
+  ) : null
+}
 
 DividerContent.displayName = 'Divider.Content'
diff --git a/packages/components/drawer/CHANGELOG.md b/packages/components/drawer/CHANGELOG.md
index f2a7ae3a4..8d7e65fd3 100644
--- a/packages/components/drawer/CHANGELOG.md
+++ b/packages/components/drawer/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/drawer
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/drawer
diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json
index f5c05fe1c..8c701623a 100644
--- a/packages/components/drawer/package.json
+++ b/packages/components/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/drawer",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.",
   "publishConfig": {
     "access": "public"
@@ -45,9 +45,9 @@
   "license": "MIT",
   "dependencies": {
     "@radix-ui/react-dialog": "1.1.2",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
     "class-variance-authority": "0.7.0"
   }
 }
diff --git a/packages/components/drawer/src/DrawerBody.tsx b/packages/components/drawer/src/DrawerBody.tsx
index c5d78bebd..78490db64 100644
--- a/packages/components/drawer/src/DrawerBody.tsx
+++ b/packages/components/drawer/src/DrawerBody.tsx
@@ -1,18 +1,23 @@
-import { forwardRef, type ReactNode, type Ref } from 'react'
+import { type ReactNode, Ref } from 'react'
 
 import { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'
 
 export interface DrawerBodyProps extends DrawerBodyStylesProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const DrawerBody = forwardRef(
-  ({ children, inset = false, className, ...rest }: DrawerBodyProps, ref: Ref<HTMLDivElement>) => (
-    <div ref={ref} className={drawerBodyStyles({ inset, className })} {...rest}>
-      {children}
-    </div>
-  )
+export const DrawerBody = ({
+  children,
+  inset = false,
+  className,
+  ref,
+  ...rest
+}: DrawerBodyProps) => (
+  <div ref={ref} className={drawerBodyStyles({ inset, className })} {...rest}>
+    {children}
+  </div>
 )
 
 DrawerBody.displayName = 'Drawer.Body'
diff --git a/packages/components/drawer/src/DrawerClose.tsx b/packages/components/drawer/src/DrawerClose.tsx
index 9624f38fb..ac3dfd19a 100644
--- a/packages/components/drawer/src/DrawerClose.tsx
+++ b/packages/components/drawer/src/DrawerClose.tsx
@@ -1,11 +1,10 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-type CloseElement = ElementRef<typeof RadixDrawer.Close>
-export type DrawerCloseProps = RadixDrawer.DialogCloseProps
+export type DrawerCloseProps = RadixDrawer.DialogCloseProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const DrawerClose = forwardRef<CloseElement, DrawerCloseProps>((props, ref) => (
-  <RadixDrawer.Close ref={ref} {...props} />
-))
+export const DrawerClose = (props: DrawerCloseProps) => <RadixDrawer.Close {...props} />
 
 DrawerClose.displayName = 'Drawer.Close'
diff --git a/packages/components/drawer/src/DrawerCloseButton.tsx b/packages/components/drawer/src/DrawerCloseButton.tsx
index 0af2faa4e..1aee8ef3f 100644
--- a/packages/components/drawer/src/DrawerCloseButton.tsx
+++ b/packages/components/drawer/src/DrawerCloseButton.tsx
@@ -2,38 +2,32 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
 import { Close as CloseSVG } from '@spark-ui/icons/dist/icons/Close'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef } from 'react'
 
 import { DrawerClose, type DrawerCloseProps } from './DrawerClose'
 
-type CloseButtonElement = ElementRef<typeof DrawerClose>
 export type DrawerCloseButtonProps = DrawerCloseProps &
   Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>
 
-export const DrawerCloseButton = forwardRef<CloseButtonElement, DrawerCloseButtonProps>(
-  (
-    {
-      'aria-label': ariaLabel,
-      className,
-      size = 'md',
-      intent = 'neutral',
-      design = 'ghost',
-      children = <CloseSVG />,
-      ...rest
-    },
-    ref
-  ) => (
-    <DrawerClose
-      ref={ref}
-      className={cx(['absolute', 'top-sm', 'right-xl'], className)}
-      asChild
-      {...rest}
-    >
-      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
-        <Icon>{children}</Icon>
-      </IconButton>
-    </DrawerClose>
-  )
+export const DrawerCloseButton = ({
+  'aria-label': ariaLabel,
+  className,
+  size = 'md',
+  intent = 'neutral',
+  design = 'ghost',
+  children = <CloseSVG />,
+  ref,
+  ...rest
+}: DrawerCloseButtonProps) => (
+  <DrawerClose
+    ref={ref}
+    className={cx(['absolute', 'top-sm', 'right-xl'], className)}
+    asChild
+    {...rest}
+  >
+    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
+      <Icon>{children}</Icon>
+    </IconButton>
+  </DrawerClose>
 )
 
 DrawerCloseButton.displayName = 'Drawer.CloseButton'
diff --git a/packages/components/drawer/src/DrawerContent.tsx b/packages/components/drawer/src/DrawerContent.tsx
index c6b47a2e4..8a0f632c3 100644
--- a/packages/components/drawer/src/DrawerContent.tsx
+++ b/packages/components/drawer/src/DrawerContent.tsx
@@ -1,41 +1,46 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
-import { forwardRef, type Ref } from 'react'
+import { Ref } from 'react'
 
 import { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'
 
-export type DrawerContentProps = RadixDrawer.DialogContentProps & DrawerContentStylesProps
+export type DrawerContentProps = RadixDrawer.DialogContentProps &
+  DrawerContentStylesProps & {
+    ref?: Ref<HTMLDivElement>
+  }
 
-export const DrawerContent = forwardRef(
-  (
-    { className, size = 'md', side = 'right', onInteractOutside, ...rest }: DrawerContentProps,
-    ref: Ref<HTMLDivElement>
-  ) => (
-    <RadixDrawer.Content
-      data-spark-component="drawer-content"
-      ref={ref}
-      className={drawerContentStyles({
-        size,
-        side,
-        className,
-      })}
-      onInteractOutside={e => {
-        const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')
+export const DrawerContent = ({
+  className,
+  size = 'md',
+  side = 'right',
+  onInteractOutside,
+  ref,
+  ...rest
+}: DrawerContentProps) => (
+  <RadixDrawer.Content
+    data-spark-component="drawer-content"
+    ref={ref}
+    className={drawerContentStyles({
+      size,
+      side,
+      className,
+    })}
+    onInteractOutside={e => {
+      const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')
 
-        /**
-         * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but
-         * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).
-         *
-         * Clicking on the snackbar will be considered as an "outside click" and close the drawer. We want to prevent this.
-         */
-        if (isForegroundElement) {
-          e.preventDefault()
-        }
+      /**
+       * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but
+       * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).
+       *
+       * Clicking on the snackbar will be considered as an "outside click" and close the drawer. We want to prevent this.
+       */
+      if (isForegroundElement) {
+        e.preventDefault()
+      }
 
-        onInteractOutside?.(e)
-      }}
-      {...rest}
-    />
-  )
+      onInteractOutside?.(e)
+    }}
+    {...rest}
+  />
 )
 
 DrawerContent.displayName = 'Drawer.Content'
diff --git a/packages/components/drawer/src/DrawerDescription.tsx b/packages/components/drawer/src/DrawerDescription.tsx
index 30afeeba9..3ac51eb20 100644
--- a/packages/components/drawer/src/DrawerDescription.tsx
+++ b/packages/components/drawer/src/DrawerDescription.tsx
@@ -1,11 +1,12 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type DescriptionElement = ElementRef<typeof RadixDrawer.Description>
-export type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps
+export type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps & {
+  ref?: Ref<HTMLParagraphElement>
+}
 
-export const DrawerDescription = forwardRef<DescriptionElement, DrawerDescriptionProps>(
-  (props, ref) => <RadixDrawer.Description ref={ref} {...props} />
+export const DrawerDescription = (props: DrawerDescriptionProps) => (
+  <RadixDrawer.Description {...props} />
 )
 
 DrawerDescription.displayName = 'Drawer.Description'
diff --git a/packages/components/drawer/src/DrawerFooter.tsx b/packages/components/drawer/src/DrawerFooter.tsx
index d42a00486..1d6dfd3fd 100644
--- a/packages/components/drawer/src/DrawerFooter.tsx
+++ b/packages/components/drawer/src/DrawerFooter.tsx
@@ -1,12 +1,12 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, type ReactElement, type Ref } from 'react'
+import { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'
 
-export type DrawerFooterProps = ComponentPropsWithoutRef<'footer'>
+export type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const DrawerFooter = forwardRef(
-  ({ className, ...rest }: DrawerFooterProps, ref: Ref<HTMLDivElement>): ReactElement => (
-    <footer ref={ref} className={cx(['px-xl', 'py-lg'], className)} {...rest} />
-  )
+export const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (
+  <footer ref={ref} className={cx(['px-xl', 'py-lg'], className)} {...rest} />
 )
 
 DrawerFooter.displayName = 'Drawer.Footer'
diff --git a/packages/components/drawer/src/DrawerHeader.tsx b/packages/components/drawer/src/DrawerHeader.tsx
index 8feab35c3..1d968e4c4 100644
--- a/packages/components/drawer/src/DrawerHeader.tsx
+++ b/packages/components/drawer/src/DrawerHeader.tsx
@@ -1,17 +1,21 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react'
+import { type ReactElement, type ReactNode, Ref } from 'react'
 
 export interface DrawerHeaderProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const DrawerHeader = forwardRef(
-  ({ children, className, ...rest }: DrawerHeaderProps, ref: Ref<HTMLDivElement>): ReactElement => (
-    <header ref={ref} className={cx(['px-xl', 'py-lg'], className)} {...rest}>
-      {children}
-    </header>
-  )
+export const DrawerHeader = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: DrawerHeaderProps): ReactElement => (
+  <header ref={ref} className={cx(['px-xl', 'py-lg'], className)} {...rest}>
+    {children}
+  </header>
 )
 
 DrawerHeader.displayName = 'Dialog.Header'
diff --git a/packages/components/drawer/src/DrawerOverlay.tsx b/packages/components/drawer/src/DrawerOverlay.tsx
index 7b3ffc00d..778df40f1 100644
--- a/packages/components/drawer/src/DrawerOverlay.tsx
+++ b/packages/components/drawer/src/DrawerOverlay.tsx
@@ -1,23 +1,23 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactElement, type Ref } from 'react'
+import { type ReactElement, Ref } from 'react'
 
-export type DrawerOverlayProps = RadixDrawer.DialogOverlayProps
+export type DrawerOverlayProps = RadixDrawer.DialogOverlayProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const DrawerOverlay = forwardRef(
-  ({ className, ...rest }: DrawerOverlayProps, ref: Ref<HTMLDivElement>): ReactElement => (
-    <RadixDrawer.Overlay
-      ref={ref}
-      className={cx(
-        ['fixed', 'top-none', 'left-none', 'w-screen', 'h-screen', 'z-overlay'],
-        ['bg-overlay/dim-3'],
-        ['data-[state=open]:animate-fade-in'],
-        ['data-[state=closed]:animate-fade-out'],
-        className
-      )}
-      {...rest}
-    />
-  )
+export const DrawerOverlay = ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement => (
+  <RadixDrawer.Overlay
+    ref={ref}
+    className={cx(
+      ['fixed', 'top-none', 'left-none', 'w-screen', 'h-screen', 'z-overlay'],
+      ['bg-overlay/dim-3'],
+      ['data-[state=open]:animate-fade-in'],
+      ['data-[state=closed]:animate-fade-out'],
+      className
+    )}
+    {...rest}
+  />
 )
 
 DrawerOverlay.displayName = 'Drawer.Overlay'
diff --git a/packages/components/drawer/src/DrawerTitle.tsx b/packages/components/drawer/src/DrawerTitle.tsx
index bde76766c..ec20f9255 100644
--- a/packages/components/drawer/src/DrawerTitle.tsx
+++ b/packages/components/drawer/src/DrawerTitle.tsx
@@ -1,18 +1,17 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type TitleElement = ElementRef<typeof RadixDrawer.Title>
-export type DrawerTitleProps = RadixDrawer.DialogTitleProps
+export type DrawerTitleProps = RadixDrawer.DialogTitleProps & {
+  ref?: Ref<HTMLHeadingElement>
+}
 
-export const DrawerTitle = forwardRef<TitleElement, DrawerTitleProps>(
-  ({ className, ...others }, ref) => (
-    <RadixDrawer.Title
-      ref={ref}
-      className={cx('text-headline-2 text-on-surface', className)}
-      {...others}
-    />
-  )
+export const DrawerTitle = ({ className, ref, ...others }: DrawerTitleProps) => (
+  <RadixDrawer.Title
+    ref={ref}
+    className={cx('text-headline-2 text-on-surface', className)}
+    {...others}
+  />
 )
 
 DrawerTitle.displayName = 'Drawer.Title'
diff --git a/packages/components/drawer/src/DrawerTrigger.tsx b/packages/components/drawer/src/DrawerTrigger.tsx
index 2d7b80c59..a205c3e85 100644
--- a/packages/components/drawer/src/DrawerTrigger.tsx
+++ b/packages/components/drawer/src/DrawerTrigger.tsx
@@ -1,16 +1,16 @@
 import * as RadixDrawer from '@radix-ui/react-dialog'
-import { ElementRef, forwardRef, type ReactElement } from 'react'
+import { type ReactElement, Ref } from 'react'
 
-type TriggerElement = ElementRef<typeof RadixDrawer.Trigger>
 export interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {
   /**
    * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
    */
   asChild?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const DrawerTrigger = forwardRef<TriggerElement, DrawerTriggerProps>(
-  (props: DrawerTriggerProps, ref): ReactElement => <RadixDrawer.Trigger ref={ref} {...props} />
+export const DrawerTrigger = (props: DrawerTriggerProps): ReactElement => (
+  <RadixDrawer.Trigger {...props} />
 )
 
 DrawerTrigger.displayName = 'Drawer.Trigger'
diff --git a/packages/components/dropdown/CHANGELOG.md b/packages/components/dropdown/CHANGELOG.md
index 3a28f54f1..b3d143b1f 100644
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/dropdown
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/dropdown
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index d0d46a409..25860b80a 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/dropdown",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Displays a list of options for the user to pick from—triggered by a button. Differs from Select in that it offers multiple select and its list is not native.",
   "publishConfig": {
     "access": "public"
@@ -28,12 +28,12 @@
     "tailwindcss": "^3.0.0"
   },
   "dependencies": {
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/popover": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7",
-    "@spark-ui/visually-hidden": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/popover": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0",
+    "@spark-ui/visually-hidden": "^8.0.0",
     "class-variance-authority": "0.7.0",
     "downshift": "9.0.7"
   },
diff --git a/packages/components/dropdown/src/DropdownDivider.tsx b/packages/components/dropdown/src/DropdownDivider.tsx
index 3653cdbf9..b2b735cb1 100644
--- a/packages/components/dropdown/src/DropdownDivider.tsx
+++ b/packages/components/dropdown/src/DropdownDivider.tsx
@@ -1,14 +1,13 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type Ref } from 'react'
+import { Ref } from 'react'
 
 interface DividerProps {
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Divider = forwardRef(
-  ({ className }: DividerProps, forwardedRef: Ref<HTMLDivElement>) => {
-    return <div ref={forwardedRef} className={cx('my-md border-b-sm border-outline', className)} />
-  }
-)
+export const Divider = ({ className, ref: forwardedRef }: DividerProps) => {
+  return <div ref={forwardedRef} className={cx('my-md border-b-sm border-outline', className)} />
+}
 
 Divider.displayName = 'Dropdown.Divider'
diff --git a/packages/components/dropdown/src/DropdownGroup.tsx b/packages/components/dropdown/src/DropdownGroup.tsx
index 1cc1aee6c..4721f91a0 100644
--- a/packages/components/dropdown/src/DropdownGroup.tsx
+++ b/packages/components/dropdown/src/DropdownGroup.tsx
@@ -1,35 +1,32 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, Ref } from 'react'
 
 import { DropdownGroupProvider, useDropdownGroupContext } from './DropdownItemsGroupContext'
 
 interface GroupProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Group = forwardRef(
-  ({ children, ...props }: GroupProps, forwardedRef: Ref<HTMLDivElement>) => {
-    return (
-      <DropdownGroupProvider>
-        <GroupContent ref={forwardedRef} {...props}>
-          {children}
-        </GroupContent>
-      </DropdownGroupProvider>
-    )
-  }
-)
+export const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {
+  return (
+    <DropdownGroupProvider>
+      <GroupContent ref={forwardedRef} {...props}>
+        {children}
+      </GroupContent>
+    </DropdownGroupProvider>
+  )
+}
 
-const GroupContent = forwardRef(
-  ({ children, className }: GroupProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const { labelId } = useDropdownGroupContext()
+const GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {
+  const { labelId } = useDropdownGroupContext()
 
-    return (
-      <div ref={forwardedRef} role="group" aria-labelledby={labelId} className={cx(className)}>
-        {children}
-      </div>
-    )
-  }
-)
+  return (
+    <div ref={forwardedRef} role="group" aria-labelledby={labelId} className={cx(className)}>
+      {children}
+    </div>
+  )
+}
 
 Group.displayName = 'Dropdown.Group'
diff --git a/packages/components/dropdown/src/DropdownItem.tsx b/packages/components/dropdown/src/DropdownItem.tsx
index 77431c74d..6fbdb099b 100644
--- a/packages/components/dropdown/src/DropdownItem.tsx
+++ b/packages/components/dropdown/src/DropdownItem.tsx
@@ -1,6 +1,6 @@
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cva, cx } from 'class-variance-authority'
-import { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react'
+import { type HTMLAttributes, type ReactNode, Ref } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 import { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'
@@ -10,21 +10,20 @@ export interface ItemProps extends HTMLAttributes<HTMLLIElement> {
   value: string
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLLIElement>
 }
 
-export const Item = forwardRef(
-  ({ children, ...props }: ItemProps, forwardedRef: Ref<HTMLLIElement>) => {
-    const { value, disabled } = props
+export const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {
+  const { value, disabled } = props
 
-    return (
-      <DropdownItemProvider value={value} disabled={disabled}>
-        <ItemContent ref={forwardedRef} {...props}>
-          {children}
-        </ItemContent>
-      </DropdownItemProvider>
-    )
-  }
-)
+  return (
+    <DropdownItemProvider value={value} disabled={disabled}>
+      <ItemContent ref={forwardedRef} {...props}>
+        {children}
+      </ItemContent>
+    </DropdownItemProvider>
+  )
+}
 
 const styles = cva('px-lg py-md text-body-1', {
   variants: {
@@ -57,40 +56,41 @@ const styles = cva('px-lg py-md text-body-1', {
   ],
 })
 
-const ItemContent = forwardRef(
-  (
-    { className, disabled = false, value, children }: ItemProps,
-    forwardedRef: Ref<HTMLLIElement>
-  ) => {
-    const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext()
-    const { textId, index, itemData, isSelected } = useDropdownItemContext()
+const ItemContent = ({
+  className,
+  disabled = false,
+  value,
+  children,
+  ref: forwardedRef,
+}: ItemProps) => {
+  const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext()
+  const { textId, index, itemData, isSelected } = useDropdownItemContext()
 
-    const isHighlighted = highlightedItem?.value === value
+  const isHighlighted = highlightedItem?.value === value
 
-    const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index })
-    const ref = useMergeRefs(forwardedRef, downshiftRef)
+  const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index })
+  const ref = useMergeRefs(forwardedRef, downshiftRef)
 
-    return (
-      <li
-        ref={ref}
-        className={cx(
-          styles({
-            selected: isSelected,
-            disabled,
-            highlighted: isHighlighted,
-            interactionType: lastInteractionType,
-            className,
-          })
-        )}
-        key={value}
-        {...downshiftItemProps}
-        aria-selected={isSelected}
-        aria-labelledby={textId}
-      >
-        {children}
-      </li>
-    )
-  }
-)
+  return (
+    <li
+      ref={ref}
+      className={cx(
+        styles({
+          selected: isSelected,
+          disabled,
+          highlighted: isHighlighted,
+          interactionType: lastInteractionType,
+          className,
+        })
+      )}
+      key={value}
+      {...downshiftItemProps}
+      aria-selected={isSelected}
+      aria-labelledby={textId}
+    >
+      {children}
+    </li>
+  )
+}
 
 Item.displayName = 'Dropdown.Item'
diff --git a/packages/components/dropdown/src/DropdownItemIndicator.tsx b/packages/components/dropdown/src/DropdownItemIndicator.tsx
index 29bbe9f51..48bc859fc 100644
--- a/packages/components/dropdown/src/DropdownItemIndicator.tsx
+++ b/packages/components/dropdown/src/DropdownItemIndicator.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@spark-ui/icon'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, Ref } from 'react'
 
 import { useDropdownItemContext } from './DropdownItemContext'
 
@@ -9,27 +9,31 @@ export interface ItemIndicatorProps {
   children?: ReactNode
   className?: string
   label?: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const ItemIndicator = forwardRef(
-  ({ className, children, label }: ItemIndicatorProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const { disabled, isSelected } = useDropdownItemContext()
+export const ItemIndicator = ({
+  className,
+  children,
+  label,
+  ref: forwardedRef,
+}: ItemIndicatorProps) => {
+  const { disabled, isSelected } = useDropdownItemContext()
 
-    const childElement = children || (
-      <Icon size="sm">
-        <Check aria-label={label} />
-      </Icon>
-    )
+  const childElement = children || (
+    <Icon size="sm">
+      <Check aria-label={label} />
+    </Icon>
+  )
 
-    return (
-      <span
-        ref={forwardedRef}
-        className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}
-      >
-        {isSelected && childElement}
-      </span>
-    )
-  }
-)
+  return (
+    <span
+      ref={forwardedRef}
+      className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}
+    >
+      {isSelected && childElement}
+    </span>
+  )
+}
 
 ItemIndicator.displayName = 'Dropdown.ItemIndicator'
diff --git a/packages/components/dropdown/src/DropdownItemText.tsx b/packages/components/dropdown/src/DropdownItemText.tsx
index 3ae467f07..0740e8db0 100644
--- a/packages/components/dropdown/src/DropdownItemText.tsx
+++ b/packages/components/dropdown/src/DropdownItemText.tsx
@@ -1,31 +1,30 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type Ref, useEffect, useId } from 'react'
+import { Ref, useEffect, useId } from 'react'
 
 import { ID_PREFIX } from './DropdownContext'
 import { useDropdownItemContext } from './DropdownItemContext'
 
 export interface ItemTextProps {
   children: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const ItemText = forwardRef(
-  ({ children }: ItemTextProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const id = `${ID_PREFIX}-item-text-${useId()}`
+export const ItemText = ({ children, ref: forwardedRef }: ItemTextProps) => {
+  const id = `${ID_PREFIX}-item-text-${useId()}`
 
-    const { setTextId } = useDropdownItemContext()
+  const { setTextId } = useDropdownItemContext()
 
-    useEffect(() => {
-      setTextId(id)
+  useEffect(() => {
+    setTextId(id)
 
-      return () => setTextId(undefined)
-    })
+    return () => setTextId(undefined)
+  })
 
-    return (
-      <span id={id} className={cx('inline')} ref={forwardedRef}>
-        {children}
-      </span>
-    )
-  }
-)
+  return (
+    <span id={id} className={cx('inline')} ref={forwardedRef}>
+      {children}
+    </span>
+  )
+}
 
 ItemText.displayName = 'Dropdown.ItemText'
diff --git a/packages/components/dropdown/src/DropdownItems.tsx b/packages/components/dropdown/src/DropdownItems.tsx
index f900e4238..2d74f627b 100644
--- a/packages/components/dropdown/src/DropdownItems.tsx
+++ b/packages/components/dropdown/src/DropdownItems.tsx
@@ -1,12 +1,13 @@
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref, useLayoutEffect, useRef } from 'react'
+import { ReactNode, Ref, useLayoutEffect, useRef } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 
 interface ItemsProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLUListElement>
 }
 
 /**
@@ -20,58 +21,56 @@ interface ItemsProps {
  *    making it impossible to select a value using a pointer device
  */
 
-export const Items = forwardRef(
-  ({ children, className, ...props }: ItemsProps, forwardedRef: Ref<HTMLUListElement>) => {
-    const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext()
+export const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {
+  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext()
 
-    const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
-      onMouseMove: () => {
-        setLastInteractionType('mouse')
-      },
-    })
+  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
+    onMouseMove: () => {
+      setLastInteractionType('mouse')
+    },
+  })
 
-    const innerRef = useRef<HTMLElement>(null)
+  const innerRef = useRef<HTMLElement>(null)
 
-    const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)
+  const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)
 
-    useLayoutEffect(() => {
-      if (!hasPopover) return
-      if (!innerRef.current) return
+  useLayoutEffect(() => {
+    if (!hasPopover) return
+    if (!innerRef.current) return
 
-      if (innerRef.current.parentElement) {
-        innerRef.current.parentElement.style.pointerEvents = isOpen ? '' : 'none'
-        innerRef.current.style.pointerEvents = isOpen ? '' : 'none'
-      }
-    }, [isOpen, hasPopover])
+    if (innerRef.current.parentElement) {
+      innerRef.current.parentElement.style.pointerEvents = isOpen ? '' : 'none'
+      innerRef.current.style.pointerEvents = isOpen ? '' : 'none'
+    }
+  }, [isOpen, hasPopover])
 
-    return (
-      <ul
-        ref={ref}
-        className={cx(
-          className,
-          'flex flex-col',
-          isOpen
-            ? '!pointer-events-auto block' /* 1 */
-            : 'pointer-events-none invisible absolute opacity-0',
-          hasPopover && 'p-lg'
-        )}
-        {...props}
-        {...downshiftMenuProps}
-        /**
-         * When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.
-         * It does programatically in JS using the `style` attribute.
-         *
-         * Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159
-         *
-         * A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.
-         *
-         */
-        data-spark-component="dropdown-items"
-      >
-        {children}
-      </ul>
-    )
-  }
-)
+  return (
+    <ul
+      ref={ref}
+      className={cx(
+        className,
+        'flex flex-col',
+        isOpen
+          ? '!pointer-events-auto block' /* 1 */
+          : 'pointer-events-none invisible absolute opacity-0',
+        hasPopover && 'p-lg'
+      )}
+      {...props}
+      {...downshiftMenuProps}
+      /**
+       * When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.
+       * It does programatically in JS using the `style` attribute.
+       *
+       * Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159
+       *
+       * A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.
+       *
+       */
+      data-spark-component="dropdown-items"
+    >
+      {children}
+    </ul>
+  )
+}
 
 Items.displayName = 'Dropdown.Items'
diff --git a/packages/components/dropdown/src/DropdownLabel.tsx b/packages/components/dropdown/src/DropdownLabel.tsx
index 87052bbc4..045af211d 100644
--- a/packages/components/dropdown/src/DropdownLabel.tsx
+++ b/packages/components/dropdown/src/DropdownLabel.tsx
@@ -1,27 +1,26 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type Ref } from 'react'
+import { Ref } from 'react'
 
 import { useDropdownGroupContext } from './DropdownItemsGroupContext'
 
 interface LabelProps {
   children: string
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Label = forwardRef(
-  ({ children, className }: LabelProps, forwardedRef: Ref<HTMLDivElement>) => {
-    const { labelId } = useDropdownGroupContext()
+export const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {
+  const { labelId } = useDropdownGroupContext()
 
-    return (
-      <div
-        ref={forwardedRef}
-        id={labelId}
-        className={cx('px-md py-sm text-body-2 italic text-neutral', className)}
-      >
-        {children}
-      </div>
-    )
-  }
-)
+  return (
+    <div
+      ref={forwardedRef}
+      id={labelId}
+      className={cx('px-md py-sm text-body-2 italic text-neutral', className)}
+    >
+      {children}
+    </div>
+  )
+}
 
 Label.displayName = 'Dropdown.Label'
diff --git a/packages/components/dropdown/src/DropdownPopover.tsx b/packages/components/dropdown/src/DropdownPopover.tsx
index edec6f4d9..4a92f04b9 100644
--- a/packages/components/dropdown/src/DropdownPopover.tsx
+++ b/packages/components/dropdown/src/DropdownPopover.tsx
@@ -1,52 +1,48 @@
 import { Popover as SparkPopover } from '@spark-ui/popover'
 import { cx } from 'class-variance-authority'
-import { ComponentProps, forwardRef, Ref, useEffect } from 'react'
+import { ComponentProps, useEffect } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 
-export const Popover = forwardRef(
-  (
-    {
-      children,
-      matchTriggerWidth = true,
-      sideOffset = 4,
-      className,
-      elevation = 'dropdown',
-      ...props
-    }: ComponentProps<typeof SparkPopover.Content>,
-    forwardedRef: Ref<HTMLDivElement>
-  ) => {
-    const ctx = useDropdownContext()
+export const Popover = ({
+  children,
+  matchTriggerWidth = true,
+  sideOffset = 4,
+  className,
+  elevation = 'dropdown',
+  ref: forwardedRef,
+  ...props
+}: ComponentProps<typeof SparkPopover.Content>) => {
+  const ctx = useDropdownContext()
 
-    useEffect(() => {
-      ctx.setHasPopover(true)
+  useEffect(() => {
+    ctx.setHasPopover(true)
 
-      return () => ctx.setHasPopover(false)
-    }, [])
+    return () => ctx.setHasPopover(false)
+  }, [])
 
-    return (
-      <SparkPopover.Content
-        ref={forwardedRef}
-        inset
-        asChild
-        matchTriggerWidth={matchTriggerWidth}
-        elevation={elevation}
-        className={cx('relative', className)}
-        sideOffset={sideOffset}
-        onOpenAutoFocus={e => {
-          /**
-           * With a combobox pattern, the focus should remain on the trigger at all times.
-           * Passing the focus to the dropdown popover would break keyboard navigation.
-           */
-          e.preventDefault()
-        }}
-        {...props}
-        data-spark-component="dropdown-popover"
-      >
-        {children}
-      </SparkPopover.Content>
-    )
-  }
-)
+  return (
+    <SparkPopover.Content
+      ref={forwardedRef}
+      inset
+      asChild
+      matchTriggerWidth={matchTriggerWidth}
+      elevation={elevation}
+      className={cx('relative', className)}
+      sideOffset={sideOffset}
+      onOpenAutoFocus={e => {
+        /**
+         * With a combobox pattern, the focus should remain on the trigger at all times.
+         * Passing the focus to the dropdown popover would break keyboard navigation.
+         */
+        e.preventDefault()
+      }}
+      {...props}
+      data-spark-component="dropdown-popover"
+    >
+      {children}
+    </SparkPopover.Content>
+  )
+}
 
 Popover.displayName = 'Dropdown.Popover'
diff --git a/packages/components/dropdown/src/DropdownTrigger.tsx b/packages/components/dropdown/src/DropdownTrigger.tsx
index 4686fc420..1c27df799 100644
--- a/packages/components/dropdown/src/DropdownTrigger.tsx
+++ b/packages/components/dropdown/src/DropdownTrigger.tsx
@@ -4,7 +4,7 @@ import { Popover } from '@spark-ui/popover'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { cx } from 'class-variance-authority'
-import { forwardRef, Fragment, ReactNode, type Ref } from 'react'
+import { Fragment, ReactNode, Ref } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 import { styles } from './DropdownTrigger.styles'
@@ -13,70 +13,71 @@ interface TriggerProps {
   'aria-label'?: string
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const Trigger = forwardRef(
-  (
-    { 'aria-label': ariaLabel, children, className }: TriggerProps,
-    forwardedRef: Ref<HTMLButtonElement>
-  ) => {
-    const {
-      getToggleButtonProps,
-      getDropdownProps,
-      getLabelProps,
-      hasPopover,
-      disabled,
-      readOnly,
-      state,
-      setLastInteractionType,
-    } = useDropdownContext()
+export const Trigger = ({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  ref: forwardedRef,
+}: TriggerProps) => {
+  const {
+    getToggleButtonProps,
+    getDropdownProps,
+    getLabelProps,
+    hasPopover,
+    disabled,
+    readOnly,
+    state,
+    setLastInteractionType,
+  } = useDropdownContext()
 
-    const [WrapperComponent, wrapperProps] = hasPopover
-      ? [Popover.Trigger, { asChild: true }]
-      : [Fragment, {}]
+  const [WrapperComponent, wrapperProps] = hasPopover
+    ? [Popover.Trigger, { asChild: true }]
+    : [Fragment, {}]
 
-    const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({
-      ...getDropdownProps(),
-      onKeyDown: () => {
-        setLastInteractionType('keyboard')
-      },
-    })
+  const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({
+    ...getDropdownProps(),
+    onKeyDown: () => {
+      setLastInteractionType('keyboard')
+    },
+  })
 
-    const isExpanded = downshiftTriggerProps['aria-expanded']
+  const isExpanded = downshiftTriggerProps['aria-expanded']
 
-    const ref = useMergeRefs(forwardedRef, downshiftRef)
+  const ref = useMergeRefs(forwardedRef, downshiftRef)
 
-    return (
-      <>
-        {ariaLabel && (
-          <VisuallyHidden>
-            <label {...getLabelProps()}>{ariaLabel}</label>
-          </VisuallyHidden>
-        )}
-        <WrapperComponent {...wrapperProps}>
-          <button
-            type="button"
-            ref={ref}
-            disabled={disabled || readOnly}
-            className={styles({ className, state, disabled, readOnly })}
-            {...downshiftTriggerProps}
-            data-spark-component="dropdown-trigger"
-          >
-            <span className="flex items-center justify-start gap-md">{children}</span>
+  return (
+    <>
+      {ariaLabel && (
+        <VisuallyHidden>
+          <label {...getLabelProps()}>{ariaLabel}</label>
+        </VisuallyHidden>
+      )}
+      <WrapperComponent {...wrapperProps}>
+        <button
+          type="button"
+          ref={ref}
+          disabled={disabled || readOnly}
+          className={styles({ className, state, disabled, readOnly })}
+          {...downshiftTriggerProps}
+          data-spark-component="dropdown-trigger"
+        >
+          <span className="flex items-center justify-start gap-md">{children}</span>
 
-            <Icon
-              className={cx('ml-md shrink-0 rotate-0 transition duration-100 ease-in', {
-                'rotate-180': isExpanded,
-              })}
-              size="sm"
-            >
-              <ArrowHorizontalDown />
-            </Icon>
-          </button>
-        </WrapperComponent>
-      </>
-    )
-  }
-)
+          <Icon
+            className={cx('ml-md shrink-0 rotate-0 transition duration-100 ease-in', {
+              'rotate-180': isExpanded,
+            })}
+            size="sm"
+          >
+            <ArrowHorizontalDown />
+          </Icon>
+        </button>
+      </WrapperComponent>
+    </>
+  )
+}
 
 Trigger.displayName = 'Dropdown.Trigger'
diff --git a/packages/components/dropdown/src/DropdownValue.tsx b/packages/components/dropdown/src/DropdownValue.tsx
index 3dd6cd17f..301abf8a6 100644
--- a/packages/components/dropdown/src/DropdownValue.tsx
+++ b/packages/components/dropdown/src/DropdownValue.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, Ref } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 
@@ -7,30 +7,29 @@ export interface ValueProps {
   children?: ReactNode
   className?: string
   placeholder: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const Value = forwardRef(
-  ({ children, className, placeholder }: ValueProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const { selectedItem, multiple, selectedItems } = useDropdownContext()
+export const Value = ({ children, className, placeholder, ref: forwardedRef }: ValueProps) => {
+  const { selectedItem, multiple, selectedItems } = useDropdownContext()
 
-    const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)
-    const text = multiple ? selectedItems[0]?.text : selectedItem?.text
-    const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''
+  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)
+  const text = multiple ? selectedItems[0]?.text : selectedItem?.text
+  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''
 
-    return (
-      <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>
-        <span
-          className={cx(
-            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
-            !hasSelectedItems && 'text-on-surface/dim-1'
-          )}
-        >
-          {!hasSelectedItems ? placeholder : children || text}
-        </span>
-        {suffix && <span>{suffix}</span>}
+  return (
+    <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>
+      <span
+        className={cx(
+          'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+          !hasSelectedItems && 'text-on-surface/dim-1'
+        )}
+      >
+        {!hasSelectedItems ? placeholder : children || text}
       </span>
-    )
-  }
-)
+      {suffix && <span>{suffix}</span>}
+    </span>
+  )
+}
 
 Value.displayName = 'Dropdown.Value'
diff --git a/packages/components/form-field/CHANGELOG.md b/packages/components/form-field/CHANGELOG.md
index 78f5e57b7..5c399cd81 100644
--- a/packages/components/form-field/CHANGELOG.md
+++ b/packages/components/form-field/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/form-field
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/form-field
diff --git a/packages/components/form-field/package.json b/packages/components/form-field/package.json
index dda28eb26..07e0c3e21 100644
--- a/packages/components/form-field/package.json
+++ b/packages/components/form-field/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/form-field",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Provide context to your form elements",
   "publishConfig": {
     "access": "public"
@@ -46,9 +46,9 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/label": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7"
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/label": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0"
   }
 }
diff --git a/packages/components/form-field/src/FormField.tsx b/packages/components/form-field/src/FormField.tsx
index 5ca8c7694..9482b987e 100644
--- a/packages/components/form-field/src/FormField.tsx
+++ b/packages/components/form-field/src/FormField.tsx
@@ -1,6 +1,6 @@
 import { Slot } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, useId } from 'react'
+import { ComponentPropsWithoutRef, Ref, useId } from 'react'
 
 import { FormFieldContextState, ID_PREFIX } from './FormFieldContext'
 import { FormFieldProvider } from './FormFieldProvider'
@@ -20,43 +20,40 @@ export interface FormFieldProps
    * Sets the component as interactive or not.
    */
   readOnly?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
-  (
-    {
-      className,
-      disabled = false,
-      readOnly = false,
-      name,
-      state,
-      isRequired = false,
-      asChild = false,
-      ...others
-    },
-    ref
-  ) => {
-    const id = `${ID_PREFIX}-${useId()}`
-    const Component = asChild ? Slot : 'div'
+export const FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
+}: FormFieldProps) => {
+  const id = `${ID_PREFIX}-${useId()}`
+  const Component = asChild ? Slot : 'div'
 
-    return (
-      <FormFieldProvider
-        id={id}
-        name={name}
-        isRequired={isRequired}
-        disabled={disabled}
-        readOnly={readOnly}
-        state={state}
-      >
-        <Component
-          ref={ref}
-          data-spark-component="form-field"
-          className={cx(className, 'flex flex-col gap-sm')}
-          {...others}
-        />
-      </FormFieldProvider>
-    )
-  }
-)
+  return (
+    <FormFieldProvider
+      id={id}
+      name={name}
+      isRequired={isRequired}
+      disabled={disabled}
+      readOnly={readOnly}
+      state={state}
+    >
+      <Component
+        ref={ref}
+        data-spark-component="form-field"
+        className={cx(className, 'flex flex-col gap-sm')}
+        {...others}
+      />
+    </FormFieldProvider>
+  )
+}
 
 FormField.displayName = 'FormField'
diff --git a/packages/components/form-field/src/FormFieldAlertMessage.tsx b/packages/components/form-field/src/FormFieldAlertMessage.tsx
index 6cb36ac6c..fb607d60d 100644
--- a/packages/components/form-field/src/FormFieldAlertMessage.tsx
+++ b/packages/components/form-field/src/FormFieldAlertMessage.tsx
@@ -1,20 +1,20 @@
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'
 
-export type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'>
+export type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldAlertMessage = forwardRef<HTMLSpanElement, FormFieldAlertMessageProps>(
-  (props, ref) => {
-    return (
-      <FormFieldStateMessage
-        ref={ref}
-        data-spark-component="form-field-alert-message"
-        state="alert"
-        {...props}
-      />
-    )
-  }
-)
+export const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {
+  return (
+    <FormFieldStateMessage
+      ref={ref}
+      data-spark-component="form-field-alert-message"
+      state="alert"
+      {...props}
+    />
+  )
+}
 
 FormFieldAlertMessage.displayName = 'FormField.AlertMessage'
diff --git a/packages/components/form-field/src/FormFieldCharactersCount.tsx b/packages/components/form-field/src/FormFieldCharactersCount.tsx
index e75377045..2e013959d 100644
--- a/packages/components/form-field/src/FormFieldCharactersCount.tsx
+++ b/packages/components/form-field/src/FormFieldCharactersCount.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 export type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {
   /**
@@ -10,23 +10,28 @@ export type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {
    * Maximum numeric value to be displayed.
    */
   maxLength: number
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const FormFieldCharactersCount = forwardRef<HTMLSpanElement, FormFieldCharactersCountProps>(
-  ({ className, value = '', maxLength, ...others }, ref) => {
-    const displayValue = `${value.length}/${maxLength}`
+export const FormFieldCharactersCount = ({
+  className,
+  value = '',
+  maxLength,
+  ref,
+  ...others
+}: FormFieldCharactersCountProps) => {
+  const displayValue = `${value.length}/${maxLength}`
 
-    return (
-      <span
-        ref={ref}
-        data-spark-component="form-field-characters-count"
-        className={cx(className, 'text-caption', 'text-neutral')}
-        {...others}
-      >
-        {displayValue}
-      </span>
-    )
-  }
-)
+  return (
+    <span
+      ref={ref}
+      data-spark-component="form-field-characters-count"
+      className={cx(className, 'text-caption', 'text-neutral')}
+      {...others}
+    >
+      {displayValue}
+    </span>
+  )
+}
 
 FormFieldCharactersCount.displayName = 'FormField.CharactersCount'
diff --git a/packages/components/form-field/src/FormFieldErrorMessage.tsx b/packages/components/form-field/src/FormFieldErrorMessage.tsx
index 49a403fc5..7b8ecf20d 100644
--- a/packages/components/form-field/src/FormFieldErrorMessage.tsx
+++ b/packages/components/form-field/src/FormFieldErrorMessage.tsx
@@ -1,20 +1,20 @@
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'
 
-export type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'>
+export type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldErrorMessage = forwardRef<HTMLSpanElement, FormFieldErrorMessageProps>(
-  (props, ref) => {
-    return (
-      <FormFieldStateMessage
-        ref={ref}
-        data-spark-component="form-field-error-message"
-        state="error"
-        {...props}
-      />
-    )
-  }
-)
+export const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {
+  return (
+    <FormFieldStateMessage
+      ref={ref}
+      data-spark-component="form-field-error-message"
+      state="error"
+      {...props}
+    />
+  )
+}
 
 FormFieldErrorMessage.displayName = 'FormField.ErrorMessage'
diff --git a/packages/components/form-field/src/FormFieldHelperMessage.tsx b/packages/components/form-field/src/FormFieldHelperMessage.tsx
index 34d632400..3e729c6a9 100644
--- a/packages/components/form-field/src/FormFieldHelperMessage.tsx
+++ b/packages/components/form-field/src/FormFieldHelperMessage.tsx
@@ -1,21 +1,25 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'
 
-export type FormFieldHelperMessageProps = FormFieldMessageProps
+export type FormFieldHelperMessageProps = FormFieldMessageProps & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldHelperMessage = forwardRef<HTMLSpanElement, FormFieldHelperMessageProps>(
-  ({ className, ...others }, ref) => {
-    return (
-      <FormFieldMessage
-        ref={ref}
-        data-spark-component="form-field-helper-message"
-        className={cx('text-on-surface/dim-1', className)}
-        {...others}
-      />
-    )
-  }
-)
+export const FormFieldHelperMessage = ({
+  className,
+  ref,
+  ...others
+}: FormFieldHelperMessageProps) => {
+  return (
+    <FormFieldMessage
+      ref={ref}
+      data-spark-component="form-field-helper-message"
+      className={cx('text-on-surface/dim-1', className)}
+      {...others}
+    />
+  )
+}
 
 FormFieldHelperMessage.displayName = 'FormField.HelperMessage'
diff --git a/packages/components/form-field/src/FormFieldLabel.tsx b/packages/components/form-field/src/FormFieldLabel.tsx
index 946c647eb..0e5307dd9 100644
--- a/packages/components/form-field/src/FormFieldLabel.tsx
+++ b/packages/components/form-field/src/FormFieldLabel.tsx
@@ -1,7 +1,7 @@
 import { Label, LabelProps } from '@spark-ui/label'
 import { Slottable } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode } from 'react'
+import { ReactNode, Ref } from 'react'
 
 import { useFormField } from './FormFieldContext'
 import { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'
@@ -11,45 +11,39 @@ export interface FormFieldLabelProps extends LabelProps {
    * Element shown when the input is required inside the label.
    */
   requiredIndicator?: ReactNode
+  ref?: Ref<HTMLLabelElement>
 }
 
-export const FormFieldLabel = forwardRef<HTMLLabelElement, FormFieldLabelProps>(
-  (
-    {
-      htmlFor: htmlForProp,
-      className,
-      children,
-      requiredIndicator = <FormFieldRequiredIndicator />,
-      asChild,
-      ...others
-    },
-    ref
-  ) => {
-    const control = useFormField()
+export const FormFieldLabel = ({
+  htmlFor: htmlForProp,
+  className,
+  children,
+  requiredIndicator = <FormFieldRequiredIndicator />,
+  asChild,
+  ref,
+  ...others
+}: FormFieldLabelProps) => {
+  const control = useFormField()
 
-    const { disabled, labelId, isRequired } = control
-    const htmlFor = asChild ? undefined : htmlForProp || control.id
+  const { disabled, labelId, isRequired } = control
+  const htmlFor = asChild ? undefined : htmlForProp || control.id
 
-    return (
-      <Label
-        ref={ref}
-        id={labelId}
-        data-spark-component="form-field-label"
-        htmlFor={htmlFor}
-        className={cx(
-          className,
-          disabled ? 'pointer-events-none text-on-surface/dim-3' : undefined
-        )}
-        asChild={asChild}
-        {...others}
-      >
-        <>
-          <Slottable>{children}</Slottable>
-          {isRequired && requiredIndicator}
-        </>
-      </Label>
-    )
-  }
-)
+  return (
+    <Label
+      ref={ref}
+      id={labelId}
+      data-spark-component="form-field-label"
+      htmlFor={htmlFor}
+      className={cx(className, disabled ? 'pointer-events-none text-on-surface/dim-3' : undefined)}
+      asChild={asChild}
+      {...others}
+    >
+      <>
+        <Slottable>{children}</Slottable>
+        {isRequired && requiredIndicator}
+      </>
+    </Label>
+  )
+}
 
 FormFieldLabel.displayName = 'FormField.Label'
diff --git a/packages/components/form-field/src/FormFieldMessage.tsx b/packages/components/form-field/src/FormFieldMessage.tsx
index a687d3d42..c80d01f8d 100644
--- a/packages/components/form-field/src/FormFieldMessage.tsx
+++ b/packages/components/form-field/src/FormFieldMessage.tsx
@@ -1,34 +1,39 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, useEffect, useId } from 'react'
+import { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'
 
 import { ID_PREFIX, useFormField } from './FormFieldContext'
 
-export type FormFieldMessageProps = ComponentPropsWithoutRef<'span'>
+export type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldMessage = forwardRef<HTMLSpanElement, FormFieldMessageProps>(
-  ({ id: idProp, className, ...others }, ref) => {
-    const { onMessageIdAdd, onMessageIdRemove } = useFormField()
-    const currentId = `${ID_PREFIX}-message-${useId()}`
-    const id = idProp || currentId
+export const FormFieldMessage = ({
+  id: idProp,
+  className,
+  ref,
+  ...others
+}: FormFieldMessageProps) => {
+  const { onMessageIdAdd, onMessageIdRemove } = useFormField()
+  const currentId = `${ID_PREFIX}-message-${useId()}`
+  const id = idProp || currentId
 
-    useEffect(() => {
-      onMessageIdAdd(id)
+  useEffect(() => {
+    onMessageIdAdd(id)
 
-      return () => {
-        onMessageIdRemove(id)
-      }
-    }, [id, onMessageIdAdd, onMessageIdRemove])
+    return () => {
+      onMessageIdRemove(id)
+    }
+  }, [id, onMessageIdAdd, onMessageIdRemove])
 
-    return (
-      <span
-        ref={ref}
-        id={id}
-        data-spark-component="form-field-message"
-        className={cx(className, 'text-caption')}
-        {...others}
-      />
-    )
-  }
-)
+  return (
+    <span
+      ref={ref}
+      id={id}
+      data-spark-component="form-field-message"
+      className={cx(className, 'text-caption')}
+      {...others}
+    />
+  )
+}
 
 FormFieldMessage.displayName = 'FormField.Message'
diff --git a/packages/components/form-field/src/FormFieldRequiredIndicator.tsx b/packages/components/form-field/src/FormFieldRequiredIndicator.tsx
index 2db216f88..837ff79ea 100644
--- a/packages/components/form-field/src/FormFieldRequiredIndicator.tsx
+++ b/packages/components/form-field/src/FormFieldRequiredIndicator.tsx
@@ -1,14 +1,17 @@
 import { Label, LabelRequiredIndicatorProps } from '@spark-ui/label'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps
+export type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldRequiredIndicator = forwardRef<
-  HTMLSpanElement,
-  FormFieldRequiredIndicatorProps
->(({ className, ...props }, ref) => {
+export const FormFieldRequiredIndicator = ({
+  className,
+  ref,
+  ...props
+}: FormFieldRequiredIndicatorProps) => {
   return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />
-})
+}
 
 FormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'
diff --git a/packages/components/form-field/src/FormFieldStateMessage.tsx b/packages/components/form-field/src/FormFieldStateMessage.tsx
index 60d19a87c..558bd336e 100644
--- a/packages/components/form-field/src/FormFieldStateMessage.tsx
+++ b/packages/components/form-field/src/FormFieldStateMessage.tsx
@@ -3,55 +3,60 @@ import { AlertOutline } from '@spark-ui/icons/dist/icons/AlertOutline'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { WarningOutline } from '@spark-ui/icons/dist/icons/WarningOutline'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { useFormField } from './FormFieldContext'
 import { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'
 
 export interface FormFieldStateMessageProps extends FormFieldMessageProps {
   state: 'error' | 'alert' | 'success'
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const FormFieldStateMessage = forwardRef<HTMLSpanElement, FormFieldStateMessageProps>(
-  ({ className, state, children, ...others }, ref) => {
-    const field = useFormField()
+export const FormFieldStateMessage = ({
+  className,
+  state,
+  children,
+  ref,
+  ...others
+}: FormFieldStateMessageProps) => {
+  const field = useFormField()
 
-    if (field.state !== state) {
-      return null
-    }
+  if (field.state !== state) {
+    return null
+  }
 
-    return (
-      <FormFieldMessage
-        ref={ref}
-        data-spark-component="form-field-state-message"
-        aria-live="polite"
-        className={cx(
-          'flex items-center gap-sm',
-          state === 'error' ? 'text-error' : 'text-on-surface/dim-1',
-          className
-        )}
-        {...others}
-      >
-        {state === 'alert' && (
-          <Icon size="sm">
-            <WarningOutline />
-          </Icon>
-        )}
-        {state === 'error' && (
-          <Icon size="sm" intent="error">
-            <AlertOutline />
-          </Icon>
-        )}
-        {state === 'success' && (
-          <Icon size="sm">
-            <Check />
-          </Icon>
-        )}
+  return (
+    <FormFieldMessage
+      ref={ref}
+      data-spark-component="form-field-state-message"
+      aria-live="polite"
+      className={cx(
+        'flex items-center gap-sm',
+        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',
+        className
+      )}
+      {...others}
+    >
+      {state === 'alert' && (
+        <Icon size="sm">
+          <WarningOutline />
+        </Icon>
+      )}
+      {state === 'error' && (
+        <Icon size="sm" intent="error">
+          <AlertOutline />
+        </Icon>
+      )}
+      {state === 'success' && (
+        <Icon size="sm">
+          <Check />
+        </Icon>
+      )}
 
-        {children}
-      </FormFieldMessage>
-    )
-  }
-)
+      {children}
+    </FormFieldMessage>
+  )
+}
 
 FormFieldStateMessage.displayName = 'FormField.StateMessage'
diff --git a/packages/components/form-field/src/FormFieldSuccessMessage.tsx b/packages/components/form-field/src/FormFieldSuccessMessage.tsx
index b75e44282..ff857a8a7 100644
--- a/packages/components/form-field/src/FormFieldSuccessMessage.tsx
+++ b/packages/components/form-field/src/FormFieldSuccessMessage.tsx
@@ -1,20 +1,20 @@
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'
 
-export type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'>
+export type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
+  ref?: Ref<HTMLSpanElement>
+}
 
-export const FormFieldSuccessMessage = forwardRef<HTMLSpanElement, FormFieldSuccessMessageProps>(
-  (props, ref) => {
-    return (
-      <FormFieldStateMessage
-        ref={ref}
-        data-spark-component="form-field-success-message"
-        state="success"
-        {...props}
-      />
-    )
-  }
-)
+export const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {
+  return (
+    <FormFieldStateMessage
+      ref={ref}
+      data-spark-component="form-field-success-message"
+      state="success"
+      {...props}
+    />
+  )
+}
 
 FormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'
diff --git a/packages/components/icon-button/CHANGELOG.md b/packages/components/icon-button/CHANGELOG.md
index 22dc9cb1c..0ac653770 100644
--- a/packages/components/icon-button/CHANGELOG.md
+++ b/packages/components/icon-button/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/icon-button
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/icon-button
diff --git a/packages/components/icon-button/package.json b/packages/components/icon-button/package.json
index 03bcb7bbc..6ae63eff9 100644
--- a/packages/components/icon-button/package.json
+++ b/packages/components/icon-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/icon-button",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Icon button renders an icon within in a button",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/button": "^7.3.7",
+    "@spark-ui/button": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/icon-button/src/IconButton.tsx b/packages/components/icon-button/src/IconButton.tsx
index 442879fa0..0bf503485 100644
--- a/packages/components/icon-button/src/IconButton.tsx
+++ b/packages/components/icon-button/src/IconButton.tsx
@@ -1,38 +1,35 @@
 import { Button, ButtonProps } from '@spark-ui/button'
-import React, { forwardRef } from 'react'
+import React, { Ref } from 'react'
 
 import { iconButtonStyles } from './IconButton.styles'
 
 export interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    {
-      design = 'filled',
-      disabled = false,
-      intent = 'main',
-      shape = 'rounded',
-      size = 'md',
-      className,
-      ...others
-    },
-    ref
-  ) => {
-    return (
-      <Button
-        ref={ref}
-        className={iconButtonStyles({ size, className })}
-        design={design}
-        disabled={disabled}
-        intent={intent}
-        shape={shape}
-        size={size}
-        {...others}
-      />
-    )
-  }
-)
+export const IconButton = ({
+  design = 'filled',
+  disabled = false,
+  intent = 'main',
+  shape = 'rounded',
+  size = 'md',
+  className,
+  ref,
+  ...others
+}: IconButtonProps) => {
+  return (
+    <Button
+      ref={ref}
+      className={iconButtonStyles({ size, className })}
+      design={design}
+      disabled={disabled}
+      intent={intent}
+      shape={shape}
+      size={size}
+      {...others}
+    />
+  )
+}
 
 IconButton.displayName = 'IconButton'
diff --git a/packages/components/icon/CHANGELOG.md b/packages/components/icon/CHANGELOG.md
index 3c9b691cb..aa1da2120 100644
--- a/packages/components/icon/CHANGELOG.md
+++ b/packages/components/icon/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/icon
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/icon
diff --git a/packages/components/icon/package.json b/packages/components/icon/package.json
index c9762b72e..f522b9fd8 100644
--- a/packages/components/icon/package.json
+++ b/packages/components/icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/icon",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Accessible icon wrapper",
   "publishConfig": {
     "access": "public"
@@ -35,8 +35,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/visually-hidden": "^7.3.7"
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/visually-hidden": "^8.0.0"
   },
   "peerDependencies": {
     "@spark-ui/tailwind-plugins": "latest",
diff --git a/packages/components/icons/CHANGELOG.md b/packages/components/icons/CHANGELOG.md
index 46dd46903..45988207c 100644
--- a/packages/components/icons/CHANGELOG.md
+++ b/packages/components/icons/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/icons
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/icons
diff --git a/packages/components/icons/package.json b/packages/components/icons/package.json
index f615984bd..519f15461 100644
--- a/packages/components/icons/package.json
+++ b/packages/components/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/icons",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "spark-ui icons",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/icons/scripts/utils/componentize.mjs b/packages/components/icons/scripts/utils/componentize.mjs
index 405804578..c5a11526f 100644
--- a/packages/components/icons/scripts/utils/componentize.mjs
+++ b/packages/components/icons/scripts/utils/componentize.mjs
@@ -11,12 +11,12 @@ const componentize = ({ name = 'componentName', node = '<svg />', tags = [] }) =
   } = parseSync(node)
   const nameTags = [name]
 
-  return `import React, { type Ref } from 'react'
+  return `import React from 'react'
 import { IconProps } from '../Types'
 
 export const ${pascalCase(
     name
-  )} = React.forwardRef(({title, fill = '${fill}', stroke = '${stroke}', ...props}: IconProps, ref: Ref<SVGSVGElement>) => (
+  )} = ({title, fill = '${fill}', stroke = '${stroke}', ref, ...props}: IconProps) => (
   <svg ref={ref} ${Object.entries(otherAttributes)
     .map(([key, value]) => `${key}="${value}"`)
     .join(' ')}
@@ -25,7 +25,7 @@ export const ${pascalCase(
         children
       )}'}}
   />
-))
+)
 
 ${pascalCase(name)}.displayName = '${pascalCase(name)}'
 
diff --git a/packages/components/icons/src/Types.ts b/packages/components/icons/src/Types.ts
index 1f2a343a2..465598f6c 100644
--- a/packages/components/icons/src/Types.ts
+++ b/packages/components/icons/src/Types.ts
@@ -1,5 +1,8 @@
+import { Ref } from 'react'
+
 export interface IconProps {
   title?: string
   fill?: string
   stroke?: string
+  ref?: Ref<SVGSVGElement>
 }
diff --git a/packages/components/icons/src/icons/AccountFill.tsx b/packages/components/icons/src/icons/AccountFill.tsx
index a5a8e880e..f5cb6f4ce 100644
--- a/packages/components/icons/src/icons/AccountFill.tsx
+++ b/packages/components/icons/src/icons/AccountFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AccountFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AccountFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,2c-2.81,0-5.09,2.24-5.09,5s2.28,5,5.09,5,5.09-2.24,5.09-5-2.28-5-5.09-5Z"/><path fill-rule="evenodd" d="m18.23,14.89c1.77,1.35,2.94,3.41,2.94,6.11,0,.55-.46,1-1.02,1H3.85c-.56,0-1.02-.45-1.02-1,0-2.63,1.18-4.66,2.94-6.02,1.73-1.34,4-1.99,6.22-2.01,2.22-.02,4.49.6,6.24,1.93Z"/>',
-      }}
-    />
-  )
+export const AccountFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AccountFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,2c-2.81,0-5.09,2.24-5.09,5s2.28,5,5.09,5,5.09-2.24,5.09-5-2.28-5-5.09-5Z"/><path fill-rule="evenodd" d="m18.23,14.89c1.77,1.35,2.94,3.41,2.94,6.11,0,.55-.46,1-1.02,1H3.85c-.56,0-1.02-.45-1.02-1,0-2.63,1.18-4.66,2.94-6.02,1.73-1.34,4-1.99,6.22-2.01,2.22-.02,4.49.6,6.24,1.93Z"/>',
+    }}
+  />
 )
 
 AccountFill.displayName = 'AccountFill'
diff --git a/packages/components/icons/src/icons/AccountOutline.tsx b/packages/components/icons/src/icons/AccountOutline.tsx
index e12cd4804..59d929629 100644
--- a/packages/components/icons/src/icons/AccountOutline.tsx
+++ b/packages/components/icons/src/icons/AccountOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AccountOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AccountOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,4.19c-1.6,0-2.93,1.26-2.93,2.84s1.33,2.84,2.93,2.84,2.93-1.26,2.93-2.84-1.33-2.84-2.93-2.84Zm-5.23,2.84c0-2.77,2.32-5.03,5.23-5.03s5.23,2.27,5.23,5.03-2.32,5.03-5.23,5.03-5.23-2.27-5.23-5.03Zm5.23,8.54c-1.85,0-3.63.71-4.95,1.98-1.01.97-1.68,2.21-1.94,3.55-.12.6-.72.99-1.34.88-.63-.11-1.04-.68-.92-1.28.34-1.76,1.23-3.4,2.56-4.69,1.74-1.68,4.11-2.63,6.59-2.63s4.84.95,6.59,2.63c1.34,1.29,2.22,2.93,2.56,4.69.12.6-.3,1.17-.92,1.28-.63.11-1.23-.28-1.34-.88-.26-1.34-.93-2.58-1.94-3.55-1.31-1.27-3.09-1.98-4.95-1.98Z"/>',
-      }}
-    />
-  )
+export const AccountOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AccountOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,4.19c-1.6,0-2.93,1.26-2.93,2.84s1.33,2.84,2.93,2.84,2.93-1.26,2.93-2.84-1.33-2.84-2.93-2.84Zm-5.23,2.84c0-2.77,2.32-5.03,5.23-5.03s5.23,2.27,5.23,5.03-2.32,5.03-5.23,5.03-5.23-2.27-5.23-5.03Zm5.23,8.54c-1.85,0-3.63.71-4.95,1.98-1.01.97-1.68,2.21-1.94,3.55-.12.6-.72.99-1.34.88-.63-.11-1.04-.68-.92-1.28.34-1.76,1.23-3.4,2.56-4.69,1.74-1.68,4.11-2.63,6.59-2.63s4.84.95,6.59,2.63c1.34,1.29,2.22,2.93,2.56,4.69.12.6-.3,1.17-.92,1.28-.63.11-1.23-.28-1.34-.88-.26-1.34-.93-2.58-1.94-3.55-1.31-1.27-3.09-1.98-4.95-1.98Z"/>',
+    }}
+  />
 )
 
 AccountOutline.displayName = 'AccountOutline'
diff --git a/packages/components/icons/src/icons/Activity.tsx b/packages/components/icons/src/icons/Activity.tsx
index 7827f3619..21edb5cde 100644
--- a/packages/components/icons/src/icons/Activity.tsx
+++ b/packages/components/icons/src/icons/Activity.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Activity = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Activity"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4.38,4c-.1,0-.2.04-.27.11-.07.07-.11.17-.11.27v3.46c0,.55-.45,1-1,1s-1-.45-1-1v-3.46c0-.63.25-1.24.7-1.69.45-.45,1.05-.7,1.69-.7h3.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46Zm10.77-1c0-.55.45-1,1-1h3.46c.63,0,1.24.25,1.69.7.45.45.7,1.05.7,1.69v3.46c0,.55-.45,1-1,1s-1-.45-1-1v-3.46c0-.1-.04-.2-.11-.27-.07-.07-.17-.11-.27-.11h-3.46c-.55,0-1-.45-1-1Zm-5.92,3.15c.42,0,.79.26.93.66l1.97,5.43,1.73-3.46c.16-.33.49-.54.86-.55.36-.01.71.17.9.48l1.79,2.98h2.9c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.35,0-.68-.18-.86-.49l-1.14-1.9-1.95,3.91c-.18.36-.55.57-.95.55-.4-.02-.75-.28-.88-.66l-1.84-5.07-1.13,3c-.15.39-.52.65-.94.65h-3.46c-.55,0-1-.45-1-1s.45-1,1-1h2.77l1.83-4.89c.15-.39.52-.65.94-.65ZM3,15.15c.55,0,1,.45,1,1v3.46c0,.1.04.2.11.27.07.07.17.11.27.11h3.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.63,0-1.24-.25-1.69-.7-.45-.45-.7-1.05-.7-1.69v-3.46c0-.55.45-1,1-1Zm18,0c.55,0,1,.45,1,1v3.46c0,.63-.25,1.24-.7,1.69-.45.45-1.05.7-1.69.7h-3.46c-.55,0-1-.45-1-1s.45-1,1-1h3.46c.1,0,.2-.04.27-.11.07-.07.11-.17.11-.27v-3.46c0-.55.45-1,1-1Z"/>',
-      }}
-    />
-  )
+export const Activity = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Activity"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4.38,4c-.1,0-.2.04-.27.11-.07.07-.11.17-.11.27v3.46c0,.55-.45,1-1,1s-1-.45-1-1v-3.46c0-.63.25-1.24.7-1.69.45-.45,1.05-.7,1.69-.7h3.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46Zm10.77-1c0-.55.45-1,1-1h3.46c.63,0,1.24.25,1.69.7.45.45.7,1.05.7,1.69v3.46c0,.55-.45,1-1,1s-1-.45-1-1v-3.46c0-.1-.04-.2-.11-.27-.07-.07-.17-.11-.27-.11h-3.46c-.55,0-1-.45-1-1Zm-5.92,3.15c.42,0,.79.26.93.66l1.97,5.43,1.73-3.46c.16-.33.49-.54.86-.55.36-.01.71.17.9.48l1.79,2.98h2.9c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.35,0-.68-.18-.86-.49l-1.14-1.9-1.95,3.91c-.18.36-.55.57-.95.55-.4-.02-.75-.28-.88-.66l-1.84-5.07-1.13,3c-.15.39-.52.65-.94.65h-3.46c-.55,0-1-.45-1-1s.45-1,1-1h2.77l1.83-4.89c.15-.39.52-.65.94-.65ZM3,15.15c.55,0,1,.45,1,1v3.46c0,.1.04.2.11.27.07.07.17.11.27.11h3.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.63,0-1.24-.25-1.69-.7-.45-.45-.7-1.05-.7-1.69v-3.46c0-.55.45-1,1-1Zm18,0c.55,0,1,.45,1,1v3.46c0,.63-.25,1.24-.7,1.69-.45.45-1.05.7-1.69.7h-3.46c-.55,0-1-.45-1-1s.45-1,1-1h3.46c.1,0,.2-.04.27-.11.07-.07.11-.17.11-.27v-3.46c0-.55.45-1,1-1Z"/>',
+    }}
+  />
 )
 
 Activity.displayName = 'Activity'
diff --git a/packages/components/icons/src/icons/AddFill.tsx b/packages/components/icons/src/icons/AddFill.tsx
index f5a783d61..7b908fcd2 100644
--- a/packages/components/icons/src/icons/AddFill.tsx
+++ b/packages/components/icons/src/icons/AddFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-9-4.62c0-.55-.45-1-1-1s-1,.45-1,1v3.62h-3.62c-.55,0-1,.45-1,1s.45,1,1,1h3.62v3.62c0,.55.45,1,1,1s1-.45,1-1v-3.62h3.62c.55,0,1-.45,1-1s-.45-1-1-1h-3.62v-3.62Z"/>',
-      }}
-    />
-  )
+export const AddFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-9-4.62c0-.55-.45-1-1-1s-1,.45-1,1v3.62h-3.62c-.55,0-1,.45-1,1s.45,1,1,1h3.62v3.62c0,.55.45,1,1,1s1-.45,1-1v-3.62h3.62c.55,0,1-.45,1-1s-.45-1-1-1h-3.62v-3.62Z"/>',
+    }}
+  />
 )
 
 AddFill.displayName = 'AddFill'
diff --git a/packages/components/icons/src/icons/AddImageFill.tsx b/packages/components/icons/src/icons/AddImageFill.tsx
index bd95bc78d..044cf75af 100644
--- a/packages/components/icons/src/icons/AddImageFill.tsx
+++ b/packages/components/icons/src/icons/AddImageFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddImageFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddImageFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m6.5,11.72c-.42,0-.85-.34-.85-.84v-2.68h-2.8c-.42,0-.85-.42-.85-.84s.34-.84.85-.84h2.8v-2.85c0-.42.34-.84.85-.84.42,0,.85.34.85.84v2.85h2.8c.42,0,.85.42.85.84s-.34.84-.85.84h-2.8v2.68c0,.42-.34.84-.85.84Z"/><path fill-rule="evenodd" d="m19.95,9.72c.5,0,1.07.23,1.44.6h0c.36.35.6.84.6,1.43v7.39c0,.5-.23,1.07-.6,1.43-.35.35-.84.6-1.44.6H6.23c-.5,0-1.07-.23-1.44-.6-.36-.35-.6-.84-.6-1.43v-7.73c.25,1.13,1.3,1.83,2.32,1.83,1.45,0,2.38-1.19,2.38-2.35v-1.17h1.27c1.45,0,2.38-1.19,2.38-2.35,0-.03,0-.08,0-.08h3c.25,0,.49.12.64.32l1.65,2.12h2.14Zm-10.55,5.04c0,2.04,1.69,3.61,3.65,3.61s3.65-1.57,3.65-3.61-1.59-3.61-3.65-3.61-3.65,1.57-3.65,3.61Z"/>',
-      }}
-    />
-  )
+export const AddImageFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddImageFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m6.5,11.72c-.42,0-.85-.34-.85-.84v-2.68h-2.8c-.42,0-.85-.42-.85-.84s.34-.84.85-.84h2.8v-2.85c0-.42.34-.84.85-.84.42,0,.85.34.85.84v2.85h2.8c.42,0,.85.42.85.84s-.34.84-.85.84h-2.8v2.68c0,.42-.34.84-.85.84Z"/><path fill-rule="evenodd" d="m19.95,9.72c.5,0,1.07.23,1.44.6h0c.36.35.6.84.6,1.43v7.39c0,.5-.23,1.07-.6,1.43-.35.35-.84.6-1.44.6H6.23c-.5,0-1.07-.23-1.44-.6-.36-.35-.6-.84-.6-1.43v-7.73c.25,1.13,1.3,1.83,2.32,1.83,1.45,0,2.38-1.19,2.38-2.35v-1.17h1.27c1.45,0,2.38-1.19,2.38-2.35,0-.03,0-.08,0-.08h3c.25,0,.49.12.64.32l1.65,2.12h2.14Zm-10.55,5.04c0,2.04,1.69,3.61,3.65,3.61s3.65-1.57,3.65-3.61-1.59-3.61-3.65-3.61-3.65,1.57-3.65,3.61Z"/>',
+    }}
+  />
 )
 
 AddImageFill.displayName = 'AddImageFill'
diff --git a/packages/components/icons/src/icons/AddImageOutline.tsx b/packages/components/icons/src/icons/AddImageOutline.tsx
index 978008b65..a3e5c3716 100644
--- a/packages/components/icons/src/icons/AddImageOutline.tsx
+++ b/packages/components/icons/src/icons/AddImageOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddImageOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddImageOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12.02,7.77c0-.55.44-1,.99-1h2.09c.31,0,.6.15.79.39l1.67,2.2h2.16c.56,0,1.19.26,1.61.67.39.4.67.95.67,1.62v7.85c0,.57-.25,1.2-.67,1.62-.39.4-.94.67-1.61.67H5.42c-.56,0-1.19-.26-1.61-.67-.39-.4-.67-.95-.67-1.62v-6.14c0-.55.44-1,.99-1s.99.45.99,1v6.14c0,.05,0,.09.02.11.01.03.03.06.07.09,0,0,0,0,0,0,0,0,0,0,.03.02.02.01.05.03.07.04.03.01.06.02.08.02.02,0,.03,0,.03,0h14.3c.05,0,.09,0,.11-.02.03-.01.06-.03.09-.07,0,0,0,0,0,0,0,0,0,0,.02-.03.01-.02.03-.05.04-.07.01-.03.02-.06.02-.08,0-.02,0-.03,0-.03v-7.85c0-.05,0-.09-.02-.11-.01-.03-.03-.06-.07-.09,0,0,0,0,0,0,0,0,0,0-.03-.02-.02-.01-.05-.03-.07-.04-.03-.01-.06-.02-.08-.02-.02,0-.03,0-.03,0h-2.65c-.31,0-.6-.15-.79-.39l-1.67-2.2h-1.6c-.55,0-.99-.45-.99-1Z"/><path fill-rule="evenodd" d="m8.59,14.86c0-2.25,1.82-3.97,3.94-3.97,2.23,0,3.94,1.84,3.94,3.97,0,2.25-1.82,3.97-3.94,3.97s-3.94-1.73-3.94-3.97Zm3.94-1.97c-1.06,0-1.96.86-1.96,1.97s.9,1.97,1.96,1.97,1.96-.86,1.96-1.97-.86-1.97-1.96-1.97Zm-6.97-2.69c0,.5.41.83.83.83.5,0,.83-.42.83-.83v-2.67h2.73c.5,0,.83-.42.83-.83s-.41-.83-.83-.83h-2.73v-2.83c0-.5-.41-.83-.83-.83-.5,0-.83.42-.83.83v2.83h-2.73c-.5,0-.83.42-.83.83s.41.83.83.83h2.73v2.67Z"/>',
-      }}
-    />
-  )
+export const AddImageOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddImageOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12.02,7.77c0-.55.44-1,.99-1h2.09c.31,0,.6.15.79.39l1.67,2.2h2.16c.56,0,1.19.26,1.61.67.39.4.67.95.67,1.62v7.85c0,.57-.25,1.2-.67,1.62-.39.4-.94.67-1.61.67H5.42c-.56,0-1.19-.26-1.61-.67-.39-.4-.67-.95-.67-1.62v-6.14c0-.55.44-1,.99-1s.99.45.99,1v6.14c0,.05,0,.09.02.11.01.03.03.06.07.09,0,0,0,0,0,0,0,0,0,0,.03.02.02.01.05.03.07.04.03.01.06.02.08.02.02,0,.03,0,.03,0h14.3c.05,0,.09,0,.11-.02.03-.01.06-.03.09-.07,0,0,0,0,0,0,0,0,0,0,.02-.03.01-.02.03-.05.04-.07.01-.03.02-.06.02-.08,0-.02,0-.03,0-.03v-7.85c0-.05,0-.09-.02-.11-.01-.03-.03-.06-.07-.09,0,0,0,0,0,0,0,0,0,0-.03-.02-.02-.01-.05-.03-.07-.04-.03-.01-.06-.02-.08-.02-.02,0-.03,0-.03,0h-2.65c-.31,0-.6-.15-.79-.39l-1.67-2.2h-1.6c-.55,0-.99-.45-.99-1Z"/><path fill-rule="evenodd" d="m8.59,14.86c0-2.25,1.82-3.97,3.94-3.97,2.23,0,3.94,1.84,3.94,3.97,0,2.25-1.82,3.97-3.94,3.97s-3.94-1.73-3.94-3.97Zm3.94-1.97c-1.06,0-1.96.86-1.96,1.97s.9,1.97,1.96,1.97,1.96-.86,1.96-1.97-.86-1.97-1.96-1.97Zm-6.97-2.69c0,.5.41.83.83.83.5,0,.83-.42.83-.83v-2.67h2.73c.5,0,.83-.42.83-.83s-.41-.83-.83-.83h-2.73v-2.83c0-.5-.41-.83-.83-.83-.5,0-.83.42-.83.83v2.83h-2.73c-.5,0-.83.42-.83.83s.41.83.83.83h2.73v2.67Z"/>',
+    }}
+  />
 )
 
 AddImageOutline.displayName = 'AddImageOutline'
diff --git a/packages/components/icons/src/icons/AddOutline.tsx b/packages/components/icons/src/icons/AddOutline.tsx
index 112e8d937..8a2901034 100644
--- a/packages/components/icons/src/icons/AddOutline.tsx
+++ b/packages/components/icons/src/icons/AddOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12.07,7c.55,0,1,.45,1,1v3.07h3.07c.55,0,1,.45,1,1s-.45,1-1,1h-3.07v3.07c0,.55-.45,1-1,1s-1-.45-1-1v-3.07h-3.07c-.55,0-1-.45-1-1s.45-1,1-1h3.07v-3.07c0-.55.45-1,1-1Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2ZM4,12c0-4.42,3.58-8,8-8s8,3.58,8,8-3.58,8-8,8-8-3.58-8-8Z"/>',
-      }}
-    />
-  )
+export const AddOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12.07,7c.55,0,1,.45,1,1v3.07h3.07c.55,0,1,.45,1,1s-.45,1-1,1h-3.07v3.07c0,.55-.45,1-1,1s-1-.45-1-1v-3.07h-3.07c-.55,0-1-.45-1-1s.45-1,1-1h3.07v-3.07c0-.55.45-1,1-1Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2ZM4,12c0-4.42,3.58-8,8-8s8,3.58,8,8-3.58,8-8,8-8-3.58-8-8Z"/>',
+    }}
+  />
 )
 
 AddOutline.displayName = 'AddOutline'
diff --git a/packages/components/icons/src/icons/AddSquareFill.tsx b/packages/components/icons/src/icons/AddSquareFill.tsx
index 9a0045925..78e6adf26 100644
--- a/packages/components/icons/src/icons/AddSquareFill.tsx
+++ b/packages/components/icons/src/icons/AddSquareFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddSquareFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddSquareFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7,2c-2.76,0-5,2.24-5,5h0v10c0,2.76,2.24,5,5,5h10c2.76,0,5-2.24,5-5V7c0-2.76-2.24-5-5-5,0,0-10,0-10,0Zm5.83,5.71c0-.46-.37-.83-.83-.83s-.83.37-.83.83h0v3.45h-3.45c-.46,0-.83.37-.83.83s.37.83.83.83h3.45v3.45c0,.46.37.83.83.83s.83-.37.83-.83v-3.45h3.45c.46,0,.83-.37.83-.83s-.37-.83-.83-.83h-3.45v-3.45Z"/>',
-      }}
-    />
-  )
+export const AddSquareFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddSquareFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7,2c-2.76,0-5,2.24-5,5h0v10c0,2.76,2.24,5,5,5h10c2.76,0,5-2.24,5-5V7c0-2.76-2.24-5-5-5,0,0-10,0-10,0Zm5.83,5.71c0-.46-.37-.83-.83-.83s-.83.37-.83.83h0v3.45h-3.45c-.46,0-.83.37-.83.83s.37.83.83.83h3.45v3.45c0,.46.37.83.83.83s.83-.37.83-.83v-3.45h3.45c.46,0,.83-.37.83-.83s-.37-.83-.83-.83h-3.45v-3.45Z"/>',
+    }}
+  />
 )
 
 AddSquareFill.displayName = 'AddSquareFill'
diff --git a/packages/components/icons/src/icons/AddSquareOutline.tsx b/packages/components/icons/src/icons/AddSquareOutline.tsx
index 8a06f909a..5ce801fea 100644
--- a/packages/components/icons/src/icons/AddSquareOutline.tsx
+++ b/packages/components/icons/src/icons/AddSquareOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AddSquareOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AddSquareOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,6.84c.56,0,1.01.45,1.01,1.01v3.14h3.14c.56.02.99.5.96,1.05-.02.52-.44.94-.96.96h-3.14v3.14c0,.56-.45,1.01-1.01,1.01-.56,0-1.01-.45-1.01-1.01h0v-3.14h-3.14c-.56,0-1.01-.45-1.01-1.01,0-.56.45-1.01,1.01-1.01h3.14v-3.14c0-.56.45-1.01,1.01-1.01h0Z"/><path fill-rule="evenodd" d="m7.16,2c-2.85,0-5.16,2.31-5.16,5.16h0v9.68c0,2.85,2.31,5.16,5.16,5.16h9.68c2.85,0,5.16-2.31,5.16-5.16V7.16c0-2.85-2.31-5.16-5.16-5.16H7.16Zm-3.14,5.16c0-1.73,1.4-3.14,3.14-3.14h9.68c1.73,0,3.14,1.4,3.14,3.14h0v9.68c0,1.73-1.4,3.14-3.14,3.14H7.16c-1.73,0-3.14-1.4-3.14-3.14h0V7.16h0Z"/>',
-      }}
-    />
-  )
+export const AddSquareOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AddSquareOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,6.84c.56,0,1.01.45,1.01,1.01v3.14h3.14c.56.02.99.5.96,1.05-.02.52-.44.94-.96.96h-3.14v3.14c0,.56-.45,1.01-1.01,1.01-.56,0-1.01-.45-1.01-1.01h0v-3.14h-3.14c-.56,0-1.01-.45-1.01-1.01,0-.56.45-1.01,1.01-1.01h3.14v-3.14c0-.56.45-1.01,1.01-1.01h0Z"/><path fill-rule="evenodd" d="m7.16,2c-2.85,0-5.16,2.31-5.16,5.16h0v9.68c0,2.85,2.31,5.16,5.16,5.16h9.68c2.85,0,5.16-2.31,5.16-5.16V7.16c0-2.85-2.31-5.16-5.16-5.16H7.16Zm-3.14,5.16c0-1.73,1.4-3.14,3.14-3.14h9.68c1.73,0,3.14,1.4,3.14,3.14h0v9.68c0,1.73-1.4,3.14-3.14,3.14H7.16c-1.73,0-3.14-1.4-3.14-3.14h0V7.16h0Z"/>',
+    }}
+  />
 )
 
 AddSquareOutline.displayName = 'AddSquareOutline'
diff --git a/packages/components/icons/src/icons/AlarmFill.tsx b/packages/components/icons/src/icons/AlarmFill.tsx
index 09ce833ce..911f8ea54 100644
--- a/packages/components/icons/src/icons/AlarmFill.tsx
+++ b/packages/components/icons/src/icons/AlarmFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m14.1,4.03c1.05.34,2.02.92,2.81,1.72,1.3,1.31,2.03,3.08,2.03,4.93,0,2.8.47,4.35.96,5.25.39.72.58,1.6.26,2.39-.36.88-1.21,1.3-2.15,1.3h-2.94c-.18.69-.58,1.29-1.13,1.72-.56.43-1.24.66-1.95.66s-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.72h0s-2.94,0-2.94,0c-.95,0-1.79-.42-2.15-1.3-.32-.79-.13-1.67.26-2.39.49-.9.96-2.44.96-5.25,0-1.85.73-3.62,2.03-4.93.79-.8,1.76-1.38,2.81-1.72.04-1.13.97-2.03,2.1-2.03s2.06.9,2.1,2.03Z"/>',
-      }}
-    />
-  )
+export const AlarmFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m14.1,4.03c1.05.34,2.02.92,2.81,1.72,1.3,1.31,2.03,3.08,2.03,4.93,0,2.8.47,4.35.96,5.25.39.72.58,1.6.26,2.39-.36.88-1.21,1.3-2.15,1.3h-2.94c-.18.69-.58,1.29-1.13,1.72-.56.43-1.24.66-1.95.66s-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.72h0s-2.94,0-2.94,0c-.95,0-1.79-.42-2.15-1.3-.32-.79-.13-1.67.26-2.39.49-.9.96-2.44.96-5.25,0-1.85.73-3.62,2.03-4.93.79-.8,1.76-1.38,2.81-1.72.04-1.13.97-2.03,2.1-2.03s2.06.9,2.1,2.03Z"/>',
+    }}
+  />
 )
 
 AlarmFill.displayName = 'AlarmFill'
diff --git a/packages/components/icons/src/icons/AlarmOffFill.tsx b/packages/components/icons/src/icons/AlarmOffFill.tsx
index 938b0cdba..2c04a0735 100644
--- a/packages/components/icons/src/icons/AlarmOffFill.tsx
+++ b/packages/components/icons/src/icons/AlarmOffFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmOffFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmOffFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m15.02,4.42c-.32-.15-.64-.28-.98-.39-.04-1.13-.98-2.03-2.14-2.03s-2.09.9-2.14,2.03c-1.07.34-2.05.92-2.85,1.72-1.32,1.31-2.06,3.08-2.06,4.93s-.2,3.1-.48,4.02c-.08.27-.04.54.08.77L15.35,4.67s-.2-.19-.33-.26Z"/><path fill-rule="evenodd" d="m18.1,7.34l3.6-3.54c.4-.39.4-1.03,0-1.43s-1.05-.39-1.45,0L2.3,20.04c-.4.39-.4,1.03,0,1.43.4.39,1.05.39,1.45,0l1.88-1.85h3.14c.18.69.59,1.29,1.15,1.72.57.43,1.26.66,1.98.66s1.41-.23,1.98-.66c.57-.43.97-1.03,1.15-1.72h0s2.98,0,2.98,0c.96,0,1.82-.43,2.19-1.3.33-.79.14-1.67-.26-2.39-.5-.9-.98-2.45-.98-5.25,0-1.17-.3-2.32-.86-3.33Z"/>',
-      }}
-    />
-  )
+export const AlarmOffFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmOffFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m15.02,4.42c-.32-.15-.64-.28-.98-.39-.04-1.13-.98-2.03-2.14-2.03s-2.09.9-2.14,2.03c-1.07.34-2.05.92-2.85,1.72-1.32,1.31-2.06,3.08-2.06,4.93s-.2,3.1-.48,4.02c-.08.27-.04.54.08.77L15.35,4.67s-.2-.19-.33-.26Z"/><path fill-rule="evenodd" d="m18.1,7.34l3.6-3.54c.4-.39.4-1.03,0-1.43s-1.05-.39-1.45,0L2.3,20.04c-.4.39-.4,1.03,0,1.43.4.39,1.05.39,1.45,0l1.88-1.85h3.14c.18.69.59,1.29,1.15,1.72.57.43,1.26.66,1.98.66s1.41-.23,1.98-.66c.57-.43.97-1.03,1.15-1.72h0s2.98,0,2.98,0c.96,0,1.82-.43,2.19-1.3.33-.79.14-1.67-.26-2.39-.5-.9-.98-2.45-.98-5.25,0-1.17-.3-2.32-.86-3.33Z"/>',
+    }}
+  />
 )
 
 AlarmOffFill.displayName = 'AlarmOffFill'
diff --git a/packages/components/icons/src/icons/AlarmOffOutline.tsx b/packages/components/icons/src/icons/AlarmOffOutline.tsx
index 949f79077..bb0299e98 100644
--- a/packages/components/icons/src/icons/AlarmOffOutline.tsx
+++ b/packages/components/icons/src/icons/AlarmOffOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmOffOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmOffOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m15.02,4.42c-.32-.15-.64-.28-.98-.39-.04-1.13-.98-2.03-2.14-2.03s-2.09.9-2.14,2.03c-1.07.34-2.05.92-2.85,1.72-1.32,1.31-2.06,3.08-2.06,4.93s-.2,3.1-.48,4.02c-.16.54.15,1.1.7,1.25.54.16,1.11-.15,1.27-.69.34-1.15.56-2.64.56-4.59,0-1.31.53-2.57,1.47-3.5.94-.93,2.21-1.45,3.54-1.45.77,0,1.53.18,2.21.51.51.25,1.12.04,1.37-.46.25-.5.04-1.11-.46-1.35Z"/><path fill-rule="evenodd" d="m18.1,7.34l3.6-3.54c.4-.39.4-1.03,0-1.43s-1.05-.39-1.45,0L2.3,20.04c-.4.39-.4,1.03,0,1.43.4.39,1.05.39,1.45,0l1.88-1.85h3.14c.18.69.59,1.29,1.15,1.72.57.43,1.26.66,1.98.66s1.41-.23,1.98-.66c.57-.43.97-1.03,1.15-1.72h0s2.98,0,2.98,0c.96,0,1.82-.43,2.19-1.3.33-.79.14-1.67-.26-2.39-.5-.9-.98-2.45-.98-5.25,0-1.17-.3-2.32-.86-3.33Zm-1.54,1.52l-8.88,8.74h10.33c.19,0,.27-.04.28-.05h0s.06-.25-.17-.66c-.71-1.29-1.23-3.2-1.23-6.21,0-.63-.12-1.24-.35-1.81Z"/>',
-      }}
-    />
-  )
+export const AlarmOffOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmOffOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m15.02,4.42c-.32-.15-.64-.28-.98-.39-.04-1.13-.98-2.03-2.14-2.03s-2.09.9-2.14,2.03c-1.07.34-2.05.92-2.85,1.72-1.32,1.31-2.06,3.08-2.06,4.93s-.2,3.1-.48,4.02c-.16.54.15,1.1.7,1.25.54.16,1.11-.15,1.27-.69.34-1.15.56-2.64.56-4.59,0-1.31.53-2.57,1.47-3.5.94-.93,2.21-1.45,3.54-1.45.77,0,1.53.18,2.21.51.51.25,1.12.04,1.37-.46.25-.5.04-1.11-.46-1.35Z"/><path fill-rule="evenodd" d="m18.1,7.34l3.6-3.54c.4-.39.4-1.03,0-1.43s-1.05-.39-1.45,0L2.3,20.04c-.4.39-.4,1.03,0,1.43.4.39,1.05.39,1.45,0l1.88-1.85h3.14c.18.69.59,1.29,1.15,1.72.57.43,1.26.66,1.98.66s1.41-.23,1.98-.66c.57-.43.97-1.03,1.15-1.72h0s2.98,0,2.98,0c.96,0,1.82-.43,2.19-1.3.33-.79.14-1.67-.26-2.39-.5-.9-.98-2.45-.98-5.25,0-1.17-.3-2.32-.86-3.33Zm-1.54,1.52l-8.88,8.74h10.33c.19,0,.27-.04.28-.05h0s.06-.25-.17-.66c-.71-1.29-1.23-3.2-1.23-6.21,0-.63-.12-1.24-.35-1.81Z"/>',
+    }}
+  />
 )
 
 AlarmOffOutline.displayName = 'AlarmOffOutline'
diff --git a/packages/components/icons/src/icons/AlarmOnFill.tsx b/packages/components/icons/src/icons/AlarmOnFill.tsx
index 6e3837a26..d6478a9e7 100644
--- a/packages/components/icons/src/icons/AlarmOnFill.tsx
+++ b/packages/components/icons/src/icons/AlarmOnFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmOnFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmOnFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.13,2.41c.33.45.24,1.07-.21,1.4-.91.67-1.66,1.55-2.17,2.57-.38.75-.62,1.56-.73,2.4-.07.55-.57.94-1.13.87-.55-.07-.95-.57-.88-1.12.13-1.06.44-2.09.93-3.05.66-1.3,1.61-2.43,2.78-3.28.45-.33,1.08-.23,1.41.21Z"/><path fill-rule="evenodd" d="m14.05,4.16c1.05.33,2.02.91,2.81,1.7,1.3,1.3,2.03,3.06,2.03,4.89,0,2.78.47,4.32.96,5.21.39.71.58,1.59.26,2.37-.36.87-1.21,1.3-2.15,1.3h-2.94c-.18.68-.58,1.28-1.13,1.71s-1.24.66-1.95.66-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.7h0s-2.93,0-2.93,0c-.95,0-1.79-.42-2.15-1.29-.32-.78-.13-1.66.26-2.37.49-.89.96-2.43.96-5.21,0-1.83.73-3.59,2.03-4.89.79-.79,1.76-1.37,2.81-1.7.04-1.12.97-2.01,2.1-2.01s2.06.89,2.1,2.01Z"/><path d="m18.29,2.2c-.45-.33-1.08-.23-1.41.21-.33.45-.24,1.07.21,1.4.91.67,1.66,1.55,2.17,2.57.38.75.62,1.56.73,2.4.07.55.57.94,1.13.87s.95-.57.88-1.12c-.13-1.06-.44-2.09-.93-3.05-.66-1.3-1.61-2.43-2.78-3.28Z"/>',
-      }}
-    />
-  )
+export const AlarmOnFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmOnFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.13,2.41c.33.45.24,1.07-.21,1.4-.91.67-1.66,1.55-2.17,2.57-.38.75-.62,1.56-.73,2.4-.07.55-.57.94-1.13.87-.55-.07-.95-.57-.88-1.12.13-1.06.44-2.09.93-3.05.66-1.3,1.61-2.43,2.78-3.28.45-.33,1.08-.23,1.41.21Z"/><path fill-rule="evenodd" d="m14.05,4.16c1.05.33,2.02.91,2.81,1.7,1.3,1.3,2.03,3.06,2.03,4.89,0,2.78.47,4.32.96,5.21.39.71.58,1.59.26,2.37-.36.87-1.21,1.3-2.15,1.3h-2.94c-.18.68-.58,1.28-1.13,1.71s-1.24.66-1.95.66-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.7h0s-2.93,0-2.93,0c-.95,0-1.79-.42-2.15-1.29-.32-.78-.13-1.66.26-2.37.49-.89.96-2.43.96-5.21,0-1.83.73-3.59,2.03-4.89.79-.79,1.76-1.37,2.81-1.7.04-1.12.97-2.01,2.1-2.01s2.06.89,2.1,2.01Z"/><path d="m18.29,2.2c-.45-.33-1.08-.23-1.41.21-.33.45-.24,1.07.21,1.4.91.67,1.66,1.55,2.17,2.57.38.75.62,1.56.73,2.4.07.55.57.94,1.13.87s.95-.57.88-1.12c-.13-1.06-.44-2.09-.93-3.05-.66-1.3-1.61-2.43-2.78-3.28Z"/>',
+    }}
+  />
 )
 
 AlarmOnFill.displayName = 'AlarmOnFill'
diff --git a/packages/components/icons/src/icons/AlarmOnOutline.tsx b/packages/components/icons/src/icons/AlarmOnOutline.tsx
index 4bcaae3e6..8d63053b1 100644
--- a/packages/components/icons/src/icons/AlarmOnOutline.tsx
+++ b/packages/components/icons/src/icons/AlarmOnOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmOnOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmOnOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.13,2.41c.33.45.24,1.07-.21,1.4-.91.67-1.66,1.55-2.17,2.57-.38.75-.62,1.56-.73,2.4-.07.55-.57.94-1.13.87-.55-.07-.95-.57-.88-1.12.13-1.06.44-2.09.93-3.05.66-1.3,1.61-2.43,2.78-3.28.45-.33,1.08-.23,1.41.21Z"/><path fill-rule="evenodd" d="m14.05,4.16c1.05.33,2.02.91,2.81,1.7,1.3,1.3,2.03,3.06,2.03,4.89,0,2.78.47,4.32.96,5.21.39.71.58,1.59.26,2.37-.36.87-1.21,1.3-2.15,1.3h-2.94c-.18.68-.58,1.28-1.13,1.71s-1.24.66-1.95.66-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.7h0s-2.93,0-2.93,0c-.95,0-1.79-.42-2.15-1.29-.32-.78-.13-1.66.26-2.37.49-.89.96-2.43.96-5.21,0-1.83.73-3.59,2.03-4.89.79-.79,1.76-1.37,2.81-1.7.04-1.12.97-2.01,2.1-2.01s2.06.89,2.1,2.01Zm-2.1,1.68c1.31,0,2.56.52,3.48,1.44.92.92,1.44,2.17,1.44,3.48,0,2.99.51,4.89,1.21,6.17.22.41.17.63.16.66h0s-.09.05-.28.05H5.93c-.18,0-.26-.04-.28-.05h0s-.06-.25.16-.66c.7-1.28,1.21-3.17,1.21-6.17,0-1.3.52-2.56,1.44-3.48.92-.92,2.18-1.44,3.48-1.44Z"/><path d="m18.29,2.2c-.45-.33-1.08-.23-1.41.21-.33.45-.24,1.07.21,1.4.91.67,1.66,1.55,2.17,2.57.38.75.62,1.56.73,2.4.07.55.57.94,1.13.87s.95-.57.88-1.12c-.13-1.06-.44-2.09-.93-3.05-.66-1.3-1.61-2.43-2.78-3.28Z"/>',
-      }}
-    />
-  )
+export const AlarmOnOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmOnOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.13,2.41c.33.45.24,1.07-.21,1.4-.91.67-1.66,1.55-2.17,2.57-.38.75-.62,1.56-.73,2.4-.07.55-.57.94-1.13.87-.55-.07-.95-.57-.88-1.12.13-1.06.44-2.09.93-3.05.66-1.3,1.61-2.43,2.78-3.28.45-.33,1.08-.23,1.41.21Z"/><path fill-rule="evenodd" d="m14.05,4.16c1.05.33,2.02.91,2.81,1.7,1.3,1.3,2.03,3.06,2.03,4.89,0,2.78.47,4.32.96,5.21.39.71.58,1.59.26,2.37-.36.87-1.21,1.3-2.15,1.3h-2.94c-.18.68-.58,1.28-1.13,1.71s-1.24.66-1.95.66-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.7h0s-2.93,0-2.93,0c-.95,0-1.79-.42-2.15-1.29-.32-.78-.13-1.66.26-2.37.49-.89.96-2.43.96-5.21,0-1.83.73-3.59,2.03-4.89.79-.79,1.76-1.37,2.81-1.7.04-1.12.97-2.01,2.1-2.01s2.06.89,2.1,2.01Zm-2.1,1.68c1.31,0,2.56.52,3.48,1.44.92.92,1.44,2.17,1.44,3.48,0,2.99.51,4.89,1.21,6.17.22.41.17.63.16.66h0s-.09.05-.28.05H5.93c-.18,0-.26-.04-.28-.05h0s-.06-.25.16-.66c.7-1.28,1.21-3.17,1.21-6.17,0-1.3.52-2.56,1.44-3.48.92-.92,2.18-1.44,3.48-1.44Z"/><path d="m18.29,2.2c-.45-.33-1.08-.23-1.41.21-.33.45-.24,1.07.21,1.4.91.67,1.66,1.55,2.17,2.57.38.75.62,1.56.73,2.4.07.55.57.94,1.13.87s.95-.57.88-1.12c-.13-1.06-.44-2.09-.93-3.05-.66-1.3-1.61-2.43-2.78-3.28Z"/>',
+    }}
+  />
 )
 
 AlarmOnOutline.displayName = 'AlarmOnOutline'
diff --git a/packages/components/icons/src/icons/AlarmOutline.tsx b/packages/components/icons/src/icons/AlarmOutline.tsx
index 751ca7be8..8e0b7102d 100644
--- a/packages/components/icons/src/icons/AlarmOutline.tsx
+++ b/packages/components/icons/src/icons/AlarmOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlarmOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlarmOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m14.1,4.03c1.05.34,2.02.92,2.81,1.72,1.3,1.31,2.03,3.08,2.03,4.93,0,2.8.47,4.35.96,5.25.39.72.58,1.6.26,2.39-.36.88-1.21,1.3-2.15,1.3h-2.94c-.18.69-.58,1.29-1.13,1.72-.56.43-1.24.66-1.95.66s-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.72h0s-2.94,0-2.94,0c-.95,0-1.79-.42-2.15-1.3-.32-.79-.13-1.67.26-2.39.49-.9.96-2.44.96-5.25,0-1.85.73-3.62,2.03-4.93.79-.8,1.76-1.38,2.81-1.72.04-1.13.97-2.03,2.1-2.03s2.06.9,2.1,2.03Zm-2.1,1.69c1.31,0,2.56.52,3.48,1.45.92.93,1.44,2.19,1.44,3.5,0,3.02.51,4.93,1.21,6.21.22.41.17.63.16.66h0s-.09.05-.28.05H5.98c-.18,0-.26-.04-.28-.05h0s-.06-.25.16-.66c.7-1.29,1.21-3.2,1.21-6.22,0-1.31.52-2.57,1.44-3.5.92-.93,2.18-1.45,3.48-1.45Z"/>',
-      }}
-    />
-  )
+export const AlarmOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlarmOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m14.1,4.03c1.05.34,2.02.92,2.81,1.72,1.3,1.31,2.03,3.08,2.03,4.93,0,2.8.47,4.35.96,5.25.39.72.58,1.6.26,2.39-.36.88-1.21,1.3-2.15,1.3h-2.94c-.18.69-.58,1.29-1.13,1.72-.56.43-1.24.66-1.95.66s-1.39-.23-1.95-.66c-.56-.43-.96-1.03-1.13-1.72h0s-2.94,0-2.94,0c-.95,0-1.79-.42-2.15-1.3-.32-.79-.13-1.67.26-2.39.49-.9.96-2.44.96-5.25,0-1.85.73-3.62,2.03-4.93.79-.8,1.76-1.38,2.81-1.72.04-1.13.97-2.03,2.1-2.03s2.06.9,2.1,2.03Zm-2.1,1.69c1.31,0,2.56.52,3.48,1.45.92.93,1.44,2.19,1.44,3.5,0,3.02.51,4.93,1.21,6.21.22.41.17.63.16.66h0s-.09.05-.28.05H5.98c-.18,0-.26-.04-.28-.05h0s-.06-.25.16-.66c.7-1.29,1.21-3.2,1.21-6.22,0-1.31.52-2.57,1.44-3.5.92-.93,2.18-1.45,3.48-1.45Z"/>',
+    }}
+  />
 )
 
 AlarmOutline.displayName = 'AlarmOutline'
diff --git a/packages/components/icons/src/icons/AlertFill.tsx b/packages/components/icons/src/icons/AlertFill.tsx
index 2382379d2..ed8ed7986 100644
--- a/packages/components/icons/src/icons/AlertFill.tsx
+++ b/packages/components/icons/src/icons/AlertFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlertFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlertFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm8.51,4.12c0-.8.65-1.45,1.45-1.45s1.45.65,1.45,1.45-.65,1.45-1.45,1.45-1.45-.65-1.45-1.45Zm.4-8.36c0-.58.47-1.05,1.05-1.05s1.05.47,1.05,1.05v4.82c0,.58-.47,1.05-1.05,1.05s-1.05-.47-1.05-1.05v-4.82Z"/>',
-      }}
-    />
-  )
+export const AlertFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlertFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm8.51,4.12c0-.8.65-1.45,1.45-1.45s1.45.65,1.45,1.45-.65,1.45-1.45,1.45-1.45-.65-1.45-1.45Zm.4-8.36c0-.58.47-1.05,1.05-1.05s1.05.47,1.05,1.05v4.82c0,.58-.47,1.05-1.05,1.05s-1.05-.47-1.05-1.05v-4.82Z"/>',
+    }}
+  />
 )
 
 AlertFill.displayName = 'AlertFill'
diff --git a/packages/components/icons/src/icons/AlertOutline.tsx b/packages/components/icons/src/icons/AlertOutline.tsx
index 1c22b3185..273feda95 100644
--- a/packages/components/icons/src/icons/AlertOutline.tsx
+++ b/packages/components/icons/src/icons/AlertOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AlertOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AlertOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,7.13c-.58,0-1.05.47-1.05,1.05v4.82c0,.58.47,1.05,1.05,1.05s1.05-.47,1.05-1.05v-4.82c0-.58-.47-1.05-1.05-1.05Zm0,7.95c-.8,0-1.45.65-1.45,1.45s.65,1.45,1.45,1.45,1.45-.65,1.45-1.45-.65-1.45-1.45-1.45Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>',
-      }}
-    />
-  )
+export const AlertOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AlertOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,7.13c-.58,0-1.05.47-1.05,1.05v4.82c0,.58.47,1.05,1.05,1.05s1.05-.47,1.05-1.05v-4.82c0-.58-.47-1.05-1.05-1.05Zm0,7.95c-.8,0-1.45.65-1.45,1.45s.65,1.45,1.45,1.45,1.45-.65,1.45-1.45-.65-1.45-1.45-1.45Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>',
+    }}
+  />
 )
 
 AlertOutline.displayName = 'AlertOutline'
diff --git a/packages/components/icons/src/icons/AllDirection.tsx b/packages/components/icons/src/icons/AllDirection.tsx
index c6d0dc896..e907a21fb 100644
--- a/packages/components/icons/src/icons/AllDirection.tsx
+++ b/packages/components/icons/src/icons/AllDirection.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AllDirection = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AllDirection"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m11.29,2.29c.39-.39,1.02-.39,1.41,0l2.77,2.77c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-1.06-1.06v5.59h5.59l-1.06-1.06c-.39-.39-.39-1.02,0-1.41.39-.39,1.02-.39,1.41,0l2.77,2.77c.39.39.39,1.02,0,1.41l-2.77,2.77c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l1.06-1.06h-5.59v5.59l1.06-1.06c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-2.77,2.77c-.39.39-1.02.39-1.41,0l-2.77-2.77c-.39-.39-.39-1.02,0-1.41.39-.39,1.02-.39,1.41,0l1.06,1.06v-5.59h-5.59l1.06,1.06c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-2.77-2.77c-.39-.39-.39-1.02,0-1.41l2.77-2.77c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-1.06,1.06h5.59v-5.59l-1.06,1.06c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l2.77-2.77Z"/>',
-      }}
-    />
-  )
+export const AllDirection = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AllDirection"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m11.29,2.29c.39-.39,1.02-.39,1.41,0l2.77,2.77c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-1.06-1.06v5.59h5.59l-1.06-1.06c-.39-.39-.39-1.02,0-1.41.39-.39,1.02-.39,1.41,0l2.77,2.77c.39.39.39,1.02,0,1.41l-2.77,2.77c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l1.06-1.06h-5.59v5.59l1.06-1.06c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-2.77,2.77c-.39.39-1.02.39-1.41,0l-2.77-2.77c-.39-.39-.39-1.02,0-1.41.39-.39,1.02-.39,1.41,0l1.06,1.06v-5.59h-5.59l1.06,1.06c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-2.77-2.77c-.39-.39-.39-1.02,0-1.41l2.77-2.77c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-1.06,1.06h5.59v-5.59l-1.06,1.06c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l2.77-2.77Z"/>',
+    }}
+  />
 )
 
 AllDirection.displayName = 'AllDirection'
diff --git a/packages/components/icons/src/icons/ArrowDoubleLeft.tsx b/packages/components/icons/src/icons/ArrowDoubleLeft.tsx
index cf1004a54..7c345c20d 100644
--- a/packages/components/icons/src/icons/ArrowDoubleLeft.tsx
+++ b/packages/components/icons/src/icons/ArrowDoubleLeft.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowDoubleLeft = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowDoubleLeft"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m13.46,2.29c.39.39.39,1.02,0,1.41L5.15,12l8.31,8.29c.39.39.39,1.02,0,1.41-.39.39-1.03.39-1.42,0L3.51,13.2c-.16-.15-.29-.34-.38-.54-.09-.21-.14-.43-.14-.66s.05-.45.14-.66c.09-.2.22-.39.38-.54L12.04,2.29c.39-.39,1.03-.39,1.42,0Zm7.24,0c.39.39.39,1.02,0,1.41l-8.33,8.29,8.33,8.29c.39.39.39,1.02,0,1.41-.39.39-1.03.39-1.42,0l-8.56-8.52c-.31-.32-.49-.74-.49-1.18s.17-.87.49-1.18h0S19.29,2.29,19.29,2.29c.39-.39,1.03-.39,1.42,0Z"/>',
-      }}
-    />
-  )
+export const ArrowDoubleLeft = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowDoubleLeft"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m13.46,2.29c.39.39.39,1.02,0,1.41L5.15,12l8.31,8.29c.39.39.39,1.02,0,1.41-.39.39-1.03.39-1.42,0L3.51,13.2c-.16-.15-.29-.34-.38-.54-.09-.21-.14-.43-.14-.66s.05-.45.14-.66c.09-.2.22-.39.38-.54L12.04,2.29c.39-.39,1.03-.39,1.42,0Zm7.24,0c.39.39.39,1.02,0,1.41l-8.33,8.29,8.33,8.29c.39.39.39,1.02,0,1.41-.39.39-1.03.39-1.42,0l-8.56-8.52c-.31-.32-.49-.74-.49-1.18s.17-.87.49-1.18h0S19.29,2.29,19.29,2.29c.39-.39,1.03-.39,1.42,0Z"/>',
+    }}
+  />
 )
 
 ArrowDoubleLeft.displayName = 'ArrowDoubleLeft'
diff --git a/packages/components/icons/src/icons/ArrowDoubleRight.tsx b/packages/components/icons/src/icons/ArrowDoubleRight.tsx
index e2f84498c..f788dfd5f 100644
--- a/packages/components/icons/src/icons/ArrowDoubleRight.tsx
+++ b/packages/components/icons/src/icons/ArrowDoubleRight.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowDoubleRight = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowDoubleRight"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m10.54,2.29c-.39.39-.39,1.02,0,1.41l8.31,8.29-8.31,8.29c-.39.39-.39,1.02,0,1.41.39.39,1.03.39,1.42,0l8.53-8.51c.16-.15.29-.34.38-.54.09-.21.14-.43.14-.66s-.05-.45-.14-.66c-.09-.2-.22-.39-.38-.54L11.96,2.29c-.39-.39-1.03-.39-1.42,0Zm-7.24,0c-.39.39-.39,1.02,0,1.41l8.33,8.29L3.29,20.29c-.39.39-.39,1.02,0,1.41.39.39,1.03.39,1.42,0l8.56-8.52c.31-.32.49-.74.49-1.18s-.17-.87-.49-1.18h0S4.71,2.29,4.71,2.29c-.39-.39-1.03-.39-1.42,0Z"/>',
-      }}
-    />
-  )
+export const ArrowDoubleRight = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowDoubleRight"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m10.54,2.29c-.39.39-.39,1.02,0,1.41l8.31,8.29-8.31,8.29c-.39.39-.39,1.02,0,1.41.39.39,1.03.39,1.42,0l8.53-8.51c.16-.15.29-.34.38-.54.09-.21.14-.43.14-.66s-.05-.45-.14-.66c-.09-.2-.22-.39-.38-.54L11.96,2.29c-.39-.39-1.03-.39-1.42,0Zm-7.24,0c-.39.39-.39,1.02,0,1.41l8.33,8.29L3.29,20.29c-.39.39-.39,1.02,0,1.41.39.39,1.03.39,1.42,0l8.56-8.52c.31-.32.49-.74.49-1.18s-.17-.87-.49-1.18h0S4.71,2.29,4.71,2.29c-.39-.39-1.03-.39-1.42,0Z"/>',
+    }}
+  />
 )
 
 ArrowDoubleRight.displayName = 'ArrowDoubleRight'
diff --git a/packages/components/icons/src/icons/ArrowHorizontalDown.tsx b/packages/components/icons/src/icons/ArrowHorizontalDown.tsx
index 8e5145c69..c609d16ca 100644
--- a/packages/components/icons/src/icons/ArrowHorizontalDown.tsx
+++ b/packages/components/icons/src/icons/ArrowHorizontalDown.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowHorizontalDown = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowHorizontalDown"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2.33,7.3c.43-.4,1.14-.4,1.57,0l8.1,7.48,8.1-7.48c.43-.4,1.14-.4,1.57,0,.43.4.43,1.06,0,1.47l-8.34,7.7c-.17.17-.37.3-.6.39-.23.09-.48.14-.73.14s-.5-.05-.73-.14c-.23-.09-.43-.22-.6-.39L2.33,8.77c-.43-.4-.43-1.06,0-1.47Z"/>',
-      }}
-    />
-  )
+export const ArrowHorizontalDown = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowHorizontalDown"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2.33,7.3c.43-.4,1.14-.4,1.57,0l8.1,7.48,8.1-7.48c.43-.4,1.14-.4,1.57,0,.43.4.43,1.06,0,1.47l-8.34,7.7c-.17.17-.37.3-.6.39-.23.09-.48.14-.73.14s-.5-.05-.73-.14c-.23-.09-.43-.22-.6-.39L2.33,8.77c-.43-.4-.43-1.06,0-1.47Z"/>',
+    }}
+  />
 )
 
 ArrowHorizontalDown.displayName = 'ArrowHorizontalDown'
diff --git a/packages/components/icons/src/icons/ArrowHorizontalUp.tsx b/packages/components/icons/src/icons/ArrowHorizontalUp.tsx
index f18adced4..0e5be4f3e 100644
--- a/packages/components/icons/src/icons/ArrowHorizontalUp.tsx
+++ b/packages/components/icons/src/icons/ArrowHorizontalUp.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowHorizontalUp = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowHorizontalUp"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,9.19l-8.1,7.51c-.43.4-1.14.4-1.57,0-.43-.4-.43-1.05,0-1.45l8.34-7.72c.17-.16.37-.29.6-.38.23-.09.48-.14.73-.14s.5.05.73.14c.23.09.43.22.6.38l8.34,7.72c.43.4.43,1.05,0,1.45-.43.4-1.14.4-1.57,0l-8.1-7.51Z"/>',
-      }}
-    />
-  )
+export const ArrowHorizontalUp = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowHorizontalUp"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,9.19l-8.1,7.51c-.43.4-1.14.4-1.57,0-.43-.4-.43-1.05,0-1.45l8.34-7.72c.17-.16.37-.29.6-.38.23-.09.48-.14.73-.14s.5.05.73.14c.23.09.43.22.6.38l8.34,7.72c.43.4.43,1.05,0,1.45-.43.4-1.14.4-1.57,0l-8.1-7.51Z"/>',
+    }}
+  />
 )
 
 ArrowHorizontalUp.displayName = 'ArrowHorizontalUp'
diff --git a/packages/components/icons/src/icons/ArrowLeft.tsx b/packages/components/icons/src/icons/ArrowLeft.tsx
index d66ba6185..8e3576aca 100644
--- a/packages/components/icons/src/icons/ArrowLeft.tsx
+++ b/packages/components/icons/src/icons/ArrowLeft.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowLeft = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowLeft"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m8.54,6.28c.4.38.41,1.01.03,1.4l-3.22,3.33h15.65c.55,0,1,.44,1,.99s-.45.99-1,.99H5.35l3.22,3.33c.38.4.37,1.02-.03,1.4-.4.38-1.03.37-1.41-.03l-4.85-5.01c-.37-.38-.37-.99,0-1.37l4.85-5.01c.38-.4,1.02-.41,1.41-.03Z"/>',
-      }}
-    />
-  )
+export const ArrowLeft = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowLeft"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m8.54,6.28c.4.38.41,1.01.03,1.4l-3.22,3.33h15.65c.55,0,1,.44,1,.99s-.45.99-1,.99H5.35l3.22,3.33c.38.4.37,1.02-.03,1.4-.4.38-1.03.37-1.41-.03l-4.85-5.01c-.37-.38-.37-.99,0-1.37l4.85-5.01c.38-.4,1.02-.41,1.41-.03Z"/>',
+    }}
+  />
 )
 
 ArrowLeft.displayName = 'ArrowLeft'
diff --git a/packages/components/icons/src/icons/ArrowRight.tsx b/packages/components/icons/src/icons/ArrowRight.tsx
index 2fa818eff..dbc1ee057 100644
--- a/packages/components/icons/src/icons/ArrowRight.tsx
+++ b/packages/components/icons/src/icons/ArrowRight.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowRight = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowRight"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m15.46,6.28c-.4.38-.41,1.01-.03,1.4l3.22,3.33H3c-.55,0-1,.44-1,.99s.45.99,1,.99h15.65l-3.22,3.33c-.38.4-.37,1.02.03,1.4.4.38,1.03.37,1.41-.03l4.85-5.01c.37-.38.37-.99,0-1.37l-4.85-5.01c-.38-.4-1.02-.41-1.41-.03Z"/>',
-      }}
-    />
-  )
+export const ArrowRight = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowRight"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m15.46,6.28c-.4.38-.41,1.01-.03,1.4l3.22,3.33H3c-.55,0-1,.44-1,.99s.45.99,1,.99h15.65l-3.22,3.33c-.38.4-.37,1.02.03,1.4.4.38,1.03.37,1.41-.03l4.85-5.01c.37-.38.37-.99,0-1.37l-4.85-5.01c-.38-.4-1.02-.41-1.41-.03Z"/>',
+    }}
+  />
 )
 
 ArrowRight.displayName = 'ArrowRight'
diff --git a/packages/components/icons/src/icons/ArrowVerticalLeft.tsx b/packages/components/icons/src/icons/ArrowVerticalLeft.tsx
index a0d2bba47..248fca65d 100644
--- a/packages/components/icons/src/icons/ArrowVerticalLeft.tsx
+++ b/packages/components/icons/src/icons/ArrowVerticalLeft.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowVerticalLeft = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowVerticalLeft"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m16.7,2.28c.38.38.4,1.02.03,1.41l-7.69,8.31,7.69,8.31c.37.4.36,1.03-.03,1.41-.38.38-.99.37-1.36-.03l-7.87-8.51c-.15-.16-.27-.34-.35-.54-.08-.21-.12-.43-.12-.65s.04-.44.12-.65c.08-.2.2-.38.35-.54L15.34,2.31c.37-.4.98-.41,1.36-.03Z"/>',
-      }}
-    />
-  )
+export const ArrowVerticalLeft = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowVerticalLeft"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m16.7,2.28c.38.38.4,1.02.03,1.41l-7.69,8.31,7.69,8.31c.37.4.36,1.03-.03,1.41-.38.38-.99.37-1.36-.03l-7.87-8.51c-.15-.16-.27-.34-.35-.54-.08-.21-.12-.43-.12-.65s.04-.44.12-.65c.08-.2.2-.38.35-.54L15.34,2.31c.37-.4.98-.41,1.36-.03Z"/>',
+    }}
+  />
 )
 
 ArrowVerticalLeft.displayName = 'ArrowVerticalLeft'
diff --git a/packages/components/icons/src/icons/ArrowVerticalRight.tsx b/packages/components/icons/src/icons/ArrowVerticalRight.tsx
index 25447b83a..a7d028a2e 100644
--- a/packages/components/icons/src/icons/ArrowVerticalRight.tsx
+++ b/packages/components/icons/src/icons/ArrowVerticalRight.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ArrowVerticalRight = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ArrowVerticalRight"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.3,2.28c-.38.38-.4,1.02-.03,1.41l7.69,8.31-7.69,8.31c-.37.4-.36,1.03.03,1.41.38.38.99.37,1.36-.03l7.87-8.51c.15-.16.27-.34.35-.54.08-.21.12-.43.12-.65s-.04-.44-.12-.65c-.08-.2-.2-.38-.35-.54L8.66,2.31c-.37-.4-.98-.41-1.36-.03Z"/>',
-      }}
-    />
-  )
+export const ArrowVerticalRight = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ArrowVerticalRight"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.3,2.28c-.38.38-.4,1.02-.03,1.41l7.69,8.31-7.69,8.31c-.37.4-.36,1.03.03,1.41.38.38.99.37,1.36-.03l7.87-8.51c.15-.16.27-.34.35-.54.08-.21.12-.43.12-.65s-.04-.44-.12-.65c-.08-.2-.2-.38-.35-.54L8.66,2.31c-.37-.4-.98-.41-1.36-.03Z"/>',
+    }}
+  />
 )
 
 ArrowVerticalRight.displayName = 'ArrowVerticalRight'
diff --git a/packages/components/icons/src/icons/AttachFile.tsx b/packages/components/icons/src/icons/AttachFile.tsx
index 2f15b3f7a..341080c02 100644
--- a/packages/components/icons/src/icons/AttachFile.tsx
+++ b/packages/components/icons/src/icons/AttachFile.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const AttachFile = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="AttachFile"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.07,3.31c.84-.84,1.99-1.31,3.18-1.31h3.49c1.19,0,2.34.47,3.18,1.31.84.84,1.32,1.97,1.32,3.15v11.77c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1V6.46c0-.65-.26-1.28-.73-1.74s-1.1-.72-1.76-.72h-3.49c-.66,0-1.29.26-1.76.72s-.73,1.09-.73,1.74v11.77c0,.47.19.92.52,1.25.33.33.79.52,1.26.52h1.4c.47,0,.93-.19,1.26-.52.33-.33.52-.78.52-1.25V7.85c0-.1-.04-.2-.11-.27-.07-.07-.17-.11-.27-.11h-.7c-.1,0-.2.04-.27.11-.07.07-.11.17-.11.27v7.62c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1v-7.62c0-.63.25-1.24.7-1.69.45-.45,1.06-.7,1.7-.7h.7c.64,0,1.25.25,1.7.7.45.45.7,1.05.7,1.69v10.38c0,1-.4,1.96-1.11,2.67-.71.71-1.68,1.1-2.69,1.1h-1.4c-1.01,0-1.98-.4-2.69-1.1-.71-.71-1.11-1.67-1.11-2.67V6.46c0-1.18.47-2.32,1.32-3.15Z"/>',
-      }}
-    />
-  )
+export const AttachFile = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="AttachFile"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.07,3.31c.84-.84,1.99-1.31,3.18-1.31h3.49c1.19,0,2.34.47,3.18,1.31.84.84,1.32,1.97,1.32,3.15v11.77c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1V6.46c0-.65-.26-1.28-.73-1.74s-1.1-.72-1.76-.72h-3.49c-.66,0-1.29.26-1.76.72s-.73,1.09-.73,1.74v11.77c0,.47.19.92.52,1.25.33.33.79.52,1.26.52h1.4c.47,0,.93-.19,1.26-.52.33-.33.52-.78.52-1.25V7.85c0-.1-.04-.2-.11-.27-.07-.07-.17-.11-.27-.11h-.7c-.1,0-.2.04-.27.11-.07.07-.11.17-.11.27v7.62c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1v-7.62c0-.63.25-1.24.7-1.69.45-.45,1.06-.7,1.7-.7h.7c.64,0,1.25.25,1.7.7.45.45.7,1.05.7,1.69v10.38c0,1-.4,1.96-1.11,2.67-.71.71-1.68,1.1-2.69,1.1h-1.4c-1.01,0-1.98-.4-2.69-1.1-.71-.71-1.11-1.67-1.11-2.67V6.46c0-1.18.47-2.32,1.32-3.15Z"/>',
+    }}
+  />
 )
 
 AttachFile.displayName = 'AttachFile'
diff --git a/packages/components/icons/src/icons/Block.tsx b/packages/components/icons/src/icons/Block.tsx
index b6b017c74..301fac4e2 100644
--- a/packages/components/icons/src/icons/Block.tsx
+++ b/packages/components/icons/src/icons/Block.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Block = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Block"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4.84,18.98s.05.07.08.1.06.06.1.08c1.8,1.76,4.26,2.84,6.98,2.84,5.52,0,10-4.48,10-10,0-2.71-1.08-5.18-2.84-6.98-.03-.03-.06-.07-.09-.1-.03-.03-.06-.06-.1-.09-1.8-1.76-4.26-2.84-6.98-2.84C6.48,2,2,6.48,2,12c0,2.72,1.08,5.18,2.84,6.98Zm-.84-6.98c0-4.42,3.58-8,8-8,1.85,0,3.55.63,4.91,1.68l-11.23,11.23c-1.05-1.35-1.68-3.06-1.68-4.91Zm14.32-4.91c1.05,1.35,1.68,3.06,1.68,4.91,0,4.42-3.58,8-8,8-1.85,0-3.55-.63-4.91-1.68l11.23-11.23Z"/>',
-      }}
-    />
-  )
+export const Block = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Block"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4.84,18.98s.05.07.08.1.06.06.1.08c1.8,1.76,4.26,2.84,6.98,2.84,5.52,0,10-4.48,10-10,0-2.71-1.08-5.18-2.84-6.98-.03-.03-.06-.07-.09-.1-.03-.03-.06-.06-.1-.09-1.8-1.76-4.26-2.84-6.98-2.84C6.48,2,2,6.48,2,12c0,2.72,1.08,5.18,2.84,6.98Zm-.84-6.98c0-4.42,3.58-8,8-8,1.85,0,3.55.63,4.91,1.68l-11.23,11.23c-1.05-1.35-1.68-3.06-1.68-4.91Zm14.32-4.91c1.05,1.35,1.68,3.06,1.68,4.91,0,4.42-3.58,8-8,8-1.85,0-3.55-.63-4.91-1.68l11.23-11.23Z"/>',
+    }}
+  />
 )
 
 Block.displayName = 'Block'
diff --git a/packages/components/icons/src/icons/BookmarkFill.tsx b/packages/components/icons/src/icons/BookmarkFill.tsx
index 108e2e928..e4ebda569 100644
--- a/packages/components/icons/src/icons/BookmarkFill.tsx
+++ b/packages/components/icons/src/icons/BookmarkFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const BookmarkFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="BookmarkFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m4.5,5.48v15.52c0,.41.25.75.58.91.33.17.74.08,1.07-.17l5.85-4.98,5.85,4.98c.33.25.66.33,1.07.17.33-.17.58-.5.58-.91V5.48c-.08-1.91-1.65-3.48-3.46-3.48H7.88c-1.9,0-3.38,1.58-3.38,3.48Z"/>',
-      }}
-    />
-  )
+export const BookmarkFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="BookmarkFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m4.5,5.48v15.52c0,.41.25.75.58.91.33.17.74.08,1.07-.17l5.85-4.98,5.85,4.98c.33.25.66.33,1.07.17.33-.17.58-.5.58-.91V5.48c-.08-1.91-1.65-3.48-3.46-3.48H7.88c-1.9,0-3.38,1.58-3.38,3.48Z"/>',
+    }}
+  />
 )
 
 BookmarkFill.displayName = 'BookmarkFill'
diff --git a/packages/components/icons/src/icons/BookmarkOutline.tsx b/packages/components/icons/src/icons/BookmarkOutline.tsx
index 03bec3d3c..bb0123720 100644
--- a/packages/components/icons/src/icons/BookmarkOutline.tsx
+++ b/packages/components/icons/src/icons/BookmarkOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const BookmarkOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="BookmarkOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4.5,5.44c0-1.9,1.53-3.44,3.42-3.44h8.15c1.89,0,3.42,1.54,3.42,3.44v15.57c0,.38-.22.73-.57.89-.35.16-.75.11-1.04-.14l-5.89-5.01-5.89,5.01c-.29.25-.7.3-1.04.14-.35-.16-.57-.51-.57-.89V5.44Zm3.42-1.48c-.81,0-1.47.66-1.47,1.48v13.45l4.91-4.18c.36-.31.9-.31,1.26,0l4.91,4.18V5.44c0-.81-.66-1.48-1.47-1.48H7.92Z"/>',
-      }}
-    />
-  )
+export const BookmarkOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="BookmarkOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4.5,5.44c0-1.9,1.53-3.44,3.42-3.44h8.15c1.89,0,3.42,1.54,3.42,3.44v15.57c0,.38-.22.73-.57.89-.35.16-.75.11-1.04-.14l-5.89-5.01-5.89,5.01c-.29.25-.7.3-1.04.14-.35-.16-.57-.51-.57-.89V5.44Zm3.42-1.48c-.81,0-1.47.66-1.47,1.48v13.45l4.91-4.18c.36-.31.9-.31,1.26,0l4.91,4.18V5.44c0-.81-.66-1.48-1.47-1.48H7.92Z"/>',
+    }}
+  />
 )
 
 BookmarkOutline.displayName = 'BookmarkOutline'
diff --git a/packages/components/icons/src/icons/BoxFill.tsx b/packages/components/icons/src/icons/BoxFill.tsx
index 377eaece4..1c502e674 100644
--- a/packages/components/icons/src/icons/BoxFill.tsx
+++ b/packages/components/icons/src/icons/BoxFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const BoxFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="BoxFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m2,9.69v9.87c0,.64.24,1.21.73,1.7.4.4,1.05.73,1.69.73h15.16c.64,0,1.21-.24,1.69-.73.4-.4.73-1.05.73-1.7v-9.87H2Zm12.01,6.88h3.46c.56,0,.96.4.96.97s-.4.97-.96.97h-3.46c-.56,0-.96-.4-.96-.97s.4-.97.96-.97Zm-3.06-14.58h-3.55c-.64.08-1.37.24-1.93.64-.56.32-.96.81-1.29,1.46l-1.78,3.36h8.56V2Zm8.79,2.11c-.32-.64-.81-1.13-1.37-1.54-.56-.4-1.29-.57-1.93-.57h-3.55v5.46h8.56l-1.71-3.36h0Z"/>',
-      }}
-    />
-  )
+export const BoxFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="BoxFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m2,9.69v9.87c0,.64.24,1.21.73,1.7.4.4,1.05.73,1.69.73h15.16c.64,0,1.21-.24,1.69-.73.4-.4.73-1.05.73-1.7v-9.87H2Zm12.01,6.88h3.46c.56,0,.96.4.96.97s-.4.97-.96.97h-3.46c-.56,0-.96-.4-.96-.97s.4-.97.96-.97Zm-3.06-14.58h-3.55c-.64.08-1.37.24-1.93.64-.56.32-.96.81-1.29,1.46l-1.78,3.36h8.56V2Zm8.79,2.11c-.32-.64-.81-1.13-1.37-1.54-.56-.4-1.29-.57-1.93-.57h-3.55v5.46h8.56l-1.71-3.36h0Z"/>',
+    }}
+  />
 )
 
 BoxFill.displayName = 'BoxFill'
diff --git a/packages/components/icons/src/icons/BoxOutline.tsx b/packages/components/icons/src/icons/BoxOutline.tsx
index 02e4b1d4b..d806a4713 100644
--- a/packages/components/icons/src/icons/BoxOutline.tsx
+++ b/packages/components/icons/src/icons/BoxOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const BoxOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="BoxOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m14.07,18.52h3.47c.54,0,.97-.43.97-.98s-.43-.98-.97-.98h-3.47c-.54,0-.97.43-.97.98s.43.98.97.98Z"/><path fill-rule="evenodd" d="m21.98,8.5c0-.07-.02-.12-.04-.18-.02-.07-.02-.13-.05-.19v-.03l-2.01-4.01c-.31-.62-.79-1.15-1.38-1.52-.59-.37-1.27-.57-1.97-.57H7.44c-.68.02-1.35.22-1.92.59-.57.37-1.03.88-1.34,1.48l-2.07,4.01s0,.02,0,.03c-.02.06-.03.12-.05.18-.02.07-.03.12-.04.19v11.14c0,.62.25,1.23.69,1.67.44.45,1.04.69,1.67.69h15.27c.62,0,1.22-.25,1.67-.69.44-.44.69-1.04.69-1.67v-11.14h-.02Zm-4.51-4.28c.28.18.52.43.67.73l1.31,2.6h-6.46v-3.61h3.55c.33,0,.67.09.95.27h0Zm-11.55.74v-.02c.15-.29.37-.54.65-.72.27-.18.59-.28.91-.28h3.53v3.6h-6.43l1.34-2.58Zm14.12,14.67c0,.11-.04.22-.12.29-.08.07-.18.12-.29.12H4.36c-.11,0-.22-.04-.29-.12-.07-.08-.12-.18-.12-.29v-10.13h16.09v10.13Z"/>',
-      }}
-    />
-  )
+export const BoxOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="BoxOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m14.07,18.52h3.47c.54,0,.97-.43.97-.98s-.43-.98-.97-.98h-3.47c-.54,0-.97.43-.97.98s.43.98.97.98Z"/><path fill-rule="evenodd" d="m21.98,8.5c0-.07-.02-.12-.04-.18-.02-.07-.02-.13-.05-.19v-.03l-2.01-4.01c-.31-.62-.79-1.15-1.38-1.52-.59-.37-1.27-.57-1.97-.57H7.44c-.68.02-1.35.22-1.92.59-.57.37-1.03.88-1.34,1.48l-2.07,4.01s0,.02,0,.03c-.02.06-.03.12-.05.18-.02.07-.03.12-.04.19v11.14c0,.62.25,1.23.69,1.67.44.45,1.04.69,1.67.69h15.27c.62,0,1.22-.25,1.67-.69.44-.44.69-1.04.69-1.67v-11.14h-.02Zm-4.51-4.28c.28.18.52.43.67.73l1.31,2.6h-6.46v-3.61h3.55c.33,0,.67.09.95.27h0Zm-11.55.74v-.02c.15-.29.37-.54.65-.72.27-.18.59-.28.91-.28h3.53v3.6h-6.43l1.34-2.58Zm14.12,14.67c0,.11-.04.22-.12.29-.08.07-.18.12-.29.12H4.36c-.11,0-.22-.04-.29-.12-.07-.08-.12-.18-.12-.29v-10.13h16.09v10.13Z"/>',
+    }}
+  />
 )
 
 BoxOutline.displayName = 'BoxOutline'
diff --git a/packages/components/icons/src/icons/BurgerMenu.tsx b/packages/components/icons/src/icons/BurgerMenu.tsx
index 77e0f367b..20aeefe2c 100644
--- a/packages/components/icons/src/icons/BurgerMenu.tsx
+++ b/packages/components/icons/src/icons/BurgerMenu.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const BurgerMenu = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="BurgerMenu"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,5.12c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Zm0,6.88c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Zm0,6.88c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Z"/>',
-      }}
-    />
-  )
+export const BurgerMenu = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="BurgerMenu"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,5.12c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Zm0,6.88c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Zm0,6.88c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Z"/>',
+    }}
+  />
 )
 
 BurgerMenu.displayName = 'BurgerMenu'
diff --git a/packages/components/icons/src/icons/CalendarDotFill.tsx b/packages/components/icons/src/icons/CalendarDotFill.tsx
index 914d7836c..888ac18ad 100644
--- a/packages/components/icons/src/icons/CalendarDotFill.tsx
+++ b/packages/components/icons/src/icons/CalendarDotFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarDotFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarDotFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m15.25,14.14c-.8,0-1.45.62-1.45,1.39v1.46c0,.77.65,1.39,1.45,1.39h1.52c.8,0,1.45-.62,1.45-1.39v-1.46c0-.77-.65-1.39-1.45-1.39h-1.52Z"/><path fill-rule="evenodd" d="m7.58,2c.64,0,1.16.5,1.16,1.11v.58h6.51v-.58c0-.61.52-1.11,1.16-1.11s1.16.5,1.16,1.11v.58h.61c2.1,0,3.81,1.63,3.81,3.65v11.01c0,2.02-1.7,3.65-3.81,3.65H5.81c-2.11,0-3.81-1.64-3.81-3.65V7.34c0-2.02,1.71-3.65,3.81-3.65h.61v-.58c0-.61.52-1.11,1.16-1.11Zm12.09,9H4.32v7.35c0,.79.66,1.43,1.48,1.43h12.38c.82,0,1.48-.63,1.48-1.42v-7.36Z"/>',
-      }}
-    />
-  )
+export const CalendarDotFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarDotFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m15.25,14.14c-.8,0-1.45.62-1.45,1.39v1.46c0,.77.65,1.39,1.45,1.39h1.52c.8,0,1.45-.62,1.45-1.39v-1.46c0-.77-.65-1.39-1.45-1.39h-1.52Z"/><path fill-rule="evenodd" d="m7.58,2c.64,0,1.16.5,1.16,1.11v.58h6.51v-.58c0-.61.52-1.11,1.16-1.11s1.16.5,1.16,1.11v.58h.61c2.1,0,3.81,1.63,3.81,3.65v11.01c0,2.02-1.7,3.65-3.81,3.65H5.81c-2.11,0-3.81-1.64-3.81-3.65V7.34c0-2.02,1.71-3.65,3.81-3.65h.61v-.58c0-.61.52-1.11,1.16-1.11Zm12.09,9H4.32v7.35c0,.79.66,1.43,1.48,1.43h12.38c.82,0,1.48-.63,1.48-1.42v-7.36Z"/>',
+    }}
+  />
 )
 
 CalendarDotFill.displayName = 'CalendarDotFill'
diff --git a/packages/components/icons/src/icons/CalendarDotOutline.tsx b/packages/components/icons/src/icons/CalendarDotOutline.tsx
index 3c1d23803..204f0a505 100644
--- a/packages/components/icons/src/icons/CalendarDotOutline.tsx
+++ b/packages/components/icons/src/icons/CalendarDotOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarDotOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarDotOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m15.25,14.14c-.8,0-1.45.62-1.45,1.39v1.46c0,.77.65,1.39,1.45,1.39h1.52c.8,0,1.45-.62,1.45-1.39v-1.46c0-.77-.65-1.39-1.45-1.39h-1.52Z"/><path fill-rule="evenodd" d="m8.74,3.11c0-.61-.52-1.11-1.16-1.11s-1.16.5-1.16,1.11v.58h-.61c-2.11,0-3.81,1.64-3.81,3.65v11c0,2.01,1.7,3.65,3.81,3.65h12.38c2.11,0,3.81-1.63,3.81-3.65V7.34c0-2.02-1.71-3.65-3.81-3.65h-.61v-.58c0-.61-.52-1.11-1.16-1.11s-1.16.5-1.16,1.11v.58h-6.51v-.58Zm-2.93,2.81h.61v.58c0,.61.52,1.11,1.16,1.11s1.16-.5,1.16-1.11v-.58h6.51v.58c0,.61.52,1.11,1.16,1.11s1.16-.5,1.16-1.11v-.58h.61c.83,0,1.49.64,1.49,1.42v1.43H4.32v-1.43c0-.79.67-1.43,1.49-1.43Zm-1.49,5.08h15.35v7.36c0,.79-.66,1.42-1.48,1.42H5.81c-.82,0-1.48-.64-1.48-1.43v-7.35Z"/>',
-      }}
-    />
-  )
+export const CalendarDotOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarDotOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m15.25,14.14c-.8,0-1.45.62-1.45,1.39v1.46c0,.77.65,1.39,1.45,1.39h1.52c.8,0,1.45-.62,1.45-1.39v-1.46c0-.77-.65-1.39-1.45-1.39h-1.52Z"/><path fill-rule="evenodd" d="m8.74,3.11c0-.61-.52-1.11-1.16-1.11s-1.16.5-1.16,1.11v.58h-.61c-2.11,0-3.81,1.64-3.81,3.65v11c0,2.01,1.7,3.65,3.81,3.65h12.38c2.11,0,3.81-1.63,3.81-3.65V7.34c0-2.02-1.71-3.65-3.81-3.65h-.61v-.58c0-.61-.52-1.11-1.16-1.11s-1.16.5-1.16,1.11v.58h-6.51v-.58Zm-2.93,2.81h.61v.58c0,.61.52,1.11,1.16,1.11s1.16-.5,1.16-1.11v-.58h6.51v.58c0,.61.52,1.11,1.16,1.11s1.16-.5,1.16-1.11v-.58h.61c.83,0,1.49.64,1.49,1.42v1.43H4.32v-1.43c0-.79.67-1.43,1.49-1.43Zm-1.49,5.08h15.35v7.36c0,.79-.66,1.42-1.48,1.42H5.81c-.82,0-1.48-.64-1.48-1.43v-7.35Z"/>',
+    }}
+  />
 )
 
 CalendarDotOutline.displayName = 'CalendarDotOutline'
diff --git a/packages/components/icons/src/icons/CalendarFill.tsx b/packages/components/icons/src/icons/CalendarFill.tsx
index fbcff87ba..80963a688 100644
--- a/packages/components/icons/src/icons/CalendarFill.tsx
+++ b/packages/components/icons/src/icons/CalendarFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m6.63,12.29c-.58,0-1.04.45-1.04,1s.47,1,1.04,1h7.16c.58,0,1.04-.45,1.04-1s-.47-1-1.04-1h-7.16Zm0,3c-.58,0-1.04.45-1.04,1s.47,1,1.04,1h3.58c.58,0,1.04-.45,1.04-1s-.47-1-1.04-1h-3.58Z"/><path fill-rule="evenodd" d="m8.57,3c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-.75c-2.06,0-3.73,1.6-3.73,3.57v11.14c0,1.97,1.66,3.57,3.73,3.57h12.55c2.06,0,3.73-1.59,3.73-3.57V7.28c0-1.97-1.67-3.57-3.73-3.57h-.75v-.71c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-6.87v-.71Zm-4.48,7.86h15.82v7.58c0,.87-.73,1.57-1.64,1.57H5.73c-.9,0-1.64-.7-1.64-1.57v-7.57Z"/>',
-      }}
-    />
-  )
+export const CalendarFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m6.63,12.29c-.58,0-1.04.45-1.04,1s.47,1,1.04,1h7.16c.58,0,1.04-.45,1.04-1s-.47-1-1.04-1h-7.16Zm0,3c-.58,0-1.04.45-1.04,1s.47,1,1.04,1h3.58c.58,0,1.04-.45,1.04-1s-.47-1-1.04-1h-3.58Z"/><path fill-rule="evenodd" d="m8.57,3c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-.75c-2.06,0-3.73,1.6-3.73,3.57v11.14c0,1.97,1.66,3.57,3.73,3.57h12.55c2.06,0,3.73-1.59,3.73-3.57V7.28c0-1.97-1.67-3.57-3.73-3.57h-.75v-.71c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-6.87v-.71Zm-4.48,7.86h15.82v7.58c0,.87-.73,1.57-1.64,1.57H5.73c-.9,0-1.64-.7-1.64-1.57v-7.57Z"/>',
+    }}
+  />
 )
 
 CalendarFill.displayName = 'CalendarFill'
diff --git a/packages/components/icons/src/icons/CalendarOutline.tsx b/packages/components/icons/src/icons/CalendarOutline.tsx
index 04d99a425..34cb900fd 100644
--- a/packages/components/icons/src/icons/CalendarOutline.tsx
+++ b/packages/components/icons/src/icons/CalendarOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.52,2c.58,0,1.04.45,1.04,1v.71h6.87v-.71c0-.55.47-1,1.04-1s1.04.45,1.04,1v.71h.75c2.06,0,3.73,1.59,3.73,3.57v11.15c0,1.97-1.67,3.57-3.73,3.57H5.73c-2.06,0-3.73-1.6-3.73-3.57V7.29c0-1.97,1.67-3.57,3.73-3.57h.75v-.71c0-.55.47-1,1.04-1Zm-1.04,3.71h-.75c-.91,0-1.64.7-1.64,1.57v1.57h15.82v-1.58c0-.87-.73-1.57-1.64-1.57h-.75v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71h-6.87v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71Zm13.43,5.14H4.09v7.57c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-7.58Zm-14.33,2.43c0-.55.47-1,1.04-1h7.16c.58,0,1.04.45,1.04,1s-.47,1-1.04,1h-7.16c-.58,0-1.04-.45-1.04-1Zm0,3c0-.55.47-1,1.04-1h3.58c.58,0,1.04.45,1.04,1s-.47,1-1.04,1h-3.58c-.58,0-1.04-.45-1.04-1Z"/>',
-      }}
-    />
-  )
+export const CalendarOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.52,2c.58,0,1.04.45,1.04,1v.71h6.87v-.71c0-.55.47-1,1.04-1s1.04.45,1.04,1v.71h.75c2.06,0,3.73,1.59,3.73,3.57v11.15c0,1.97-1.67,3.57-3.73,3.57H5.73c-2.06,0-3.73-1.6-3.73-3.57V7.29c0-1.97,1.67-3.57,3.73-3.57h.75v-.71c0-.55.47-1,1.04-1Zm-1.04,3.71h-.75c-.91,0-1.64.7-1.64,1.57v1.57h15.82v-1.58c0-.87-.73-1.57-1.64-1.57h-.75v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71h-6.87v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71Zm13.43,5.14H4.09v7.57c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-7.58Zm-14.33,2.43c0-.55.47-1,1.04-1h7.16c.58,0,1.04.45,1.04,1s-.47,1-1.04,1h-7.16c-.58,0-1.04-.45-1.04-1Zm0,3c0-.55.47-1,1.04-1h3.58c.58,0,1.04.45,1.04,1s-.47,1-1.04,1h-3.58c-.58,0-1.04-.45-1.04-1Z"/>',
+    }}
+  />
 )
 
 CalendarOutline.displayName = 'CalendarOutline'
diff --git a/packages/components/icons/src/icons/CalendarValidFill.tsx b/packages/components/icons/src/icons/CalendarValidFill.tsx
index db7b0e84d..79de1f244 100644
--- a/packages/components/icons/src/icons/CalendarValidFill.tsx
+++ b/packages/components/icons/src/icons/CalendarValidFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarValidFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarValidFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.29,11.69c.42.37.45,1.01.06,1.41l-4.8,4.97h0c-.16.17-.35.29-.56.37-.21.08-.43.12-.65.12-.22,0-.45-.05-.66-.14-.21-.09-.4-.22-.55-.39h0s-1.5-1.65-1.5-1.65c-.38-.42-.33-1.05.1-1.41s1.1-.32,1.47.1l1.16,1.28,4.45-4.61c.39-.41,1.05-.43,1.48-.06Z"/><path fill-rule="evenodd" d="m8.57,3c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-.75c-2.06,0-3.73,1.6-3.73,3.57v11.14c0,1.97,1.66,3.57,3.73,3.57h12.55c2.06,0,3.73-1.59,3.73-3.57V7.28c0-1.91-1.56-3.46-3.52-3.56-.07,0-.14,0-.21,0h-.75v-.71c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-6.87v-.71Zm11.34,6.69H4.09v8.74c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-8.74Z"/>',
-      }}
-    />
-  )
+export const CalendarValidFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarValidFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.29,11.69c.42.37.45,1.01.06,1.41l-4.8,4.97h0c-.16.17-.35.29-.56.37-.21.08-.43.12-.65.12-.22,0-.45-.05-.66-.14-.21-.09-.4-.22-.55-.39h0s-1.5-1.65-1.5-1.65c-.38-.42-.33-1.05.1-1.41s1.1-.32,1.47.1l1.16,1.28,4.45-4.61c.39-.41,1.05-.43,1.48-.06Z"/><path fill-rule="evenodd" d="m8.57,3c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-.75c-2.06,0-3.73,1.6-3.73,3.57v11.14c0,1.97,1.66,3.57,3.73,3.57h12.55c2.06,0,3.73-1.59,3.73-3.57V7.28c0-1.91-1.56-3.46-3.52-3.56-.07,0-.14,0-.21,0h-.75v-.71c0-.55-.47-1-1.04-1s-1.04.45-1.04,1v.71h-6.87v-.71Zm11.34,6.69H4.09v8.74c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-8.74Z"/>',
+    }}
+  />
 )
 
 CalendarValidFill.displayName = 'CalendarValidFill'
diff --git a/packages/components/icons/src/icons/CalendarValidOutline.tsx b/packages/components/icons/src/icons/CalendarValidOutline.tsx
index eadf2fcb0..9b27023fb 100644
--- a/packages/components/icons/src/icons/CalendarValidOutline.tsx
+++ b/packages/components/icons/src/icons/CalendarValidOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CalendarValidOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CalendarValidOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.52,2c.58,0,1.04.45,1.04,1v.71h6.87v-.71c0-.55.47-1,1.04-1s1.04.45,1.04,1v.71h.75c2.06,0,3.73,1.59,3.73,3.57v11.15c0,1.97-1.67,3.57-3.73,3.57H5.73c-2.06,0-3.73-1.6-3.73-3.57V7.29c0-1.97,1.67-3.57,3.73-3.57h.75v-.71c0-.55.47-1,1.04-1Zm-1.04,3.71h-.75c-.91,0-1.64.7-1.64,1.57v1.57h15.82v-1.58c0-.87-.73-1.57-1.64-1.57h-.75v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71h-6.87v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71Zm13.43,5.14H4.09v7.57c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-7.58Zm-3.62.84c.42.37.45,1.01.06,1.41l-4.8,4.97h0c-.16.17-.35.29-.56.37-.21.08-.43.12-.65.12-.22,0-.45-.05-.66-.14-.21-.09-.4-.22-.55-.39,0,0,0,0,0,0l-1.5-1.65c-.38-.42-.33-1.05.1-1.41.44-.36,1.1-.32,1.47.1l1.16,1.28,4.45-4.61c.39-.41,1.05-.43,1.48-.06Z"/>',
-      }}
-    />
-  )
+export const CalendarValidOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CalendarValidOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.52,2c.58,0,1.04.45,1.04,1v.71h6.87v-.71c0-.55.47-1,1.04-1s1.04.45,1.04,1v.71h.75c2.06,0,3.73,1.59,3.73,3.57v11.15c0,1.97-1.67,3.57-3.73,3.57H5.73c-2.06,0-3.73-1.6-3.73-3.57V7.29c0-1.97,1.67-3.57,3.73-3.57h.75v-.71c0-.55.47-1,1.04-1Zm-1.04,3.71h-.75c-.91,0-1.64.7-1.64,1.57v1.57h15.82v-1.58c0-.87-.73-1.57-1.64-1.57h-.75v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71h-6.87v.71c0,.55-.47,1-1.04,1s-1.04-.45-1.04-1v-.71Zm13.43,5.14H4.09v7.57c0,.87.73,1.57,1.64,1.57h12.55c.91,0,1.64-.7,1.64-1.57v-7.58Zm-3.62.84c.42.37.45,1.01.06,1.41l-4.8,4.97h0c-.16.17-.35.29-.56.37-.21.08-.43.12-.65.12-.22,0-.45-.05-.66-.14-.21-.09-.4-.22-.55-.39,0,0,0,0,0,0l-1.5-1.65c-.38-.42-.33-1.05.1-1.41.44-.36,1.1-.32,1.47.1l1.16,1.28,4.45-4.61c.39-.41,1.05-.43,1.48-.06Z"/>',
+    }}
+  />
 )
 
 CalendarValidOutline.displayName = 'CalendarValidOutline'
diff --git a/packages/components/icons/src/icons/CallFill.tsx b/packages/components/icons/src/icons/CallFill.tsx
index 5cc3519ec..62ce54dd9 100644
--- a/packages/components/icons/src/icons/CallFill.tsx
+++ b/packages/components/icons/src/icons/CallFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CallFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CallFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.21,2h2.59c1.77,0,3.21,1.4,3.21,3.19v1.37c0,1.8-1.48,3.24-3.27,3.24h-3.13l-1.45,1.08c-.23.17-.53.19-.79.07-.26-.13-.42-.38-.42-.67v-5.02c0-1.8,1.47-3.26,3.27-3.26ZM3.85,5.87c.41-.41.97-.64,1.55-.64s1.14.23,1.55.64h0s2.13,2.17,2.13,2.17c.4.42.62.97.62,1.55s-.22,1.13-.62,1.55h-.01s-.03.05-.04.08c-.01.03-.02.05-.02.08s0,.06.02.08c.01.03.03.05.04.07h0s3.35,3.4,3.35,3.4c.04.04.08.05.13.05s.09-.02.13-.06c.41-.41.97-.64,1.55-.64s1.14.23,1.55.64h0s2.13,2.15,2.13,2.15h.01c.4.43.62.99.62,1.56s-.22,1.13-.62,1.55c0,0-.01.01-.02.02l-.5.49c-.74.75-1.71,1.23-2.75,1.35-1.05.12-2.1-.14-2.99-.72h-.02c-3.52-2.42-6.55-5.5-8.94-9.07,0,0,0-.01-.01-.02-.57-.89-.81-1.95-.7-3,.11-1.05.58-2.03,1.32-2.77l.49-.5s.01-.01.02-.02Z"/>',
-      }}
-    />
-  )
+export const CallFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CallFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.21,2h2.59c1.77,0,3.21,1.4,3.21,3.19v1.37c0,1.8-1.48,3.24-3.27,3.24h-3.13l-1.45,1.08c-.23.17-.53.19-.79.07-.26-.13-.42-.38-.42-.67v-5.02c0-1.8,1.47-3.26,3.27-3.26ZM3.85,5.87c.41-.41.97-.64,1.55-.64s1.14.23,1.55.64h0s2.13,2.17,2.13,2.17c.4.42.62.97.62,1.55s-.22,1.13-.62,1.55h-.01s-.03.05-.04.08c-.01.03-.02.05-.02.08s0,.06.02.08c.01.03.03.05.04.07h0s3.35,3.4,3.35,3.4c.04.04.08.05.13.05s.09-.02.13-.06c.41-.41.97-.64,1.55-.64s1.14.23,1.55.64h0s2.13,2.15,2.13,2.15h.01c.4.43.62.99.62,1.56s-.22,1.13-.62,1.55c0,0-.01.01-.02.02l-.5.49c-.74.75-1.71,1.23-2.75,1.35-1.05.12-2.1-.14-2.99-.72h-.02c-3.52-2.42-6.55-5.5-8.94-9.07,0,0,0-.01-.01-.02-.57-.89-.81-1.95-.7-3,.11-1.05.58-2.03,1.32-2.77l.49-.5s.01-.01.02-.02Z"/>',
+    }}
+  />
 )
 
 CallFill.displayName = 'CallFill'
diff --git a/packages/components/icons/src/icons/CallOutline.tsx b/packages/components/icons/src/icons/CallOutline.tsx
index f2bfecc53..fde86de9e 100644
--- a/packages/components/icons/src/icons/CallOutline.tsx
+++ b/packages/components/icons/src/icons/CallOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CallOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CallOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m16.24,2c-1.95,0-3.53,1.57-3.53,3.51v4.87c0,.38.22.73.56.9.34.17.75.13,1.06-.1l1.32-1h2.83c1.94,0,3.52-1.56,3.52-3.49,0-.41,0-.84,0-1.25,0-1.92-1.55-3.44-3.46-3.44h-2.3Zm-1.51,3.51c0-.83.68-1.51,1.51-1.51h2.3c.81,0,1.45.64,1.45,1.43,0,.41,0,.84,0,1.24,0,.82-.68,1.49-1.51,1.49h-3.16c-.21,0-.41.07-.59.19v-2.85Zm-9.32-.28c-.58,0-1.14.23-1.55.64,0,0-.01.01-.02.02l-.49.5c-.74.75-1.21,1.73-1.32,2.77-.11,1.05.13,2.11.7,3,0,0,0,.01.01.02,2.38,3.57,5.42,6.64,8.94,9.05h.02c.88.59,1.94.84,2.99.73,1.05-.12,2.02-.59,2.75-1.35l.5-.49s.01-.01.02-.02c.4-.42.62-.97.62-1.55s-.22-1.13-.62-1.55h-.01s-2.13-2.16-2.13-2.16h0c-.41-.41-.97-.65-1.55-.65s-1.14.23-1.55.64c-.04.04-.09.06-.13.06s-.09-.02-.13-.05l-3.35-3.4h0s-.03-.04-.04-.07c-.01-.03-.02-.05-.02-.08s0-.06.02-.08c.01-.03.03-.05.04-.07h.01c.4-.43.62-.98.62-1.56s-.22-1.13-.62-1.55l-2.13-2.16h0c-.41-.42-.97-.65-1.55-.65Zm-.61,2.56l.48-.5s.08-.05.13-.05.09.02.13.05l2.11,2.15s.06.09.06.15-.02.11-.06.15c-.2.2-.36.45-.47.71-.11.27-.17.56-.17.85s.06.58.17.85c.11.27.27.51.48.72l3.35,3.4h0c.41.42.97.65,1.55.65s1.14-.23,1.55-.64h0s.08-.06.12-.06.09.02.12.05h0s2.12,2.13,2.12,2.13c.04.04.06.1.06.16s-.02.12-.06.16l-.49.49h-.01c-.41.44-.96.7-1.53.77-.58.06-1.16-.07-1.65-.39-3.3-2.26-6.15-5.15-8.38-8.5-.32-.5-.46-1.11-.39-1.71.07-.6.33-1.16.75-1.58h.01Z"/>',
-      }}
-    />
-  )
+export const CallOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CallOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m16.24,2c-1.95,0-3.53,1.57-3.53,3.51v4.87c0,.38.22.73.56.9.34.17.75.13,1.06-.1l1.32-1h2.83c1.94,0,3.52-1.56,3.52-3.49,0-.41,0-.84,0-1.25,0-1.92-1.55-3.44-3.46-3.44h-2.3Zm-1.51,3.51c0-.83.68-1.51,1.51-1.51h2.3c.81,0,1.45.64,1.45,1.43,0,.41,0,.84,0,1.24,0,.82-.68,1.49-1.51,1.49h-3.16c-.21,0-.41.07-.59.19v-2.85Zm-9.32-.28c-.58,0-1.14.23-1.55.64,0,0-.01.01-.02.02l-.49.5c-.74.75-1.21,1.73-1.32,2.77-.11,1.05.13,2.11.7,3,0,0,0,.01.01.02,2.38,3.57,5.42,6.64,8.94,9.05h.02c.88.59,1.94.84,2.99.73,1.05-.12,2.02-.59,2.75-1.35l.5-.49s.01-.01.02-.02c.4-.42.62-.97.62-1.55s-.22-1.13-.62-1.55h-.01s-2.13-2.16-2.13-2.16h0c-.41-.41-.97-.65-1.55-.65s-1.14.23-1.55.64c-.04.04-.09.06-.13.06s-.09-.02-.13-.05l-3.35-3.4h0s-.03-.04-.04-.07c-.01-.03-.02-.05-.02-.08s0-.06.02-.08c.01-.03.03-.05.04-.07h.01c.4-.43.62-.98.62-1.56s-.22-1.13-.62-1.55l-2.13-2.16h0c-.41-.42-.97-.65-1.55-.65Zm-.61,2.56l.48-.5s.08-.05.13-.05.09.02.13.05l2.11,2.15s.06.09.06.15-.02.11-.06.15c-.2.2-.36.45-.47.71-.11.27-.17.56-.17.85s.06.58.17.85c.11.27.27.51.48.72l3.35,3.4h0c.41.42.97.65,1.55.65s1.14-.23,1.55-.64h0s.08-.06.12-.06.09.02.12.05h0s2.12,2.13,2.12,2.13c.04.04.06.1.06.16s-.02.12-.06.16l-.49.49h-.01c-.41.44-.96.7-1.53.77-.58.06-1.16-.07-1.65-.39-3.3-2.26-6.15-5.15-8.38-8.5-.32-.5-.46-1.11-.39-1.71.07-.6.33-1.16.75-1.58h.01Z"/>',
+    }}
+  />
 )
 
 CallOutline.displayName = 'CallOutline'
diff --git a/packages/components/icons/src/icons/CameraFill.tsx b/packages/components/icons/src/icons/CameraFill.tsx
index adbe0044f..01d6415f6 100644
--- a/packages/components/icons/src/icons/CameraFill.tsx
+++ b/packages/components/icons/src/icons/CameraFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CameraFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CameraFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m9.18,4c-.26,0-.5.12-.66.33l-1.87,2.53h-2.41c-.59,0-1.16.24-1.58.66-.42.43-.65,1-.65,1.6v8.6c0,.6.24,1.18.65,1.6.42.43.99.66,1.58.66h15.53c.59,0,1.16-.24,1.58-.66.42-.43.65-1,.65-1.6v-8.6c0-.6-.24-1.18-.65-1.6-.42-.43-.99-.66-1.58-.66h-2.41l-1.87-2.53c-.16-.21-.4-.33-.66-.33h-5.65Zm2.82,5.04c-2.21,0-4,1.82-4,4.06s1.79,4.06,4,4.06,4-1.82,4-4.06-1.79-4.06-4-4.06Z"/>',
-      }}
-    />
-  )
+export const CameraFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CameraFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m9.18,4c-.26,0-.5.12-.66.33l-1.87,2.53h-2.41c-.59,0-1.16.24-1.58.66-.42.43-.65,1-.65,1.6v8.6c0,.6.24,1.18.65,1.6.42.43.99.66,1.58.66h15.53c.59,0,1.16-.24,1.58-.66.42-.43.65-1,.65-1.6v-8.6c0-.6-.24-1.18-.65-1.6-.42-.43-.99-.66-1.58-.66h-2.41l-1.87-2.53c-.16-.21-.4-.33-.66-.33h-5.65Zm2.82,5.04c-2.21,0-4,1.82-4,4.06s1.79,4.06,4,4.06,4-1.82,4-4.06-1.79-4.06-4-4.06Z"/>',
+    }}
+  />
 )
 
 CameraFill.displayName = 'CameraFill'
diff --git a/packages/components/icons/src/icons/CameraOutline.tsx b/packages/components/icons/src/icons/CameraOutline.tsx
index 65556e0ef..a30df6c14 100644
--- a/packages/components/icons/src/icons/CameraOutline.tsx
+++ b/packages/components/icons/src/icons/CameraOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CameraOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CameraOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,8.54c-2.27,0-4.12,1.86-4.12,4.16s1.84,4.16,4.12,4.16,4.12-1.86,4.12-4.16-1.84-4.16-4.12-4.16Zm-2.12,4.16c0-1.18.95-2.14,2.12-2.14s2.12.96,2.12,2.14-.95,2.14-2.12,2.14-2.12-.96-2.12-2.14Z"/><path fill-rule="evenodd" d="m9.23,4c-.31,0-.61.15-.8.4l-1.78,2.39h-2.27c-.63,0-1.24.25-1.69.71-.45.45-.7,1.06-.7,1.7v8.39c0,.64.25,1.25.7,1.7.45.45,1.05.71,1.69.71h15.23c.63,0,1.24-.25,1.69-.71.45-.45.7-1.06.7-1.7v-8.39c0-.64-.25-1.25-.7-1.7-.45-.45-1.05-.71-1.69-.71h-2.27l-1.78-2.39c-.19-.25-.49-.4-.8-.4h-5.54Zm-1.28,4.41l1.78-2.39h4.54l1.78,2.39c.19.25.49.4.8.4h2.77c.1,0,.2.04.27.11.07.07.11.17.11.27v8.39c0,.1-.04.2-.11.27-.07.07-.17.11-.27.11H4.38c-.1,0-.2-.04-.27-.11-.07-.07-.11-.17-.11-.27v-8.39c0-.1.04-.2.11-.27.07-.07.17-.11.27-.11h2.77c.31,0,.61-.15.8-.4Z"/>',
-      }}
-    />
-  )
+export const CameraOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CameraOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,8.54c-2.27,0-4.12,1.86-4.12,4.16s1.84,4.16,4.12,4.16,4.12-1.86,4.12-4.16-1.84-4.16-4.12-4.16Zm-2.12,4.16c0-1.18.95-2.14,2.12-2.14s2.12.96,2.12,2.14-.95,2.14-2.12,2.14-2.12-.96-2.12-2.14Z"/><path fill-rule="evenodd" d="m9.23,4c-.31,0-.61.15-.8.4l-1.78,2.39h-2.27c-.63,0-1.24.25-1.69.71-.45.45-.7,1.06-.7,1.7v8.39c0,.64.25,1.25.7,1.7.45.45,1.05.71,1.69.71h15.23c.63,0,1.24-.25,1.69-.71.45-.45.7-1.06.7-1.7v-8.39c0-.64-.25-1.25-.7-1.7-.45-.45-1.05-.71-1.69-.71h-2.27l-1.78-2.39c-.19-.25-.49-.4-.8-.4h-5.54Zm-1.28,4.41l1.78-2.39h4.54l1.78,2.39c.19.25.49.4.8.4h2.77c.1,0,.2.04.27.11.07.07.11.17.11.27v8.39c0,.1-.04.2-.11.27-.07.07-.17.11-.27.11H4.38c-.1,0-.2-.04-.27-.11-.07-.07-.11-.17-.11-.27v-8.39c0-.1.04-.2.11-.27.07-.07.17-.11.27-.11h2.77c.31,0,.61-.15.8-.4Z"/>',
+    }}
+  />
 )
 
 CameraOutline.displayName = 'CameraOutline'
diff --git a/packages/components/icons/src/icons/CardFill.tsx b/packages/components/icons/src/icons/CardFill.tsx
index c8235e937..b2bc41e80 100644
--- a/packages/components/icons/src/icons/CardFill.tsx
+++ b/packages/components/icons/src/icons/CardFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CardFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CardFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m19.76,4.5H4.16c-1.24,0-2.16.91-2.16,2.15v2.82h20v-2.82c-.08-1.24-1-2.15-2.24-2.15ZM2,10.96v6.38c0,1.16,1,2.15,2.16,2.15h15.68c1.16,0,2.16-.99,2.16-2.15v-6.38H2Zm11.7,3.73h4.15c.42,0,.75.33.75.75s-.33.75-.75.75h-4.15c-.41,0-.75-.33-.75-.75s.33-.75.75-.75Z"/>',
-      }}
-    />
-  )
+export const CardFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CardFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m19.76,4.5H4.16c-1.24,0-2.16.91-2.16,2.15v2.82h20v-2.82c-.08-1.24-1-2.15-2.24-2.15ZM2,10.96v6.38c0,1.16,1,2.15,2.16,2.15h15.68c1.16,0,2.16-.99,2.16-2.15v-6.38H2Zm11.7,3.73h4.15c.42,0,.75.33.75.75s-.33.75-.75.75h-4.15c-.41,0-.75-.33-.75-.75s.33-.75.75-.75Z"/>',
+    }}
+  />
 )
 
 CardFill.displayName = 'CardFill'
diff --git a/packages/components/icons/src/icons/CardOutline.tsx b/packages/components/icons/src/icons/CardOutline.tsx
index db3ec1282..f0e7a676b 100644
--- a/packages/components/icons/src/icons/CardOutline.tsx
+++ b/packages/components/icons/src/icons/CardOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CardOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CardOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.76,14.4h-4.05c-.53,0-.97.43-.97.96s.44.96.97.96h4.05c.53,0,.97-.43.97-.96s-.44-.96-.97-.96Z"/><path d="m19.64,4.5H4.36c-1.3,0-2.36,1.04-2.36,2.34v10.33c0,1.29,1.05,2.34,2.36,2.34h15.28c1.3,0,2.36-1.04,2.36-2.34V6.84c0-1.29-1.05-2.34-2.36-2.34Zm-15.28,13.08c-.23,0-.41-.18-.41-.41v-5.92h16.12v5.92c0,.22-.19.41-.41.41H4.36Zm0-11.15h15.28c.23,0,.41.18.41.41v2.48H3.94v-2.48c0-.22.19-.41.41-.41Z"/>',
-      }}
-    />
-  )
+export const CardOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CardOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.76,14.4h-4.05c-.53,0-.97.43-.97.96s.44.96.97.96h4.05c.53,0,.97-.43.97-.96s-.44-.96-.97-.96Z"/><path d="m19.64,4.5H4.36c-1.3,0-2.36,1.04-2.36,2.34v10.33c0,1.29,1.05,2.34,2.36,2.34h15.28c1.3,0,2.36-1.04,2.36-2.34V6.84c0-1.29-1.05-2.34-2.36-2.34Zm-15.28,13.08c-.23,0-.41-.18-.41-.41v-5.92h16.12v5.92c0,.22-.19.41-.41.41H4.36Zm0-11.15h15.28c.23,0,.41.18.41.41v2.48H3.94v-2.48c0-.22.19-.41.41-.41Z"/>',
+    }}
+  />
 )
 
 CardOutline.displayName = 'CardOutline'
diff --git a/packages/components/icons/src/icons/Check.tsx b/packages/components/icons/src/icons/Check.tsx
index 8bbc322ea..c5f48db47 100644
--- a/packages/components/icons/src/icons/Check.tsx
+++ b/packages/components/icons/src/icons/Check.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Check = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Check"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m8.92,19.08c-.18,0-.36-.03-.53-.1s-.33-.17-.47-.31l-5.49-5.34c-.28-.28-.42-.61-.42-1s.14-.73.42-1c.28-.28.62-.41,1.02-.41s.74.14,1.05.41l4.43,4.3,10.62-10.29c.28-.28.62-.42,1.02-.43.39,0,.73.13,1.02.43.28.28.42.61.42,1s-.14.73-.42,1l-11.65,11.32c-.14.14-.3.24-.47.31-.17.07-.35.1-.53.1Z"/>',
-      }}
-    />
-  )
+export const Check = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Check"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m8.92,19.08c-.18,0-.36-.03-.53-.1s-.33-.17-.47-.31l-5.49-5.34c-.28-.28-.42-.61-.42-1s.14-.73.42-1c.28-.28.62-.41,1.02-.41s.74.14,1.05.41l4.43,4.3,10.62-10.29c.28-.28.62-.42,1.02-.43.39,0,.73.13,1.02.43.28.28.42.61.42,1s-.14.73-.42,1l-11.65,11.32c-.14.14-.3.24-.47.31-.17.07-.35.1-.53.1Z"/>',
+    }}
+  />
 )
 
 Check.displayName = 'Check'
diff --git a/packages/components/icons/src/icons/ClockArrow.tsx b/packages/components/icons/src/icons/ClockArrow.tsx
index 8ce7e9d67..cadaeece3 100644
--- a/packages/components/icons/src/icons/ClockArrow.tsx
+++ b/packages/components/icons/src/icons/ClockArrow.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ClockArrow = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ClockArrow"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.54,3.69c1.65,1.1,2.94,2.67,3.7,4.5v.03c.76,1.83.96,3.84.57,5.78s-1.34,3.73-2.74,5.13c-1.4,1.38-3.18,2.31-5.11,2.69-1.93.38-3.93.18-5.75-.57-1.82-.75-3.38-2.01-4.48-3.64-1.1-1.63-1.7-3.54-1.73-5.5,0-1.88.48-3.72,1.4-5.36l-.19.04c-.25.06-.52.02-.74-.11-.22-.13-.38-.35-.44-.6-.06-.25-.02-.51.11-.74.13-.22.35-.38.6-.44l2.78-.7h.11c.06,0,.13,0,.19,0h.18l.18.07h.08s.06.04.08.07c.03.02.06.04.09.06.01.03.03.05.05.07.04.05.08.1.11.16.03.06.06.12.08.18v.07l.69,2.79c.06.25.02.51-.11.74-.13.22-.35.38-.6.44-.25.06-.52.02-.74-.11-.22-.13-.38-.35-.44-.6l-.21-.83c-.89,1.43-1.35,3.08-1.35,4.77,0,1.6.47,3.16,1.36,4.48.89,1.33,2.15,2.36,3.62,2.97,1.48.61,3.1.77,4.67.46,1.17-.24,2.27-.73,3.22-1.44.96-.71,1.74-1.63,2.3-2.68.56-1.05.88-2.21.94-3.4.06-1.19-.15-2.38-.61-3.48-.61-1.48-1.64-2.74-2.97-3.64-1.33-.89-2.89-1.37-4.49-1.37-.24-.02-.47-.13-.63-.31-.16-.18-.26-.41-.26-.66s.09-.48.26-.66c.16-.18.39-.29.63-.31,1.98,0,3.93.59,5.58,1.69Z"/><path d="m15.16,15.39l-3.63-1.8c-.17-.08-.31-.2-.41-.36-.1-.15-.16-.33-.16-.52v-5.56c-.01-.14,0-.27.05-.4.04-.13.11-.25.2-.35.09-.1.2-.18.33-.24.12-.05.26-.08.4-.08s.27.03.4.08c.12.05.24.14.33.24s.16.22.2.35c.04.13.06.27.05.4v4.96l3.09,1.54c.2.13.36.32.42.55.07.23.05.48-.06.69-.1.22-.28.39-.51.48-.22.09-.47.1-.7.01Z"/>',
-      }}
-    />
-  )
+export const ClockArrow = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ClockArrow"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.54,3.69c1.65,1.1,2.94,2.67,3.7,4.5v.03c.76,1.83.96,3.84.57,5.78s-1.34,3.73-2.74,5.13c-1.4,1.38-3.18,2.31-5.11,2.69-1.93.38-3.93.18-5.75-.57-1.82-.75-3.38-2.01-4.48-3.64-1.1-1.63-1.7-3.54-1.73-5.5,0-1.88.48-3.72,1.4-5.36l-.19.04c-.25.06-.52.02-.74-.11-.22-.13-.38-.35-.44-.6-.06-.25-.02-.51.11-.74.13-.22.35-.38.6-.44l2.78-.7h.11c.06,0,.13,0,.19,0h.18l.18.07h.08s.06.04.08.07c.03.02.06.04.09.06.01.03.03.05.05.07.04.05.08.1.11.16.03.06.06.12.08.18v.07l.69,2.79c.06.25.02.51-.11.74-.13.22-.35.38-.6.44-.25.06-.52.02-.74-.11-.22-.13-.38-.35-.44-.6l-.21-.83c-.89,1.43-1.35,3.08-1.35,4.77,0,1.6.47,3.16,1.36,4.48.89,1.33,2.15,2.36,3.62,2.97,1.48.61,3.1.77,4.67.46,1.17-.24,2.27-.73,3.22-1.44.96-.71,1.74-1.63,2.3-2.68.56-1.05.88-2.21.94-3.4.06-1.19-.15-2.38-.61-3.48-.61-1.48-1.64-2.74-2.97-3.64-1.33-.89-2.89-1.37-4.49-1.37-.24-.02-.47-.13-.63-.31-.16-.18-.26-.41-.26-.66s.09-.48.26-.66c.16-.18.39-.29.63-.31,1.98,0,3.93.59,5.58,1.69Z"/><path d="m15.16,15.39l-3.63-1.8c-.17-.08-.31-.2-.41-.36-.1-.15-.16-.33-.16-.52v-5.56c-.01-.14,0-.27.05-.4.04-.13.11-.25.2-.35.09-.1.2-.18.33-.24.12-.05.26-.08.4-.08s.27.03.4.08c.12.05.24.14.33.24s.16.22.2.35c.04.13.06.27.05.4v4.96l3.09,1.54c.2.13.36.32.42.55.07.23.05.48-.06.69-.1.22-.28.39-.51.48-.22.09-.47.1-.7.01Z"/>',
+    }}
+  />
 )
 
 ClockArrow.displayName = 'ClockArrow'
diff --git a/packages/components/icons/src/icons/ClockFill.tsx b/packages/components/icons/src/icons/ClockFill.tsx
index 60f327ead..2c2ea78a2 100644
--- a/packages/components/icons/src/icons/ClockFill.tsx
+++ b/packages/components/icons/src/icons/ClockFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ClockFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ClockFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,2C6.47,2,2,6.45,2,11.96s4.47,10.04,10,10.04,10-4.45,10-9.96S17.53,2,12,2Zm4.15,14.82c-.16.16-.41.24-.65.24s-.57-.08-.73-.32l-3.58-4.13c-.16-.16-.24-.4-.24-.65v-3.48c0-.57.41-.97.98-.97s.98.4.98.97v3.08l3.33,3.81c.41.49.33,1.13-.08,1.46Z"/>',
-      }}
-    />
-  )
+export const ClockFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ClockFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,2C6.47,2,2,6.45,2,11.96s4.47,10.04,10,10.04,10-4.45,10-9.96S17.53,2,12,2Zm4.15,14.82c-.16.16-.41.24-.65.24s-.57-.08-.73-.32l-3.58-4.13c-.16-.16-.24-.4-.24-.65v-3.48c0-.57.41-.97.98-.97s.98.4.98.97v3.08l3.33,3.81c.41.49.33,1.13-.08,1.46Z"/>',
+    }}
+  />
 )
 
 ClockFill.displayName = 'ClockFill'
diff --git a/packages/components/icons/src/icons/ClockOutline.tsx b/packages/components/icons/src/icons/ClockOutline.tsx
index ea1439eb7..74c0c1e06 100644
--- a/packages/components/icons/src/icons/ClockOutline.tsx
+++ b/packages/components/icons/src/icons/ClockOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ClockOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ClockOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,3.97C7.56,3.97,3.97,7.56,3.97,12s3.6,8.03,8.03,8.03,8.03-3.6,8.03-8.03S16.44,3.97,12,3.97ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m12,7.55c.54,0,.98.44.98.98v3.1l3.29,3.83c.35.41.31,1.03-.11,1.39-.41.35-1.03.31-1.39-.11l-3.52-4.11c-.15-.18-.24-.41-.24-.64v-3.47c0-.54.44-.98.98-.98Z"/>',
-      }}
-    />
-  )
+export const ClockOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ClockOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,3.97C7.56,3.97,3.97,7.56,3.97,12s3.6,8.03,8.03,8.03,8.03-3.6,8.03-8.03S16.44,3.97,12,3.97ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m12,7.55c.54,0,.98.44.98.98v3.1l3.29,3.83c.35.41.31,1.03-.11,1.39-.41.35-1.03.31-1.39-.11l-3.52-4.11c-.15-.18-.24-.41-.24-.64v-3.47c0-.54.44-.98.98-.98Z"/>',
+    }}
+  />
 )
 
 ClockOutline.displayName = 'ClockOutline'
diff --git a/packages/components/icons/src/icons/Close.tsx b/packages/components/icons/src/icons/Close.tsx
index 584e32400..b5fbc90eb 100644
--- a/packages/components/icons/src/icons/Close.tsx
+++ b/packages/components/icons/src/icons/Close.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Close = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Close"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.6,19.67l-7.68-7.68,7.57-7.59c.53-.53.53-1.4,0-1.93-.53-.53-1.4-.53-1.93,0l-7.57,7.58L4.33,2.4c-.53-.53-1.4-.53-1.93,0-.53.53-.53,1.4,0,1.93l7.66,7.66-7.66,7.65c-.53.53-.53,1.4,0,1.93.53.53,1.4.53,1.93,0l7.66-7.66,7.68,7.68c.53.53,1.4.53,1.93,0,.53-.53.53-1.4,0-1.93h0Z"/>',
-      }}
-    />
-  )
+export const Close = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Close"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.6,19.67l-7.68-7.68,7.57-7.59c.53-.53.53-1.4,0-1.93-.53-.53-1.4-.53-1.93,0l-7.57,7.58L4.33,2.4c-.53-.53-1.4-.53-1.93,0-.53.53-.53,1.4,0,1.93l7.66,7.66-7.66,7.65c-.53.53-.53,1.4,0,1.93.53.53,1.4.53,1.93,0l7.66-7.66,7.68,7.68c.53.53,1.4.53,1.93,0,.53-.53.53-1.4,0-1.93h0Z"/>',
+    }}
+  />
 )
 
 Close.displayName = 'Close'
diff --git a/packages/components/icons/src/icons/Computer.tsx b/packages/components/icons/src/icons/Computer.tsx
index 829de37bc..aa7f17200 100644
--- a/packages/components/icons/src/icons/Computer.tsx
+++ b/packages/components/icons/src/icons/Computer.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Computer = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Computer"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,1H2C.9,1,0,1.92,0,3.05v13.64c0,1.13.9,2.05,2,2.05h6.61l-.73,1.87h-.88c-.64,0-1.17.53-1.17,1.2s.52,1.2,1.17,1.2h10c.64,0,1.17-.53,1.17-1.2s-.52-1.2-1.17-1.2h-.88l-.73-1.87h6.61c1.1,0,2-.92,2-2.05V3.05c0-1.13-.9-2.05-2-2.05Zm-8.39,19.62h-3.22l.73-1.87h1.75l.73,1.87h0Zm8.06-4.27H2.33V3.38h19.33v12.96h.01Z"/>',
-      }}
-    />
-  )
+export const Computer = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Computer"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,1H2C.9,1,0,1.92,0,3.05v13.64c0,1.13.9,2.05,2,2.05h6.61l-.73,1.87h-.88c-.64,0-1.17.53-1.17,1.2s.52,1.2,1.17,1.2h10c.64,0,1.17-.53,1.17-1.2s-.52-1.2-1.17-1.2h-.88l-.73-1.87h6.61c1.1,0,2-.92,2-2.05V3.05c0-1.13-.9-2.05-2-2.05Zm-8.39,19.62h-3.22l.73-1.87h1.75l.73,1.87h0Zm8.06-4.27H2.33V3.38h19.33v12.96h.01Z"/>',
+    }}
+  />
 )
 
 Computer.displayName = 'Computer'
diff --git a/packages/components/icons/src/icons/ConversationFill.tsx b/packages/components/icons/src/icons/ConversationFill.tsx
index 34db0fd55..db60690f3 100644
--- a/packages/components/icons/src/icons/ConversationFill.tsx
+++ b/packages/components/icons/src/icons/ConversationFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ConversationFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ConversationFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.93,5.69v5.35c0,2.03-1.63,3.69-3.62,3.69h-7.78c-.13,0-.22.05-.32.11-.04.02-.08.05-.13.07l-2.64,1.98c-.18.14-.43,0-.43-.22V5.69c0-2.03,1.63-3.69,3.62-3.69h7.78c1.99,0,3.53,1.57,3.53,3.69Z"/><path d="m18.56,11.03v-3.32c1.99.09,3.53,1.75,3.44,3.69v10.32c0,.22-.25.36-.43.22l-2.46-1.88c-.09-.09-.27-.18-.45-.18h-7.24c-1.99,0-3.53-1.57-3.62-3.5h5.52c2.9,0,5.25-2.4,5.25-5.35Z"/>',
-      }}
-    />
-  )
+export const ConversationFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ConversationFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.93,5.69v5.35c0,2.03-1.63,3.69-3.62,3.69h-7.78c-.13,0-.22.05-.32.11-.04.02-.08.05-.13.07l-2.64,1.98c-.18.14-.43,0-.43-.22V5.69c0-2.03,1.63-3.69,3.62-3.69h7.78c1.99,0,3.53,1.57,3.53,3.69Z"/><path d="m18.56,11.03v-3.32c1.99.09,3.53,1.75,3.44,3.69v10.32c0,.22-.25.36-.43.22l-2.46-1.88c-.09-.09-.27-.18-.45-.18h-7.24c-1.99,0-3.53-1.57-3.62-3.5h5.52c2.9,0,5.25-2.4,5.25-5.35Z"/>',
+    }}
+  />
 )
 
 ConversationFill.displayName = 'ConversationFill'
diff --git a/packages/components/icons/src/icons/ConversationOutline.tsx b/packages/components/icons/src/icons/ConversationOutline.tsx
index 4007f824d..f47084a40 100644
--- a/packages/components/icons/src/icons/ConversationOutline.tsx
+++ b/packages/components/icons/src/icons/ConversationOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ConversationOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ConversationOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m13.01,15.3h-3.83s-2.92,0-2.92,0l-2.66,2.01c-.31.23-.71.26-1.05.09-.33-.17-.55-.52-.55-.9V6.37c0-2.42,1.95-4.38,4.34-4.37h6.75c2.35,0,4.27,1.89,4.27,4.27v4.67c-.02,2.41-1.95,4.36-4.34,4.36Zm-7.09-2.02h1.25s5.85,0,5.85,0c1.29,0,2.34-1.04,2.34-2.34v-4.67c0-1.26-1-2.26-2.26-2.26h-6.77c-1.29,0-2.34,1.05-2.34,2.36v8.1l1.33-.99c.18-.13.38-.2.6-.2Z"/><path d="m19.04,9.56v-2.25h0c1.71.59,2.95,2.21,2.95,4.13v9.56c0,.38-.21.73-.55.9-.34.17-.75.13-1.05-.09l-2.54-1.91h-6.33c-1.88,0-3.47-1.21-4.07-2.91h2.25c.43.53,1.08.88,1.81.88h6.66c.22,0,.43.08.6.2l1.2.91v-7.54c0-.77-.38-1.45-.94-1.88Z"/>',
-      }}
-    />
-  )
+export const ConversationOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ConversationOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m13.01,15.3h-3.83s-2.92,0-2.92,0l-2.66,2.01c-.31.23-.71.26-1.05.09-.33-.17-.55-.52-.55-.9V6.37c0-2.42,1.95-4.38,4.34-4.37h6.75c2.35,0,4.27,1.89,4.27,4.27v4.67c-.02,2.41-1.95,4.36-4.34,4.36Zm-7.09-2.02h1.25s5.85,0,5.85,0c1.29,0,2.34-1.04,2.34-2.34v-4.67c0-1.26-1-2.26-2.26-2.26h-6.77c-1.29,0-2.34,1.05-2.34,2.36v8.1l1.33-.99c.18-.13.38-.2.6-.2Z"/><path d="m19.04,9.56v-2.25h0c1.71.59,2.95,2.21,2.95,4.13v9.56c0,.38-.21.73-.55.9-.34.17-.75.13-1.05-.09l-2.54-1.91h-6.33c-1.88,0-3.47-1.21-4.07-2.91h2.25c.43.53,1.08.88,1.81.88h6.66c.22,0,.43.08.6.2l1.2.91v-7.54c0-.77-.38-1.45-.94-1.88Z"/>',
+    }}
+  />
 )
 
 ConversationOutline.displayName = 'ConversationOutline'
diff --git a/packages/components/icons/src/icons/CopyFill.tsx b/packages/components/icons/src/icons/CopyFill.tsx
index 997c591bd..d3466c561 100644
--- a/packages/components/icons/src/icons/CopyFill.tsx
+++ b/packages/components/icons/src/icons/CopyFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CopyFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CopyFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.63,2.67c-.33.42-.58.92-.58,1.5v12.08c0,.58.25,1.17.66,1.5.41.42.99.67,1.49.67h9.16c.58,0,1.16-.25,1.49-.67.41-.42.66-1,.66-1.5V7c0-.17-.08-.42-.25-.5l-4.21-4.25c-.17-.17-.33-.25-.5-.25h-6.35c-.58,0-1.16.25-1.57.67Z"/><path d="m5.65,22h9.9c.41,0,.74-.33.74-.75s-.33-.75-.74-.75H5.65c-.17,0-.33-.08-.5-.17-.17-.17-.17-.33-.17-.5V7c0-.42-.33-.75-.74-.75s-.74.33-.74.75v12.83c0,.58.25,1.17.66,1.5.41.42.91.67,1.49.67Z"/>',
-      }}
-    />
-  )
+export const CopyFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CopyFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.63,2.67c-.33.42-.58.92-.58,1.5v12.08c0,.58.25,1.17.66,1.5.41.42.99.67,1.49.67h9.16c.58,0,1.16-.25,1.49-.67.41-.42.66-1,.66-1.5V7c0-.17-.08-.42-.25-.5l-4.21-4.25c-.17-.17-.33-.25-.5-.25h-6.35c-.58,0-1.16.25-1.57.67Z"/><path d="m5.65,22h9.9c.41,0,.74-.33.74-.75s-.33-.75-.74-.75H5.65c-.17,0-.33-.08-.5-.17-.17-.17-.17-.33-.17-.5V7c0-.42-.33-.75-.74-.75s-.74.33-.74.75v12.83c0,.58.25,1.17.66,1.5.41.42.91.67,1.49.67Z"/>',
+    }}
+  />
 )
 
 CopyFill.displayName = 'CopyFill'
diff --git a/packages/components/icons/src/icons/CopyOutline.tsx b/packages/components/icons/src/icons/CopyOutline.tsx
index c8ede2926..05a3c31fa 100644
--- a/packages/components/icons/src/icons/CopyOutline.tsx
+++ b/packages/components/icons/src/icons/CopyOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CopyOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CopyOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m9.26,3.95c-.11,0-.21.04-.29.12-.08.08-.12.18-.12.29v11.8c0,.11.04.21.12.29.08.08.18.12.29.12h8.91c.11,0,.21-.04.29-.12.08-.08.12-.18.12-.29V7.54l-3.55-3.59h-5.77Zm-1.65-1.26c.44-.44,1.03-.69,1.65-.69h6.17c.26,0,.5.1.68.29l4.11,4.17c.18.18.28.43.28.69v9.02c0,.63-.25,1.23-.68,1.67-.44.44-1.03.69-1.65.69h-8.91c-.62,0-1.21-.25-1.65-.69-.44-.44-.68-1.04-.68-1.67V4.36c0-.63.25-1.23.68-1.67Z"/><path fill-rule="evenodd" d="m4.46,6.17c.53,0,.96.44.96.98v12.5c0,.11.04.21.12.29.08.08.18.12.29.12h9.59c.53,0,.96.44.96.98s-.43.98-.96.98H5.83c-.62,0-1.21-.25-1.65-.69-.44-.44-.68-1.04-.68-1.67V7.14c0-.54.43-.98.96-.98Z"/>',
-      }}
-    />
-  )
+export const CopyOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CopyOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m9.26,3.95c-.11,0-.21.04-.29.12-.08.08-.12.18-.12.29v11.8c0,.11.04.21.12.29.08.08.18.12.29.12h8.91c.11,0,.21-.04.29-.12.08-.08.12-.18.12-.29V7.54l-3.55-3.59h-5.77Zm-1.65-1.26c.44-.44,1.03-.69,1.65-.69h6.17c.26,0,.5.1.68.29l4.11,4.17c.18.18.28.43.28.69v9.02c0,.63-.25,1.23-.68,1.67-.44.44-1.03.69-1.65.69h-8.91c-.62,0-1.21-.25-1.65-.69-.44-.44-.68-1.04-.68-1.67V4.36c0-.63.25-1.23.68-1.67Z"/><path fill-rule="evenodd" d="m4.46,6.17c.53,0,.96.44.96.98v12.5c0,.11.04.21.12.29.08.08.18.12.29.12h9.59c.53,0,.96.44.96.98s-.43.98-.96.98H5.83c-.62,0-1.21-.25-1.65-.69-.44-.44-.68-1.04-.68-1.67V7.14c0-.54.43-.98.96-.98Z"/>',
+    }}
+  />
 )
 
 CopyOutline.displayName = 'CopyOutline'
diff --git a/packages/components/icons/src/icons/CvFill.tsx b/packages/components/icons/src/icons/CvFill.tsx
index 0bb233b63..1181caade 100644
--- a/packages/components/icons/src/icons/CvFill.tsx
+++ b/packages/components/icons/src/icons/CvFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CvFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CvFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m20.58,9.33l-7.31-7.17c-.17-.08-.34-.17-.51-.17h-7.31c-.59,0-1.1.17-1.53.58-.42.42-.68,1-.68,1.58v15.75c0,.58.25,1.17.68,1.5.42.42.93.58,1.53.58h13.08c.59,0,1.19-.25,1.53-.67.42-.42.68-1,.68-1.5v-10c0-.17,0-.33-.17-.5Zm-12.23-1.67h2.89c.42,0,.76.33.76.75s-.25.75-.68.75h-2.97c-.42,0-.76-.33-.76-.75s.34-.75.76-.75Zm7.31,10.08h-7.31c-.42,0-.76-.33-.76-.75s.34-.75.76-.75h7.31c.42,0,.76.33.76.75s-.34.75-.76.75Zm0-4.25h-7.31c-.42,0-.76-.33-.76-.75s.34-.75.76-.75h7.31c.42,0,.76.33.76.75s-.34.75-.76.75Z"/>',
-      }}
-    />
-  )
+export const CvFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CvFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m20.58,9.33l-7.31-7.17c-.17-.08-.34-.17-.51-.17h-7.31c-.59,0-1.1.17-1.53.58-.42.42-.68,1-.68,1.58v15.75c0,.58.25,1.17.68,1.5.42.42.93.58,1.53.58h13.08c.59,0,1.19-.25,1.53-.67.42-.42.68-1,.68-1.5v-10c0-.17,0-.33-.17-.5Zm-12.23-1.67h2.89c.42,0,.76.33.76.75s-.25.75-.68.75h-2.97c-.42,0-.76-.33-.76-.75s.34-.75.76-.75Zm7.31,10.08h-7.31c-.42,0-.76-.33-.76-.75s.34-.75.76-.75h7.31c.42,0,.76.33.76.75s-.34.75-.76.75Zm0-4.25h-7.31c-.42,0-.76-.33-.76-.75s.34-.75.76-.75h7.31c.42,0,.76.33.76.75s-.34.75-.76.75Z"/>',
+    }}
+  />
 )
 
 CvFill.displayName = 'CvFill'
diff --git a/packages/components/icons/src/icons/CvOutline.tsx b/packages/components/icons/src/icons/CvOutline.tsx
index 039766a36..bd622bde5 100644
--- a/packages/components/icons/src/icons/CvOutline.tsx
+++ b/packages/components/icons/src/icons/CvOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const CvOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="CvOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m8.47,9.5h2.82c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-2.82c-.54,0-.99.44-.99.97s.44.97.99.97Zm0,4.17h7.06c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-7.06c-.54,0-.99.44-.99.97s.44.97.99.97Z"/><path d="m20.47,9.23l-7.07-6.94c-.18-.19-.44-.28-.7-.28h-7.06c-.63,0-1.24.25-1.7.69-.45.44-.7,1.05-.7,1.67v15.28c0,.62.26,1.22.7,1.67.45.45,1.06.69,1.7.69h12.71c.63,0,1.24-.25,1.7-.69.45-.44.7-1.05.7-1.67v-9.72c0-.26-.11-.5-.29-.69h0ZM5.23,4.36c0-.11.04-.22.12-.29.08-.07.19-.12.3-.12h6.65l6.48,6.38v9.32c0,.11-.04.22-.12.29-.08.07-.19.12-.3.12H5.65c-.12,0-.22-.04-.3-.12-.08-.08-.12-.19-.12-.29V4.36Z"/><path d="m8.47,17.83h7.06c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-7.06c-.54,0-.99.44-.99.97s.44.97.99.97Z"/>',
-      }}
-    />
-  )
+export const CvOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="CvOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m8.47,9.5h2.82c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-2.82c-.54,0-.99.44-.99.97s.44.97.99.97Zm0,4.17h7.06c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-7.06c-.54,0-.99.44-.99.97s.44.97.99.97Z"/><path d="m20.47,9.23l-7.07-6.94c-.18-.19-.44-.28-.7-.28h-7.06c-.63,0-1.24.25-1.7.69-.45.44-.7,1.05-.7,1.67v15.28c0,.62.26,1.22.7,1.67.45.45,1.06.69,1.7.69h12.71c.63,0,1.24-.25,1.7-.69.45-.44.7-1.05.7-1.67v-9.72c0-.26-.11-.5-.29-.69h0ZM5.23,4.36c0-.11.04-.22.12-.29.08-.07.19-.12.3-.12h6.65l6.48,6.38v9.32c0,.11-.04.22-.12.29-.08.07-.19.12-.3.12H5.65c-.12,0-.22-.04-.3-.12-.08-.08-.12-.19-.12-.29V4.36Z"/><path d="m8.47,17.83h7.06c.54,0,.99-.44.99-.97s-.44-.97-.99-.97h-7.06c-.54,0-.99.44-.99.97s.44.97.99.97Z"/>',
+    }}
+  />
 )
 
 CvOutline.displayName = 'CvOutline'
diff --git a/packages/components/icons/src/icons/DeleteFill.tsx b/packages/components/icons/src/icons/DeleteFill.tsx
index 084a33f9a..2409e4c9e 100644
--- a/packages/components/icons/src/icons/DeleteFill.tsx
+++ b/packages/components/icons/src/icons/DeleteFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const DeleteFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="DeleteFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm7.75-3.67c-.39-.39-1.02-.39-1.41,0-.39.39-.39,1.02,0,1.41l2.23,2.23-2.23,2.23c-.39.39-.39,1.02,0,1.41.39.39,1.02.39,1.41,0l2.23-2.23,2.23,2.23c.39.39,1.02.39,1.41,0s.39-1.02,0-1.41l-2.23-2.23,2.23-2.23c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-2.23,2.23-2.23-2.23Z"/>',
-      }}
-    />
-  )
+export const DeleteFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="DeleteFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm7.75-3.67c-.39-.39-1.02-.39-1.41,0-.39.39-.39,1.02,0,1.41l2.23,2.23-2.23,2.23c-.39.39-.39,1.02,0,1.41.39.39,1.02.39,1.41,0l2.23-2.23,2.23,2.23c.39.39,1.02.39,1.41,0s.39-1.02,0-1.41l-2.23-2.23,2.23-2.23c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-2.23,2.23-2.23-2.23Z"/>',
+    }}
+  />
 )
 
 DeleteFill.displayName = 'DeleteFill'
diff --git a/packages/components/icons/src/icons/DeleteOutline.tsx b/packages/components/icons/src/icons/DeleteOutline.tsx
index 104f40a28..1cbee3ecf 100644
--- a/packages/components/icons/src/icons/DeleteOutline.tsx
+++ b/packages/components/icons/src/icons/DeleteOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const DeleteOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="DeleteOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,4c-4.42,0-8,3.58-8,8s3.58,8,8,8,8-3.58,8-8-3.58-8-8-8ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm6.33-3.67c.39-.39,1.02-.39,1.41,0l2.23,2.23,2.23-2.23c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-2.23,2.23,2.23,2.23c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-2.23-2.23-2.23,2.23c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l2.23-2.23-2.23-2.23c-.39-.39-.39-1.02,0-1.41Z"/>',
-      }}
-    />
-  )
+export const DeleteOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="DeleteOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,4c-4.42,0-8,3.58-8,8s3.58,8,8,8,8-3.58,8-8-3.58-8-8-8ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Zm6.33-3.67c.39-.39,1.02-.39,1.41,0l2.23,2.23,2.23-2.23c.39-.39,1.02-.39,1.41,0,.39.39.39,1.02,0,1.41l-2.23,2.23,2.23,2.23c.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0l-2.23-2.23-2.23,2.23c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l2.23-2.23-2.23-2.23c-.39-.39-.39-1.02,0-1.41Z"/>',
+    }}
+  />
 )
 
 DeleteOutline.displayName = 'DeleteOutline'
diff --git a/packages/components/icons/src/icons/Directory.tsx b/packages/components/icons/src/icons/Directory.tsx
index fb7e58e11..504d5d7f5 100644
--- a/packages/components/icons/src/icons/Directory.tsx
+++ b/packages/components/icons/src/icons/Directory.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Directory = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Directory"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="M9.8 6.5h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08ZM3.92 16.65c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92ZM20.92 10.91h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08ZM20.92 17.5h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08ZM3.92 3.5c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92ZM3.92 10.07c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92Z"/>',
-      }}
-    />
-  )
+export const Directory = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Directory"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="M9.8 6.5h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08ZM3.92 16.65c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92ZM20.92 10.91h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08ZM20.92 17.5h-11.12c-.6 0-1.08.48-1.08 1.08s.48 1.08 1.08 1.08h11.12c.6 0 1.08-.48 1.08-1.08s-.48-1.08-1.08-1.08ZM3.92 3.5c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92ZM3.92 10.07c-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92 1.92-.86 1.92-1.92-.86-1.92-1.92-1.92Z"/>',
+    }}
+  />
 )
 
 Directory.displayName = 'Directory'
diff --git a/packages/components/icons/src/icons/DoubleCheck.tsx b/packages/components/icons/src/icons/DoubleCheck.tsx
index 6d968ebc8..017036579 100644
--- a/packages/components/icons/src/icons/DoubleCheck.tsx
+++ b/packages/components/icons/src/icons/DoubleCheck.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const DoubleCheck = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="DoubleCheck"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.57,6.07c-.51-.44-1.35-.44-1.78.09l-7.7,9.14-.25-.35c-.25-.44-.76-.7-1.19-.61l5.42-6.44c.25-.26.34-.61.34-.96s-.17-.7-.42-.87c-.25-.17-.59-.26-.85-.26-.34,0-.68.17-.85.44l-7.79,9.14-2.29-2.78c-.42-.61-1.19-.7-1.78-.17-.51.44-.59,1.22-.17,1.74l2.54,3.13c.17.26.42.44.76.61.25.17.59.17.93.26.34,0,.59-.09.93-.17.25-.17.59-.35.76-.61l1.44-1.65c0,.17.08.44.17.61l.51.87c0,.09.08.09.08.17.17.26.42.44.76.61.25.17.59.17.93.26.34,0,.59-.09.85-.17.25-.17.59-.35.76-.61l7.96-9.49c.51-.61.42-1.39-.08-1.91Z"/>',
-      }}
-    />
-  )
+export const DoubleCheck = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="DoubleCheck"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.57,6.07c-.51-.44-1.35-.44-1.78.09l-7.7,9.14-.25-.35c-.25-.44-.76-.7-1.19-.61l5.42-6.44c.25-.26.34-.61.34-.96s-.17-.7-.42-.87c-.25-.17-.59-.26-.85-.26-.34,0-.68.17-.85.44l-7.79,9.14-2.29-2.78c-.42-.61-1.19-.7-1.78-.17-.51.44-.59,1.22-.17,1.74l2.54,3.13c.17.26.42.44.76.61.25.17.59.17.93.26.34,0,.59-.09.93-.17.25-.17.59-.35.76-.61l1.44-1.65c0,.17.08.44.17.61l.51.87c0,.09.08.09.08.17.17.26.42.44.76.61.25.17.59.17.93.26.34,0,.59-.09.85-.17.25-.17.59-.35.76-.61l7.96-9.49c.51-.61.42-1.39-.08-1.91Z"/>',
+    }}
+  />
 )
 
 DoubleCheck.displayName = 'DoubleCheck'
diff --git a/packages/components/icons/src/icons/DownloadFill.tsx b/packages/components/icons/src/icons/DownloadFill.tsx
index c582c32de..a345887a7 100644
--- a/packages/components/icons/src/icons/DownloadFill.tsx
+++ b/packages/components/icons/src/icons/DownloadFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const DownloadFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="DownloadFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.73,9.86c0-.11-.03-.22-.07-.32-.05-.13-.13-.24-.23-.33l-7-6.91c-.1-.09-.21-.17-.34-.22-.12-.05-.25-.08-.39-.08h-7.02c-.65,0-1.27.26-1.73.7-.46.45-.71,1.06-.71,1.7v15.2c0,.64.26,1.25.71,1.7.46.45,1.08.7,1.73.7h12.62c.65,0,1.27-.26,1.73-.7.46-.45.71-1.06.71-1.7v-9.67s0-.04-.02-.07Zm-5.86,6.66l-2.17,2.14c-.1.09-.22.17-.34.22-.12.05-.25.08-.38.08-.27,0-.51-.1-.69-.26,0,0-.02-.02-.03-.03l-2.17-2.14c-.4-.39-.4-1.03,0-1.42.4-.39,1.04-.39,1.44,0l.43.43v-3.63c0-.56.45-1,1.02-1s1.02.44,1.02,1v3.63l.43-.43c.4-.39,1.04-.39,1.44,0,.4.39.4,1.03,0,1.42h0Zm-1.15-7.62v-3.4l3.45,3.4h-3.45Z"/>',
-      }}
-    />
-  )
+export const DownloadFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="DownloadFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.73,9.86c0-.11-.03-.22-.07-.32-.05-.13-.13-.24-.23-.33l-7-6.91c-.1-.09-.21-.17-.34-.22-.12-.05-.25-.08-.39-.08h-7.02c-.65,0-1.27.26-1.73.7-.46.45-.71,1.06-.71,1.7v15.2c0,.64.26,1.25.71,1.7.46.45,1.08.7,1.73.7h12.62c.65,0,1.27-.26,1.73-.7.46-.45.71-1.06.71-1.7v-9.67s0-.04-.02-.07Zm-5.86,6.66l-2.17,2.14c-.1.09-.22.17-.34.22-.12.05-.25.08-.38.08-.27,0-.51-.1-.69-.26,0,0-.02-.02-.03-.03l-2.17-2.14c-.4-.39-.4-1.03,0-1.42.4-.39,1.04-.39,1.44,0l.43.43v-3.63c0-.56.45-1,1.02-1s1.02.44,1.02,1v3.63l.43-.43c.4-.39,1.04-.39,1.44,0,.4.39.4,1.03,0,1.42h0Zm-1.15-7.62v-3.4l3.45,3.4h-3.45Z"/>',
+    }}
+  />
 )
 
 DownloadFill.displayName = 'DownloadFill'
diff --git a/packages/components/icons/src/icons/DownloadOutline.tsx b/packages/components/icons/src/icons/DownloadOutline.tsx
index f2e8b655f..569c84dbd 100644
--- a/packages/components/icons/src/icons/DownloadOutline.tsx
+++ b/packages/components/icons/src/icons/DownloadOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const DownloadOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="DownloadOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m11.36,15.89v-3.55c0-.54.44-.98.99-.98s.99.44.99.98v3.55l.42-.42c.39-.38,1.01-.38,1.4,0,.39.38.39,1,0,1.38l-2.12,2.08c-.1.1-.21.17-.33.21-.12.05-.24.07-.37.07-.26,0-.5-.1-.67-.26-.01,0-.02-.02-.03-.03l-2.11-2.08c-.39-.38-.39-1,0-1.38.39-.38,1.01-.38,1.4,0l.42.42Z"/><path fill-rule="evenodd" d="m13.33,2.22s.05.04.08.07l7.05,6.94s.05.06.08.09c.14.17.21.38.21.6v9.72c0,.63-.25,1.23-.7,1.67-.45.44-1.06.69-1.7.69H5.65c-.64,0-1.25-.25-1.7-.69-.45-.44-.7-1.04-.7-1.67V4.36c0-.63.25-1.23.7-1.67.45-.44,1.06-.69,1.7-.69h7.06c.23,0,.45.08.62.22Zm-7.97,1.86c.08-.08.19-.12.3-.12h6.06v5.97c0,.54.44.98.99.98h6.06v8.74c0,.11-.04.21-.12.29-.08.08-.19.12-.3.12H5.65c-.11,0-.22-.04-.3-.12s-.12-.18-.12-.29V4.36c0-.11.04-.21.12-.29Zm12.01,4.87h-3.67v-3.61l3.67,3.61Z"/>',
-      }}
-    />
-  )
+export const DownloadOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="DownloadOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m11.36,15.89v-3.55c0-.54.44-.98.99-.98s.99.44.99.98v3.55l.42-.42c.39-.38,1.01-.38,1.4,0,.39.38.39,1,0,1.38l-2.12,2.08c-.1.1-.21.17-.33.21-.12.05-.24.07-.37.07-.26,0-.5-.1-.67-.26-.01,0-.02-.02-.03-.03l-2.11-2.08c-.39-.38-.39-1,0-1.38.39-.38,1.01-.38,1.4,0l.42.42Z"/><path fill-rule="evenodd" d="m13.33,2.22s.05.04.08.07l7.05,6.94s.05.06.08.09c.14.17.21.38.21.6v9.72c0,.63-.25,1.23-.7,1.67-.45.44-1.06.69-1.7.69H5.65c-.64,0-1.25-.25-1.7-.69-.45-.44-.7-1.04-.7-1.67V4.36c0-.63.25-1.23.7-1.67.45-.44,1.06-.69,1.7-.69h7.06c.23,0,.45.08.62.22Zm-7.97,1.86c.08-.08.19-.12.3-.12h6.06v5.97c0,.54.44.98.99.98h6.06v8.74c0,.11-.04.21-.12.29-.08.08-.19.12-.3.12H5.65c-.11,0-.22-.04-.3-.12s-.12-.18-.12-.29V4.36c0-.11.04-.21.12-.29Zm12.01,4.87h-3.67v-3.61l3.67,3.61Z"/>',
+    }}
+  />
 )
 
 DownloadOutline.displayName = 'DownloadOutline'
diff --git a/packages/components/icons/src/icons/ErrorPhoto.tsx b/packages/components/icons/src/icons/ErrorPhoto.tsx
index 76537c739..d93358da9 100644
--- a/packages/components/icons/src/icons/ErrorPhoto.tsx
+++ b/packages/components/icons/src/icons/ErrorPhoto.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ErrorPhoto = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ErrorPhoto"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m5.61,7.66c0,1.64,1.32,2.97,2.96,2.97s2.96-1.33,2.96-2.97-1.32-2.97-2.96-2.97-2.96,1.33-2.96,2.97Zm4.22,0c0,.7-.57,1.27-1.26,1.27s-1.26-.57-1.26-1.27.57-1.27,1.26-1.27,1.26.57,1.26,1.27Z"/><path d="m6.78,21.24c-.22-.36-.34-.77-.38-1.19h-2.03c-.23,0-.42-.19-.42-.42v-5.91c.36-.04.73-.06,1.08-.06h.02c1.47-.03,2.92.3,4.22.94l.87-1.74c-1.58-.78-3.33-1.18-5.12-1.14-.36,0-.73.02-1.08.05v-7.41c0-.23.19-.42.42-.42h15.2c.23,0,.42.19.42.42v7.92c0,1.35,1.93,1.4,1.93.03v-7.95c0-1.3-1.05-2.36-2.35-2.36H4.36c-1.29,0-2.35,1.06-2.35,2.36v8.36c-.02.11-.02.22,0,.33v6.59c0,1.3,1.05,2.36,2.35,2.36h3.13c-.29-.21-.54-.45-.73-.76h0Z"/><path d="M15.44 17.52c-.12-.06-.24-.11-.39-.11-.07 0-.14.01-.2.03-.06.02-.13.05-.19.08-.27.14-.45.41-.45.73 0 .46.38.84.84.84.2 0 .38-.08.52-.2.19-.15.32-.38.32-.64 0-.32-.19-.59-.45-.73ZM15.06 16.91c.14 0 .26-.05.36-.12.18-.12.31-.32.31-.55v-3.08c0-.37-.3-.67-.67-.67s-.67.3-.67.67v3.08c0 .23.13.43.31.55.11.07.23.12.36.12Z"/><path d="m21.89,19.51l-.18-.39-5.01-10.07c-.15-.3-.39-.56-.68-.73-.29-.17-.62-.27-.97-.27s-.68.09-.97.27c-.29.18-.53.43-.68.74l-5.1,10.24c-.14.28-.21.6-.2.91.02.34.12.64.27.89.16.27.4.49.67.65.17.1.38.16.64.2h.09c.06.03.12.04.18.04h10.2c.32,0,.63-.08.9-.24.28-.16.51-.38.67-.65.17-.27.26-.58.27-.89,0-.24-.03-.49-.11-.72v.02Zm-1.91.53c-.05.07-.13.12-.21.12h-9.41c-.09,0-.17-.04-.21-.12-.05-.07-.05-.17,0-.24l1.57-3.16.91-1.81,2.23-4.49c.04-.08.13-.14.22-.14s.18.05.22.14l3.12,6.26,1.59,3.21c.04.08.03.17,0,.24h0Z"/>',
-      }}
-    />
-  )
+export const ErrorPhoto = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ErrorPhoto"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m5.61,7.66c0,1.64,1.32,2.97,2.96,2.97s2.96-1.33,2.96-2.97-1.32-2.97-2.96-2.97-2.96,1.33-2.96,2.97Zm4.22,0c0,.7-.57,1.27-1.26,1.27s-1.26-.57-1.26-1.27.57-1.27,1.26-1.27,1.26.57,1.26,1.27Z"/><path d="m6.78,21.24c-.22-.36-.34-.77-.38-1.19h-2.03c-.23,0-.42-.19-.42-.42v-5.91c.36-.04.73-.06,1.08-.06h.02c1.47-.03,2.92.3,4.22.94l.87-1.74c-1.58-.78-3.33-1.18-5.12-1.14-.36,0-.73.02-1.08.05v-7.41c0-.23.19-.42.42-.42h15.2c.23,0,.42.19.42.42v7.92c0,1.35,1.93,1.4,1.93.03v-7.95c0-1.3-1.05-2.36-2.35-2.36H4.36c-1.29,0-2.35,1.06-2.35,2.36v8.36c-.02.11-.02.22,0,.33v6.59c0,1.3,1.05,2.36,2.35,2.36h3.13c-.29-.21-.54-.45-.73-.76h0Z"/><path d="M15.44 17.52c-.12-.06-.24-.11-.39-.11-.07 0-.14.01-.2.03-.06.02-.13.05-.19.08-.27.14-.45.41-.45.73 0 .46.38.84.84.84.2 0 .38-.08.52-.2.19-.15.32-.38.32-.64 0-.32-.19-.59-.45-.73ZM15.06 16.91c.14 0 .26-.05.36-.12.18-.12.31-.32.31-.55v-3.08c0-.37-.3-.67-.67-.67s-.67.3-.67.67v3.08c0 .23.13.43.31.55.11.07.23.12.36.12Z"/><path d="m21.89,19.51l-.18-.39-5.01-10.07c-.15-.3-.39-.56-.68-.73-.29-.17-.62-.27-.97-.27s-.68.09-.97.27c-.29.18-.53.43-.68.74l-5.1,10.24c-.14.28-.21.6-.2.91.02.34.12.64.27.89.16.27.4.49.67.65.17.1.38.16.64.2h.09c.06.03.12.04.18.04h10.2c.32,0,.63-.08.9-.24.28-.16.51-.38.67-.65.17-.27.26-.58.27-.89,0-.24-.03-.49-.11-.72v.02Zm-1.91.53c-.05.07-.13.12-.21.12h-9.41c-.09,0-.17-.04-.21-.12-.05-.07-.05-.17,0-.24l1.57-3.16.91-1.81,2.23-4.49c.04-.08.13-.14.22-.14s.18.05.22.14l3.12,6.26,1.59,3.21c.04.08.03.17,0,.24h0Z"/>',
+    }}
+  />
 )
 
 ErrorPhoto.displayName = 'ErrorPhoto'
diff --git a/packages/components/icons/src/icons/Euro.tsx b/packages/components/icons/src/icons/Euro.tsx
index 2dd12a093..eca834ea0 100644
--- a/packages/components/icons/src/icons/Euro.tsx
+++ b/packages/components/icons/src/icons/Euro.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Euro = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Euro"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.44,4c.7,0,1.39.12,2.05.35.51.18,1.07-.1,1.25-.62.18-.52-.09-1.09-.6-1.27-.88-.31-1.8-.47-2.72-.46-.01,0-.03,0-.04,0-2.5.12-4.85,1.24-6.54,3.12-.95,1.05-1.64,2.29-2.05,3.63h-3.12c-.54,0-.98.45-.98,1s.44,1,.98,1h2.73c-.04.41-.05.83-.03,1.25-.02.42,0,.84.03,1.25h-2.73c-.54,0-.98.45-.98,1s.44,1,.98,1h3.12c.41,1.34,1.11,2.58,2.05,3.63,1.69,1.88,4.04,3,6.54,3.12,0,0,.02,0,.03,0h.02c1.15,0,2.28-.23,3.33-.7.5-.22.73-.81.51-1.31-.21-.51-.79-.74-1.29-.52-.8.35-1.66.53-2.53.53-1.97-.1-3.83-.99-5.17-2.47-.61-.67-1.08-1.45-1.41-2.28h3.62c.54,0,.98-.45.98-1s-.44-1-.98-1h-4.12c-.05-.4-.06-.8-.05-1.21,0-.03,0-.05,0-.08-.02-.41,0-.81.05-1.21h4.12c.54,0,.98-.45.98-1s-.44-1-.98-1h-3.62c.33-.83.81-1.6,1.41-2.28,1.34-1.49,3.19-2.38,5.17-2.47Z"/>',
-      }}
-    />
-  )
+export const Euro = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Euro"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.44,4c.7,0,1.39.12,2.05.35.51.18,1.07-.1,1.25-.62.18-.52-.09-1.09-.6-1.27-.88-.31-1.8-.47-2.72-.46-.01,0-.03,0-.04,0-2.5.12-4.85,1.24-6.54,3.12-.95,1.05-1.64,2.29-2.05,3.63h-3.12c-.54,0-.98.45-.98,1s.44,1,.98,1h2.73c-.04.41-.05.83-.03,1.25-.02.42,0,.84.03,1.25h-2.73c-.54,0-.98.45-.98,1s.44,1,.98,1h3.12c.41,1.34,1.11,2.58,2.05,3.63,1.69,1.88,4.04,3,6.54,3.12,0,0,.02,0,.03,0h.02c1.15,0,2.28-.23,3.33-.7.5-.22.73-.81.51-1.31-.21-.51-.79-.74-1.29-.52-.8.35-1.66.53-2.53.53-1.97-.1-3.83-.99-5.17-2.47-.61-.67-1.08-1.45-1.41-2.28h3.62c.54,0,.98-.45.98-1s-.44-1-.98-1h-4.12c-.05-.4-.06-.8-.05-1.21,0-.03,0-.05,0-.08-.02-.41,0-.81.05-1.21h4.12c.54,0,.98-.45.98-1s-.44-1-.98-1h-3.62c.33-.83.81-1.6,1.41-2.28,1.34-1.49,3.19-2.38,5.17-2.47Z"/>',
+    }}
+  />
 )
 
 Euro.displayName = 'Euro'
diff --git a/packages/components/icons/src/icons/Export.tsx b/packages/components/icons/src/icons/Export.tsx
index 292f037d6..08ee6ea67 100644
--- a/packages/components/icons/src/icons/Export.tsx
+++ b/packages/components/icons/src/icons/Export.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Export = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Export"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,2c.29,0,.57.13.76.35l4.15,4.85c.36.42.31,1.05-.11,1.41-.42.36-1.05.31-1.41-.11l-2.39-2.79v9.76c0,.55-.45,1-1,1s-1-.45-1-1V5.7s-2.39,2.79-2.39,2.79c-.36.42-.99.47-1.41.11-.42-.36-.47-.99-.11-1.41l4.15-4.85c.19-.22.47-.35.76-.35ZM3,15.85c.55,0,1,.45,1,1v1.38c0,.47.19.92.52,1.25.33.33.78.52,1.25.52h12.46c.47,0,.92-.19,1.25-.52.33-.33.52-.78.52-1.25v-1.38c0-.55.45-1,1-1s1,.45,1,1v1.38c0,1-.4,1.96-1.1,2.67-.71.71-1.67,1.1-2.67,1.1H5.77c-1,0-1.96-.4-2.67-1.1-.71-.71-1.1-1.67-1.1-2.67v-1.38c0-.55.45-1,1-1Z"/>',
-      }}
-    />
-  )
+export const Export = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Export"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,2c.29,0,.57.13.76.35l4.15,4.85c.36.42.31,1.05-.11,1.41-.42.36-1.05.31-1.41-.11l-2.39-2.79v9.76c0,.55-.45,1-1,1s-1-.45-1-1V5.7s-2.39,2.79-2.39,2.79c-.36.42-.99.47-1.41.11-.42-.36-.47-.99-.11-1.41l4.15-4.85c.19-.22.47-.35.76-.35ZM3,15.85c.55,0,1,.45,1,1v1.38c0,.47.19.92.52,1.25.33.33.78.52,1.25.52h12.46c.47,0,.92-.19,1.25-.52.33-.33.52-.78.52-1.25v-1.38c0-.55.45-1,1-1s1,.45,1,1v1.38c0,1-.4,1.96-1.1,2.67-.71.71-1.67,1.1-2.67,1.1H5.77c-1,0-1.96-.4-2.67-1.1-.71-.71-1.1-1.67-1.1-2.67v-1.38c0-.55.45-1,1-1Z"/>',
+    }}
+  />
 )
 
 Export.displayName = 'Export'
diff --git a/packages/components/icons/src/icons/EyeFill.tsx b/packages/components/icons/src/icons/EyeFill.tsx
index b48d4a2a0..96eb28966 100644
--- a/packages/components/icons/src/icons/EyeFill.tsx
+++ b/packages/components/icons/src/icons/EyeFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const EyeFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="EyeFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,12c0-.39-.14-.76-.4-1.05-1.62-1.77-5.3-5.2-9.6-5.2s-7.98,3.44-9.6,5.2c-.26.29-.4.66-.4,1.05s.14.76.4,1.05c1.62,1.77,5.3,5.2,9.6,5.2s7.98-3.44,9.6-5.2c.26-.29.4-.66.4-1.05Zm-12.31,0c0-1.29,1.04-2.34,2.31-2.34s2.31,1.05,2.31,2.34-1.04,2.34-2.31,2.34-2.31-1.05-2.31-2.34Zm2.31-3.91c-2.13,0-3.85,1.75-3.85,3.91s1.73,3.91,3.85,3.91,3.85-1.75,3.85-3.91-1.73-3.91-3.85-3.91Z"/>',
-      }}
-    />
-  )
+export const EyeFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="EyeFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,12c0-.39-.14-.76-.4-1.05-1.62-1.77-5.3-5.2-9.6-5.2s-7.98,3.44-9.6,5.2c-.26.29-.4.66-.4,1.05s.14.76.4,1.05c1.62,1.77,5.3,5.2,9.6,5.2s7.98-3.44,9.6-5.2c.26-.29.4-.66.4-1.05Zm-12.31,0c0-1.29,1.04-2.34,2.31-2.34s2.31,1.05,2.31,2.34-1.04,2.34-2.31,2.34-2.31-1.05-2.31-2.34Zm2.31-3.91c-2.13,0-3.85,1.75-3.85,3.91s1.73,3.91,3.85,3.91,3.85-1.75,3.85-3.91-1.73-3.91-3.85-3.91Z"/>',
+    }}
+  />
 )
 
 EyeFill.displayName = 'EyeFill'
diff --git a/packages/components/icons/src/icons/EyeOffFill.tsx b/packages/components/icons/src/icons/EyeOffFill.tsx
index f22d9fb81..366c1b75d 100644
--- a/packages/components/icons/src/icons/EyeOffFill.tsx
+++ b/packages/components/icons/src/icons/EyeOffFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const EyeOffFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="EyeOffFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="M21.04 10.57c-.32-.42-.8-.93-1.36-1.44-.24-.25-.72-.25-.96 0l-8.08 8.16c-.32.25-.32.76 0 1.1.16.17.4.25.64.25h.72c2.08 0 4-.85 5.52-1.95 1.52-1.02 2.8-2.29 3.52-3.14.32-.42.56-.93.56-1.44 0-.61-.16-1.2-.56-1.54ZM20 3.51c-.32-.34-.72-.34-1.04 0l-2.8 3.06c-1.28-.68-2.72-1.1-4.16-1.1-2.08 0-4 .85-5.52 1.95-1.52 1.02-2.8 2.29-3.52 3.14-.32.43-.56.94-.56 1.45s.16 1.1.56 1.44c1.04 1.27 2.32 2.29 3.6 3.23l-2.56 2.72c-.32.34-.32.76 0 1.1.32.34.72.34 1.04 0l14.96-15.97c.32-.25.32-.76 0-1.02Zm-10.4 9.94c-.24-.42-.4-.93-.4-1.44 0-.76.32-1.53.8-2.04.48-.51 1.2-.85 1.92-.85.48 0 .96.17 1.36.42l-3.68 3.91Z"/>',
-      }}
-    />
-  )
+export const EyeOffFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="EyeOffFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="M21.04 10.57c-.32-.42-.8-.93-1.36-1.44-.24-.25-.72-.25-.96 0l-8.08 8.16c-.32.25-.32.76 0 1.1.16.17.4.25.64.25h.72c2.08 0 4-.85 5.52-1.95 1.52-1.02 2.8-2.29 3.52-3.14.32-.42.56-.93.56-1.44 0-.61-.16-1.2-.56-1.54ZM20 3.51c-.32-.34-.72-.34-1.04 0l-2.8 3.06c-1.28-.68-2.72-1.1-4.16-1.1-2.08 0-4 .85-5.52 1.95-1.52 1.02-2.8 2.29-3.52 3.14-.32.43-.56.94-.56 1.45s.16 1.1.56 1.44c1.04 1.27 2.32 2.29 3.6 3.23l-2.56 2.72c-.32.34-.32.76 0 1.1.32.34.72.34 1.04 0l14.96-15.97c.32-.25.32-.76 0-1.02Zm-10.4 9.94c-.24-.42-.4-.93-.4-1.44 0-.76.32-1.53.8-2.04.48-.51 1.2-.85 1.92-.85.48 0 .96.17 1.36.42l-3.68 3.91Z"/>',
+    }}
+  />
 )
 
 EyeOffFill.displayName = 'EyeOffFill'
diff --git a/packages/components/icons/src/icons/EyeOffOutline.tsx b/packages/components/icons/src/icons/EyeOffOutline.tsx
index 0e3863197..d7e8ac1f9 100644
--- a/packages/components/icons/src/icons/EyeOffOutline.tsx
+++ b/packages/components/icons/src/icons/EyeOffOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const EyeOffOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="EyeOffOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M21.38 10.47c-.35-.37-.82-.84-1.38-1.32-.4-.34-1.02-.31-1.38.08-.36.39-.33.98.07 1.33.5.43.92.85 1.23 1.19.07.08.11.17.11.27s-.03.19-.1.27c-.7.72-1.83 1.78-3.23 2.65-1.41.87-3.02 1.52-4.72 1.52h-.56c-.54 0-.98.42-.98.94s.43.94.98.94h.56c2.19 0 4.18-.83 5.77-1.82 1.59-.98 2.85-2.17 3.62-2.96h0c.39-.43.61-.98.61-1.54s-.22-1.11-.61-1.53v-.02ZM10.73 14.56l9.61-9.28c.38-.37.38-.97 0-1.34-.38-.37-1-.37-1.38 0l-2.8 2.71c-1.29-.6-2.7-.94-4.13-.97h-.02c-2.19 0-4.18.83-5.77 1.82-1.59.98-2.85 2.17-3.62 2.96h0c-.39.43-.61.98-.61 1.54s.22 1.11.61 1.53c1.03 1.09 2.2 2.04 3.47 2.85l-2.42 2.34c-.38.37-.38.97 0 1.34.38.37 1 .37 1.38 0l5.69-5.5h0Zm-.53-2.56c0-.46.19-.91.52-1.24.34-.33.8-.51 1.28-.51.13 0 .26.02.38.04l-2.14 2.07c-.03-.12-.04-.24-.05-.37h0Zm-6.13.27c-.07-.08-.11-.17-.11-.27s.03-.19.1-.27c.7-.72 1.83-1.78 3.23-2.65 1.41-.87 3.02-1.51 4.7-1.52.93.02 1.82.2 2.68.51l-.82.79c-.56-.31-1.19-.5-1.86-.5-1 0-1.95.38-2.66 1.06-.71.68-1.1 1.61-1.1 2.56 0 .64.19 1.25.52 1.8l-1.26 1.22c-1.27-.77-2.43-1.68-3.44-2.75v.02Z"/><path fill-rule="evenodd" d="m13.57,12.87c-.16.27-.39.49-.67.64-.47.26-.63.83-.37,1.29.27.45.86.61,1.33.35.57-.32,1.06-.77,1.39-1.33.28-.45.12-1.03-.35-1.29-.47-.26-1.07-.11-1.33.34h0Z"/>',
-      }}
-    />
-  )
+export const EyeOffOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="EyeOffOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M21.38 10.47c-.35-.37-.82-.84-1.38-1.32-.4-.34-1.02-.31-1.38.08-.36.39-.33.98.07 1.33.5.43.92.85 1.23 1.19.07.08.11.17.11.27s-.03.19-.1.27c-.7.72-1.83 1.78-3.23 2.65-1.41.87-3.02 1.52-4.72 1.52h-.56c-.54 0-.98.42-.98.94s.43.94.98.94h.56c2.19 0 4.18-.83 5.77-1.82 1.59-.98 2.85-2.17 3.62-2.96h0c.39-.43.61-.98.61-1.54s-.22-1.11-.61-1.53v-.02ZM10.73 14.56l9.61-9.28c.38-.37.38-.97 0-1.34-.38-.37-1-.37-1.38 0l-2.8 2.71c-1.29-.6-2.7-.94-4.13-.97h-.02c-2.19 0-4.18.83-5.77 1.82-1.59.98-2.85 2.17-3.62 2.96h0c-.39.43-.61.98-.61 1.54s.22 1.11.61 1.53c1.03 1.09 2.2 2.04 3.47 2.85l-2.42 2.34c-.38.37-.38.97 0 1.34.38.37 1 .37 1.38 0l5.69-5.5h0Zm-.53-2.56c0-.46.19-.91.52-1.24.34-.33.8-.51 1.28-.51.13 0 .26.02.38.04l-2.14 2.07c-.03-.12-.04-.24-.05-.37h0Zm-6.13.27c-.07-.08-.11-.17-.11-.27s.03-.19.1-.27c.7-.72 1.83-1.78 3.23-2.65 1.41-.87 3.02-1.51 4.7-1.52.93.02 1.82.2 2.68.51l-.82.79c-.56-.31-1.19-.5-1.86-.5-1 0-1.95.38-2.66 1.06-.71.68-1.1 1.61-1.1 2.56 0 .64.19 1.25.52 1.8l-1.26 1.22c-1.27-.77-2.43-1.68-3.44-2.75v.02Z"/><path fill-rule="evenodd" d="m13.57,12.87c-.16.27-.39.49-.67.64-.47.26-.63.83-.37,1.29.27.45.86.61,1.33.35.57-.32,1.06-.77,1.39-1.33.28-.45.12-1.03-.35-1.29-.47-.26-1.07-.11-1.33.34h0Z"/>',
+    }}
+  />
 )
 
 EyeOffOutline.displayName = 'EyeOffOutline'
diff --git a/packages/components/icons/src/icons/EyeOutline.tsx b/packages/components/icons/src/icons/EyeOutline.tsx
index f2ce23a39..eb9eae20f 100644
--- a/packages/components/icons/src/icons/EyeOutline.tsx
+++ b/packages/components/icons/src/icons/EyeOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const EyeOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="EyeOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.39,10.38c-.76-.84-2.03-2.09-3.62-3.13-1.59-1.04-3.58-1.92-5.77-1.92s-4.19.88-5.77,1.92c-1.59,1.04-2.85,2.29-3.61,3.12-.39.45-.61,1.03-.61,1.62s.22,1.17.61,1.62c.76.84,2.02,2.09,3.62,3.13,1.59,1.04,3.58,1.92,5.77,1.92s4.19-.88,5.77-1.92c1.59-1.04,2.85-2.29,3.61-3.12.39-.45.61-1.03.61-1.62s-.22-1.17-.61-1.62Zm-9.4,6.3c-1.69,0-3.31-.68-4.72-1.61-1.4-.92-2.54-2.03-3.24-2.8-.07-.08-.1-.18-.1-.28s.03-.2.1-.28c.7-.77,1.84-1.88,3.24-2.8,1.41-.93,3.03-1.61,4.72-1.61s3.31.68,4.72,1.61c1.4.92,2.54,2.03,3.24,2.8.07.08.1.18.1.28s-.03.2-.1.28c-.7.77-1.84,1.88-3.24,2.8-1.41.93-3.03,1.61-4.72,1.61Z"/><path d="m11.99,8.16c-2.08,0-3.76,1.72-3.76,3.84s1.69,3.84,3.76,3.84,3.76-1.72,3.76-3.84-1.69-3.84-3.76-3.84Zm0,5.68c-1,0-1.81-.82-1.81-1.85s.81-1.85,1.81-1.85,1.81.82,1.81,1.85-.81,1.85-1.81,1.85Z"/>',
-      }}
-    />
-  )
+export const EyeOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="EyeOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.39,10.38c-.76-.84-2.03-2.09-3.62-3.13-1.59-1.04-3.58-1.92-5.77-1.92s-4.19.88-5.77,1.92c-1.59,1.04-2.85,2.29-3.61,3.12-.39.45-.61,1.03-.61,1.62s.22,1.17.61,1.62c.76.84,2.02,2.09,3.62,3.13,1.59,1.04,3.58,1.92,5.77,1.92s4.19-.88,5.77-1.92c1.59-1.04,2.85-2.29,3.61-3.12.39-.45.61-1.03.61-1.62s-.22-1.17-.61-1.62Zm-9.4,6.3c-1.69,0-3.31-.68-4.72-1.61-1.4-.92-2.54-2.03-3.24-2.8-.07-.08-.1-.18-.1-.28s.03-.2.1-.28c.7-.77,1.84-1.88,3.24-2.8,1.41-.93,3.03-1.61,4.72-1.61s3.31.68,4.72,1.61c1.4.92,2.54,2.03,3.24,2.8.07.08.1.18.1.28s-.03.2-.1.28c-.7.77-1.84,1.88-3.24,2.8-1.41.93-3.03,1.61-4.72,1.61Z"/><path d="m11.99,8.16c-2.08,0-3.76,1.72-3.76,3.84s1.69,3.84,3.76,3.84,3.76-1.72,3.76-3.84-1.69-3.84-3.76-3.84Zm0,5.68c-1,0-1.81-.82-1.81-1.85s.81-1.85,1.81-1.85,1.81.82,1.81,1.85-.81,1.85-1.81,1.85Z"/>',
+    }}
+  />
 )
 
 EyeOutline.displayName = 'EyeOutline'
diff --git a/packages/components/icons/src/icons/FavoriteFill.tsx b/packages/components/icons/src/icons/FavoriteFill.tsx
index a804140ea..0fba7af00 100644
--- a/packages/components/icons/src/icons/FavoriteFill.tsx
+++ b/packages/components/icons/src/icons/FavoriteFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FavoriteFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FavoriteFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m8.28,20.41c.48.23,1.01.34,1.55.34h7.69c1.77,0,3.28-1.26,3.55-2.98l.9-5.65c.27-1.71-1.08-3.26-2.84-3.26h-4.72v-3.32c0-1.27-1.05-2.29-2.34-2.29-.85,0-1.63.45-2.04,1.17l-2.99,5.23c-.18.32-.28.67-.28,1.03v7.68c0,.82.48,1.56,1.23,1.91l.29.13ZM3.43,9.91c-.38,0-.74.15-1.01.41-.27.26-.42.62-.42.99v7.21c0,.37.15.73.42.99.27.26.63.41,1.01.41h.71c.4,0,.72-.32.72-.71v-8.61c0-.19-.08-.37-.21-.5-.13-.13-.32-.21-.51-.21h-.71Z"/>',
-      }}
-    />
-  )
+export const FavoriteFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FavoriteFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m8.28,20.41c.48.23,1.01.34,1.55.34h7.69c1.77,0,3.28-1.26,3.55-2.98l.9-5.65c.27-1.71-1.08-3.26-2.84-3.26h-4.72v-3.32c0-1.27-1.05-2.29-2.34-2.29-.85,0-1.63.45-2.04,1.17l-2.99,5.23c-.18.32-.28.67-.28,1.03v7.68c0,.82.48,1.56,1.23,1.91l.29.13ZM3.43,9.91c-.38,0-.74.15-1.01.41-.27.26-.42.62-.42.99v7.21c0,.37.15.73.42.99.27.26.63.41,1.01.41h.71c.4,0,.72-.32.72-.71v-8.61c0-.19-.08-.37-.21-.5-.13-.13-.32-.21-.51-.21h-.71Z"/>',
+    }}
+  />
 )
 
 FavoriteFill.displayName = 'FavoriteFill'
diff --git a/packages/components/icons/src/icons/FavoriteOutline.tsx b/packages/components/icons/src/icons/FavoriteOutline.tsx
index 750dfc259..d6225b7da 100644
--- a/packages/components/icons/src/icons/FavoriteOutline.tsx
+++ b/packages/components/icons/src/icons/FavoriteOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FavoriteOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FavoriteOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.92,10.54c-.08-.32-.24-.63-.49-.95-.24-.24-.49-.48-.81-.63-.32-.16-.65-.24-1.05-.24h-5.1v-3.01c0-.32-.08-.63-.24-.95-.16-.32-.32-.55-.57-.79-.24-.24-.57-.4-.81-.55-.4-.08-.73-.16-1.05-.16-.4,0-.89.08-1.21.32-.4.24-.73.48-.89.87l-3.24,5.07h-2.75c-.4,0-.89.16-1.21.48-.32.32-.49.71-.49,1.19v7.13c0,.4.16.87.49,1.19.32.32.73.48,1.21.48h3l.89.4c.49.24,1.13.4,1.7.4h9.07c.65,0,1.21-.24,1.7-.63.49-.4.73-.95.81-1.5l1.13-7.05c0-.32,0-.63-.08-1.03Zm-15.95,7.52h-2.02v-6.65h2.02v6.65Zm12.96.32c0,.16-.08.32-.16.4-.08.08-.24.16-.4.16h-9.15c-.24,0-.57-.08-.81-.16l-.49-.24v-7.76l3.4-5.31c.08-.08.08-.16.16-.16.08-.08.16,0,.32-.08h.24c.08,0,.16.08.16.08q.08.08.16.16c0,.08.08.16.08.24v3.96c0,.55.4.95.97.95h6.07c.08,0,.16,0,.24.08.08,0,.16.08.24.16.08.08.08.16.16.24v.24l-1.21,7.05Z"/>',
-      }}
-    />
-  )
+export const FavoriteOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FavoriteOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.92,10.54c-.08-.32-.24-.63-.49-.95-.24-.24-.49-.48-.81-.63-.32-.16-.65-.24-1.05-.24h-5.1v-3.01c0-.32-.08-.63-.24-.95-.16-.32-.32-.55-.57-.79-.24-.24-.57-.4-.81-.55-.4-.08-.73-.16-1.05-.16-.4,0-.89.08-1.21.32-.4.24-.73.48-.89.87l-3.24,5.07h-2.75c-.4,0-.89.16-1.21.48-.32.32-.49.71-.49,1.19v7.13c0,.4.16.87.49,1.19.32.32.73.48,1.21.48h3l.89.4c.49.24,1.13.4,1.7.4h9.07c.65,0,1.21-.24,1.7-.63.49-.4.73-.95.81-1.5l1.13-7.05c0-.32,0-.63-.08-1.03Zm-15.95,7.52h-2.02v-6.65h2.02v6.65Zm12.96.32c0,.16-.08.32-.16.4-.08.08-.24.16-.4.16h-9.15c-.24,0-.57-.08-.81-.16l-.49-.24v-7.76l3.4-5.31c.08-.08.08-.16.16-.16.08-.08.16,0,.32-.08h.24c.08,0,.16.08.16.08q.08.08.16.16c0,.08.08.16.08.24v3.96c0,.55.4.95.97.95h6.07c.08,0,.16,0,.24.08.08,0,.16.08.24.16.08.08.08.16.16.24v.24l-1.21,7.05Z"/>',
+    }}
+  />
 )
 
 FavoriteOutline.displayName = 'FavoriteOutline'
diff --git a/packages/components/icons/src/icons/FileOffFill.tsx b/packages/components/icons/src/icons/FileOffFill.tsx
index f7bd28d50..c61710305 100644
--- a/packages/components/icons/src/icons/FileOffFill.tsx
+++ b/packages/components/icons/src/icons/FileOffFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FileOffFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FileOffFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m6.44,3.25l3.62,3.59h2.38c.44,0,.79.35.79.79,0,.52-.44.88-.79.88h-.71l2.47,2.45h2.3c.44,0,.79.35.79.79s-.35.79-.79.79h-.71l5.56,5.51v-9.01c0-.17-.09-.44-.26-.52L14.3,1.76c-.09-.17-.35-.26-.53-.26h-6.8c-.62,0-1.15.17-1.59.61l-.09.09,1.15,1.05Zm15.8,17.85L2.82,1.85c-.26-.35-.79-.35-1.06,0-.35.35-.35.79,0,1.14l3,2.98v12.6c0,.52.26,1.14.62,1.49.44.44.97.61,1.5.61h12.62l1.59,1.57c.18.18.35.26.53.26s.44-.09.53-.26c.44-.35.44-.88.09-1.14Zm-12.54-10.15h.09l1.59,1.57h-1.77c-.44,0-.79-.35-.79-.79.09-.44.44-.79.88-.79Zm0,5.69c-.44,0-.79-.35-.79-.79s.35-.79.79-.79h4.24l1.59,1.58h-5.83Z"/>',
-      }}
-    />
-  )
+export const FileOffFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FileOffFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m6.44,3.25l3.62,3.59h2.38c.44,0,.79.35.79.79,0,.52-.44.88-.79.88h-.71l2.47,2.45h2.3c.44,0,.79.35.79.79s-.35.79-.79.79h-.71l5.56,5.51v-9.01c0-.17-.09-.44-.26-.52L14.3,1.76c-.09-.17-.35-.26-.53-.26h-6.8c-.62,0-1.15.17-1.59.61l-.09.09,1.15,1.05Zm15.8,17.85L2.82,1.85c-.26-.35-.79-.35-1.06,0-.35.35-.35.79,0,1.14l3,2.98v12.6c0,.52.26,1.14.62,1.49.44.44.97.61,1.5.61h12.62l1.59,1.57c.18.18.35.26.53.26s.44-.09.53-.26c.44-.35.44-.88.09-1.14Zm-12.54-10.15h.09l1.59,1.57h-1.77c-.44,0-.79-.35-.79-.79.09-.44.44-.79.88-.79Zm0,5.69c-.44,0-.79-.35-.79-.79s.35-.79.79-.79h4.24l1.59,1.58h-5.83Z"/>',
+    }}
+  />
 )
 
 FileOffFill.displayName = 'FileOffFill'
diff --git a/packages/components/icons/src/icons/FileOffOutline.tsx b/packages/components/icons/src/icons/FileOffOutline.tsx
index 060c5de2e..2b29e55a1 100644
--- a/packages/components/icons/src/icons/FileOffOutline.tsx
+++ b/packages/components/icons/src/icons/FileOffOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FileOffOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FileOffOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m6.43,3.7c.05.05.13.08.2.08s.15-.04.19-.1c0,0,.02-.02.03-.03.06-.06.13-.09.22-.09h6.24l6.06,6.02v6.86c0,.07.03.14.08.18l1.55,1.54c.08.08.18.09.28.06.09-.04.16-.14.16-.24v-8.83c0-.27-.11-.53-.3-.73L14.45,1.8c-.2-.2-.46-.3-.73-.3h-6.67c-.63,0-1.23.25-1.67.69-.02.02-.04.04-.06.06-.09.1-.09.26,0,.36l1.1,1.1h0Zm.18-.18l-.21-.15s.02-.02.03-.03l.18.18s.03-.03.05-.05l-.05.05Z"/><path d="m14.17,11.04l1.55,1.54h.66c.43,0,.77-.34.77-.77s-.34-.77-.77-.77h-2.21Zm8.02,9.7L3.27,1.92c-.4-.39-1.06-.39-1.46,0-.4.4-.4,1.05,0,1.45l2.88,2.87v12.19c0,.62.25,1.22.7,1.66.45.44,1.04.69,1.67.69h12c.08,0,.15-.02.24-.03l1.44,1.44c.4.4,1.06.4,1.46,0,.4-.4.4-1.05,0-1.45h0Zm-12.46-8.17h1.33l2.45,2.44h-3.78c-.43,0-.77.34-.77.77s.34.77.77.77h5.33l2.19,2.18H7.05c-.08,0-.15-.03-.22-.09-.06-.06-.09-.13-.09-.21v-10.13l2.79,2.77c-.34.09-.59.37-.59.74,0,.43.34.77.77.77h0Zm.45-5.51l1.55,1.54h.66c.43,0,.77-.34.77-.77s-.34-.77-.77-.77h-2.21Z"/>',
-      }}
-    />
-  )
+export const FileOffOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FileOffOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m6.43,3.7c.05.05.13.08.2.08s.15-.04.19-.1c0,0,.02-.02.03-.03.06-.06.13-.09.22-.09h6.24l6.06,6.02v6.86c0,.07.03.14.08.18l1.55,1.54c.08.08.18.09.28.06.09-.04.16-.14.16-.24v-8.83c0-.27-.11-.53-.3-.73L14.45,1.8c-.2-.2-.46-.3-.73-.3h-6.67c-.63,0-1.23.25-1.67.69-.02.02-.04.04-.06.06-.09.1-.09.26,0,.36l1.1,1.1h0Zm.18-.18l-.21-.15s.02-.02.03-.03l.18.18s.03-.03.05-.05l-.05.05Z"/><path d="m14.17,11.04l1.55,1.54h.66c.43,0,.77-.34.77-.77s-.34-.77-.77-.77h-2.21Zm8.02,9.7L3.27,1.92c-.4-.39-1.06-.39-1.46,0-.4.4-.4,1.05,0,1.45l2.88,2.87v12.19c0,.62.25,1.22.7,1.66.45.44,1.04.69,1.67.69h12c.08,0,.15-.02.24-.03l1.44,1.44c.4.4,1.06.4,1.46,0,.4-.4.4-1.05,0-1.45h0Zm-12.46-8.17h1.33l2.45,2.44h-3.78c-.43,0-.77.34-.77.77s.34.77.77.77h5.33l2.19,2.18H7.05c-.08,0-.15-.03-.22-.09-.06-.06-.09-.13-.09-.21v-10.13l2.79,2.77c-.34.09-.59.37-.59.74,0,.43.34.77.77.77h0Zm.45-5.51l1.55,1.54h.66c.43,0,.77-.34.77-.77s-.34-.77-.77-.77h-2.21Z"/>',
+    }}
+  />
 )
 
 FileOffOutline.displayName = 'FileOffOutline'
diff --git a/packages/components/icons/src/icons/FilePdfFill.tsx b/packages/components/icons/src/icons/FilePdfFill.tsx
index 83c9e57d5..bc57d350f 100644
--- a/packages/components/icons/src/icons/FilePdfFill.tsx
+++ b/packages/components/icons/src/icons/FilePdfFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FilePdfFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FilePdfFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="M11 13.5c.5-.2.9-.3 1.3-.4-.2-.3-.5-.5-.8-.9-.1.4-.3.9-.5 1.3ZM15.7 13.7h-.2c.1.1.2.1.2 0Z"/><path d="m21.9,8.7L13.6.4c-.2-.3-.5-.4-.8-.4H4.5c-.7,0-1.5.3-2,.8-.5.6-.8,1.3-.8,2v18.3c0,.7.3,1.5.8,2,.5.6,1.3.9,2,.9h15c.7,0,1.5-.3,2-.8s.8-1.3.8-2v-11.7c0-.3-.1-.6-.4-.8Zm-8.3,4c.7-.2,1.4-.3,1.9-.3s.9.1,1.2.3.7.5.7,1-.4.8-.7,1c-.4.2-.8.3-1.2.3-.8,0-1.5-.4-2.2-.9-1,.2-2.1.5-3,.9-.4.7-.7,1.3-1.1,1.7-.4.5-.8.9-1.5.9-.6,0-1.2-.5-1.2-1.2,0-.3.2-.6.4-.8.2-.2.4-.4.7-.6.5-.3,1.1-.6,1.8-.9.5-1,.9-2.1,1.3-3.2-.4-.9-.7-1.8-.7-2.6,0-.4.1-.7.3-1,.2-.2.6-.5,1-.5.5,0,.8.2,1,.5.2.3.3.6.3.9,0,.7-.2,1.6-.5,2.5.4.7.9,1.4,1.5,2Z"/><path d="m7.8,16.4c.1-.1.2-.2.3-.3-.1.1-.3.2-.3.3Z"/>',
-      }}
-    />
-  )
+export const FilePdfFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FilePdfFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="M11 13.5c.5-.2.9-.3 1.3-.4-.2-.3-.5-.5-.8-.9-.1.4-.3.9-.5 1.3ZM15.7 13.7h-.2c.1.1.2.1.2 0Z"/><path d="m21.9,8.7L13.6.4c-.2-.3-.5-.4-.8-.4H4.5c-.7,0-1.5.3-2,.8-.5.6-.8,1.3-.8,2v18.3c0,.7.3,1.5.8,2,.5.6,1.3.9,2,.9h15c.7,0,1.5-.3,2-.8s.8-1.3.8-2v-11.7c0-.3-.1-.6-.4-.8Zm-8.3,4c.7-.2,1.4-.3,1.9-.3s.9.1,1.2.3.7.5.7,1-.4.8-.7,1c-.4.2-.8.3-1.2.3-.8,0-1.5-.4-2.2-.9-1,.2-2.1.5-3,.9-.4.7-.7,1.3-1.1,1.7-.4.5-.8.9-1.5.9-.6,0-1.2-.5-1.2-1.2,0-.3.2-.6.4-.8.2-.2.4-.4.7-.6.5-.3,1.1-.6,1.8-.9.5-1,.9-2.1,1.3-3.2-.4-.9-.7-1.8-.7-2.6,0-.4.1-.7.3-1,.2-.2.6-.5,1-.5.5,0,.8.2,1,.5.2.3.3.6.3.9,0,.7-.2,1.6-.5,2.5.4.7.9,1.4,1.5,2Z"/><path d="m7.8,16.4c.1-.1.2-.2.3-.3-.1.1-.3.2-.3.3Z"/>',
+    }}
+  />
 )
 
 FilePdfFill.displayName = 'FilePdfFill'
diff --git a/packages/components/icons/src/icons/FilePdfOutline.tsx b/packages/components/icons/src/icons/FilePdfOutline.tsx
index ccb9a5ecf..7ad82e115 100644
--- a/packages/components/icons/src/icons/FilePdfOutline.tsx
+++ b/packages/components/icons/src/icons/FilePdfOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FilePdfOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FilePdfOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.9,8.7L13.6.4c-.2-.3-.5-.4-.8-.4H4.5c-.7,0-1.5.3-2,.8-.5.6-.8,1.3-.8,2v18.3c0,.7.3,1.5.8,2,.5.6,1.3.9,2,.9h15c.7,0,1.5-.3,2-.8s.8-1.3.8-2v-11.7c0-.3-.1-.6-.4-.8Zm-1.9,12.5c0,.1,0,.3-.1.4-.1.1-.2.1-.3.1H4.6c-.1,0-.3,0-.3-.1-.2-.2-.3-.3-.3-.4V2.8c0-.1,0-.3.1-.4.1-.1.2-.1.3-.1h7.8l7.8,7.7v11.2Z"/><path d="m12.3,7.3c-.2-.3-.5-.5-1-.5-.4,0-.8.3-1,.5-.2.3-.3.6-.3,1,0,.8.3,1.7.7,2.6-.4,1.1-.8,2.2-1.3,3.2-.7.3-1.3.6-1.8.9-.3.2-.5.4-.7.6-.2.2-.4.5-.4.8,0,.7.6,1.2,1.2,1.2.7,0,1.1-.4,1.5-.9.4-.4.7-1,1.1-1.7.9-.4,2-.7,3-.9.7.5,1.4.9,2.2.9.4,0,.8-.1,1.2-.3.3-.2.7-.5.7-1s-.4-.8-.7-1-.7-.3-1.2-.3-1.2.1-1.9.3c-.6-.6-1.1-1.3-1.5-2,.3-.9.5-1.8.5-2.5,0-.3-.1-.6-.3-.9Zm-4.5,9.1c.1-.1.2-.2.3-.3-.1.1-.3.2-.3.3Zm7.7-2.7h.2c0,.1-.1.1-.2,0-.1.1-.1,0-.2,0,.1.1.2,0,.2,0Zm-3.2-.6c-.4.1-.8.2-1.3.4.2-.4.4-.9.5-1.3.3.4.6.6.8.9Z"/>',
-      }}
-    />
-  )
+export const FilePdfOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FilePdfOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.9,8.7L13.6.4c-.2-.3-.5-.4-.8-.4H4.5c-.7,0-1.5.3-2,.8-.5.6-.8,1.3-.8,2v18.3c0,.7.3,1.5.8,2,.5.6,1.3.9,2,.9h15c.7,0,1.5-.3,2-.8s.8-1.3.8-2v-11.7c0-.3-.1-.6-.4-.8Zm-1.9,12.5c0,.1,0,.3-.1.4-.1.1-.2.1-.3.1H4.6c-.1,0-.3,0-.3-.1-.2-.2-.3-.3-.3-.4V2.8c0-.1,0-.3.1-.4.1-.1.2-.1.3-.1h7.8l7.8,7.7v11.2Z"/><path d="m12.3,7.3c-.2-.3-.5-.5-1-.5-.4,0-.8.3-1,.5-.2.3-.3.6-.3,1,0,.8.3,1.7.7,2.6-.4,1.1-.8,2.2-1.3,3.2-.7.3-1.3.6-1.8.9-.3.2-.5.4-.7.6-.2.2-.4.5-.4.8,0,.7.6,1.2,1.2,1.2.7,0,1.1-.4,1.5-.9.4-.4.7-1,1.1-1.7.9-.4,2-.7,3-.9.7.5,1.4.9,2.2.9.4,0,.8-.1,1.2-.3.3-.2.7-.5.7-1s-.4-.8-.7-1-.7-.3-1.2-.3-1.2.1-1.9.3c-.6-.6-1.1-1.3-1.5-2,.3-.9.5-1.8.5-2.5,0-.3-.1-.6-.3-.9Zm-4.5,9.1c.1-.1.2-.2.3-.3-.1.1-.3.2-.3.3Zm7.7-2.7h.2c0,.1-.1.1-.2,0-.1.1-.1,0-.2,0,.1.1.2,0,.2,0Zm-3.2-.6c-.4.1-.8.2-1.3.4.2-.4.4-.9.5-1.3.3.4.6.6.8.9Z"/>',
+    }}
+  />
 )
 
 FilePdfOutline.displayName = 'FilePdfOutline'
diff --git a/packages/components/icons/src/icons/Filter.tsx b/packages/components/icons/src/icons/Filter.tsx
index 39e9c15b2..b9dbfed3f 100644
--- a/packages/components/icons/src/icons/Filter.tsx
+++ b/packages/components/icons/src/icons/Filter.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Filter = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Filter"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m3,7.94h9.31c.45,1.48,1.82,2.56,3.43,2.56s2.98-1.08,3.43-2.56h1.83c.55,0,1-.45,1-1.01s-.45-1.01-1-1.01h-1.79c-.41-1.54-1.81-2.67-3.46-2.67s-3.05,1.13-3.46,2.67H3c-.55,0-1,.45-1,1.01s.45,1.01,1,1.01Zm12.74-2.67c-.88,0-1.59.72-1.59,1.6s.71,1.6,1.59,1.6,1.59-.72,1.59-1.6-.71-1.6-1.59-1.6Zm5.26,10.78h-9.31c-.45-1.48-1.82-2.56-3.43-2.56s-2.98,1.08-3.43,2.56h-1.83c-.55,0-1,.45-1,1.01s.45,1.01,1,1.01h1.79c.41,1.54,1.81,2.67,3.46,2.67s3.05-1.13,3.46-2.67h9.28c.55,0,1-.45,1-1.01s-.45-1.01-1-1.01Zm-12.74,2.67c.88,0,1.59-.72,1.59-1.6s-.71-1.6-1.59-1.6-1.59.72-1.59,1.6.71,1.6,1.59,1.6Z"/>',
-      }}
-    />
-  )
+export const Filter = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Filter"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m3,7.94h9.31c.45,1.48,1.82,2.56,3.43,2.56s2.98-1.08,3.43-2.56h1.83c.55,0,1-.45,1-1.01s-.45-1.01-1-1.01h-1.79c-.41-1.54-1.81-2.67-3.46-2.67s-3.05,1.13-3.46,2.67H3c-.55,0-1,.45-1,1.01s.45,1.01,1,1.01Zm12.74-2.67c-.88,0-1.59.72-1.59,1.6s.71,1.6,1.59,1.6,1.59-.72,1.59-1.6-.71-1.6-1.59-1.6Zm5.26,10.78h-9.31c-.45-1.48-1.82-2.56-3.43-2.56s-2.98,1.08-3.43,2.56h-1.83c-.55,0-1,.45-1,1.01s.45,1.01,1,1.01h1.79c.41,1.54,1.81,2.67,3.46,2.67s3.05-1.13,3.46-2.67h9.28c.55,0,1-.45,1-1.01s-.45-1.01-1-1.01Zm-12.74,2.67c.88,0,1.59-.72,1.59-1.6s-.71-1.6-1.59-1.6-1.59.72-1.59,1.6.71,1.6,1.59,1.6Z"/>',
+    }}
+  />
 )
 
 Filter.displayName = 'Filter'
diff --git a/packages/components/icons/src/icons/FireFill.tsx b/packages/components/icons/src/icons/FireFill.tsx
index 20092c744..8b1ab2844 100644
--- a/packages/components/icons/src/icons/FireFill.tsx
+++ b/packages/components/icons/src/icons/FireFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FireFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FireFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m11.27,2.16c-.24-.08-.49-.16-.73-.16s-.57.08-.82.24l-.08.08c-.24.16-.41.4-.49.73s0,.65.16.89c.82,1.38,1.22,2.91,1.22,4.37,0,1.13-.24,2.1-.73,2.91-.49-.49-.82-1.13-1.14-1.78-.08-.16-.24-.4-.57-.49-.33-.08-.57-.08-.82.08-1.06.57-1.88,1.38-2.45,2.43-.57,1.05-.9,2.18-.82,3.32,0,.97.24,1.94.73,2.91.41.89,1.06,1.7,1.79,2.35.73.65,1.63,1.21,2.61,1.54.98.32,1.96.49,2.94.4,2.45,0,4.4-.81,5.79-2.1,1.39-1.29,2.04-3.15,2.12-5.1.16-4.61-3.1-10.03-8.72-12.62Zm.49,15.37c0-.57.41-.97.98-.97.49,0,.98-.16,1.3-.57.33-.32.57-.81.57-1.29,0-.57.41-.97.98-.97s.98.4.98.97c0,.97-.41,1.94-1.14,2.67-.73.73-1.63,1.13-2.69,1.13-.57,0-.98-.4-.98-.97Z"/><path d="m12.74,18.5c.98,0,1.96-.4,2.69-1.13.73-.73,1.14-1.62,1.14-2.67,0-.57-.41-.97-.98-.97s-.98.4-.98.97c0,.49-.16.97-.57,1.29-.33.32-.82.57-1.3.57-.57,0-.98.4-.98.97s.41.97.98.97Z"/>',
-      }}
-    />
-  )
+export const FireFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FireFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m11.27,2.16c-.24-.08-.49-.16-.73-.16s-.57.08-.82.24l-.08.08c-.24.16-.41.4-.49.73s0,.65.16.89c.82,1.38,1.22,2.91,1.22,4.37,0,1.13-.24,2.1-.73,2.91-.49-.49-.82-1.13-1.14-1.78-.08-.16-.24-.4-.57-.49-.33-.08-.57-.08-.82.08-1.06.57-1.88,1.38-2.45,2.43-.57,1.05-.9,2.18-.82,3.32,0,.97.24,1.94.73,2.91.41.89,1.06,1.7,1.79,2.35.73.65,1.63,1.21,2.61,1.54.98.32,1.96.49,2.94.4,2.45,0,4.4-.81,5.79-2.1,1.39-1.29,2.04-3.15,2.12-5.1.16-4.61-3.1-10.03-8.72-12.62Zm.49,15.37c0-.57.41-.97.98-.97.49,0,.98-.16,1.3-.57.33-.32.57-.81.57-1.29,0-.57.41-.97.98-.97s.98.4.98.97c0,.97-.41,1.94-1.14,2.67-.73.73-1.63,1.13-2.69,1.13-.57,0-.98-.4-.98-.97Z"/><path d="m12.74,18.5c.98,0,1.96-.4,2.69-1.13.73-.73,1.14-1.62,1.14-2.67,0-.57-.41-.97-.98-.97s-.98.4-.98.97c0,.49-.16.97-.57,1.29-.33.32-.82.57-1.3.57-.57,0-.98.4-.98.97s.41.97.98.97Z"/>',
+    }}
+  />
 )
 
 FireFill.displayName = 'FireFill'
diff --git a/packages/components/icons/src/icons/FireOutline.tsx b/packages/components/icons/src/icons/FireOutline.tsx
index fcdee6382..c4b301289 100644
--- a/packages/components/icons/src/icons/FireOutline.tsx
+++ b/packages/components/icons/src/icons/FireOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FireOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FireOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.5,14.77c0-.55-.45-1-1.01-1s-1.01.45-1.01,1c0,.47-.19.92-.52,1.25-.33.33-.79.52-1.26.52-.56,0-1.01.45-1.01,1s.45,1,1.01,1c1.01,0,1.98-.4,2.69-1.1.71-.71,1.11-1.66,1.11-2.66Z"/><path fill-rule="evenodd" d="m10.53,2c-.28,0-.56.08-.8.22-.04.02-.07.05-.11.07-.26.21-.44.5-.5.83-.06.32,0,.65.17.93.78,1.34,1.24,2.9,1.25,4.35,0,1.07-.23,2.04-.73,2.82-.45-.5-.81-1.07-1.09-1.69-.11-.26-.33-.45-.6-.54-.27-.09-.56-.06-.81.07-1.03.57-1.88,1.4-2.47,2.41-.58,1.01-.88,2.16-.85,3.32h0c.04,1.01.28,1.99.71,2.9.43.9,1.04,1.71,1.79,2.38.75.67,1.63,1.18,2.58,1.51.94.32,1.94.46,2.94.4,2.45,0,4.42-.77,5.79-2.1,1.38-1.33,2.08-3.14,2.17-5.07.2-4.59-3.04-10.02-8.72-12.63-.23-.12-.48-.19-.74-.19Zm2.04,6.39c0-1.21-.26-2.46-.71-3.62,4.1,2.49,6.25,6.65,6.11,9.96-.07,1.52-.61,2.81-1.56,3.73-.94.91-2.38,1.53-4.41,1.53-.02,0-.04,0-.07,0-.74.05-1.48-.05-2.18-.29-.7-.24-1.34-.62-1.89-1.11-.55-.49-1-1.08-1.31-1.75-.31-.66-.49-1.38-.52-2.1-.02-.8.18-1.58.58-2.27.23-.39.51-.75.85-1.05.48.77,1.09,1.46,1.8,2.05.39.33.98.31,1.35-.04,1.43-1.34,1.98-3.19,1.97-5.03Z"/>',
-      }}
-    />
-  )
+export const FireOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FireOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.5,14.77c0-.55-.45-1-1.01-1s-1.01.45-1.01,1c0,.47-.19.92-.52,1.25-.33.33-.79.52-1.26.52-.56,0-1.01.45-1.01,1s.45,1,1.01,1c1.01,0,1.98-.4,2.69-1.1.71-.71,1.11-1.66,1.11-2.66Z"/><path fill-rule="evenodd" d="m10.53,2c-.28,0-.56.08-.8.22-.04.02-.07.05-.11.07-.26.21-.44.5-.5.83-.06.32,0,.65.17.93.78,1.34,1.24,2.9,1.25,4.35,0,1.07-.23,2.04-.73,2.82-.45-.5-.81-1.07-1.09-1.69-.11-.26-.33-.45-.6-.54-.27-.09-.56-.06-.81.07-1.03.57-1.88,1.4-2.47,2.41-.58,1.01-.88,2.16-.85,3.32h0c.04,1.01.28,1.99.71,2.9.43.9,1.04,1.71,1.79,2.38.75.67,1.63,1.18,2.58,1.51.94.32,1.94.46,2.94.4,2.45,0,4.42-.77,5.79-2.1,1.38-1.33,2.08-3.14,2.17-5.07.2-4.59-3.04-10.02-8.72-12.63-.23-.12-.48-.19-.74-.19Zm2.04,6.39c0-1.21-.26-2.46-.71-3.62,4.1,2.49,6.25,6.65,6.11,9.96-.07,1.52-.61,2.81-1.56,3.73-.94.91-2.38,1.53-4.41,1.53-.02,0-.04,0-.07,0-.74.05-1.48-.05-2.18-.29-.7-.24-1.34-.62-1.89-1.11-.55-.49-1-1.08-1.31-1.75-.31-.66-.49-1.38-.52-2.1-.02-.8.18-1.58.58-2.27.23-.39.51-.75.85-1.05.48.77,1.09,1.46,1.8,2.05.39.33.98.31,1.35-.04,1.43-1.34,1.98-3.19,1.97-5.03Z"/>',
+    }}
+  />
 )
 
 FireOutline.displayName = 'FireOutline'
diff --git a/packages/components/icons/src/icons/FlagFill.tsx b/packages/components/icons/src/icons/FlagFill.tsx
index 7016f7fac..62b4eef1c 100644
--- a/packages/components/icons/src/icons/FlagFill.tsx
+++ b/packages/components/icons/src/icons/FlagFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FlagFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FlagFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m15.3,7.83l3.55-4.23c.24-.29.3-.7.14-1.04-.16-.35-.49-.57-.87-.57H5.87c-.53,0-.96.43-.96.97v18.05c0,.54.42.98.96.98s.96-.43.96-.98v-7.36h11.3c.37,0,.72-.23.87-.57.16-.35.1-.75-.14-1.04l-3.55-4.22h0Z"/>',
-      }}
-    />
-  )
+export const FlagFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FlagFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m15.3,7.83l3.55-4.23c.24-.29.3-.7.14-1.04-.16-.35-.49-.57-.87-.57H5.87c-.53,0-.96.43-.96.97v18.05c0,.54.42.98.96.98s.96-.43.96-.98v-7.36h11.3c.37,0,.72-.23.87-.57.16-.35.1-.75-.14-1.04l-3.55-4.22h0Z"/>',
+    }}
+  />
 )
 
 FlagFill.displayName = 'FlagFill'
diff --git a/packages/components/icons/src/icons/FlagOutline.tsx b/packages/components/icons/src/icons/FlagOutline.tsx
index 9b41661b4..df6cfabde 100644
--- a/packages/components/icons/src/icons/FlagOutline.tsx
+++ b/packages/components/icons/src/icons/FlagOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FlagOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FlagOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m5.9,2h12.21c.38,0,.73.23.89.58.16.35.1.77-.15,1.07l-3.52,4.2,3.52,4.2c.25.3.31.71.15,1.07-.16.35-.51.58-.89.58H6.88v7.31c0,.55-.44,1-.98,1s-.98-.45-.98-1V3c0-.55.44-1,.98-1Zm.98,9.69h9.1l-2.68-3.2c-.31-.37-.31-.93,0-1.3l2.68-3.2H6.88v7.69Z"/>',
-      }}
-    />
-  )
+export const FlagOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FlagOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m5.9,2h12.21c.38,0,.73.23.89.58.16.35.1.77-.15,1.07l-3.52,4.2,3.52,4.2c.25.3.31.71.15,1.07-.16.35-.51.58-.89.58H6.88v7.31c0,.55-.44,1-.98,1s-.98-.45-.98-1V3c0-.55.44-1,.98-1Zm.98,9.69h9.1l-2.68-3.2c-.31-.37-.31-.93,0-1.3l2.68-3.2H6.88v7.69Z"/>',
+    }}
+  />
 )
 
 FlagOutline.displayName = 'FlagOutline'
diff --git a/packages/components/icons/src/icons/FlashFill.tsx b/packages/components/icons/src/icons/FlashFill.tsx
index fb927e724..4006b4493 100644
--- a/packages/components/icons/src/icons/FlashFill.tsx
+++ b/packages/components/icons/src/icons/FlashFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FlashFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FlashFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12.65,2.58l-7.84,10.42c-.74.92-.08,2.33,1.06,2.33h3.51l-.57,5.09c-.16,1.42,1.63,2.17,2.45,1l7.92-10.5c.74-.92.08-2.25-1.06-2.25h-3.51l.57-5.09c.08-.83-.49-1.42-1.23-1.58h-.41c-.33.08-.65.25-.9.58Z"/>',
-      }}
-    />
-  )
+export const FlashFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FlashFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12.65,2.58l-7.84,10.42c-.74.92-.08,2.33,1.06,2.33h3.51l-.57,5.09c-.16,1.42,1.63,2.17,2.45,1l7.92-10.5c.74-.92.08-2.25-1.06-2.25h-3.51l.57-5.09c.08-.83-.49-1.42-1.23-1.58h-.41c-.33.08-.65.25-.9.58Z"/>',
+    }}
+  />
 )
 
 FlashFill.displayName = 'FlashFill'
diff --git a/packages/components/icons/src/icons/FlashOutline.tsx b/packages/components/icons/src/icons/FlashOutline.tsx
index 22cdf92a8..9a47476ee 100644
--- a/packages/components/icons/src/icons/FlashOutline.tsx
+++ b/packages/components/icons/src/icons/FlashOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const FlashOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="FlashOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12.7,2.56c.86-1.13,2.63-.4,2.48,1.02l-.54,5.12h3.48c1.15,0,1.8,1.35,1.1,2.28l-7.91,10.47c-.86,1.13-2.63.4-2.48-1.02l.54-5.12h-3.48c-1.15,0-1.8-1.35-1.1-2.28L12.7,2.56Zm.31,2.86l-5.96,7.89h2.95c.83,0,1.47.73,1.38,1.57l-.39,3.7,5.96-7.89h-2.95c-.83,0-1.47-.73-1.38-1.57l.39-3.7Z"/>',
-      }}
-    />
-  )
+export const FlashOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="FlashOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12.7,2.56c.86-1.13,2.63-.4,2.48,1.02l-.54,5.12h3.48c1.15,0,1.8,1.35,1.1,2.28l-7.91,10.47c-.86,1.13-2.63.4-2.48-1.02l.54-5.12h-3.48c-1.15,0-1.8-1.35-1.1-2.28L12.7,2.56Zm.31,2.86l-5.96,7.89h2.95c.83,0,1.47.73,1.38,1.57l-.39,3.7,5.96-7.89h-2.95c-.83,0-1.47-.73-1.38-1.57l.39-3.7Z"/>',
+    }}
+  />
 )
 
 FlashOutline.displayName = 'FlashOutline'
diff --git a/packages/components/icons/src/icons/ForwardFill.tsx b/packages/components/icons/src/icons/ForwardFill.tsx
index a209234b3..3f0e27318 100644
--- a/packages/components/icons/src/icons/ForwardFill.tsx
+++ b/packages/components/icons/src/icons/ForwardFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ForwardFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ForwardFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m14.78,3.55c-.29-.29-.72-.38-1.09-.22-.37.16-.62.53-.62.94v3.2h-.38c-3.89,0-6.26,2.02-7.77,4.53-1.18,1.94-1.89,4.27-2.47,6.14-.14.46-.27.88-.4,1.28-.14.43.02.91.39,1.16.37.26.86.23,1.21-.07.61-.52,1.14-.99,1.61-1.4,1.16-1.02,1.98-1.75,2.81-2.28,1.06-.68,2.11-1,3.93-1h1.08v3.2c0,.42.25.8.64.95.39.15.82.05,1.1-.26l6.92-7.73c.36-.4.34-1.02-.03-1.4l-6.92-7.03Z"/>',
-      }}
-    />
-  )
+export const ForwardFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ForwardFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m14.78,3.55c-.29-.29-.72-.38-1.09-.22-.37.16-.62.53-.62.94v3.2h-.38c-3.89,0-6.26,2.02-7.77,4.53-1.18,1.94-1.89,4.27-2.47,6.14-.14.46-.27.88-.4,1.28-.14.43.02.91.39,1.16.37.26.86.23,1.21-.07.61-.52,1.14-.99,1.61-1.4,1.16-1.02,1.98-1.75,2.81-2.28,1.06-.68,2.11-1,3.93-1h1.08v3.2c0,.42.25.8.64.95.39.15.82.05,1.1-.26l6.92-7.73c.36-.4.34-1.02-.03-1.4l-6.92-7.03Z"/>',
+    }}
+  />
 )
 
 ForwardFill.displayName = 'ForwardFill'
diff --git a/packages/components/icons/src/icons/ForwardOutline.tsx b/packages/components/icons/src/icons/ForwardOutline.tsx
index e94c46214..ea5cd42eb 100644
--- a/packages/components/icons/src/icons/ForwardOutline.tsx
+++ b/packages/components/icons/src/icons/ForwardOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ForwardOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ForwardOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m13.69,3.33c.37-.16.8-.07,1.09.22l6.92,7.03c.38.38.39,1,.03,1.4l-6.92,7.73c-.28.31-.72.42-1.1.26-.39-.15-.64-.53-.64-.95v-3.2h-1.08c-1.82,0-2.87.32-3.93,1-.83.53-1.65,1.25-2.81,2.28-.47.42-1,.88-1.61,1.4-.34.29-.84.32-1.21.07-.37-.26-.53-.73-.39-1.16.13-.39.26-.82.4-1.28.58-1.88,1.29-4.2,2.47-6.14,1.52-2.51,3.88-4.53,7.77-4.53h.38v-3.2c0-.41.24-.78.62-.94Zm1.38,3.39v1.77c0,.56-.45,1.02-1,1.02h-1.38c-3.03,0-4.82,1.5-6.07,3.56-.67,1.1-1.16,2.32-1.58,3.55.7-.6,1.33-1.1,1.96-1.5,1.44-.91,2.87-1.31,5-1.31h2.08c.55,0,1,.45,1,1.02v1.59l4.54-5.07-4.54-4.61Z"/>',
-      }}
-    />
-  )
+export const ForwardOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ForwardOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m13.69,3.33c.37-.16.8-.07,1.09.22l6.92,7.03c.38.38.39,1,.03,1.4l-6.92,7.73c-.28.31-.72.42-1.1.26-.39-.15-.64-.53-.64-.95v-3.2h-1.08c-1.82,0-2.87.32-3.93,1-.83.53-1.65,1.25-2.81,2.28-.47.42-1,.88-1.61,1.4-.34.29-.84.32-1.21.07-.37-.26-.53-.73-.39-1.16.13-.39.26-.82.4-1.28.58-1.88,1.29-4.2,2.47-6.14,1.52-2.51,3.88-4.53,7.77-4.53h.38v-3.2c0-.41.24-.78.62-.94Zm1.38,3.39v1.77c0,.56-.45,1.02-1,1.02h-1.38c-3.03,0-4.82,1.5-6.07,3.56-.67,1.1-1.16,2.32-1.58,3.55.7-.6,1.33-1.1,1.96-1.5,1.44-.91,2.87-1.31,5-1.31h2.08c.55,0,1,.45,1,1.02v1.59l4.54-5.07-4.54-4.61Z"/>',
+    }}
+  />
 )
 
 ForwardOutline.displayName = 'ForwardOutline'
diff --git a/packages/components/icons/src/icons/GalleryFill.tsx b/packages/components/icons/src/icons/GalleryFill.tsx
index e8df0f354..d89015f22 100644
--- a/packages/components/icons/src/icons/GalleryFill.tsx
+++ b/packages/components/icons/src/icons/GalleryFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GalleryFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GalleryFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m4.36,5.81c-.11,0-.22.04-.29.11-.08.07-.12.17-.12.27v9.68c0,.5-.44.9-.97.9s-.97-.4-.97-.9V6.19c0-.58.25-1.14.69-1.55.44-.41,1.04-.64,1.67-.64h12.5c.54,0,.97.4.97.9s-.44.9-.97.9H4.36Z"/><path fill-rule="evenodd" d="m20.84,19.7c.69-.38,1.16-1.08,1.16-1.89v-8.39c0-1.21-1.06-2.19-2.36-2.19H7.83c-1.3,0-2.36.98-2.36,2.19v8.39c0,.86.54,1.61,1.31,1.97.07.04.14.07.21.09.26.09.54.14.84.14h11.81c.32,0,.63-.06.91-.17.1-.03.2-.07.29-.14Zm-.78-2.24l-4.57-4.45c-.22-.22-.49-.39-.79-.51-.3-.12-.62-.18-.95-.18-.33,0-.65.07-.95.19-.29.12-.56.3-.78.52l-4.61,4.52v-8.12c0-.21.19-.39.42-.39h11.81c.23,0,.42.17.42.39v8.04Z"/>',
-      }}
-    />
-  )
+export const GalleryFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GalleryFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m4.36,5.81c-.11,0-.22.04-.29.11-.08.07-.12.17-.12.27v9.68c0,.5-.44.9-.97.9s-.97-.4-.97-.9V6.19c0-.58.25-1.14.69-1.55.44-.41,1.04-.64,1.67-.64h12.5c.54,0,.97.4.97.9s-.44.9-.97.9H4.36Z"/><path fill-rule="evenodd" d="m20.84,19.7c.69-.38,1.16-1.08,1.16-1.89v-8.39c0-1.21-1.06-2.19-2.36-2.19H7.83c-1.3,0-2.36.98-2.36,2.19v8.39c0,.86.54,1.61,1.31,1.97.07.04.14.07.21.09.26.09.54.14.84.14h11.81c.32,0,.63-.06.91-.17.1-.03.2-.07.29-.14Zm-.78-2.24l-4.57-4.45c-.22-.22-.49-.39-.79-.51-.3-.12-.62-.18-.95-.18-.33,0-.65.07-.95.19-.29.12-.56.3-.78.52l-4.61,4.52v-8.12c0-.21.19-.39.42-.39h11.81c.23,0,.42.17.42.39v8.04Z"/>',
+    }}
+  />
 )
 
 GalleryFill.displayName = 'GalleryFill'
diff --git a/packages/components/icons/src/icons/GalleryOutline.tsx b/packages/components/icons/src/icons/GalleryOutline.tsx
index e29c619aa..13b0e7c91 100644
--- a/packages/components/icons/src/icons/GalleryOutline.tsx
+++ b/packages/components/icons/src/icons/GalleryOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GalleryOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GalleryOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m4.36,5.81c-.11,0-.22.04-.29.11-.08.07-.12.17-.12.27v9.68c0,.5-.44.9-.97.9s-.97-.4-.97-.9V6.19c0-.58.25-1.14.69-1.55.44-.41,1.04-.64,1.67-.64h12.5c.54,0,.97.4.97.9s-.44.9-.97.9H4.36Z"/><path fill-rule="evenodd" d="m20.84,19.7c.69-.38,1.16-1.08,1.16-1.89v-8.39c0-1.21-1.06-2.19-2.36-2.19H7.83c-1.3,0-2.36.98-2.36,2.19v8.39c0,.86.54,1.61,1.31,1.97.07.04.14.07.21.09.26.09.54.14.84.14h11.81c.32,0,.63-.06.91-.17.1-.03.2-.07.29-.14Zm-.78-2.24l-4.57-4.45c-.22-.22-.49-.39-.79-.51-.3-.12-.62-.18-.95-.18-.33,0-.65.07-.95.19-.29.12-.56.3-.78.52l-4.61,4.52v-8.12c0-.21.19-.39.42-.39h11.81c.23,0,.42.17.42.39v8.04Zm-1.93.74l-4.06-3.95s-.09-.07-.14-.09c-.05-.02-.11-.03-.17-.03-.06,0-.11.01-.17.03-.05.02-.1.05-.14.09h-.01s-4.01,3.95-4.01,3.95h8.69Z"/>',
-      }}
-    />
-  )
+export const GalleryOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GalleryOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m4.36,5.81c-.11,0-.22.04-.29.11-.08.07-.12.17-.12.27v9.68c0,.5-.44.9-.97.9s-.97-.4-.97-.9V6.19c0-.58.25-1.14.69-1.55.44-.41,1.04-.64,1.67-.64h12.5c.54,0,.97.4.97.9s-.44.9-.97.9H4.36Z"/><path fill-rule="evenodd" d="m20.84,19.7c.69-.38,1.16-1.08,1.16-1.89v-8.39c0-1.21-1.06-2.19-2.36-2.19H7.83c-1.3,0-2.36.98-2.36,2.19v8.39c0,.86.54,1.61,1.31,1.97.07.04.14.07.21.09.26.09.54.14.84.14h11.81c.32,0,.63-.06.91-.17.1-.03.2-.07.29-.14Zm-.78-2.24l-4.57-4.45c-.22-.22-.49-.39-.79-.51-.3-.12-.62-.18-.95-.18-.33,0-.65.07-.95.19-.29.12-.56.3-.78.52l-4.61,4.52v-8.12c0-.21.19-.39.42-.39h11.81c.23,0,.42.17.42.39v8.04Zm-1.93.74l-4.06-3.95s-.09-.07-.14-.09c-.05-.02-.11-.03-.17-.03-.06,0-.11.01-.17.03-.05.02-.1.05-.14.09h-.01s-4.01,3.95-4.01,3.95h8.69Z"/>',
+    }}
+  />
 )
 
 GalleryOutline.displayName = 'GalleryOutline'
diff --git a/packages/components/icons/src/icons/GraphArrowDown.tsx b/packages/components/icons/src/icons/GraphArrowDown.tsx
index 32131c4d5..017a640e7 100644
--- a/packages/components/icons/src/icons/GraphArrowDown.tsx
+++ b/packages/components/icons/src/icons/GraphArrowDown.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GraphArrowDown = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GraphArrowDown"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2.29,6.3c.39-.4,1.02-.4,1.41,0l4.83,4.96,2.97-3.05c.32-.32.74-.5,1.18-.5s.87.18,1.18.5h0s6.12,6.28,6.12,6.28v-3.21c0-.57.45-1.03,1-1.03s1,.46,1,1.03v5.68c0,.57-.45,1.03-1,1.03h-5.54c-.55,0-1-.46-1-1.03s.45-1.03,1-1.03h3.12l-5.89-6.05-2.97,3.05c-.32.32-.74.5-1.18.5s-.87-.18-1.18-.5h0S2.29,7.75,2.29,7.75c-.39-.4-.39-1.05,0-1.45Z"/>',
-      }}
-    />
-  )
+export const GraphArrowDown = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GraphArrowDown"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2.29,6.3c.39-.4,1.02-.4,1.41,0l4.83,4.96,2.97-3.05c.32-.32.74-.5,1.18-.5s.87.18,1.18.5h0s6.12,6.28,6.12,6.28v-3.21c0-.57.45-1.03,1-1.03s1,.46,1,1.03v5.68c0,.57-.45,1.03-1,1.03h-5.54c-.55,0-1-.46-1-1.03s.45-1.03,1-1.03h3.12l-5.89-6.05-2.97,3.05c-.32.32-.74.5-1.18.5s-.87-.18-1.18-.5h0S2.29,7.75,2.29,7.75c-.39-.4-.39-1.05,0-1.45Z"/>',
+    }}
+  />
 )
 
 GraphArrowDown.displayName = 'GraphArrowDown'
diff --git a/packages/components/icons/src/icons/GraphArrowUp.tsx b/packages/components/icons/src/icons/GraphArrowUp.tsx
index 2af39dc4f..bab48a443 100644
--- a/packages/components/icons/src/icons/GraphArrowUp.tsx
+++ b/packages/components/icons/src/icons/GraphArrowUp.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GraphArrowUp = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GraphArrowUp"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2.29,17.7c.39.4,1.02.4,1.41,0l4.83-4.96,2.97,3.05c.32.32.74.5,1.18.5s.87-.18,1.18-.5h0s6.12-6.28,6.12-6.28v3.21c0,.57.45,1.03,1,1.03s1-.46,1-1.03v-5.68c0-.57-.45-1.03-1-1.03h-5.54c-.55,0-1,.46-1,1.03s.45,1.03,1,1.03h3.12l-5.89,6.05-2.97-3.05c-.32-.32-.74-.5-1.18-.5s-.87.18-1.18.5h0s-5.05,5.19-5.05,5.19c-.39.4-.39,1.05,0,1.45Z"/>',
-      }}
-    />
-  )
+export const GraphArrowUp = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GraphArrowUp"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2.29,17.7c.39.4,1.02.4,1.41,0l4.83-4.96,2.97,3.05c.32.32.74.5,1.18.5s.87-.18,1.18-.5h0s6.12-6.28,6.12-6.28v3.21c0,.57.45,1.03,1,1.03s1-.46,1-1.03v-5.68c0-.57-.45-1.03-1-1.03h-5.54c-.55,0-1,.46-1,1.03s.45,1.03,1,1.03h3.12l-5.89,6.05-2.97-3.05c-.32-.32-.74-.5-1.18-.5s-.87.18-1.18.5h0s-5.05,5.19-5.05,5.19c-.39.4-.39,1.05,0,1.45Z"/>',
+    }}
+  />
 )
 
 GraphArrowUp.displayName = 'GraphArrowUp'
diff --git a/packages/components/icons/src/icons/GraphFill.tsx b/packages/components/icons/src/icons/GraphFill.tsx
index 62fd5c3ae..28ff13661 100644
--- a/packages/components/icons/src/icons/GraphFill.tsx
+++ b/packages/components/icons/src/icons/GraphFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GraphFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GraphFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.46,22H3.54c-.85,0-1.54-.69-1.54-1.54V3.54c0-.85.69-1.54,1.54-1.54h16.92c.85,0,1.54.69,1.54,1.54v16.92c0,.85-.69,1.54-1.54,1.54ZM5.85,4.85c-.55,0-1,.45-1,1s.45,1,1,1h3.08c.55,0,1-.45,1-1s-.45-1-1-1h-3.08Zm-1,4.85c0-.55.45-1,1-1h6.92c.55,0,1,.45,1,1s-.45,1-1,1h-6.92c-.55,0-1-.45-1-1Zm14.93.51c.28-.47.13-1.09-.34-1.37-.47-.28-1.09-.13-1.37.34l-4.11,6.85-4.53-2.59c-.46-.26-1.04-.12-1.33.31l-3.08,4.62c-.31.46-.18,1.08.28,1.39.46.31,1.08.18,1.39-.28l2.56-3.84,4.57,2.61c.47.27,1.07.11,1.35-.35l4.62-7.69Z"/>',
-      }}
-    />
-  )
+export const GraphFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GraphFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.46,22H3.54c-.85,0-1.54-.69-1.54-1.54V3.54c0-.85.69-1.54,1.54-1.54h16.92c.85,0,1.54.69,1.54,1.54v16.92c0,.85-.69,1.54-1.54,1.54ZM5.85,4.85c-.55,0-1,.45-1,1s.45,1,1,1h3.08c.55,0,1-.45,1-1s-.45-1-1-1h-3.08Zm-1,4.85c0-.55.45-1,1-1h6.92c.55,0,1,.45,1,1s-.45,1-1,1h-6.92c-.55,0-1-.45-1-1Zm14.93.51c.28-.47.13-1.09-.34-1.37-.47-.28-1.09-.13-1.37.34l-4.11,6.85-4.53-2.59c-.46-.26-1.04-.12-1.33.31l-3.08,4.62c-.31.46-.18,1.08.28,1.39.46.31,1.08.18,1.39-.28l2.56-3.84,4.57,2.61c.47.27,1.07.11,1.35-.35l4.62-7.69Z"/>',
+    }}
+  />
 )
 
 GraphFill.displayName = 'GraphFill'
diff --git a/packages/components/icons/src/icons/GraphOutline.tsx b/packages/components/icons/src/icons/GraphOutline.tsx
index 798b1bc14..6f970a9a0 100644
--- a/packages/components/icons/src/icons/GraphOutline.tsx
+++ b/packages/components/icons/src/icons/GraphOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GraphOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GraphOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m6.46,5.46c-.55,0-1,.45-1,1s.45,1,1,1h2.77c.55,0,1-.45,1-1s-.45-1-1-1h-2.77Zm-1,4.46c0-.55.45-1,1-1h6.23c.55,0,1,.45,1,1s-.45,1-1,1h-6.23c-.55,0-1-.45-1-1Zm13.63.51c.28-.47.13-1.09-.34-1.37-.47-.28-1.09-.13-1.37.34l-3.65,6.08-4-2.28c-.46-.26-1.04-.12-1.33.31l-2.77,4.15c-.31.46-.18,1.08.28,1.39.46.31,1.08.18,1.39-.28l2.25-3.38,4.04,2.31c.47.27,1.07.11,1.35-.35l4.15-6.92Z"/><path fill-rule="evenodd" d="m19.62,22c1.32,0,2.38-1.07,2.38-2.38V4.38c0-1.32-1.07-2.38-2.38-2.38H4.38c-1.32,0-2.38,1.07-2.38,2.38v15.23c0,1.32,1.07,2.38,2.38,2.38h15.23Zm.38-2.38c0,.21-.17.38-.38.38H4.38c-.21,0-.38-.17-.38-.38V4.38c0-.21.17-.38.38-.38h15.23c.21,0,.38.17.38.38v15.23Z"/>',
-      }}
-    />
-  )
+export const GraphOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GraphOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m6.46,5.46c-.55,0-1,.45-1,1s.45,1,1,1h2.77c.55,0,1-.45,1-1s-.45-1-1-1h-2.77Zm-1,4.46c0-.55.45-1,1-1h6.23c.55,0,1,.45,1,1s-.45,1-1,1h-6.23c-.55,0-1-.45-1-1Zm13.63.51c.28-.47.13-1.09-.34-1.37-.47-.28-1.09-.13-1.37.34l-3.65,6.08-4-2.28c-.46-.26-1.04-.12-1.33.31l-2.77,4.15c-.31.46-.18,1.08.28,1.39.46.31,1.08.18,1.39-.28l2.25-3.38,4.04,2.31c.47.27,1.07.11,1.35-.35l4.15-6.92Z"/><path fill-rule="evenodd" d="m19.62,22c1.32,0,2.38-1.07,2.38-2.38V4.38c0-1.32-1.07-2.38-2.38-2.38H4.38c-1.32,0-2.38,1.07-2.38,2.38v15.23c0,1.32,1.07,2.38,2.38,2.38h15.23Zm.38-2.38c0,.21-.17.38-.38.38H4.38c-.21,0-.38-.17-.38-.38V4.38c0-.21.17-.38.38-.38h15.23c.21,0,.38.17.38.38v15.23Z"/>',
+    }}
+  />
 )
 
 GraphOutline.displayName = 'GraphOutline'
diff --git a/packages/components/icons/src/icons/GroupFill.tsx b/packages/components/icons/src/icons/GroupFill.tsx
index 55621de44..4b63a875a 100644
--- a/packages/components/icons/src/icons/GroupFill.tsx
+++ b/packages/components/icons/src/icons/GroupFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GroupFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GroupFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m5.13,19.27c-1.93-1.82-3.13-4.4-3.13-7.27C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.86-1.2,5.44-3.13,7.27h0s-.2.18-.2.18c-1.77,1.59-4.11,2.56-6.68,2.56s-4.9-.97-6.68-2.55l-.2-.17h0Zm4.58-11.02c.69,0,1.25.56,1.25,1.25s-.56,1.25-1.25,1.25-1.25-.56-1.25-1.25.56-1.25,1.25-1.25Zm0,3.75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5-2.5,1.12-2.5,2.5,1.12,2.5,2.5,2.5Zm-.13.87c-2.02,0-3.76,1.38-4.23,3.35-.08.33.11.67.43.76.32.08.64-.12.72-.45.34-1.42,1.6-2.41,3.08-2.41s2.74.99,3.08,2.41c.07.28.31.47.57.47.05,0,.1,0,.15-.02.32-.08.51-.42.43-.76-.47-1.97-2.21-3.35-4.23-3.35Zm5.55-4.1c.59,0,1.08.48,1.08,1.08s-.48,1.08-1.08,1.08-1.08-.48-1.08-1.08.48-1.08,1.08-1.08Zm0,3.23c1.19,0,2.15-.96,2.15-2.15s-.96-2.15-2.15-2.15-2.15.96-2.15,2.15.96,2.15,2.15,2.15Zm3.53,3.65s0,0,0-.01c-.36-1.52-1.6-2.62-3.1-2.84-.18-.03-.36-.05-.54-.05-.01,0-.03,0-.04,0-.19,0-.39.02-.57.05-.08.01-.16.04-.24.06-.11.03-.23.05-.34.09-.09.03-.18.07-.27.11-.09.04-.19.08-.28.13-.09.05-.17.1-.25.15-.07.04-.13.08-.19.13.27.23.5.51.71.79.43-.27.94-.44,1.48-.44,1.27,0,2.36.85,2.65,2.07.05.21.22.36.41.39h.08c.16,0,.31-.08.4-.21.05-.06.08-.14.09-.21,0,0,0,0,0,0,.01-.07,0-.14,0-.22Z"/>',
-      }}
-    />
-  )
+export const GroupFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GroupFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m5.13,19.27c-1.93-1.82-3.13-4.4-3.13-7.27C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.86-1.2,5.44-3.13,7.27h0s-.2.18-.2.18c-1.77,1.59-4.11,2.56-6.68,2.56s-4.9-.97-6.68-2.55l-.2-.17h0Zm4.58-11.02c.69,0,1.25.56,1.25,1.25s-.56,1.25-1.25,1.25-1.25-.56-1.25-1.25.56-1.25,1.25-1.25Zm0,3.75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5-2.5,1.12-2.5,2.5,1.12,2.5,2.5,2.5Zm-.13.87c-2.02,0-3.76,1.38-4.23,3.35-.08.33.11.67.43.76.32.08.64-.12.72-.45.34-1.42,1.6-2.41,3.08-2.41s2.74.99,3.08,2.41c.07.28.31.47.57.47.05,0,.1,0,.15-.02.32-.08.51-.42.43-.76-.47-1.97-2.21-3.35-4.23-3.35Zm5.55-4.1c.59,0,1.08.48,1.08,1.08s-.48,1.08-1.08,1.08-1.08-.48-1.08-1.08.48-1.08,1.08-1.08Zm0,3.23c1.19,0,2.15-.96,2.15-2.15s-.96-2.15-2.15-2.15-2.15.96-2.15,2.15.96,2.15,2.15,2.15Zm3.53,3.65s0,0,0-.01c-.36-1.52-1.6-2.62-3.1-2.84-.18-.03-.36-.05-.54-.05-.01,0-.03,0-.04,0-.19,0-.39.02-.57.05-.08.01-.16.04-.24.06-.11.03-.23.05-.34.09-.09.03-.18.07-.27.11-.09.04-.19.08-.28.13-.09.05-.17.1-.25.15-.07.04-.13.08-.19.13.27.23.5.51.71.79.43-.27.94-.44,1.48-.44,1.27,0,2.36.85,2.65,2.07.05.21.22.36.41.39h.08c.16,0,.31-.08.4-.21.05-.06.08-.14.09-.21,0,0,0,0,0,0,.01-.07,0-.14,0-.22Z"/>',
+    }}
+  />
 )
 
 GroupFill.displayName = 'GroupFill'
diff --git a/packages/components/icons/src/icons/GroupOutline.tsx b/packages/components/icons/src/icons/GroupOutline.tsx
index e992a6537..67bccbe07 100644
--- a/packages/components/icons/src/icons/GroupOutline.tsx
+++ b/packages/components/icons/src/icons/GroupOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const GroupOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="GroupOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12.31,8.25c0,2.07-1.68,3.75-3.75,3.75s-3.75-1.68-3.75-3.75,1.68-3.75,3.75-3.75,3.75,1.68,3.75,3.75Zm-1.88,0c0-1.03-.84-1.87-1.88-1.87s-1.88.84-1.88,1.87.84,1.87,1.88,1.87,1.88-.84,1.88-1.87Z"/><path d="m2.03,18.33c.71-2.96,3.31-5.03,6.34-5.03s5.64,2.07,6.34,5.03c.12.5-.17,1.01-.65,1.14-.07.02-.15.03-.22.03-.4,0-.76-.28-.86-.71-.51-2.12-2.41-3.61-4.62-3.61s-4.11,1.48-4.62,3.61c-.12.5-.6.81-1.08.68-.48-.13-.77-.64-.65-1.14Z"/><path fill-rule="evenodd" d="m16.69,12c1.78,0,3.23-1.44,3.23-3.23s-1.45-3.23-3.23-3.23-3.23,1.45-3.23,3.23,1.45,3.23,3.23,3.23Zm0-4.84c.89,0,1.61.73,1.61,1.61s-.73,1.61-1.61,1.61-1.62-.73-1.62-1.61.73-1.61,1.62-1.61Z"/><path d="m21.98,17.46s0,0,0,0c.02.11.03.22,0,.32,0,0,0,0,0,.01-.02.12-.07.23-.14.32-.15.19-.37.31-.6.31h-.12c-.29-.05-.54-.27-.62-.59-.44-1.83-2.07-3.11-3.98-3.11-.82,0-1.57.25-2.22.66-.32-.43-.67-.84-1.07-1.19.09-.07.19-.13.29-.19.03-.02.06-.04.09-.06.09-.06.19-.12.29-.17.1-.05.21-.1.32-.14.03-.01.07-.03.1-.04.04-.02.08-.04.12-.05.09-.04.18-.08.28-.11.14-.05.28-.08.42-.11.03,0,.06-.01.1-.02.04-.01.08-.02.12-.03.08-.02.16-.04.24-.06.28-.05.57-.07.86-.07.01,0,.02,0,.03,0,.01,0,.02,0,.04,0,.28,0,.55.03.81.07,2.25.33,4.1,1.98,4.65,4.26,0,0,0,0,0,.01Z"/>',
-      }}
-    />
-  )
+export const GroupOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="GroupOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12.31,8.25c0,2.07-1.68,3.75-3.75,3.75s-3.75-1.68-3.75-3.75,1.68-3.75,3.75-3.75,3.75,1.68,3.75,3.75Zm-1.88,0c0-1.03-.84-1.87-1.88-1.87s-1.88.84-1.88,1.87.84,1.87,1.88,1.87,1.88-.84,1.88-1.87Z"/><path d="m2.03,18.33c.71-2.96,3.31-5.03,6.34-5.03s5.64,2.07,6.34,5.03c.12.5-.17,1.01-.65,1.14-.07.02-.15.03-.22.03-.4,0-.76-.28-.86-.71-.51-2.12-2.41-3.61-4.62-3.61s-4.11,1.48-4.62,3.61c-.12.5-.6.81-1.08.68-.48-.13-.77-.64-.65-1.14Z"/><path fill-rule="evenodd" d="m16.69,12c1.78,0,3.23-1.44,3.23-3.23s-1.45-3.23-3.23-3.23-3.23,1.45-3.23,3.23,1.45,3.23,3.23,3.23Zm0-4.84c.89,0,1.61.73,1.61,1.61s-.73,1.61-1.61,1.61-1.62-.73-1.62-1.61.73-1.61,1.62-1.61Z"/><path d="m21.98,17.46s0,0,0,0c.02.11.03.22,0,.32,0,0,0,0,0,.01-.02.12-.07.23-.14.32-.15.19-.37.31-.6.31h-.12c-.29-.05-.54-.27-.62-.59-.44-1.83-2.07-3.11-3.98-3.11-.82,0-1.57.25-2.22.66-.32-.43-.67-.84-1.07-1.19.09-.07.19-.13.29-.19.03-.02.06-.04.09-.06.09-.06.19-.12.29-.17.1-.05.21-.1.32-.14.03-.01.07-.03.1-.04.04-.02.08-.04.12-.05.09-.04.18-.08.28-.11.14-.05.28-.08.42-.11.03,0,.06-.01.1-.02.04-.01.08-.02.12-.03.08-.02.16-.04.24-.06.28-.05.57-.07.86-.07.01,0,.02,0,.03,0,.01,0,.02,0,.04,0,.28,0,.55.03.81.07,2.25.33,4.1,1.98,4.65,4.26,0,0,0,0,0,.01Z"/>',
+    }}
+  />
 )
 
 GroupOutline.displayName = 'GroupOutline'
diff --git a/packages/components/icons/src/icons/HomeFill.tsx b/packages/components/icons/src/icons/HomeFill.tsx
index 362a1985a..c75ec3849 100644
--- a/packages/components/icons/src/icons/HomeFill.tsx
+++ b/packages/components/icons/src/icons/HomeFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const HomeFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="HomeFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.74,11.5L12.49,2.25c-.33-.33-.75-.33-1.08,0L2.25,11.5c-.33.33-.33.75,0,1.08.33.33.75.33,1.08,0l1.33-1.42v10c0,.33.25.67.58.75.08,0,.25.08.33.08h12.83c.08,0,.25,0,.33-.08.42,0,.75-.33.75-.75v-9.92l1.25,1.25c.33.33.75.33,1.08,0,.25-.25.25-.75-.08-1Z"/>',
-      }}
-    />
-  )
+export const HomeFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="HomeFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.74,11.5L12.49,2.25c-.33-.33-.75-.33-1.08,0L2.25,11.5c-.33.33-.33.75,0,1.08.33.33.75.33,1.08,0l1.33-1.42v10c0,.33.25.67.58.75.08,0,.25.08.33.08h12.83c.08,0,.25,0,.33-.08.42,0,.75-.33.75-.75v-9.92l1.25,1.25c.33.33.75.33,1.08,0,.25-.25.25-.75-.08-1Z"/>',
+    }}
+  />
 )
 
 HomeFill.displayName = 'HomeFill'
diff --git a/packages/components/icons/src/icons/HomeOutline.tsx b/packages/components/icons/src/icons/HomeOutline.tsx
index 8b47f670d..5889cfe3b 100644
--- a/packages/components/icons/src/icons/HomeOutline.tsx
+++ b/packages/components/icons/src/icons/HomeOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const HomeOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="HomeOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.71,11.31L12.68,2.29c-.38-.38-.99-.38-1.37,0L2.29,11.31c-.38.38-.38.99,0,1.37.38.38.99.38,1.37,0L12,4.35l8.34,8.34c.38.38.99.38,1.37,0,.38-.38.38-.99,0-1.37h0Zm-3.47,1.8c-.53,0-.97.43-.97.97v5.97H6.73v-5.97c0-.53-.43-.97-.97-.97s-.97.43-.97.97v6.94c0,.53.43.97.97.97h12.49c.53,0,.97-.43.97-.97v-6.94c0-.53-.43-.97-.97-.97Z"/>',
-      }}
-    />
-  )
+export const HomeOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="HomeOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.71,11.31L12.68,2.29c-.38-.38-.99-.38-1.37,0L2.29,11.31c-.38.38-.38.99,0,1.37.38.38.99.38,1.37,0L12,4.35l8.34,8.34c.38.38.99.38,1.37,0,.38-.38.38-.99,0-1.37h0Zm-3.47,1.8c-.53,0-.97.43-.97.97v5.97H6.73v-5.97c0-.53-.43-.97-.97-.97s-.97.43-.97.97v6.94c0,.53.43.97.97.97h12.49c.53,0,.97-.43.97-.97v-6.94c0-.53-.43-.97-.97-.97Z"/>',
+    }}
+  />
 )
 
 HomeOutline.displayName = 'HomeOutline'
diff --git a/packages/components/icons/src/icons/IdeaFill.tsx b/packages/components/icons/src/icons/IdeaFill.tsx
index 77734fed6..17e31a259 100644
--- a/packages/components/icons/src/icons/IdeaFill.tsx
+++ b/packages/components/icons/src/icons/IdeaFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const IdeaFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="IdeaFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m13.68,22h-3.34c-.41,0-.79-.16-1.08-.45-.15-.14-.26-.31-.35-.5s-.13-.39-.13-.59v-1.94c-.86-.55-1.57-1.32-2.05-2.22-.49-.9-.74-1.92-.73-2.95s.27-2.04.77-2.94c.5-.9,1.22-1.65,2.08-2.19.92-.56,1.96-.87,3.04-.9,1.07-.03,2.13.24,3.07.78.94.53,1.72,1.31,2.26,2.24.55.93.84,2,.83,3.08,0,1.01-.27,2-.75,2.88-.49.88-1.18,1.63-2.03,2.17v1.95c0,.42-.18.82-.48,1.12-.15.15-.32.26-.52.34-.19.08-.4.12-.61.11Zm7.32-11.42h-2.15c-.27,0-.52-.11-.71-.3s-.29-.45-.29-.71.11-.53.29-.71c.19-.19.44-.3.71-.3h2.15c.27,0,.52.11.71.3.19.19.29.45.29.71s-.11.53-.29.71-.44.3-.71.3Zm-15.85,0h-2.15c-.27,0-.52-.11-.71-.3-.19-.19-.29-.45-.29-.71s.11-.53.29-.71c.19-.19.44-.3.71-.3h2.15c.27,0,.52.11.71.3.19.19.29.45.29.71s-.11.53-.29.71c-.19.19-.44.3-.71.3Zm2.64-2.94c-.14,0-.28-.02-.4-.08-.13-.05-.24-.13-.34-.23l-1.52-1.55c-.09-.09-.17-.21-.22-.33-.05-.12-.07-.26-.07-.39,0-.13.03-.26.08-.39.05-.12.13-.23.22-.33.09-.09.2-.17.33-.22s.25-.08.38-.07c.13,0,.26.03.38.08.12.05.23.13.32.22l1.52,1.55c.12.14.2.32.23.51.03.19,0,.38-.07.56-.07.18-.19.33-.35.44-.15.11-.34.17-.53.18l.03.05Zm8.43,0c-.27,0-.52-.11-.71-.29-.09-.09-.17-.21-.22-.33-.05-.12-.08-.25-.08-.39s.03-.26.08-.39c.05-.12.12-.23.22-.33l1.52-1.55c.09-.1.2-.18.32-.24.12-.06.26-.09.39-.09.14,0,.27.02.4.07s.24.13.34.22c.1.1.17.21.22.34.05.13.08.26.07.4,0,.14-.03.27-.09.4-.06.12-.14.24-.24.33l-1.53,1.54c-.09.1-.2.17-.32.23-.12.05-.25.08-.38.08Zm-4.22-1.45c-.27,0-.52-.11-.71-.3-.19-.19-.29-.45-.29-.71v-2.17c0-.27.11-.53.29-.71s.44-.3.71-.3.52.11.71.3c.19.19.29.45.29.71v2.17c0,.13-.03.27-.08.39-.05.12-.13.23-.22.33-.09.09-.21.17-.33.22-.12.05-.25.08-.39.07h0Z"/>',
-      }}
-    />
-  )
+export const IdeaFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="IdeaFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m13.68,22h-3.34c-.41,0-.79-.16-1.08-.45-.15-.14-.26-.31-.35-.5s-.13-.39-.13-.59v-1.94c-.86-.55-1.57-1.32-2.05-2.22-.49-.9-.74-1.92-.73-2.95s.27-2.04.77-2.94c.5-.9,1.22-1.65,2.08-2.19.92-.56,1.96-.87,3.04-.9,1.07-.03,2.13.24,3.07.78.94.53,1.72,1.31,2.26,2.24.55.93.84,2,.83,3.08,0,1.01-.27,2-.75,2.88-.49.88-1.18,1.63-2.03,2.17v1.95c0,.42-.18.82-.48,1.12-.15.15-.32.26-.52.34-.19.08-.4.12-.61.11Zm7.32-11.42h-2.15c-.27,0-.52-.11-.71-.3s-.29-.45-.29-.71.11-.53.29-.71c.19-.19.44-.3.71-.3h2.15c.27,0,.52.11.71.3.19.19.29.45.29.71s-.11.53-.29.71-.44.3-.71.3Zm-15.85,0h-2.15c-.27,0-.52-.11-.71-.3-.19-.19-.29-.45-.29-.71s.11-.53.29-.71c.19-.19.44-.3.71-.3h2.15c.27,0,.52.11.71.3.19.19.29.45.29.71s-.11.53-.29.71c-.19.19-.44.3-.71.3Zm2.64-2.94c-.14,0-.28-.02-.4-.08-.13-.05-.24-.13-.34-.23l-1.52-1.55c-.09-.09-.17-.21-.22-.33-.05-.12-.07-.26-.07-.39,0-.13.03-.26.08-.39.05-.12.13-.23.22-.33.09-.09.2-.17.33-.22s.25-.08.38-.07c.13,0,.26.03.38.08.12.05.23.13.32.22l1.52,1.55c.12.14.2.32.23.51.03.19,0,.38-.07.56-.07.18-.19.33-.35.44-.15.11-.34.17-.53.18l.03.05Zm8.43,0c-.27,0-.52-.11-.71-.29-.09-.09-.17-.21-.22-.33-.05-.12-.08-.25-.08-.39s.03-.26.08-.39c.05-.12.12-.23.22-.33l1.52-1.55c.09-.1.2-.18.32-.24.12-.06.26-.09.39-.09.14,0,.27.02.4.07s.24.13.34.22c.1.1.17.21.22.34.05.13.08.26.07.4,0,.14-.03.27-.09.4-.06.12-.14.24-.24.33l-1.53,1.54c-.09.1-.2.17-.32.23-.12.05-.25.08-.38.08Zm-4.22-1.45c-.27,0-.52-.11-.71-.3-.19-.19-.29-.45-.29-.71v-2.17c0-.27.11-.53.29-.71s.44-.3.71-.3.52.11.71.3c.19.19.29.45.29.71v2.17c0,.13-.03.27-.08.39-.05.12-.13.23-.22.33-.09.09-.21.17-.33.22-.12.05-.25.08-.39.07h0Z"/>',
+    }}
+  />
 )
 
 IdeaFill.displayName = 'IdeaFill'
diff --git a/packages/components/icons/src/icons/IdeaOutline.tsx b/packages/components/icons/src/icons/IdeaOutline.tsx
index 6458f99e6..7aef08f4d 100644
--- a/packages/components/icons/src/icons/IdeaOutline.tsx
+++ b/packages/components/icons/src/icons/IdeaOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const IdeaOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="IdeaOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m10.32,22c-.41,0-.79-.16-1.08-.45-.29-.29-.46-.67-.47-1.09v-1.93c-.73-.46-1.34-1.08-1.81-1.81-.58-.91-.92-1.96-.97-3.04-.05-1.08.19-2.16.69-3.12.5-.96,1.25-1.76,2.16-2.33.92-.57,1.96-.88,3.03-.9s2.13.24,3.07.78c.93.53,1.72,1.31,2.26,2.24.54.94.82,2.01.82,3.08-.02,1.13-.33,2.22-.92,3.17-.48.77-1.11,1.41-1.86,1.9v1.95c0,.44-.18.83-.47,1.11-.29.29-.68.45-1.09.45h-3.36Zm.44-2.02h2.47v-2.07c0-.39.22-.73.56-.9.66-.34,1.22-.84,1.61-1.47.39-.63.61-1.36.62-2.11,0-.72-.18-1.43-.55-2.06-.36-.62-.88-1.15-1.51-1.5-.62-.35-1.35-.52-2.05-.51-.72.02-1.42.23-2.02.61-.61.38-1.11.92-1.44,1.56-.33.64-.49,1.36-.46,2.08.03.72.26,1.42.65,2.03.39.61.93,1.1,1.57,1.42.34.17.56.52.56.9v2.03Zm10.23-9.39h-2.15c-.55,0-1-.45-1-1.01s.45-1.01,1-1.01h2.15c.55,0,1,.45,1,1.01s-.45,1.01-1,1.01Zm-15.85,0h-2.15c-.55,0-1-.45-1-1.01s.45-1.01,1-1.01h2.15c.55,0,1,.45,1,1.01s-.45,1.01-1,1.01Zm2.63-2.94c-.26,0-.52-.1-.71-.3l-1.52-1.55c-.39-.4-.38-1.04,0-1.43.39-.4,1.03-.39,1.42,0l1.52,1.55c.39.4.38,1.04,0,1.43-.19.19-.45.29-.7.29h0Zm8.42,0c-.26,0-.51-.1-.7-.29-.39-.4-.39-1.04,0-1.43l1.52-1.55c.39-.4,1.02-.4,1.42,0,.39.4.39,1.04,0,1.43l-1.52,1.55c-.19.2-.45.3-.71.3h0Zm-4.22-1.45c-.55,0-1-.45-1-1.01v-2.17c0-.56.45-1.01,1-1.01s1,.45,1,1.01v2.17c0,.56-.45,1.01-1,1.01Z"/>',
-      }}
-    />
-  )
+export const IdeaOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="IdeaOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m10.32,22c-.41,0-.79-.16-1.08-.45-.29-.29-.46-.67-.47-1.09v-1.93c-.73-.46-1.34-1.08-1.81-1.81-.58-.91-.92-1.96-.97-3.04-.05-1.08.19-2.16.69-3.12.5-.96,1.25-1.76,2.16-2.33.92-.57,1.96-.88,3.03-.9s2.13.24,3.07.78c.93.53,1.72,1.31,2.26,2.24.54.94.82,2.01.82,3.08-.02,1.13-.33,2.22-.92,3.17-.48.77-1.11,1.41-1.86,1.9v1.95c0,.44-.18.83-.47,1.11-.29.29-.68.45-1.09.45h-3.36Zm.44-2.02h2.47v-2.07c0-.39.22-.73.56-.9.66-.34,1.22-.84,1.61-1.47.39-.63.61-1.36.62-2.11,0-.72-.18-1.43-.55-2.06-.36-.62-.88-1.15-1.51-1.5-.62-.35-1.35-.52-2.05-.51-.72.02-1.42.23-2.02.61-.61.38-1.11.92-1.44,1.56-.33.64-.49,1.36-.46,2.08.03.72.26,1.42.65,2.03.39.61.93,1.1,1.57,1.42.34.17.56.52.56.9v2.03Zm10.23-9.39h-2.15c-.55,0-1-.45-1-1.01s.45-1.01,1-1.01h2.15c.55,0,1,.45,1,1.01s-.45,1.01-1,1.01Zm-15.85,0h-2.15c-.55,0-1-.45-1-1.01s.45-1.01,1-1.01h2.15c.55,0,1,.45,1,1.01s-.45,1.01-1,1.01Zm2.63-2.94c-.26,0-.52-.1-.71-.3l-1.52-1.55c-.39-.4-.38-1.04,0-1.43.39-.4,1.03-.39,1.42,0l1.52,1.55c.39.4.38,1.04,0,1.43-.19.19-.45.29-.7.29h0Zm8.42,0c-.26,0-.51-.1-.7-.29-.39-.4-.39-1.04,0-1.43l1.52-1.55c.39-.4,1.02-.4,1.42,0,.39.4.39,1.04,0,1.43l-1.52,1.55c-.19.2-.45.3-.71.3h0Zm-4.22-1.45c-.55,0-1-.45-1-1.01v-2.17c0-.56.45-1.01,1-1.01s1,.45,1,1.01v2.17c0,.56-.45,1.01-1,1.01Z"/>',
+    }}
+  />
 )
 
 IdeaOutline.displayName = 'IdeaOutline'
diff --git a/packages/components/icons/src/icons/IdentityFill.tsx b/packages/components/icons/src/icons/IdentityFill.tsx
index ee9ad6528..3382cc2cb 100644
--- a/packages/components/icons/src/icons/IdentityFill.tsx
+++ b/packages/components/icons/src/icons/IdentityFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const IdentityFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="IdentityFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.5,5c-.33-.33-.67-.5-1.17-.5H3.67c-.5,0-.83.17-1.17.5s-.5.75-.5,1.17v11.67c0,.5.17.83.5,1.17s.67.5,1.17.5h16.67c.42,0,.83-.17,1.17-.5s.5-.75.5-1.17V6.17c0-.42-.17-.83-.5-1.17Zm-13.67,5.17c.25-.25.58-.42.92-.42s.67.17.92.42.42.58.42,1-.17.67-.42,1c-.25.25-.58.42-.92.42s-.67-.17-.92-.42-.42-.58-.42-1,.17-.75.42-1Zm3.92,5.17h-6v-.25c0-.25.08-.5.25-.75s.33-.42.58-.5c.42-.17.75-.25,1.17-.33.33-.08.75-.08,1.08-.08s.67,0,1,.08c.33.08.75.17,1.17.33.25.08.42.25.58.5.17.25.25.5.25.75v.25h-.08Zm6.25-1.67h-4c-.33,0-.58-.25-.58-.58s.25-.58.58-.58h4c.33,0,.58.25.58.58s-.25.58-.58.58Zm0-2.83h-4c-.33,0-.58-.25-.58-.58s.25-.58.58-.58h4c.33,0,.58.25.58.58s-.25.58-.58.58Z"/>',
-      }}
-    />
-  )
+export const IdentityFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="IdentityFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.5,5c-.33-.33-.67-.5-1.17-.5H3.67c-.5,0-.83.17-1.17.5s-.5.75-.5,1.17v11.67c0,.5.17.83.5,1.17s.67.5,1.17.5h16.67c.42,0,.83-.17,1.17-.5s.5-.75.5-1.17V6.17c0-.42-.17-.83-.5-1.17Zm-13.67,5.17c.25-.25.58-.42.92-.42s.67.17.92.42.42.58.42,1-.17.67-.42,1c-.25.25-.58.42-.92.42s-.67-.17-.92-.42-.42-.58-.42-1,.17-.75.42-1Zm3.92,5.17h-6v-.25c0-.25.08-.5.25-.75s.33-.42.58-.5c.42-.17.75-.25,1.17-.33.33-.08.75-.08,1.08-.08s.67,0,1,.08c.33.08.75.17,1.17.33.25.08.42.25.58.5.17.25.25.5.25.75v.25h-.08Zm6.25-1.67h-4c-.33,0-.58-.25-.58-.58s.25-.58.58-.58h4c.33,0,.58.25.58.58s-.25.58-.58.58Zm0-2.83h-4c-.33,0-.58-.25-.58-.58s.25-.58.58-.58h4c.33,0,.58.25.58.58s-.25.58-.58.58Z"/>',
+    }}
+  />
 )
 
 IdentityFill.displayName = 'IdentityFill'
diff --git a/packages/components/icons/src/icons/IdentityOutline.tsx b/packages/components/icons/src/icons/IdentityOutline.tsx
index 33404f458..6e400e07d 100644
--- a/packages/components/icons/src/icons/IdentityOutline.tsx
+++ b/packages/components/icons/src/icons/IdentityOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const IdentityOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="IdentityOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m13.9,13.83h3.93c.45,0,.8-.35.8-.8s-.36-.8-.8-.8h-3.93c-.45,0-.8.36-.8.8s.36.8.8.8Zm-5.06-1.11c.42,0,.8-.15,1.1-.46.3-.31.46-.68.46-1.11s-.15-.8-.46-1.11c-.3-.31-.67-.46-1.1-.46s-.8.15-1.1.46c-.3.31-.46.68-.46,1.11s.15.8.46,1.11c.3.31.67.46,1.1.46Zm5.06-1.58h3.93c.45,0,.8-.35.8-.8s-.36-.8-.8-.8h-3.93c-.45,0-.8.36-.8.8s.36.8.8.8Z"/><path d="m21.46,5.05c-.36-.36-.8-.55-1.32-.55H3.86c-.51,0-.95.19-1.32.55-.36.36-.54.81-.54,1.32v11.26c0,.52.19.96.54,1.32.36.36.8.55,1.32.55h16.28c.51,0,.95-.19,1.32-.55.37-.36.54-.81.54-1.32V6.38c0-.52-.19-.96-.54-1.32h0ZM3.77,6.38c0-.06.02-.07.02-.08,0,0,.02-.02.07-.02h16.28s.07.02.07.02c0,0,.02.02.02.08v11.26c0,.06-.02.07-.02.08,0,0-.02.02-.07.02H3.86s-.07-.02-.07-.02c0,0-.02-.02-.02-.08V6.38Z"/><path d="m11.96,14.99c0-.31-.08-.61-.24-.87-.16-.26-.39-.45-.67-.57-.44-.18-.83-.3-1.18-.36-.34-.06-.68-.1-1.02-.1-.36,0-.72.03-1.09.1-.37.07-.76.19-1.16.35-.28.13-.51.31-.68.57-.17.26-.26.55-.26.87v.5h6.32v-.5h0Z"/>',
-      }}
-    />
-  )
+export const IdentityOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="IdentityOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m13.9,13.83h3.93c.45,0,.8-.35.8-.8s-.36-.8-.8-.8h-3.93c-.45,0-.8.36-.8.8s.36.8.8.8Zm-5.06-1.11c.42,0,.8-.15,1.1-.46.3-.31.46-.68.46-1.11s-.15-.8-.46-1.11c-.3-.31-.67-.46-1.1-.46s-.8.15-1.1.46c-.3.31-.46.68-.46,1.11s.15.8.46,1.11c.3.31.67.46,1.1.46Zm5.06-1.58h3.93c.45,0,.8-.35.8-.8s-.36-.8-.8-.8h-3.93c-.45,0-.8.36-.8.8s.36.8.8.8Z"/><path d="m21.46,5.05c-.36-.36-.8-.55-1.32-.55H3.86c-.51,0-.95.19-1.32.55-.36.36-.54.81-.54,1.32v11.26c0,.52.19.96.54,1.32.36.36.8.55,1.32.55h16.28c.51,0,.95-.19,1.32-.55.37-.36.54-.81.54-1.32V6.38c0-.52-.19-.96-.54-1.32h0ZM3.77,6.38c0-.06.02-.07.02-.08,0,0,.02-.02.07-.02h16.28s.07.02.07.02c0,0,.02.02.02.08v11.26c0,.06-.02.07-.02.08,0,0-.02.02-.07.02H3.86s-.07-.02-.07-.02c0,0-.02-.02-.02-.08V6.38Z"/><path d="m11.96,14.99c0-.31-.08-.61-.24-.87-.16-.26-.39-.45-.67-.57-.44-.18-.83-.3-1.18-.36-.34-.06-.68-.1-1.02-.1-.36,0-.72.03-1.09.1-.37.07-.76.19-1.16.35-.28.13-.51.31-.68.57-.17.26-.26.55-.26.87v.5h6.32v-.5h0Z"/>',
+    }}
+  />
 )
 
 IdentityOutline.displayName = 'IdentityOutline'
diff --git a/packages/components/icons/src/icons/ImageFill.tsx b/packages/components/icons/src/icons/ImageFill.tsx
index 8551c2c77..93348a98d 100644
--- a/packages/components/icons/src/icons/ImageFill.tsx
+++ b/packages/components/icons/src/icons/ImageFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ImageFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ImageFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.06,14.77c-.82-.18-1.67-.27-2.51-.27-1.41,0-2.81.24-4.13.73-.34-.36-.7-.7-1.09-1.01-2.06-1.67-4.64-2.55-7.29-2.5-.36,0-.73.02-1.09.05v-7.41c0-.23.19-.42.42-.42h15.27c.23,0,.42.19.42.42v10.41Zm-.42,7.23h-4.3s-.02,0-.04,0H4.37c-1.3,0-2.36-1.06-2.36-2.36v-6.59c-.02-.11-.02-.22,0-.33V4.36c0-1.3,1.06-2.36,2.36-2.36h15.27c1.3,0,2.36,1.06,2.36,2.36v15.28c0,1.3-1.06,2.36-2.36,2.36ZM15.12,5.47c-1.88,0-3.4,1.52-3.4,3.4s1.52,3.4,3.4,3.4,3.4-1.52,3.4-3.4-1.52-3.4-3.4-3.4Z"/>',
-      }}
-    />
-  )
+export const ImageFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ImageFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.06,14.77c-.82-.18-1.67-.27-2.51-.27-1.41,0-2.81.24-4.13.73-.34-.36-.7-.7-1.09-1.01-2.06-1.67-4.64-2.55-7.29-2.5-.36,0-.73.02-1.09.05v-7.41c0-.23.19-.42.42-.42h15.27c.23,0,.42.19.42.42v10.41Zm-.42,7.23h-4.3s-.02,0-.04,0H4.37c-1.3,0-2.36-1.06-2.36-2.36v-6.59c-.02-.11-.02-.22,0-.33V4.36c0-1.3,1.06-2.36,2.36-2.36h15.27c1.3,0,2.36,1.06,2.36,2.36v15.28c0,1.3-1.06,2.36-2.36,2.36ZM15.12,5.47c-1.88,0-3.4,1.52-3.4,3.4s1.52,3.4,3.4,3.4,3.4-1.52,3.4-3.4-1.52-3.4-3.4-3.4Z"/>',
+    }}
+  />
 )
 
 ImageFill.displayName = 'ImageFill'
diff --git a/packages/components/icons/src/icons/ImageOutline.tsx b/packages/components/icons/src/icons/ImageOutline.tsx
index 9f96af3e6..d816519ff 100644
--- a/packages/components/icons/src/icons/ImageOutline.tsx
+++ b/packages/components/icons/src/icons/ImageOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ImageOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ImageOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.06,19.64c0,.23-.19.42-.42.42h-3.54c-.3-1.14-.78-2.22-1.41-3.2.92-.27,1.88-.41,2.85-.41h0c.85,0,1.69.11,2.51.32v2.87Zm0-4.87c-.82-.18-1.67-.27-2.51-.27-1.41,0-2.81.24-4.13.73-.34-.36-.7-.7-1.09-1.01-2.06-1.67-4.64-2.55-7.29-2.5-.36,0-.73.02-1.09.05v-7.41c0-.23.19-.42.42-.42h15.27c.23,0,.42.19.42.42v10.41Zm-.42,7.23h-4.3s-.02,0-.04,0H4.37c-1.3,0-2.36-1.06-2.36-2.36v-6.59c-.02-.11-.02-.22,0-.33V4.36c0-1.3,1.06-2.36,2.36-2.36h15.27c1.3,0,2.36,1.06,2.36,2.36v15.28c0,1.3-1.06,2.36-2.36,2.36Zm-8.53-6.27c1.39,1.13,2.42,2.64,2.97,4.33H4.37c-.23,0-.42-.19-.42-.42v-5.91c.36-.04.73-.06,1.09-.06,0,0,.02,0,.02,0,2.19-.05,4.33.68,6.03,2.06Zm2.55-6.85c0-.81.65-1.46,1.46-1.46s1.46.65,1.46,1.46-.65,1.46-1.46,1.46-1.46-.65-1.46-1.46Zm1.46-3.4c-1.88,0-3.4,1.52-3.4,3.4s1.52,3.4,3.4,3.4,3.4-1.52,3.4-3.4-1.52-3.4-3.4-3.4Z"/>',
-      }}
-    />
-  )
+export const ImageOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ImageOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.06,19.64c0,.23-.19.42-.42.42h-3.54c-.3-1.14-.78-2.22-1.41-3.2.92-.27,1.88-.41,2.85-.41h0c.85,0,1.69.11,2.51.32v2.87Zm0-4.87c-.82-.18-1.67-.27-2.51-.27-1.41,0-2.81.24-4.13.73-.34-.36-.7-.7-1.09-1.01-2.06-1.67-4.64-2.55-7.29-2.5-.36,0-.73.02-1.09.05v-7.41c0-.23.19-.42.42-.42h15.27c.23,0,.42.19.42.42v10.41Zm-.42,7.23h-4.3s-.02,0-.04,0H4.37c-1.3,0-2.36-1.06-2.36-2.36v-6.59c-.02-.11-.02-.22,0-.33V4.36c0-1.3,1.06-2.36,2.36-2.36h15.27c1.3,0,2.36,1.06,2.36,2.36v15.28c0,1.3-1.06,2.36-2.36,2.36Zm-8.53-6.27c1.39,1.13,2.42,2.64,2.97,4.33H4.37c-.23,0-.42-.19-.42-.42v-5.91c.36-.04.73-.06,1.09-.06,0,0,.02,0,.02,0,2.19-.05,4.33.68,6.03,2.06Zm2.55-6.85c0-.81.65-1.46,1.46-1.46s1.46.65,1.46,1.46-.65,1.46-1.46,1.46-1.46-.65-1.46-1.46Zm1.46-3.4c-1.88,0-3.4,1.52-3.4,3.4s1.52,3.4,3.4,3.4,3.4-1.52,3.4-3.4-1.52-3.4-3.4-3.4Z"/>',
+    }}
+  />
 )
 
 ImageOutline.displayName = 'ImageOutline'
diff --git a/packages/components/icons/src/icons/Import.tsx b/packages/components/icons/src/icons/Import.tsx
index 229243590..28ad2a01e 100644
--- a/packages/components/icons/src/icons/Import.tsx
+++ b/packages/components/icons/src/icons/Import.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Import = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Import"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,2c.55,0,1,.45,1,1v9.76s2.39-2.79,2.39-2.79c.36-.42.99-.47,1.41-.11.42.36.47.99.11,1.41l-4.15,4.85c-.19.22-.47.35-.76.35s-.57-.13-.76-.35l-4.15-4.85c-.36-.42-.31-1.05.11-1.41.42-.36,1.05-.31,1.41.11l2.39,2.79V3c0-.55.45-1,1-1ZM3,15.85c.55,0,1,.45,1,1v1.38c0,.47.19.92.52,1.25.33.33.78.52,1.25.52h12.46c.47,0,.92-.19,1.25-.52.33-.33.52-.78.52-1.25v-1.38c0-.55.45-1,1-1s1,.45,1,1v1.38c0,1-.4,1.96-1.1,2.67s-1.67,1.1-2.67,1.1H5.77c-1,0-1.96-.4-2.67-1.1-.71-.71-1.1-1.67-1.1-2.67v-1.38c0-.55.45-1,1-1Z"/>',
-      }}
-    />
-  )
+export const Import = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Import"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,2c.55,0,1,.45,1,1v9.76s2.39-2.79,2.39-2.79c.36-.42.99-.47,1.41-.11.42.36.47.99.11,1.41l-4.15,4.85c-.19.22-.47.35-.76.35s-.57-.13-.76-.35l-4.15-4.85c-.36-.42-.31-1.05.11-1.41.42-.36,1.05-.31,1.41.11l2.39,2.79V3c0-.55.45-1,1-1ZM3,15.85c.55,0,1,.45,1,1v1.38c0,.47.19.92.52,1.25.33.33.78.52,1.25.52h12.46c.47,0,.92-.19,1.25-.52.33-.33.52-.78.52-1.25v-1.38c0-.55.45-1,1-1s1,.45,1,1v1.38c0,1-.4,1.96-1.1,2.67s-1.67,1.1-2.67,1.1H5.77c-1,0-1.96-.4-2.67-1.1-.71-.71-1.1-1.67-1.1-2.67v-1.38c0-.55.45-1,1-1Z"/>',
+    }}
+  />
 )
 
 Import.displayName = 'Import'
diff --git a/packages/components/icons/src/icons/InfoFill.tsx b/packages/components/icons/src/icons/InfoFill.tsx
index 0456b2908..e47c7a791 100644
--- a/packages/components/icons/src/icons/InfoFill.tsx
+++ b/packages/components/icons/src/icons/InfoFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const InfoFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="InfoFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12Zm11.02,4.52c0,.58-.47,1.05-1.05,1.05s-1.05-.47-1.05-1.05v-4.82c0-.58.47-1.05,1.05-1.05s1.05.47,1.05,1.05v4.82Zm.4-8.36c0,.8-.65,1.45-1.45,1.45s-1.45-.65-1.45-1.45.65-1.45,1.45-1.45,1.45.65,1.45,1.45Z"/>',
-      }}
-    />
-  )
+export const InfoFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="InfoFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,12C2,6.48,6.48,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12Zm11.02,4.52c0,.58-.47,1.05-1.05,1.05s-1.05-.47-1.05-1.05v-4.82c0-.58.47-1.05,1.05-1.05s1.05.47,1.05,1.05v4.82Zm.4-8.36c0,.8-.65,1.45-1.45,1.45s-1.45-.65-1.45-1.45.65-1.45,1.45-1.45,1.45.65,1.45,1.45Z"/>',
+    }}
+  />
 )
 
 InfoFill.displayName = 'InfoFill'
diff --git a/packages/components/icons/src/icons/InfoOutline.tsx b/packages/components/icons/src/icons/InfoOutline.tsx
index 15e7cfe48..20ac5d3ea 100644
--- a/packages/components/icons/src/icons/InfoOutline.tsx
+++ b/packages/components/icons/src/icons/InfoOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const InfoOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="InfoOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,16.82c.57,0,1.03-.46,1.03-1.03v-4.64c0-.57-.46-1.03-1.03-1.03s-1.03.46-1.03,1.03v4.64c0,.57.46,1.03,1.03,1.03Zm0-7.66c.78,0,1.41-.63,1.41-1.41s-.63-1.41-1.41-1.41-1.41.63-1.41,1.41.63,1.41,1.41,1.41Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>',
-      }}
-    />
-  )
+export const InfoOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="InfoOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,16.82c.57,0,1.03-.46,1.03-1.03v-4.64c0-.57-.46-1.03-1.03-1.03s-1.03.46-1.03,1.03v4.64c0,.57.46,1.03,1.03,1.03Zm0-7.66c.78,0,1.41-.63,1.41-1.41s-.63-1.41-1.41-1.41-1.41.63-1.41,1.41.63,1.41,1.41,1.41Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm-7.89,10c0-4.36,3.53-7.89,7.89-7.89s7.89,3.53,7.89,7.89-3.53,7.89-7.89,7.89-7.89-3.53-7.89-7.89Z"/>',
+    }}
+  />
 )
 
 InfoOutline.displayName = 'InfoOutline'
diff --git a/packages/components/icons/src/icons/Job.tsx b/packages/components/icons/src/icons/Job.tsx
index 95dfcbd40..6c67db152 100644
--- a/packages/components/icons/src/icons/Job.tsx
+++ b/packages/components/icons/src/icons/Job.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Job = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Job"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.16,5.92h-3.11c-.23-1.18-.82-2.28-1.69-3.14-1.16-1.13-2.72-1.78-4.36-1.78s-3.2.64-4.36,1.78c-.88.86-1.46,1.97-1.69,3.14h-3.11c-1.56,0-2.83,1.25-2.83,2.79v11.5c0,1.55,1.27,2.79,2.83,2.79h18.34c1.56,0,2.83-1.25,2.83-2.79v-11.5c0-1.55-1.27-2.79-2.83-2.79h-.01Zm-11.88-1.52c.72-.71,1.69-1.1,2.71-1.1s1.99.4,2.71,1.1c.43.43.74.95.92,1.52h-7.27c.18-.56.49-1.09.92-1.52h.01Zm-6.46,3.82h18.34c.28,0,.5.22.5.49v3.78h-8.5v-.49c0-.63-.52-1.14-1.17-1.14s-1.17.51-1.17,1.14v.49H2.31v-3.78c0-.27.22-.49.5-.49Zm18.34,12.48H2.81c-.28,0-.5-.22-.5-.49v-5.42h8.5v.49c0,.63.52,1.14,1.17,1.14s1.17-.51,1.17-1.14v-.49h8.5v5.42c0,.27-.22.49-.5.49h-.01Z"/>',
-      }}
-    />
-  )
+export const Job = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Job"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.16,5.92h-3.11c-.23-1.18-.82-2.28-1.69-3.14-1.16-1.13-2.72-1.78-4.36-1.78s-3.2.64-4.36,1.78c-.88.86-1.46,1.97-1.69,3.14h-3.11c-1.56,0-2.83,1.25-2.83,2.79v11.5c0,1.55,1.27,2.79,2.83,2.79h18.34c1.56,0,2.83-1.25,2.83-2.79v-11.5c0-1.55-1.27-2.79-2.83-2.79h-.01Zm-11.88-1.52c.72-.71,1.69-1.1,2.71-1.1s1.99.4,2.71,1.1c.43.43.74.95.92,1.52h-7.27c.18-.56.49-1.09.92-1.52h.01Zm-6.46,3.82h18.34c.28,0,.5.22.5.49v3.78h-8.5v-.49c0-.63-.52-1.14-1.17-1.14s-1.17.51-1.17,1.14v.49H2.31v-3.78c0-.27.22-.49.5-.49Zm18.34,12.48H2.81c-.28,0-.5-.22-.5-.49v-5.42h8.5v.49c0,.63.52,1.14,1.17,1.14s1.17-.51,1.17-1.14v-.49h8.5v5.42c0,.27-.22.49-.5.49h-.01Z"/>',
+    }}
+  />
 )
 
 Job.displayName = 'Job'
diff --git a/packages/components/icons/src/icons/KeyFill.tsx b/packages/components/icons/src/icons/KeyFill.tsx
index 611d37219..857ec5d7d 100644
--- a/packages/components/icons/src/icons/KeyFill.tsx
+++ b/packages/components/icons/src/icons/KeyFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const KeyFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="KeyFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.45,13.81c-1,0-1.82-.81-1.82-1.81s.82-1.8,1.82-1.8,1.82.81,1.82,1.8-.82,1.81-1.82,1.81Zm5.14-3.61c-.86-2.43-3.41-4.06-6.25-3.5-2.08.41-3.77,2.07-4.21,4.13-.74,3.49,1.93,6.59,5.33,6.59,2.37,0,4.39-1.51,5.14-3.61h3.95v1.8c0,.99.82,1.81,1.82,1.81s1.82-.81,1.82-1.81v-1.8c1,0,1.82-.81,1.82-1.8s-.82-1.8-1.82-1.8h-7.59Z"/>',
-      }}
-    />
-  )
+export const KeyFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="KeyFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.45,13.81c-1,0-1.82-.81-1.82-1.81s.82-1.8,1.82-1.8,1.82.81,1.82,1.8-.82,1.81-1.82,1.81Zm5.14-3.61c-.86-2.43-3.41-4.06-6.25-3.5-2.08.41-3.77,2.07-4.21,4.13-.74,3.49,1.93,6.59,5.33,6.59,2.37,0,4.39-1.51,5.14-3.61h3.95v1.8c0,.99.82,1.81,1.82,1.81s1.82-.81,1.82-1.81v-1.8c1,0,1.82-.81,1.82-1.8s-.82-1.8-1.82-1.8h-7.59Z"/>',
+    }}
+  />
 )
 
 KeyFill.displayName = 'KeyFill'
diff --git a/packages/components/icons/src/icons/KeyOutline.tsx b/packages/components/icons/src/icons/KeyOutline.tsx
index 4e3831ac7..dd1706c81 100644
--- a/packages/components/icons/src/icons/KeyOutline.tsx
+++ b/packages/components/icons/src/icons/KeyOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const KeyOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="KeyOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.91,13.61c-.9,0-1.64-.73-1.64-1.61s.74-1.61,1.64-1.61,1.64.73,1.64,1.61-.74,1.61-1.64,1.61Z"/><path fill-rule="evenodd" d="m6.71,6.28c2.8-.55,5.35.87,6.48,3.11h6.17c1.45,0,2.64,1.16,2.64,2.61,0,1.09-.68,2.02-1.64,2.41v.82c0,1.44-1.19,2.61-2.64,2.61s-2.64-1.17-2.64-2.61v-.62h-1.9c-.97,1.91-2.97,3.23-5.28,3.23-3.67,0-6.58-3.33-5.77-7.09.48-2.24,2.31-4.01,4.57-4.46h0Zm4.88,4.44c-.62-1.72-2.44-2.89-4.49-2.49-1.49.29-2.7,1.47-3,2.93h0c-.53,2.48,1.37,4.69,3.82,4.69,1.7,0,3.15-1.07,3.68-2.57l.24-.66h5.27v2.61c0,.33.28.62.64.62s.64-.29.64-.62v-2.61h1c.35,0,.64-.29.64-.62s-.28-.62-.64-.62h-7.54l-.24-.66Z"/>',
-      }}
-    />
-  )
+export const KeyOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="KeyOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.91,13.61c-.9,0-1.64-.73-1.64-1.61s.74-1.61,1.64-1.61,1.64.73,1.64,1.61-.74,1.61-1.64,1.61Z"/><path fill-rule="evenodd" d="m6.71,6.28c2.8-.55,5.35.87,6.48,3.11h6.17c1.45,0,2.64,1.16,2.64,2.61,0,1.09-.68,2.02-1.64,2.41v.82c0,1.44-1.19,2.61-2.64,2.61s-2.64-1.17-2.64-2.61v-.62h-1.9c-.97,1.91-2.97,3.23-5.28,3.23-3.67,0-6.58-3.33-5.77-7.09.48-2.24,2.31-4.01,4.57-4.46h0Zm4.88,4.44c-.62-1.72-2.44-2.89-4.49-2.49-1.49.29-2.7,1.47-3,2.93h0c-.53,2.48,1.37,4.69,3.82,4.69,1.7,0,3.15-1.07,3.68-2.57l.24-.66h5.27v2.61c0,.33.28.62.64.62s.64-.29.64-.62v-2.61h1c.35,0,.64-.29.64-.62s-.28-.62-.64-.62h-7.54l-.24-.66Z"/>',
+    }}
+  />
 )
 
 KeyOutline.displayName = 'KeyOutline'
diff --git a/packages/components/icons/src/icons/LikeFill.tsx b/packages/components/icons/src/icons/LikeFill.tsx
index 35f85104d..65f8b45e6 100644
--- a/packages/components/icons/src/icons/LikeFill.tsx
+++ b/packages/components/icons/src/icons/LikeFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const LikeFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="LikeFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.61,3c-3.14,0-5.61,2.8-5.61,6.16,0,2.76,1.4,4.74,1.97,5.5,1.89,2.51,4.43,4.18,6.78,5.72.25.17.51.33.76.5.25.16.56.17.82.01.22-.13.43-.27.65-.4,2.46-1.52,5.12-3.16,7.07-5.79.65-.87,1.95-2.84,1.95-5.54,0-3.36-2.47-6.15-5.61-6.15-1.79,0-3.37.92-4.39,2.33-1.02-1.41-2.6-2.33-4.39-2.33Z"/>',
-      }}
-    />
-  )
+export const LikeFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="LikeFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.61,3c-3.14,0-5.61,2.8-5.61,6.16,0,2.76,1.4,4.74,1.97,5.5,1.89,2.51,4.43,4.18,6.78,5.72.25.17.51.33.76.5.25.16.56.17.82.01.22-.13.43-.27.65-.4,2.46-1.52,5.12-3.16,7.07-5.79.65-.87,1.95-2.84,1.95-5.54,0-3.36-2.47-6.15-5.61-6.15-1.79,0-3.37.92-4.39,2.33-1.02-1.41-2.6-2.33-4.39-2.33Z"/>',
+    }}
+  />
 )
 
 LikeFill.displayName = 'LikeFill'
diff --git a/packages/components/icons/src/icons/LikeOutline.tsx b/packages/components/icons/src/icons/LikeOutline.tsx
index 8c80f5367..f0763503d 100644
--- a/packages/components/icons/src/icons/LikeOutline.tsx
+++ b/packages/components/icons/src/icons/LikeOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const LikeOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="LikeOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.28,3c-1.72,0-3.24.83-4.28,2.11-1.04-1.28-2.57-2.11-4.28-2.11-3.21,0-5.72,2.85-5.72,6.24,0,2.77,1.41,4.75,1.97,5.51,1.87,2.47,4.38,4.11,6.67,5.6h.02c.25.17.49.33.73.49.32.21.73.22,1.06.02.21-.13.43-.26.63-.39h.02c2.39-1.48,5.02-3.1,6.95-5.68.64-.86,1.95-2.83,1.95-5.54,0-3.4-2.51-6.23-5.72-6.23h0Zm-8.57,2.12c1.46,0,2.76.96,3.35,2.39.16.38.52.64.93.64s.77-.25.93-.64c.6-1.44,1.9-2.39,3.36-2.39,1.99,0,3.7,1.79,3.69,4.13,0,2-.98,3.5-1.52,4.24-1.67,2.25-3.98,3.67-6.43,5.19l-.07.04-.21-.13c-2.33-1.52-4.54-2.97-6.18-5.14-.51-.67-1.54-2.18-1.54-4.2,0-2.33,1.7-4.13,3.7-4.13h0Z"/>',
-      }}
-    />
-  )
+export const LikeOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="LikeOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.28,3c-1.72,0-3.24.83-4.28,2.11-1.04-1.28-2.57-2.11-4.28-2.11-3.21,0-5.72,2.85-5.72,6.24,0,2.77,1.41,4.75,1.97,5.51,1.87,2.47,4.38,4.11,6.67,5.6h.02c.25.17.49.33.73.49.32.21.73.22,1.06.02.21-.13.43-.26.63-.39h.02c2.39-1.48,5.02-3.1,6.95-5.68.64-.86,1.95-2.83,1.95-5.54,0-3.4-2.51-6.23-5.72-6.23h0Zm-8.57,2.12c1.46,0,2.76.96,3.35,2.39.16.38.52.64.93.64s.77-.25.93-.64c.6-1.44,1.9-2.39,3.36-2.39,1.99,0,3.7,1.79,3.69,4.13,0,2-.98,3.5-1.52,4.24-1.67,2.25-3.98,3.67-6.43,5.19l-.07.04-.21-.13c-2.33-1.52-4.54-2.97-6.18-5.14-.51-.67-1.54-2.18-1.54-4.2,0-2.33,1.7-4.13,3.7-4.13h0Z"/>',
+    }}
+  />
 )
 
 LikeOutline.displayName = 'LikeOutline'
diff --git a/packages/components/icons/src/icons/Link.tsx b/packages/components/icons/src/icons/Link.tsx
index 0bbe6d5eb..c0e060971 100644
--- a/packages/components/icons/src/icons/Link.tsx
+++ b/packages/components/icons/src/icons/Link.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Link = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Link"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M8.18 10.48c.41.41.4 1.08 0 1.49-.46.45-1.9 1.89-3.26 3.24-1.08 1.07-1.08 2.82 0 3.89 1.07 1.06 2.78 1.06 3.83 0 .86-.86 1.95-1.95 3.29-3.29.41-.41 1.08-.41 1.49 0 .41.41.41 1.07 0 1.49-1.34 1.35-2.43 2.44-3.29 3.3-1.89 1.88-4.93 1.86-6.81 0-1.9-1.89-1.9-4.97 0-6.86 1.35-1.35 2.8-2.79 3.26-3.25.41-.41 1.08-.4 1.49 0ZM13.72 3.42c1.9-1.91 4.98-1.89 6.87 0 1.89 1.89 1.89 4.96-.01 6.85-.43.42-.85.85-1.28 1.27-.66.66-1.32 1.31-1.98 1.97-.41.41-1.08.41-1.49 0-.41-.41-.41-1.08 0-1.49.66-.66 1.32-1.31 1.98-1.97.42-.42.85-.84 1.27-1.26 1.07-1.07 1.08-2.8 0-3.88-1.08-1.08-2.81-1.08-3.88 0-.49.49-.98.99-1.48 1.49-.59.59-1.18 1.19-1.76 1.78-.41.41-1.08.41-1.49 0-.41-.41-.41-1.07 0-1.49.59-.59 1.17-1.18 1.76-1.77.49-.5.99-1 1.48-1.5Z"/><path fill-rule="evenodd" d="m15.8,8.21c.41.41.41,1.08,0,1.49l-6.1,6.08c-.41.41-1.08.41-1.49,0-.41-.41-.41-1.08,0-1.49l6.1-6.08c.41-.41,1.08-.41,1.49,0Z"/>',
-      }}
-    />
-  )
+export const Link = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Link"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M8.18 10.48c.41.41.4 1.08 0 1.49-.46.45-1.9 1.89-3.26 3.24-1.08 1.07-1.08 2.82 0 3.89 1.07 1.06 2.78 1.06 3.83 0 .86-.86 1.95-1.95 3.29-3.29.41-.41 1.08-.41 1.49 0 .41.41.41 1.07 0 1.49-1.34 1.35-2.43 2.44-3.29 3.3-1.89 1.88-4.93 1.86-6.81 0-1.9-1.89-1.9-4.97 0-6.86 1.35-1.35 2.8-2.79 3.26-3.25.41-.41 1.08-.4 1.49 0ZM13.72 3.42c1.9-1.91 4.98-1.89 6.87 0 1.89 1.89 1.89 4.96-.01 6.85-.43.42-.85.85-1.28 1.27-.66.66-1.32 1.31-1.98 1.97-.41.41-1.08.41-1.49 0-.41-.41-.41-1.08 0-1.49.66-.66 1.32-1.31 1.98-1.97.42-.42.85-.84 1.27-1.26 1.07-1.07 1.08-2.8 0-3.88-1.08-1.08-2.81-1.08-3.88 0-.49.49-.98.99-1.48 1.49-.59.59-1.18 1.19-1.76 1.78-.41.41-1.08.41-1.49 0-.41-.41-.41-1.07 0-1.49.59-.59 1.17-1.18 1.76-1.77.49-.5.99-1 1.48-1.5Z"/><path fill-rule="evenodd" d="m15.8,8.21c.41.41.41,1.08,0,1.49l-6.1,6.08c-.41.41-1.08.41-1.49,0-.41-.41-.41-1.08,0-1.49l6.1-6.08c.41-.41,1.08-.41,1.49,0Z"/>',
+    }}
+  />
 )
 
 Link.displayName = 'Link'
diff --git a/packages/components/icons/src/icons/LockFill.tsx b/packages/components/icons/src/icons/LockFill.tsx
index 8b21bf6c6..20ec3d3ca 100644
--- a/packages/components/icons/src/icons/LockFill.tsx
+++ b/packages/components/icons/src/icons/LockFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const LockFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="LockFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.9,8.96v-1.11c0-1.54-.63-3.04-1.73-4.13-1.12-1.11-2.6-1.72-4.17-1.72s-3.06.61-4.17,1.72c-1.12,1.1-1.73,2.58-1.73,4.13v1.11c-1.18.15-2.1,1.14-2.1,2.35v8.31c0,1.32,1.08,2.38,2.41,2.38h11.19c1.33,0,2.41-1.07,2.41-2.38v-8.31c0-1.21-.92-2.2-2.1-2.35h0Zm-5.99,8.82c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Zm3.97-8.85h-7.77v-1.07c0-1.03.4-1.99,1.14-2.72.73-.72,1.71-1.12,2.74-1.12s2.01.4,2.74,1.12c.72.72,1.14,1.71,1.14,2.72v1.07h0Z"/>',
-      }}
-    />
-  )
+export const LockFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="LockFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.9,8.96v-1.11c0-1.54-.63-3.04-1.73-4.13-1.12-1.11-2.6-1.72-4.17-1.72s-3.06.61-4.17,1.72c-1.12,1.1-1.73,2.58-1.73,4.13v1.11c-1.18.15-2.1,1.14-2.1,2.35v8.31c0,1.32,1.08,2.38,2.41,2.38h11.19c1.33,0,2.41-1.07,2.41-2.38v-8.31c0-1.21-.92-2.2-2.1-2.35h0Zm-5.99,8.82c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Zm3.97-8.85h-7.77v-1.07c0-1.03.4-1.99,1.14-2.72.73-.72,1.71-1.12,2.74-1.12s2.01.4,2.74,1.12c.72.72,1.14,1.71,1.14,2.72v1.07h0Z"/>',
+    }}
+  />
 )
 
 LockFill.displayName = 'LockFill'
diff --git a/packages/components/icons/src/icons/LockOutline.tsx b/packages/components/icons/src/icons/LockOutline.tsx
index 3b47f2204..61080d90d 100644
--- a/packages/components/icons/src/icons/LockOutline.tsx
+++ b/packages/components/icons/src/icons/LockOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const LockOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="LockOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.59,22H6.41c-1.33,0-2.41-1.07-2.41-2.38v-8.31c0-1.21.92-2.22,2.1-2.37v-1.1c0-1.56.61-3.03,1.73-4.13,1.12-1.1,2.6-1.71,4.18-1.71s3.06.61,4.17,1.71c1.12,1.11,1.73,2.58,1.73,4.13v1.1c1.18.15,2.1,1.15,2.1,2.37v8.31c0,1.32-1.08,2.38-2.41,2.38ZM6.41,10.93c-.21,0-.39.18-.39.38v8.31c0,.21.18.38.39.38h11.19c.21,0,.39-.17.39-.38v-8.31c0-.21-.18-.38-.39-.38H6.41Zm1.71-2h7.77v-1.07c0-1.03-.4-1.99-1.14-2.72-.73-.72-1.71-1.12-2.74-1.12s-2.01.4-2.74,1.12c-.73.72-1.14,1.69-1.14,2.72v1.07h0Zm3.8,8.74c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
-      }}
-    />
-  )
+export const LockOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="LockOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.59,22H6.41c-1.33,0-2.41-1.07-2.41-2.38v-8.31c0-1.21.92-2.22,2.1-2.37v-1.1c0-1.56.61-3.03,1.73-4.13,1.12-1.1,2.6-1.71,4.18-1.71s3.06.61,4.17,1.71c1.12,1.11,1.73,2.58,1.73,4.13v1.1c1.18.15,2.1,1.15,2.1,2.37v8.31c0,1.32-1.08,2.38-2.41,2.38ZM6.41,10.93c-.21,0-.39.18-.39.38v8.31c0,.21.18.38.39.38h11.19c.21,0,.39-.17.39-.38v-8.31c0-.21-.18-.38-.39-.38H6.41Zm1.71-2h7.77v-1.07c0-1.03-.4-1.99-1.14-2.72-.73-.72-1.71-1.12-2.74-1.12s-2.01.4-2.74,1.12c-.73.72-1.14,1.69-1.14,2.72v1.07h0Zm3.8,8.74c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
+    }}
+  />
 )
 
 LockOutline.displayName = 'LockOutline'
diff --git a/packages/components/icons/src/icons/MailCloseFill.tsx b/packages/components/icons/src/icons/MailCloseFill.tsx
index d1ac3b634..0caa2caa4 100644
--- a/packages/components/icons/src/icons/MailCloseFill.tsx
+++ b/packages/components/icons/src/icons/MailCloseFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailCloseFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailCloseFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.74,17.33v-8.44c0-1.42-1.2-2.58-2.59-2.76h-.19c-1.67,0-2.96,1.24-2.96,2.76v8.44c0,.27.28.53.56.53h4.63c.37,0,.56-.27.56-.53Zm-1.48-7.38h-2.78c-.37,0-.65-.27-.65-.62s.28-.62.65-.62h2.78c.37,0,.65.27.65.62s-.28.62-.65.62Z"/><path d="m16.44,4H5.15c1.11.09,2.13.44,2.96,1.07.37.27.74.62,1.02,1.07.56.8.93,1.78.93,2.76v8.44c0,.18,0,.36-.09.53-.09.36-.28.71-.56,1.07-.46.62-1.3,1.07-2.22,1.07h12.04c1.57,0,2.78-1.16,2.78-2.67v-8c0-2.93-2.41-5.33-5.56-5.33Zm-3.7,9.07c-.65,0-1.11-.44-1.11-1.07s.46-1.07,1.11-1.07h5.28v3.29c0,.62-.46,1.07-1.11,1.07s-1.11-.44-1.11-1.07v-1.16h-3.06Z"/>',
-      }}
-    />
-  )
+export const MailCloseFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailCloseFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.74,17.33v-8.44c0-1.42-1.2-2.58-2.59-2.76h-.19c-1.67,0-2.96,1.24-2.96,2.76v8.44c0,.27.28.53.56.53h4.63c.37,0,.56-.27.56-.53Zm-1.48-7.38h-2.78c-.37,0-.65-.27-.65-.62s.28-.62.65-.62h2.78c.37,0,.65.27.65.62s-.28.62-.65.62Z"/><path d="m16.44,4H5.15c1.11.09,2.13.44,2.96,1.07.37.27.74.62,1.02,1.07.56.8.93,1.78.93,2.76v8.44c0,.18,0,.36-.09.53-.09.36-.28.71-.56,1.07-.46.62-1.3,1.07-2.22,1.07h12.04c1.57,0,2.78-1.16,2.78-2.67v-8c0-2.93-2.41-5.33-5.56-5.33Zm-3.7,9.07c-.65,0-1.11-.44-1.11-1.07s.46-1.07,1.11-1.07h5.28v3.29c0,.62-.46,1.07-1.11,1.07s-1.11-.44-1.11-1.07v-1.16h-3.06Z"/>',
+    }}
+  />
 )
 
 MailCloseFill.displayName = 'MailCloseFill'
diff --git a/packages/components/icons/src/icons/MailCloseOutline.tsx b/packages/components/icons/src/icons/MailCloseOutline.tsx
index 2975549fb..cbfeae3f1 100644
--- a/packages/components/icons/src/icons/MailCloseOutline.tsx
+++ b/packages/components/icons/src/icons/MailCloseOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailCloseOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailCloseOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m17,4H7c-.07,0-.14,0-.21,0-.07,0-.14,0-.21,0-2.53,0-4.58,2.19-4.58,4.89v8.44c0,1.48,1.12,2.67,2.5,2.67h15c1.38,0,2.5-1.19,2.5-2.67v-8c0-2.94-2.24-5.33-5-5.33Zm-12.5,13.87c-.28,0-.5-.24-.5-.53v-8c0-1.69,1.23-3.06,2.79-3.17,1.32.12,2.38,1.29,2.38,2.73v8.44c0,.29-.22.53-.5.53h-4.17Zm15.5-.53c0,.29-.23.53-.5.53h-8.38c.03-.17.05-.35.05-.53v-8.44c0-1.02-.29-1.97-.8-2.76h6.63c1.66,0,3,1.43,3,3.2v8Z"/><path fill-rule="evenodd" d="m7.83,8.27h-2.5c-.55,0-1,.48-1,1.07s.45,1.07,1,1.07h2.5c.55,0,1-.48,1-1.07s-.45-1.07-1-1.07Zm4.83,3.73c0,.59.45,1.07,1,1.07h2.75v1.16c0,.59.45,1.07,1,1.07s1-.48,1-1.07v-3.29h-4.75c-.55,0-1,.48-1,1.07Z"/>',
-      }}
-    />
-  )
+export const MailCloseOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailCloseOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m17,4H7c-.07,0-.14,0-.21,0-.07,0-.14,0-.21,0-2.53,0-4.58,2.19-4.58,4.89v8.44c0,1.48,1.12,2.67,2.5,2.67h15c1.38,0,2.5-1.19,2.5-2.67v-8c0-2.94-2.24-5.33-5-5.33Zm-12.5,13.87c-.28,0-.5-.24-.5-.53v-8c0-1.69,1.23-3.06,2.79-3.17,1.32.12,2.38,1.29,2.38,2.73v8.44c0,.29-.22.53-.5.53h-4.17Zm15.5-.53c0,.29-.23.53-.5.53h-8.38c.03-.17.05-.35.05-.53v-8.44c0-1.02-.29-1.97-.8-2.76h6.63c1.66,0,3,1.43,3,3.2v8Z"/><path fill-rule="evenodd" d="m7.83,8.27h-2.5c-.55,0-1,.48-1,1.07s.45,1.07,1,1.07h2.5c.55,0,1-.48,1-1.07s-.45-1.07-1-1.07Zm4.83,3.73c0,.59.45,1.07,1,1.07h2.75v1.16c0,.59.45,1.07,1,1.07s1-.48,1-1.07v-3.29h-4.75c-.55,0-1,.48-1,1.07Z"/>',
+    }}
+  />
 )
 
 MailCloseOutline.displayName = 'MailCloseOutline'
diff --git a/packages/components/icons/src/icons/MailFill.tsx b/packages/components/icons/src/icons/MailFill.tsx
index 433f66dc7..5cd45167b 100644
--- a/packages/components/icons/src/icons/MailFill.tsx
+++ b/packages/components/icons/src/icons/MailFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.99,12.74h0v3.81c0,1.9-1.52,3.45-3.38,3.45H5.38c-1.87,0-3.38-1.54-3.38-3.45V7.45c0-1.9,1.52-3.45,3.38-3.45h13.24c1.8,0,3.27,1.44,3.37,3.25v5.49Zm-11.51,1.3l-6.56-5.17c-.44-.35-.52-.99-.18-1.44.34-.45.97-.53,1.41-.19l6.56,5.17c.07.06.17.1.29.1s.22-.04.29-.1l6.56-5.17c.44-.35,1.07-.26,1.41.19.34.45.26,1.09-.18,1.44l-6.56,5.17c-.44.34-.97.52-1.52.52s-1.08-.18-1.52-.52Z"/>',
-      }}
-    />
-  )
+export const MailFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.99,12.74h0v3.81c0,1.9-1.52,3.45-3.38,3.45H5.38c-1.87,0-3.38-1.54-3.38-3.45V7.45c0-1.9,1.52-3.45,3.38-3.45h13.24c1.8,0,3.27,1.44,3.37,3.25v5.49Zm-11.51,1.3l-6.56-5.17c-.44-.35-.52-.99-.18-1.44.34-.45.97-.53,1.41-.19l6.56,5.17c.07.06.17.1.29.1s.22-.04.29-.1l6.56-5.17c.44-.35,1.07-.26,1.41.19.34.45.26,1.09-.18,1.44l-6.56,5.17c-.44.34-.97.52-1.52.52s-1.08-.18-1.52-.52Z"/>',
+    }}
+  />
 )
 
 MailFill.displayName = 'MailFill'
diff --git a/packages/components/icons/src/icons/MailOpenFill.tsx b/packages/components/icons/src/icons/MailOpenFill.tsx
index 9360c4c9e..b0faeb477 100644
--- a/packages/components/icons/src/icons/MailOpenFill.tsx
+++ b/packages/components/icons/src/icons/MailOpenFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailOpenFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailOpenFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m19.53,20c1.4,0,2.47-1.15,2.47-2.66v-8c-.08-2.93-2.23-5.34-5.02-5.34h-8.4c.99.09,1.89.44,2.63,1.07.33.27.66.62.91,1.07.49.8.82,1.78.82,2.75v8.44c0,.18,0,.36-.08.53h-2.47c.33,0,.49-.27.49-.53v-8.45c0-1.42-1.07-2.57-2.31-2.75h-.25c-1.4,0-2.55,1.24-2.55,2.75v8.44c0,.27.25.53.49.53h-3.28c-.57,0-.99.44-.99,1.07s.41,1.07.99,1.07m16.22-5.78c0,.53-.41,1.07-.99,1.07s-.99-.44-.99-1.07v-1.15h-2.72c-.57,0-.99-.44-.99-1.07s.49-1.07.99-1.07h4.69v3.28h0Z"/>',
-      }}
-    />
-  )
+export const MailOpenFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailOpenFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m19.53,20c1.4,0,2.47-1.15,2.47-2.66v-8c-.08-2.93-2.23-5.34-5.02-5.34h-8.4c.99.09,1.89.44,2.63,1.07.33.27.66.62.91,1.07.49.8.82,1.78.82,2.75v8.44c0,.18,0,.36-.08.53h-2.47c.33,0,.49-.27.49-.53v-8.45c0-1.42-1.07-2.57-2.31-2.75h-.25c-1.4,0-2.55,1.24-2.55,2.75v8.44c0,.27.25.53.49.53h-3.28c-.57,0-.99.44-.99,1.07s.41,1.07.99,1.07m16.22-5.78c0,.53-.41,1.07-.99,1.07s-.99-.44-.99-1.07v-1.15h-2.72c-.57,0-.99-.44-.99-1.07s.49-1.07.99-1.07h4.69v3.28h0Z"/>',
+    }}
+  />
 )
 
 MailOpenFill.displayName = 'MailOpenFill'
diff --git a/packages/components/icons/src/icons/MailOpenOutline.tsx b/packages/components/icons/src/icons/MailOpenOutline.tsx
index 07b077d2b..d81c0e2f2 100644
--- a/packages/components/icons/src/icons/MailOpenOutline.tsx
+++ b/packages/components/icons/src/icons/MailOpenOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailOpenOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailOpenOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m17,4H7c-.07,0-.14,0-.21,0-.07,0-.14,0-.21,0-2.53,0-4.58,2.19-4.58,4.89v8.44c0,1.48,1.12,2.67,2.5,2.67h15c1.38,0,2.5-1.19,2.5-2.67v-8c0-2.94-2.24-5.33-5-5.33Zm-7.83,13.33c0,.29-.22.53-.5.53h-4.17c-.28,0-.5-.24-.5-.53v-8c0-1.69,1.23-3.06,2.79-3.17,1.32.12,2.38,1.29,2.38,2.73v8.44Zm10.83,0c0,.29-.23.53-.5.53h-8.38c.03-.17.05-.35.05-.53v-8.44c0-1.02-.29-1.97-.8-2.76h6.63c1.66,0,3,1.43,3,3.2v8Z"/><path fill-rule="evenodd" d="m5.33,8.27c-.55,0-1,.48-1,1.07s.45,1.07,1,1.07h2.5c.55,0,1-.48,1-1.07s-.45-1.07-1-1.07h-2.5Zm7.33,3.73c0,.59.45,1.07,1,1.07h2.75v1.16c0,.59.45,1.07,1,1.07s1-.48,1-1.07v-3.29h-4.75c-.55,0-1,.48-1,1.07Z"/>',
-      }}
-    />
-  )
+export const MailOpenOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailOpenOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m17,4H7c-.07,0-.14,0-.21,0-.07,0-.14,0-.21,0-2.53,0-4.58,2.19-4.58,4.89v8.44c0,1.48,1.12,2.67,2.5,2.67h15c1.38,0,2.5-1.19,2.5-2.67v-8c0-2.94-2.24-5.33-5-5.33Zm-7.83,13.33c0,.29-.22.53-.5.53h-4.17c-.28,0-.5-.24-.5-.53v-8c0-1.69,1.23-3.06,2.79-3.17,1.32.12,2.38,1.29,2.38,2.73v8.44Zm10.83,0c0,.29-.23.53-.5.53h-8.38c.03-.17.05-.35.05-.53v-8.44c0-1.02-.29-1.97-.8-2.76h6.63c1.66,0,3,1.43,3,3.2v8Z"/><path fill-rule="evenodd" d="m5.33,8.27c-.55,0-1,.48-1,1.07s.45,1.07,1,1.07h2.5c.55,0,1-.48,1-1.07s-.45-1.07-1-1.07h-2.5Zm7.33,3.73c0,.59.45,1.07,1,1.07h2.75v1.16c0,.59.45,1.07,1,1.07s1-.48,1-1.07v-3.29h-4.75c-.55,0-1,.48-1,1.07Z"/>',
+    }}
+  />
 )
 
 MailOpenOutline.displayName = 'MailOpenOutline'
diff --git a/packages/components/icons/src/icons/MailOutline.tsx b/packages/components/icons/src/icons/MailOutline.tsx
index 3683fd16e..69e0e5d3e 100644
--- a/packages/components/icons/src/icons/MailOutline.tsx
+++ b/packages/components/icons/src/icons/MailOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MailOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MailOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.99,12.74v-5.49c-.1-1.81-1.57-3.25-3.37-3.25H5.38c-1.87,0-3.38,1.54-3.38,3.45v9.11c0,1.9,1.52,3.45,3.38,3.45h13.24c1.87,0,3.38-1.54,3.38-3.45v-3.81h0Zm-2.22-5.87c-.06.22-.22.46-.43.63l-3,2.35c-.61.48-1.9,1.38-3.01,2.16-.79.54-1.82.53-2.6-.04-1.76-1.29-4.38-3.22-6.06-4.48-.22-.17-.38-.4-.44-.62-.06-.21-.02-.4.14-.55.27-.25.62-.39,1.01-.39h13.24c.39,0,.74.15,1.01.4.16.14.19.33.14.55Zm-15.89,2.4c1.69,1.27,4.11,3.05,5.75,4.24,1.42,1.04,3.32,1.07,4.76.07,1.1-.76,2.43-1.7,3.1-2.22l2.62-2.06v7.26c0,.84-.67,1.53-1.5,1.53H5.38c-.82,0-1.5-.68-1.5-1.53v-7.28Z"/>',
-      }}
-    />
-  )
+export const MailOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MailOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.99,12.74v-5.49c-.1-1.81-1.57-3.25-3.37-3.25H5.38c-1.87,0-3.38,1.54-3.38,3.45v9.11c0,1.9,1.52,3.45,3.38,3.45h13.24c1.87,0,3.38-1.54,3.38-3.45v-3.81h0Zm-2.22-5.87c-.06.22-.22.46-.43.63l-3,2.35c-.61.48-1.9,1.38-3.01,2.16-.79.54-1.82.53-2.6-.04-1.76-1.29-4.38-3.22-6.06-4.48-.22-.17-.38-.4-.44-.62-.06-.21-.02-.4.14-.55.27-.25.62-.39,1.01-.39h13.24c.39,0,.74.15,1.01.4.16.14.19.33.14.55Zm-15.89,2.4c1.69,1.27,4.11,3.05,5.75,4.24,1.42,1.04,3.32,1.07,4.76.07,1.1-.76,2.43-1.7,3.1-2.22l2.62-2.06v7.26c0,.84-.67,1.53-1.5,1.53H5.38c-.82,0-1.5-.68-1.5-1.53v-7.28Z"/>',
+    }}
+  />
 )
 
 MailOutline.displayName = 'MailOutline'
diff --git a/packages/components/icons/src/icons/MapCursorFill.tsx b/packages/components/icons/src/icons/MapCursorFill.tsx
index 272cbe854..6e18d4a54 100644
--- a/packages/components/icons/src/icons/MapCursorFill.tsx
+++ b/packages/components/icons/src/icons/MapCursorFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MapCursorFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MapCursorFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.87,5.14c.14-.42.17-.87.07-1.3-.1-.43-.32-.83-.63-1.14-.31-.31-.71-.53-1.14-.63-.43-.1-.88-.08-1.3.07L3.48,7.48c-.37.05-.72.21-.99.48-.32.32-.49.74-.49,1.19s.18.88.49,1.19c.27.27.61.43.98.48l7.17,2.54,2.6,7.16c.05.37.21.71.48.98.32.32.74.49,1.19.49s.88-.18,1.19-.49c.27-.27.44-.62.48-.99l5.28-15.38h0Z"/>',
-      }}
-    />
-  )
+export const MapCursorFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MapCursorFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.87,5.14c.14-.42.17-.87.07-1.3-.1-.43-.32-.83-.63-1.14-.31-.31-.71-.53-1.14-.63-.43-.1-.88-.08-1.3.07L3.48,7.48c-.37.05-.72.21-.99.48-.32.32-.49.74-.49,1.19s.18.88.49,1.19c.27.27.61.43.98.48l7.17,2.54,2.6,7.16c.05.37.21.71.48.98.32.32.74.49,1.19.49s.88-.18,1.19-.49c.27-.27.44-.62.48-.99l5.28-15.38h0Z"/>',
+    }}
+  />
 )
 
 MapCursorFill.displayName = 'MapCursorFill'
diff --git a/packages/components/icons/src/icons/MapCursorOutline.tsx b/packages/components/icons/src/icons/MapCursorOutline.tsx
index b4de877dc..b845de415 100644
--- a/packages/components/icons/src/icons/MapCursorOutline.tsx
+++ b/packages/components/icons/src/icons/MapCursorOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MapCursorOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MapCursorOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.94,3.83c.1.43.08.88-.07,1.3h0s-5.28,15.38-5.28,15.38c-.05.37-.21.72-.48.99-.32.32-.74.49-1.19.49s-.88-.18-1.19-.49c-.27-.27-.43-.61-.48-.98l-2.6-7.16-7.17-2.54c-.37-.05-.72-.21-.98-.48-.32-.32-.49-.74-.49-1.19s.18-.88.49-1.19c.27-.27.61-.44.99-.48l15.39-5.35c.42-.14.87-.17,1.3-.07.43.1.83.32,1.14.63.31.31.53.71.63,1.14Zm-1.96.65c.02-.07.03-.14.01-.2-.02-.07-.05-.13-.1-.18s-.11-.08-.18-.1c-.07-.02-.14-.01-.2,0,0,0,0,0,0,0l-14.76,5.14,7.01,2.48c.28.1.5.32.61.6l2.54,7.01,5.07-14.76s0,0,0,0Z"/>',
-      }}
-    />
-  )
+export const MapCursorOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MapCursorOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.94,3.83c.1.43.08.88-.07,1.3h0s-5.28,15.38-5.28,15.38c-.05.37-.21.72-.48.99-.32.32-.74.49-1.19.49s-.88-.18-1.19-.49c-.27-.27-.43-.61-.48-.98l-2.6-7.16-7.17-2.54c-.37-.05-.72-.21-.98-.48-.32-.32-.49-.74-.49-1.19s.18-.88.49-1.19c.27-.27.61-.44.99-.48l15.39-5.35c.42-.14.87-.17,1.3-.07.43.1.83.32,1.14.63.31.31.53.71.63,1.14Zm-1.96.65c.02-.07.03-.14.01-.2-.02-.07-.05-.13-.1-.18s-.11-.08-.18-.1c-.07-.02-.14-.01-.2,0,0,0,0,0,0,0l-14.76,5.14,7.01,2.48c.28.1.5.32.61.6l2.54,7.01,5.07-14.76s0,0,0,0Z"/>',
+    }}
+  />
 )
 
 MapCursorOutline.displayName = 'MapCursorOutline'
diff --git a/packages/components/icons/src/icons/MapExpand.tsx b/packages/components/icons/src/icons/MapExpand.tsx
index 00b725474..2172453d5 100644
--- a/packages/components/icons/src/icons/MapExpand.tsx
+++ b/packages/components/icons/src/icons/MapExpand.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MapExpand = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MapExpand"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m15.46,4c-.55,0-1-.45-1-1s.45-1,1-1h5.54c.55,0,1,.45,1,1v5.54c0,.55-.45,1-1,1-.55,0-1-.45-1-1v-3.12l-5.22,5.22c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l5.22-5.22h-3.12Zm-4.83,9.37c.39.39.39,1.02,0,1.41l-5.22,5.22h3.12c.55,0,1,.45,1,1s-.45,1-1,1H3c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71v-5.54c0-.55.45-1,1-1s1,.45,1,1v3.12l5.22-5.22c.39-.39,1.02-.39,1.41,0Z"/>',
-      }}
-    />
-  )
+export const MapExpand = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MapExpand"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m15.46,4c-.55,0-1-.45-1-1s.45-1,1-1h5.54c.55,0,1,.45,1,1v5.54c0,.55-.45,1-1,1-.55,0-1-.45-1-1v-3.12l-5.22,5.22c-.39.39-1.02.39-1.41,0-.39-.39-.39-1.02,0-1.41l5.22-5.22h-3.12Zm-4.83,9.37c.39.39.39,1.02,0,1.41l-5.22,5.22h3.12c.55,0,1,.45,1,1s-.45,1-1,1H3c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71v-5.54c0-.55.45-1,1-1s1,.45,1,1v3.12l5.22-5.22c.39-.39,1.02-.39,1.41,0Z"/>',
+    }}
+  />
 )
 
 MapExpand.displayName = 'MapExpand'
diff --git a/packages/components/icons/src/icons/MegaphoneFill.tsx b/packages/components/icons/src/icons/MegaphoneFill.tsx
index 6618774f3..2c74b56ee 100644
--- a/packages/components/icons/src/icons/MegaphoneFill.tsx
+++ b/packages/components/icons/src/icons/MegaphoneFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MegaphoneFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MegaphoneFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,4.47c0-.26-.07-.52-.19-.75-.12-.23-.29-.43-.51-.58-.22-.15-.46-.25-.72-.29-.26-.04-.53-.02-.78.07L3.58,8.51c-.45.16-.85.44-1.14.82-.29.39-.44.86-.44,1.34v1.52c.02.47.18.92.46,1.29.28.38.68.66,1.12.82l1.88.65v1.52c0,.89.27,1.77.76,2.52.49.75,1.19,1.35,2.01,1.73.83.38,1.74.52,2.65.4.9-.12,1.75-.48,2.45-1.06.63-.52,1.11-1.19,1.39-1.95l5.06,1.74c.25.08.52.11.78.07.26-.04.51-.14.72-.29.22-.15.39-.35.51-.58.13-.23.19-.49.19-.75V4.48h0Zm-9.92,14.12c-.41.34-.92.56-1.45.63-.53.07-1.08-.01-1.57-.24-.49-.22-.9-.58-1.19-1.03-.29-.45-.44-.97-.44-1.5v-.82l5.47,1.88c-.18.42-.45.79-.81,1.07Z"/>',
-      }}
-    />
-  )
+export const MegaphoneFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MegaphoneFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,4.47c0-.26-.07-.52-.19-.75-.12-.23-.29-.43-.51-.58-.22-.15-.46-.25-.72-.29-.26-.04-.53-.02-.78.07L3.58,8.51c-.45.16-.85.44-1.14.82-.29.39-.44.86-.44,1.34v1.52c.02.47.18.92.46,1.29.28.38.68.66,1.12.82l1.88.65v1.52c0,.89.27,1.77.76,2.52.49.75,1.19,1.35,2.01,1.73.83.38,1.74.52,2.65.4.9-.12,1.75-.48,2.45-1.06.63-.52,1.11-1.19,1.39-1.95l5.06,1.74c.25.08.52.11.78.07.26-.04.51-.14.72-.29.22-.15.39-.35.51-.58.13-.23.19-.49.19-.75V4.48h0Zm-9.92,14.12c-.41.34-.92.56-1.45.63-.53.07-1.08-.01-1.57-.24-.49-.22-.9-.58-1.19-1.03-.29-.45-.44-.97-.44-1.5v-.82l5.47,1.88c-.18.42-.45.79-.81,1.07Z"/>',
+    }}
+  />
 )
 
 MegaphoneFill.displayName = 'MegaphoneFill'
diff --git a/packages/components/icons/src/icons/MegaphoneMuteFill.tsx b/packages/components/icons/src/icons/MegaphoneMuteFill.tsx
index 2963f7f0e..2139ea3b2 100644
--- a/packages/components/icons/src/icons/MegaphoneMuteFill.tsx
+++ b/packages/components/icons/src/icons/MegaphoneMuteFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MegaphoneMuteFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MegaphoneMuteFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M20.16 5.38c-.08-.17-.25-.34-.42-.51-.08-.09-.17-.09-.25-.17l-8.16 11.93 1.43.51c-.17.34-.42.68-.67.94-.34.26-.76.51-1.26.51h-.76l-1.01 1.45c.59.26 1.35.34 2.02.26.76-.09 1.51-.43 2.1-.94.51-.43.93-1.02 1.18-1.7l4.29 1.45c.25.09.42.09.67.09s.42-.09.59-.26c.17-.09.34-.26.42-.51.08-.17.17-.43.17-.6V5.98c-.17-.17-.25-.43-.34-.6ZM10.4 16.38l8-11.68.93-1.28c.17-.26.17-.6.08-.85-.08-.17-.17-.34-.34-.43-.42-.26-1.01-.17-1.26.26l-2.36 3.41-10.6 3.66c-.42.17-.76.34-.93.68-.25.35-.42.77-.42 1.11v1.36c0 .43.17.77.42 1.11s.59.6.93.68l1.6.51v1.28c0 .68.17 1.36.5 1.96l-1.68 2.39c-.25.43-.17 1.02.25 1.28.17.17.34.17.5.17h.08c.25 0 .5-.17.67-.43l1.43-2.05.93-1.36 1.27-1.78Zm-2.36-.17v-.68l.59.17-.5.77c-.09-.09-.09-.18-.09-.26Z"/>',
-      }}
-    />
-  )
+export const MegaphoneMuteFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MegaphoneMuteFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M20.16 5.38c-.08-.17-.25-.34-.42-.51-.08-.09-.17-.09-.25-.17l-8.16 11.93 1.43.51c-.17.34-.42.68-.67.94-.34.26-.76.51-1.26.51h-.76l-1.01 1.45c.59.26 1.35.34 2.02.26.76-.09 1.51-.43 2.1-.94.51-.43.93-1.02 1.18-1.7l4.29 1.45c.25.09.42.09.67.09s.42-.09.59-.26c.17-.09.34-.26.42-.51.08-.17.17-.43.17-.6V5.98c-.17-.17-.25-.43-.34-.6ZM10.4 16.38l8-11.68.93-1.28c.17-.26.17-.6.08-.85-.08-.17-.17-.34-.34-.43-.42-.26-1.01-.17-1.26.26l-2.36 3.41-10.6 3.66c-.42.17-.76.34-.93.68-.25.35-.42.77-.42 1.11v1.36c0 .43.17.77.42 1.11s.59.6.93.68l1.6.51v1.28c0 .68.17 1.36.5 1.96l-1.68 2.39c-.25.43-.17 1.02.25 1.28.17.17.34.17.5.17h.08c.25 0 .5-.17.67-.43l1.43-2.05.93-1.36 1.27-1.78Zm-2.36-.17v-.68l.59.17-.5.77c-.09-.09-.09-.18-.09-.26Z"/>',
+    }}
+  />
 )
 
 MegaphoneMuteFill.displayName = 'MegaphoneMuteFill'
diff --git a/packages/components/icons/src/icons/MegaphoneMuteOutline.tsx b/packages/components/icons/src/icons/MegaphoneMuteOutline.tsx
index 57311e6f2..d9e528036 100644
--- a/packages/components/icons/src/icons/MegaphoneMuteOutline.tsx
+++ b/packages/components/icons/src/icons/MegaphoneMuteOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MegaphoneMuteOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MegaphoneMuteOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M20.5 6.06c0-.26-.08-.43-.17-.68-.08-.09-.17-.26-.25-.34l-1.28 1.88v10.48l-5.86-2.05-1.02 1.45.85.26c-.17.34-.34.68-.68.94-.43.34-.85.51-1.36.51l-1.11 1.62c.26.09.43.09.68.09 1.02.09 2.04-.26 2.89-.94.51-.43.94-1.02 1.19-1.62l4.25 1.45c.26.09.43.09.68.09s.43-.09.6-.26.34-.34.42-.51c.09-.17.17-.43.17-.68V6.06ZM11.06 16.55l1.02-1.45 5.87-8.35 1.45-2.05.85-1.28c.17-.26.17-.6.08-.85-.08-.17-.17-.34-.34-.43-.42-.26-1.02-.17-1.27.26l-2.12 3.07-11.74 3.92c-.43.17-.77.43-1.02.77-.17.34-.34.68-.34 1.1v1.28c0 .43.17.77.43 1.11.25.34.59.6.93.68l1.61.51v1.28c0 .85.34 1.7.85 2.39l-1.36 1.87c-.26.43-.17 1.02.25 1.28.18.34.35.34.52.34h.09c.26 0 .51-.17.68-.43l1.28-1.79 1.02-1.45 1.26-1.78Zm-5.61-3.75c-.09 0-.09-.09-.17-.09q-.08-.08-.08-.17v-1.28c0-.09 0-.17.09-.17 0-.09.09-.09.17-.09l9.44-3.24-4.68 6.73-4.77-1.69Zm2.73 3.41v-.68l1.1.34-.85 1.28c-.25-.26-.25-.6-.25-.94Z"/>',
-      }}
-    />
-  )
+export const MegaphoneMuteOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MegaphoneMuteOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M20.5 6.06c0-.26-.08-.43-.17-.68-.08-.09-.17-.26-.25-.34l-1.28 1.88v10.48l-5.86-2.05-1.02 1.45.85.26c-.17.34-.34.68-.68.94-.43.34-.85.51-1.36.51l-1.11 1.62c.26.09.43.09.68.09 1.02.09 2.04-.26 2.89-.94.51-.43.94-1.02 1.19-1.62l4.25 1.45c.26.09.43.09.68.09s.43-.09.6-.26.34-.34.42-.51c.09-.17.17-.43.17-.68V6.06ZM11.06 16.55l1.02-1.45 5.87-8.35 1.45-2.05.85-1.28c.17-.26.17-.6.08-.85-.08-.17-.17-.34-.34-.43-.42-.26-1.02-.17-1.27.26l-2.12 3.07-11.74 3.92c-.43.17-.77.43-1.02.77-.17.34-.34.68-.34 1.1v1.28c0 .43.17.77.43 1.11.25.34.59.6.93.68l1.61.51v1.28c0 .85.34 1.7.85 2.39l-1.36 1.87c-.26.43-.17 1.02.25 1.28.18.34.35.34.52.34h.09c.26 0 .51-.17.68-.43l1.28-1.79 1.02-1.45 1.26-1.78Zm-5.61-3.75c-.09 0-.09-.09-.17-.09q-.08-.08-.08-.17v-1.28c0-.09 0-.17.09-.17 0-.09.09-.09.17-.09l9.44-3.24-4.68 6.73-4.77-1.69Zm2.73 3.41v-.68l1.1.34-.85 1.28c-.25-.26-.25-.6-.25-.94Z"/>',
+    }}
+  />
 )
 
 MegaphoneMuteOutline.displayName = 'MegaphoneMuteOutline'
diff --git a/packages/components/icons/src/icons/MegaphoneOutline.tsx b/packages/components/icons/src/icons/MegaphoneOutline.tsx
index fb3f2c8ce..aa76c6f2c 100644
--- a/packages/components/icons/src/icons/MegaphoneOutline.tsx
+++ b/packages/components/icons/src/icons/MegaphoneOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MegaphoneOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MegaphoneOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.55,2.85c-.26-.04-.54-.01-.79.07L3.6,8.45c-.47.16-.87.46-1.15.85-.29.39-.44.87-.44,1.35v1.49s0,.02,0,.03c.02.47.18.93.46,1.31.29.38.68.67,1.13.82l1.86.64v1.5s0,0,0,0c0,1.2.48,2.36,1.32,3.23.84.87,1.99,1.4,3.21,1.47,1.22.07,2.42-.32,3.36-1.09.63-.52,1.11-1.18,1.4-1.92l5,1.72h0c.25.09.52.11.79.07.26-.04.52-.14.73-.29.22-.15.4-.35.52-.59.12-.23.19-.49.19-.76V4.49h0c0-.27-.07-.53-.19-.76-.12-.23-.3-.44-.52-.59-.22-.15-.47-.25-.73-.29Zm-7.69,14.64l-5.4-1.85v.81c0,.7.28,1.38.77,1.89.49.51,1.16.82,1.87.86.71.04,1.42-.19,1.96-.64.35-.29.62-.65.79-1.06Zm7.14.36V4.92l-15.74,5.39c-.07.03-.14.07-.19.14-.05.06-.07.14-.07.22v1.46c0,.07.03.14.07.2.05.06.11.11.18.13l15.74,5.4Z"/>',
-      }}
-    />
-  )
+export const MegaphoneOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MegaphoneOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.55,2.85c-.26-.04-.54-.01-.79.07L3.6,8.45c-.47.16-.87.46-1.15.85-.29.39-.44.87-.44,1.35v1.49s0,.02,0,.03c.02.47.18.93.46,1.31.29.38.68.67,1.13.82l1.86.64v1.5s0,0,0,0c0,1.2.48,2.36,1.32,3.23.84.87,1.99,1.4,3.21,1.47,1.22.07,2.42-.32,3.36-1.09.63-.52,1.11-1.18,1.4-1.92l5,1.72h0c.25.09.52.11.79.07.26-.04.52-.14.73-.29.22-.15.4-.35.52-.59.12-.23.19-.49.19-.76V4.49h0c0-.27-.07-.53-.19-.76-.12-.23-.3-.44-.52-.59-.22-.15-.47-.25-.73-.29Zm-7.69,14.64l-5.4-1.85v.81c0,.7.28,1.38.77,1.89.49.51,1.16.82,1.87.86.71.04,1.42-.19,1.96-.64.35-.29.62-.65.79-1.06Zm7.14.36V4.92l-15.74,5.39c-.07.03-.14.07-.19.14-.05.06-.07.14-.07.22v1.46c0,.07.03.14.07.2.05.06.11.11.18.13l15.74,5.4Z"/>',
+    }}
+  />
 )
 
 MegaphoneOutline.displayName = 'MegaphoneOutline'
diff --git a/packages/components/icons/src/icons/MessageFill.tsx b/packages/components/icons/src/icons/MessageFill.tsx
index 2d5107189..b15529930 100644
--- a/packages/components/icons/src/icons/MessageFill.tsx
+++ b/packages/components/icons/src/icons/MessageFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MessageFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MessageFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,6.18c0-2.34,1.9-4.18,4.21-4.18h11.5c2.36,0,4.28,1.92,4.28,4.28v14.7c0,.38-.22.74-.56.91-.34.17-.75.14-1.06-.09l-3.66-2.74H6.3c-2.35,0-4.27-1.9-4.28-4.26-.01-2.52-.02-6.03-.01-8.63Zm14.9,2.02H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm0,3.19H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm-10.82,2.25c0-.56.45-1.02,1.02-1.02h6.53c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02h-6.53c-.56,0-1.02-.45-1.02-1.02Z"/>',
-      }}
-    />
-  )
+export const MessageFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MessageFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,6.18c0-2.34,1.9-4.18,4.21-4.18h11.5c2.36,0,4.28,1.92,4.28,4.28v14.7c0,.38-.22.74-.56.91-.34.17-.75.14-1.06-.09l-3.66-2.74H6.3c-2.35,0-4.27-1.9-4.28-4.26-.01-2.52-.02-6.03-.01-8.63Zm14.9,2.02H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm0,3.19H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm-10.82,2.25c0-.56.45-1.02,1.02-1.02h6.53c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02h-6.53c-.56,0-1.02-.45-1.02-1.02Z"/>',
+    }}
+  />
 )
 
 MessageFill.displayName = 'MessageFill'
diff --git a/packages/components/icons/src/icons/MessageOutline.tsx b/packages/components/icons/src/icons/MessageOutline.tsx
index 44a412e92..4c8798337 100644
--- a/packages/components/icons/src/icons/MessageOutline.tsx
+++ b/packages/components/icons/src/icons/MessageOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MessageOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MessageOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,6.18c0-2.34,1.9-4.18,4.21-4.18h11.5c2.36,0,4.28,1.92,4.28,4.28v14.7c0,.38-.22.74-.56.91-.34.17-.75.14-1.06-.09l-3.66-2.74H6.3c-2.35,0-4.27-1.9-4.28-4.26-.01-2.52-.02-6.03-.01-8.63Zm4.21-2.15c-1.22,0-2.18.96-2.18,2.15,0,2.6,0,6.09.01,8.62,0,1.24,1.01,2.23,2.25,2.23h10.75c.22,0,.43.07.61.2l2.31,1.73V6.28c0-1.24-1.01-2.25-2.25-2.25H6.22Zm10.68,4.17H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm0,3.19H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm-10.82,2.25c0-.56.45-1.02,1.02-1.02h6.53c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02h-6.53c-.56,0-1.02-.45-1.02-1.02Z"/>',
-      }}
-    />
-  )
+export const MessageOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MessageOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,6.18c0-2.34,1.9-4.18,4.21-4.18h11.5c2.36,0,4.28,1.92,4.28,4.28v14.7c0,.38-.22.74-.56.91-.34.17-.75.14-1.06-.09l-3.66-2.74H6.3c-2.35,0-4.27-1.9-4.28-4.26-.01-2.52-.02-6.03-.01-8.63Zm4.21-2.15c-1.22,0-2.18.96-2.18,2.15,0,2.6,0,6.09.01,8.62,0,1.24,1.01,2.23,2.25,2.23h10.75c.22,0,.43.07.61.2l2.31,1.73V6.28c0-1.24-1.01-2.25-2.25-2.25H6.22Zm10.68,4.17H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm0,3.19H7.1c-.56,0-1.02-.45-1.02-1.02,0-.56.45-1.02,1.02-1.02h9.8c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02Zm-10.82,2.25c0-.56.45-1.02,1.02-1.02h6.53c.56,0,1.02.45,1.02,1.02s-.45,1.02-1.02,1.02h-6.53c-.56,0-1.02-.45-1.02-1.02Z"/>',
+    }}
+  />
 )
 
 MessageOutline.displayName = 'MessageOutline'
diff --git a/packages/components/icons/src/icons/Minus.tsx b/packages/components/icons/src/icons/Minus.tsx
index 5c52b46be..c55a3e541 100644
--- a/packages/components/icons/src/icons/Minus.tsx
+++ b/packages/components/icons/src/icons/Minus.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Minus = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Minus"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2,12c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Z"/>',
-      }}
-    />
-  )
+export const Minus = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Minus"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2,12c0-.62.45-1.12,1-1.12h18c.55,0,1,.5,1,1.12s-.45,1.12-1,1.12H3c-.55,0-1-.5-1-1.12Z"/>',
+    }}
+  />
 )
 
 Minus.displayName = 'Minus'
diff --git a/packages/components/icons/src/icons/MobileCheck.tsx b/packages/components/icons/src/icons/MobileCheck.tsx
index b7d72df05..03d700d9f 100644
--- a/packages/components/icons/src/icons/MobileCheck.tsx
+++ b/packages/components/icons/src/icons/MobileCheck.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MobileCheck = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MobileCheck"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m9.98,19.86h-3.23c-.31,0-.56-.26-.56-.57v-.57h3.79c.58,0,1.05-.47,1.05-1.06s-.47-1.06-1.05-1.06h-3.79V7.36h9.2v7.06c0,.58.47,1.06,1.05,1.06s1.05-.47,1.05-1.06V4.68c0-1.48-1.19-2.68-2.67-2.68H6.75c-1.47,0-2.67,1.2-2.67,2.68v14.61c0,1.48,1.19,2.68,2.67,2.68h3.23c.58,0,1.05-.47,1.05-1.06s-.47-1.06-1.05-1.06Zm5.41-14.61H6.19v-.57c0-.32.26-.57.56-.57h8.08c.31,0,.56.26.56.57v.57Z"/><path d="m19.61,15.74l-.17-.17-.02.02c-.41-.25-.94-.2-1.29.16l-3.69,3.71-1.18-1.18c-.41-.42-1.08-.42-1.48,0-.41.42-.41,1.08,0,1.49l1.92,1.93s.11.1.17.13c.41.27.96.22,1.32-.13h0s4.41-4.45,4.41-4.45c.41-.42.41-1.08,0-1.49v-.02Z"/>',
-      }}
-    />
-  )
+export const MobileCheck = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MobileCheck"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m9.98,19.86h-3.23c-.31,0-.56-.26-.56-.57v-.57h3.79c.58,0,1.05-.47,1.05-1.06s-.47-1.06-1.05-1.06h-3.79V7.36h9.2v7.06c0,.58.47,1.06,1.05,1.06s1.05-.47,1.05-1.06V4.68c0-1.48-1.19-2.68-2.67-2.68H6.75c-1.47,0-2.67,1.2-2.67,2.68v14.61c0,1.48,1.19,2.68,2.67,2.68h3.23c.58,0,1.05-.47,1.05-1.06s-.47-1.06-1.05-1.06Zm5.41-14.61H6.19v-.57c0-.32.26-.57.56-.57h8.08c.31,0,.56.26.56.57v.57Z"/><path d="m19.61,15.74l-.17-.17-.02.02c-.41-.25-.94-.2-1.29.16l-3.69,3.71-1.18-1.18c-.41-.42-1.08-.42-1.48,0-.41.42-.41,1.08,0,1.49l1.92,1.93s.11.1.17.13c.41.27.96.22,1.32-.13h0s4.41-4.45,4.41-4.45c.41-.42.41-1.08,0-1.49v-.02Z"/>',
+    }}
+  />
 )
 
 MobileCheck.displayName = 'MobileCheck'
diff --git a/packages/components/icons/src/icons/MoreMenuHorizontal.tsx b/packages/components/icons/src/icons/MoreMenuHorizontal.tsx
index 005b1ac7d..c6743d7b1 100644
--- a/packages/components/icons/src/icons/MoreMenuHorizontal.tsx
+++ b/packages/components/icons/src/icons/MoreMenuHorizontal.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MoreMenuHorizontal = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MoreMenuHorizontal"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m19.69,14.25c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Zm-7.69,0c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Zm-7.69,0c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Z"/>',
-      }}
-    />
-  )
+export const MoreMenuHorizontal = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MoreMenuHorizontal"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m19.69,14.25c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Zm-7.69,0c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Zm-7.69,0c1.27,0,2.31-1.01,2.31-2.25s-1.03-2.25-2.31-2.25-2.31,1.01-2.31,2.25,1.03,2.25,2.31,2.25Z"/>',
+    }}
+  />
 )
 
 MoreMenuHorizontal.displayName = 'MoreMenuHorizontal'
diff --git a/packages/components/icons/src/icons/MoreMenuVertical.tsx b/packages/components/icons/src/icons/MoreMenuVertical.tsx
index e69db9ef2..74cde9c4a 100644
--- a/packages/components/icons/src/icons/MoreMenuVertical.tsx
+++ b/packages/components/icons/src/icons/MoreMenuVertical.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MoreMenuVertical = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MoreMenuVertical"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,6.62c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Zm0,7.69c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Zm0,7.69c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Z"/>',
-      }}
-    />
-  )
+export const MoreMenuVertical = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MoreMenuVertical"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,6.62c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Zm0,7.69c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Zm0,7.69c1.24,0,2.25-1.03,2.25-2.31s-1.01-2.31-2.25-2.31-2.25,1.03-2.25,2.31,1.01,2.31,2.25,2.31Z"/>',
+    }}
+  />
 )
 
 MoreMenuVertical.displayName = 'MoreMenuVertical'
diff --git a/packages/components/icons/src/icons/MoveUp.tsx b/packages/components/icons/src/icons/MoveUp.tsx
index 9d347b4bb..c7b828497 100644
--- a/packages/components/icons/src/icons/MoveUp.tsx
+++ b/packages/components/icons/src/icons/MoveUp.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const MoveUp = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="MoveUp"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4.85,4.88c.18-.18.44-.18.62,0l2.48,2.47c.27.37,0,.82-.35.82h-1.59v10.17c0,.46-.35.92-.89.92s-.88-.46-.88-.92v-10.17h-1.59c-.35,0-.53-.55-.27-.82l2.48-2.47Zm6.46,5.95h-1.77c-.53,0-.88-.46-.88-.92s.35-.92.88-.92h1.77c.53,0,.89.46.89.92s-.35.92-.89.92Zm5.31,4.21h-7.26c-.35,0-.71-.37-.71-.92s.27-.92.71-.92h7.26c.44,0,.71.37.71.92s-.26.92-.71.92Zm4.43,2.38h-11.68c-.44,0-.71.46-.71.92,0,.55.35.92.71.92h11.6c.44,0,.8-.37.8-.92,0-.46-.35-.92-.71-.92Z"/><path fill-rule="evenodd" d="m5.64,4.71l2.49,2.48v.02c.38.51.03,1.21-.54,1.21h-1.35v9.92c0,.57-.44,1.16-1.13,1.16s-1.13-.59-1.13-1.16v-9.92h-1.35c-.32,0-.52-.25-.6-.48-.08-.23-.05-.54.16-.76h0s2.48-2.47,2.48-2.47c.27-.28.7-.28.97,0Zm-.35.34c-.08-.08-.19-.08-.27,0h0s-2.48,2.47-2.48,2.47c-.05.06-.08.16-.04.27.04.11.1.14.13.14h1.84v10.41c0,.35.27.67.64.67s.64-.32.64-.67V7.93h1.84c.13,0,.31-.21.17-.43l-2.47-2.46Zm3.12,4.87c0-.56.44-1.16,1.13-1.16h1.77c.69,0,1.13.59,1.13,1.16s-.44,1.16-1.13,1.16h-1.77c-.69,0-1.13-.59-1.13-1.16Zm1.13-.67c-.37,0-.64.32-.64.67s.27.67.64.67h1.77c.37,0,.64-.32.64-.67s-.27-.67-.64-.67h-1.77Zm-.89,4.08c.17-.22.42-.35.71-.35h7.26c.3,0,.55.13.72.35.16.21.24.5.24.81s-.07.6-.24.81c-.17.22-.42.35-.72.35h-7.26c-.53,0-.95-.52-.95-1.16,0-.31.07-.6.24-.81Zm.39.29c-.08.11-.14.28-.14.52,0,.46.29.67.46.67h7.26c.15,0,.25-.06.33-.16.08-.11.14-.28.14-.52s-.06-.41-.14-.52c-.08-.1-.18-.16-.33-.16h-7.26c-.15,0-.25.06-.33.16Zm0,4.24c-.09.13-.14.3-.14.49,0,.46.29.67.46.67h11.6c.28,0,.55-.23.55-.67,0-.17-.07-.35-.17-.48-.11-.14-.22-.19-.29-.19h-11.68c-.13,0-.23.06-.32.18Zm-.4-.28c.16-.22.4-.39.72-.39h11.68c.28,0,.52.18.68.38.16.21.27.49.27.78,0,.66-.44,1.16-1.04,1.16h-11.6c-.53,0-.95-.52-.95-1.16,0-.27.08-.55.23-.77Z"/>',
-      }}
-    />
-  )
+export const MoveUp = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="MoveUp"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4.85,4.88c.18-.18.44-.18.62,0l2.48,2.47c.27.37,0,.82-.35.82h-1.59v10.17c0,.46-.35.92-.89.92s-.88-.46-.88-.92v-10.17h-1.59c-.35,0-.53-.55-.27-.82l2.48-2.47Zm6.46,5.95h-1.77c-.53,0-.88-.46-.88-.92s.35-.92.88-.92h1.77c.53,0,.89.46.89.92s-.35.92-.89.92Zm5.31,4.21h-7.26c-.35,0-.71-.37-.71-.92s.27-.92.71-.92h7.26c.44,0,.71.37.71.92s-.26.92-.71.92Zm4.43,2.38h-11.68c-.44,0-.71.46-.71.92,0,.55.35.92.71.92h11.6c.44,0,.8-.37.8-.92,0-.46-.35-.92-.71-.92Z"/><path fill-rule="evenodd" d="m5.64,4.71l2.49,2.48v.02c.38.51.03,1.21-.54,1.21h-1.35v9.92c0,.57-.44,1.16-1.13,1.16s-1.13-.59-1.13-1.16v-9.92h-1.35c-.32,0-.52-.25-.6-.48-.08-.23-.05-.54.16-.76h0s2.48-2.47,2.48-2.47c.27-.28.7-.28.97,0Zm-.35.34c-.08-.08-.19-.08-.27,0h0s-2.48,2.47-2.48,2.47c-.05.06-.08.16-.04.27.04.11.1.14.13.14h1.84v10.41c0,.35.27.67.64.67s.64-.32.64-.67V7.93h1.84c.13,0,.31-.21.17-.43l-2.47-2.46Zm3.12,4.87c0-.56.44-1.16,1.13-1.16h1.77c.69,0,1.13.59,1.13,1.16s-.44,1.16-1.13,1.16h-1.77c-.69,0-1.13-.59-1.13-1.16Zm1.13-.67c-.37,0-.64.32-.64.67s.27.67.64.67h1.77c.37,0,.64-.32.64-.67s-.27-.67-.64-.67h-1.77Zm-.89,4.08c.17-.22.42-.35.71-.35h7.26c.3,0,.55.13.72.35.16.21.24.5.24.81s-.07.6-.24.81c-.17.22-.42.35-.72.35h-7.26c-.53,0-.95-.52-.95-1.16,0-.31.07-.6.24-.81Zm.39.29c-.08.11-.14.28-.14.52,0,.46.29.67.46.67h7.26c.15,0,.25-.06.33-.16.08-.11.14-.28.14-.52s-.06-.41-.14-.52c-.08-.1-.18-.16-.33-.16h-7.26c-.15,0-.25.06-.33.16Zm0,4.24c-.09.13-.14.3-.14.49,0,.46.29.67.46.67h11.6c.28,0,.55-.23.55-.67,0-.17-.07-.35-.17-.48-.11-.14-.22-.19-.29-.19h-11.68c-.13,0-.23.06-.32.18Zm-.4-.28c.16-.22.4-.39.72-.39h11.68c.28,0,.52.18.68.38.16.21.27.49.27.78,0,.66-.44,1.16-1.04,1.16h-11.6c-.53,0-.95-.52-.95-1.16,0-.27.08-.55.23-.77Z"/>',
+    }}
+  />
 )
 
 MoveUp.displayName = 'MoveUp'
diff --git a/packages/components/icons/src/icons/NotificationFill.tsx b/packages/components/icons/src/icons/NotificationFill.tsx
index 7bfce0afb..2c1b51906 100644
--- a/packages/components/icons/src/icons/NotificationFill.tsx
+++ b/packages/components/icons/src/icons/NotificationFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const NotificationFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="NotificationFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.29,4.45c-.18-1.12.56-2.19,1.68-2.41,1.13-.22,2.22.48,2.48,1.58,1.11.12,2.18.51,3.12,1.14,1.55,1.03,2.62,2.63,2.99,4.45.55,2.76,1.33,4.19,1.99,4.98.53.63.89,1.46.73,2.31-.18.94-.94,1.52-1.87,1.71l-5.05,1c-.04.41-.14.89-.43,1.33-.2.3-.44.56-.73.79-.56.43-1.26.67-1.97.67s-1.4-.23-1.97-.67c-.34-.26-.62-.58-.83-.94l-.96.19c-.94.19-1.86-.07-2.39-.86-.48-.72-.46-1.62-.22-2.4.31-.98.47-2.6-.09-5.36-.37-1.82,0-3.71,1.04-5.25.63-.94,1.47-1.71,2.45-2.24Z"/>',
-      }}
-    />
-  )
+export const NotificationFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="NotificationFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.29,4.45c-.18-1.12.56-2.19,1.68-2.41,1.13-.22,2.22.48,2.48,1.58,1.11.12,2.18.51,3.12,1.14,1.55,1.03,2.62,2.63,2.99,4.45.55,2.76,1.33,4.19,1.99,4.98.53.63.89,1.46.73,2.31-.18.94-.94,1.52-1.87,1.71l-5.05,1c-.04.41-.14.89-.43,1.33-.2.3-.44.56-.73.79-.56.43-1.26.67-1.97.67s-1.4-.23-1.97-.67c-.34-.26-.62-.58-.83-.94l-.96.19c-.94.19-1.86-.07-2.39-.86-.48-.72-.46-1.62-.22-2.4.31-.98.47-2.6-.09-5.36-.37-1.82,0-3.71,1.04-5.25.63-.94,1.47-1.71,2.45-2.24Z"/>',
+    }}
+  />
 )
 
 NotificationFill.displayName = 'NotificationFill'
diff --git a/packages/components/icons/src/icons/NotificationOutline.tsx b/packages/components/icons/src/icons/NotificationOutline.tsx
index 24103697f..065efc96d 100644
--- a/packages/components/icons/src/icons/NotificationOutline.tsx
+++ b/packages/components/icons/src/icons/NotificationOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const NotificationOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="NotificationOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m7.29,4.45c-.18-1.12.56-2.19,1.68-2.41,1.13-.22,2.22.48,2.48,1.58,1.11.12,2.18.51,3.12,1.14,1.55,1.03,2.62,2.63,2.99,4.45.55,2.76,1.33,4.19,1.99,4.98.53.63.89,1.46.73,2.31-.18.94-.94,1.52-1.87,1.71l-5.05,1c-.04.41-.14.89-.43,1.33-.2.3-.44.56-.73.79-.56.43-1.26.67-1.97.67s-1.4-.23-1.97-.67c-.34-.26-.62-.58-.83-.94l-.96.19c-.94.19-1.86-.07-2.39-.86-.48-.72-.46-1.62-.22-2.4.31-.98.47-2.6-.09-5.36-.37-1.82,0-3.71,1.04-5.25.63-.94,1.47-1.71,2.45-2.24Zm2.42,1.25c1.29-.26,2.64,0,3.74.74,1.1.73,1.86,1.87,2.12,3.17.6,2.97,1.48,4.75,2.43,5.88.3.36.3.59.29.62h0s-.08.07-.27.11l-11.92,2.37c-.18.04-.27.01-.29,0h0s-.11-.24.03-.68c.44-1.4.56-3.39-.03-6.36-.26-1.3,0-2.64.74-3.74.73-1.1,1.87-1.86,3.16-2.11Z"/>',
-      }}
-    />
-  )
+export const NotificationOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="NotificationOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m7.29,4.45c-.18-1.12.56-2.19,1.68-2.41,1.13-.22,2.22.48,2.48,1.58,1.11.12,2.18.51,3.12,1.14,1.55,1.03,2.62,2.63,2.99,4.45.55,2.76,1.33,4.19,1.99,4.98.53.63.89,1.46.73,2.31-.18.94-.94,1.52-1.87,1.71l-5.05,1c-.04.41-.14.89-.43,1.33-.2.3-.44.56-.73.79-.56.43-1.26.67-1.97.67s-1.4-.23-1.97-.67c-.34-.26-.62-.58-.83-.94l-.96.19c-.94.19-1.86-.07-2.39-.86-.48-.72-.46-1.62-.22-2.4.31-.98.47-2.6-.09-5.36-.37-1.82,0-3.71,1.04-5.25.63-.94,1.47-1.71,2.45-2.24Zm2.42,1.25c1.29-.26,2.64,0,3.74.74,1.1.73,1.86,1.87,2.12,3.17.6,2.97,1.48,4.75,2.43,5.88.3.36.3.59.29.62h0s-.08.07-.27.11l-11.92,2.37c-.18.04-.27.01-.29,0h0s-.11-.24.03-.68c.44-1.4.56-3.39-.03-6.36-.26-1.3,0-2.64.74-3.74.73-1.1,1.87-1.86,3.16-2.11Z"/>',
+    }}
+  />
 )
 
 NotificationOutline.displayName = 'NotificationOutline'
diff --git a/packages/components/icons/src/icons/OfferFill.tsx b/packages/components/icons/src/icons/OfferFill.tsx
index 137d62057..6d6b82d09 100644
--- a/packages/components/icons/src/icons/OfferFill.tsx
+++ b/packages/components/icons/src/icons/OfferFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const OfferFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="OfferFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.42,13.4L10.48,2.41c-.16-.17-.33-.25-.49-.33-.16-.08-.33-.08-.58-.08l-5.35.83c-.33,0-.58.17-.82.33-.25.33-.41.66-.41.83l-.82,5.54c0,.17,0,.41.08.58.08.17.16.33.33.41l10.95,10.99c.33.33.82.5,1.32.5s.91-.17,1.32-.5l5.51-5.54c.33-.33.49-.83.49-1.32-.08-.41-.25-.83-.58-1.24Zm-13.58-3.97c-.82,0-1.48-.66-1.48-1.49s.66-1.49,1.48-1.49,1.48.66,1.48,1.49-.66,1.49-1.48,1.49Z"/>',
-      }}
-    />
-  )
+export const OfferFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="OfferFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.42,13.4L10.48,2.41c-.16-.17-.33-.25-.49-.33-.16-.08-.33-.08-.58-.08l-5.35.83c-.33,0-.58.17-.82.33-.25.33-.41.66-.41.83l-.82,5.54c0,.17,0,.41.08.58.08.17.16.33.33.41l10.95,10.99c.33.33.82.5,1.32.5s.91-.17,1.32-.5l5.51-5.54c.33-.33.49-.83.49-1.32-.08-.41-.25-.83-.58-1.24Zm-13.58-3.97c-.82,0-1.48-.66-1.48-1.49s.66-1.49,1.48-1.49,1.48.66,1.48,1.49-.66,1.49-1.48,1.49Z"/>',
+    }}
+  />
 )
 
 OfferFill.displayName = 'OfferFill'
diff --git a/packages/components/icons/src/icons/OfferOutline.tsx b/packages/components/icons/src/icons/OfferOutline.tsx
index c8ae6a61b..4ce3dd8dc 100644
--- a/packages/components/icons/src/icons/OfferOutline.tsx
+++ b/packages/components/icons/src/icons/OfferOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const OfferOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="OfferOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m9.48,3.96l-4.78.74-.74,4.78,10.57,10.57s.03.02.05.02.04,0,.05-.02l5.41-5.41s.02-.03.02-.05,0-.04-.02-.05L9.48,3.96Zm.04-1.96c.22-.02.44.01.64.09.2.08.38.19.53.35l10.72,10.72c.38.38.59.89.59,1.42s-.21,1.04-.59,1.42l-5.41,5.41c-.38.38-.89.59-1.42.59s-1.04-.21-1.42-.59L2.44,10.69c-.15-.15-.27-.33-.35-.53-.08-.2-.11-.42-.09-.64,0-.02,0-.04,0-.07l.81-5.29c.03-.34.18-.66.43-.91.24-.24.57-.39.91-.43l5.29-.81s.04,0,.07,0Z"/><path fill-rule="evenodd" d="m6.32,7.98c0-.92.74-1.66,1.66-1.66s1.66.74,1.66,1.66-.74,1.66-1.66,1.66-1.66-.74-1.66-1.66Z"/>',
-      }}
-    />
-  )
+export const OfferOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="OfferOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m9.48,3.96l-4.78.74-.74,4.78,10.57,10.57s.03.02.05.02.04,0,.05-.02l5.41-5.41s.02-.03.02-.05,0-.04-.02-.05L9.48,3.96Zm.04-1.96c.22-.02.44.01.64.09.2.08.38.19.53.35l10.72,10.72c.38.38.59.89.59,1.42s-.21,1.04-.59,1.42l-5.41,5.41c-.38.38-.89.59-1.42.59s-1.04-.21-1.42-.59L2.44,10.69c-.15-.15-.27-.33-.35-.53-.08-.2-.11-.42-.09-.64,0-.02,0-.04,0-.07l.81-5.29c.03-.34.18-.66.43-.91.24-.24.57-.39.91-.43l5.29-.81s.04,0,.07,0Z"/><path fill-rule="evenodd" d="m6.32,7.98c0-.92.74-1.66,1.66-1.66s1.66.74,1.66,1.66-.74,1.66-1.66,1.66-1.66-.74-1.66-1.66Z"/>',
+    }}
+  />
 )
 
 OfferOutline.displayName = 'OfferOutline'
diff --git a/packages/components/icons/src/icons/PaperMapFill.tsx b/packages/components/icons/src/icons/PaperMapFill.tsx
index 4bbc33bc4..29f2a8a42 100644
--- a/packages/components/icons/src/icons/PaperMapFill.tsx
+++ b/packages/components/icons/src/icons/PaperMapFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PaperMapFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PaperMapFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2.76,5.81l5.55-1.76s.03,0,.04-.01c.1-.03.2-.04.3-.04.08,0,.16,0,.24.02.02,0,.04,0,.06.01l6.32,1.69,5.3-1.68c.33-.11.7-.05.99.15.28.2.45.52.45.86v12.12c0,.46-.31.87-.76,1.01l-5.54,1.76c-.14.04-.28.06-.42.05-.12,0-.25,0-.37-.04l-6.24-1.67-5.23,1.66c-.33.11-.7.05-.99-.15-.28-.2-.45-.52-.45-.86V6.82c0-.46.31-.87.76-1.01Zm6.53,10.31V6.21l5.44,1.58v9.91l-5.44-1.58Z"/>',
-      }}
-    />
-  )
+export const PaperMapFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PaperMapFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2.76,5.81l5.55-1.76s.03,0,.04-.01c.1-.03.2-.04.3-.04.08,0,.16,0,.24.02.02,0,.04,0,.06.01l6.32,1.69,5.3-1.68c.33-.11.7-.05.99.15.28.2.45.52.45.86v12.12c0,.46-.31.87-.76,1.01l-5.54,1.76c-.14.04-.28.06-.42.05-.12,0-.25,0-.37-.04l-6.24-1.67-5.23,1.66c-.33.11-.7.05-.99-.15-.28-.2-.45-.52-.45-.86V6.82c0-.46.31-.87.76-1.01Zm6.53,10.31V6.21l5.44,1.58v9.91l-5.44-1.58Z"/>',
+    }}
+  />
 )
 
 PaperMapFill.displayName = 'PaperMapFill'
diff --git a/packages/components/icons/src/icons/PaperMapOutline.tsx b/packages/components/icons/src/icons/PaperMapOutline.tsx
index f9a19240d..da8566ca6 100644
--- a/packages/components/icons/src/icons/PaperMapOutline.tsx
+++ b/packages/components/icons/src/icons/PaperMapOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PaperMapOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PaperMapOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.54,4.2c.29.2.46.52.46.86v12.12c0,.46-.31.87-.76,1.01l-5.59,1.76c-.21.07-.43.07-.64.01l-6.29-1.67-5.27,1.66c-.34.11-.71.05-.99-.15-.29-.2-.46-.52-.46-.86V6.82c0-.46.31-.87.76-1.01l5.59-1.76c.21-.06.43-.07.64-.01l6.29,1.67,5.27-1.66c.34-.11.71-.05.99.15Zm-7.34,3.43l-4.4-1.17v9.91l4.4,1.17V7.63Zm2.21,9.84l3.37-1.06V6.53l-3.37,1.06v9.88Zm-8.82-1.06V6.53l-3.38,1.06v9.88l3.38-1.06Z"/>',
-      }}
-    />
-  )
+export const PaperMapOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PaperMapOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.54,4.2c.29.2.46.52.46.86v12.12c0,.46-.31.87-.76,1.01l-5.59,1.76c-.21.07-.43.07-.64.01l-6.29-1.67-5.27,1.66c-.34.11-.71.05-.99-.15-.29-.2-.46-.52-.46-.86V6.82c0-.46.31-.87.76-1.01l5.59-1.76c.21-.06.43-.07.64-.01l6.29,1.67,5.27-1.66c.34-.11.71-.05.99.15Zm-7.34,3.43l-4.4-1.17v9.91l4.4,1.17V7.63Zm2.21,9.84l3.37-1.06V6.53l-3.37,1.06v9.88Zm-8.82-1.06V6.53l-3.38,1.06v9.88l3.38-1.06Z"/>',
+    }}
+  />
 )
 
 PaperMapOutline.displayName = 'PaperMapOutline'
diff --git a/packages/components/icons/src/icons/PauseFill.tsx b/packages/components/icons/src/icons/PauseFill.tsx
index 0d4c8162a..9e4392540 100644
--- a/packages/components/icons/src/icons/PauseFill.tsx
+++ b/packages/components/icons/src/icons/PauseFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PauseFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PauseFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,2C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm2.83,13.58c0,.42-.33.75-.75.75s-.75-.33-.75-.75v-7.17c0-.42.33-.75.75-.75s.75.33.75.75v7.17Zm-4.25-7.17v7.17c0,.42-.33.75-.75.75s-.75-.33-.75-.75v-7.17c0-.42.33-.75.75-.75s.75.33.75.75Z"/>',
-      }}
-    />
-  )
+export const PauseFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PauseFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,2C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm2.83,13.58c0,.42-.33.75-.75.75s-.75-.33-.75-.75v-7.17c0-.42.33-.75.75-.75s.75.33.75.75v7.17Zm-4.25-7.17v7.17c0,.42-.33.75-.75.75s-.75-.33-.75-.75v-7.17c0-.42.33-.75.75-.75s.75.33.75.75Z"/>',
+    }}
+  />
 )
 
 PauseFill.displayName = 'PauseFill'
diff --git a/packages/components/icons/src/icons/PauseOutline.tsx b/packages/components/icons/src/icons/PauseOutline.tsx
index 6c6af948a..8566a181d 100644
--- a/packages/components/icons/src/icons/PauseOutline.tsx
+++ b/packages/components/icons/src/icons/PauseOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PauseOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PauseOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,3.95C7.55,3.95,3.95,7.55,3.95,12s3.6,8.05,8.05,8.05,8.05-3.6,8.05-8.05S16.45,3.95,12,3.95ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m9.92,7.55c.54,0,.98.44.98.98v6.94c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-6.94c0-.54.44-.98.98-.98Zm4.17,0c.54,0,.98.44.98.98v6.94c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-6.94c0-.54.44-.98.98-.98Z"/>',
-      }}
-    />
-  )
+export const PauseOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PauseOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,3.95C7.55,3.95,3.95,7.55,3.95,12s3.6,8.05,8.05,8.05,8.05-3.6,8.05-8.05S16.45,3.95,12,3.95ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m9.92,7.55c.54,0,.98.44.98.98v6.94c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-6.94c0-.54.44-.98.98-.98Zm4.17,0c.54,0,.98.44.98.98v6.94c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-6.94c0-.54.44-.98.98-.98Z"/>',
+    }}
+  />
 )
 
 PauseOutline.displayName = 'PauseOutline'
diff --git a/packages/components/icons/src/icons/PenFill.tsx b/packages/components/icons/src/icons/PenFill.tsx
index 6354a388e..f15d9d133 100644
--- a/packages/components/icons/src/icons/PenFill.tsx
+++ b/packages/components/icons/src/icons/PenFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PenFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PenFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.83,5.91c-.08-.25-.25-.5-.5-.67l-2.5-2.5c-.17-.17-.42-.33-.67-.5-.33-.17-.58-.25-.83-.25s-.58.08-.83.17c-.25.08-.5.25-.67.5L4.11,14.31c-.08.08-.17.17-.17.33l-1.91,6.41c-.08.25,0,.5.17.75.25.17.5.25.75.17l6.41-1.83c.08,0,.25-.08.33-.17l11.65-11.73c.17-.17.33-.42.5-.67.08-.33.17-.58.17-.83s-.08-.58-.17-.83Z"/>',
-      }}
-    />
-  )
+export const PenFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PenFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.83,5.91c-.08-.25-.25-.5-.5-.67l-2.5-2.5c-.17-.17-.42-.33-.67-.5-.33-.17-.58-.25-.83-.25s-.58.08-.83.17c-.25.08-.5.25-.67.5L4.11,14.31c-.08.08-.17.17-.17.33l-1.91,6.41c-.08.25,0,.5.17.75.25.17.5.25.75.17l6.41-1.83c.08,0,.25-.08.33-.17l11.65-11.73c.17-.17.33-.42.5-.67.08-.33.17-.58.17-.83s-.08-.58-.17-.83Z"/>',
+    }}
+  />
 )
 
 PenFill.displayName = 'PenFill'
diff --git a/packages/components/icons/src/icons/PenOutline.tsx b/packages/components/icons/src/icons/PenOutline.tsx
index 7da8ffe8a..d202b92b6 100644
--- a/packages/components/icons/src/icons/PenOutline.tsx
+++ b/packages/components/icons/src/icons/PenOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PenOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PenOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m17.16,3.95c-.06,0-.11.01-.16.03-.05.02-.1.05-.14.09h0S5.6,15.29,5.6,15.29l-1.21,4.33,4.33-1.21,11.21-11.26s.07-.08.09-.13c.02-.05.03-.1.03-.16s-.01-.11-.03-.16c-.02-.05-.05-.1-.09-.13h0s-2.46-2.48-2.46-2.48c-.04-.04-.08-.07-.14-.09-.05-.02-.11-.03-.16-.03Zm-.92-1.77c.29-.12.6-.19.92-.19s.63.06.92.19c.29.12.55.3.77.52l2.45,2.46h0c.22.22.4.48.51.77.12.29.18.6.18.91s-.06.62-.18.91c-.12.29-.29.55-.51.77h0s-11.38,11.44-11.38,11.44c-.12.12-.27.21-.43.25l-6.25,1.75c-.34.09-.7,0-.95-.25-.25-.25-.34-.61-.25-.95l1.75-6.25c.05-.16.13-.31.25-.43L15.48,2.71c.22-.22.48-.4.77-.52Z"/>',
-      }}
-    />
-  )
+export const PenOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PenOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m17.16,3.95c-.06,0-.11.01-.16.03-.05.02-.1.05-.14.09h0S5.6,15.29,5.6,15.29l-1.21,4.33,4.33-1.21,11.21-11.26s.07-.08.09-.13c.02-.05.03-.1.03-.16s-.01-.11-.03-.16c-.02-.05-.05-.1-.09-.13h0s-2.46-2.48-2.46-2.48c-.04-.04-.08-.07-.14-.09-.05-.02-.11-.03-.16-.03Zm-.92-1.77c.29-.12.6-.19.92-.19s.63.06.92.19c.29.12.55.3.77.52l2.45,2.46h0c.22.22.4.48.51.77.12.29.18.6.18.91s-.06.62-.18.91c-.12.29-.29.55-.51.77h0s-11.38,11.44-11.38,11.44c-.12.12-.27.21-.43.25l-6.25,1.75c-.34.09-.7,0-.95-.25-.25-.25-.34-.61-.25-.95l1.75-6.25c.05-.16.13-.31.25-.43L15.48,2.71c.22-.22.48-.4.77-.52Z"/>',
+    }}
+  />
 )
 
 PenOutline.displayName = 'PenOutline'
diff --git a/packages/components/icons/src/icons/Percentage.tsx b/packages/components/icons/src/icons/Percentage.tsx
index 46bb0875d..767472368 100644
--- a/packages/components/icons/src/icons/Percentage.tsx
+++ b/packages/components/icons/src/icons/Percentage.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Percentage = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Percentage"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m8.64,19.88c-.16.27-.35.45-.58.53-.22.09-.44.11-.68.05-.22-.05-.4-.15-.56-.32-.16-.15-.25-.34-.28-.57-.03-.24.03-.5.19-.78L15.33,4.13c.16-.27.34-.46.56-.55.23-.09.46-.11.68-.05.22.05.4.15.56.32s.25.37.28.62c.05.23-.01.47-.16.73l-8.61,14.68Zm-2.49-6.32c-1.31,0-2.32-.44-3.05-1.33-.73-.89-1.1-2.09-1.1-3.62,0-1.02.16-1.9.49-2.63s.8-1.3,1.42-1.69,1.37-.6,2.24-.6c1.31,0,2.32.44,3.05,1.33.73.87,1.1,2.07,1.1,3.6,0,1.02-.16,1.91-.49,2.66-.33.73-.8,1.3-1.42,1.7-.62.38-1.37.58-2.24.58Zm0-1.93c.37,0,.69-.11.96-.32.26-.23.47-.56.61-1.01.14-.44.21-1.01.21-1.69,0-1.02-.16-1.78-.47-2.27-.32-.48-.75-.73-1.31-.73-.37,0-.69.11-.96.32s-.46.54-.6.99-.21,1-.21,1.69c0,1.04.16,1.8.47,2.29.3.49.74.73,1.3.73Zm11.7,8.66c-1.31,0-2.32-.44-3.05-1.33s-1.1-2.09-1.1-3.62c0-1.02.16-1.9.49-2.63.33-.73.8-1.3,1.42-1.7s1.37-.6,2.24-.6c1.31,0,2.32.44,3.05,1.33.73.87,1.1,2.07,1.1,3.6,0,1.02-.16,1.91-.49,2.66-.33.73-.8,1.3-1.42,1.69-.62.4-1.37.6-2.24.6Zm0-1.92c.37,0,.69-.11.96-.32.26-.21.47-.54.61-.98.14-.46.21-1.03.21-1.72,0-1.02-.16-1.78-.47-2.27s-.75-.73-1.31-.73c-.37,0-.69.11-.96.32-.26.21-.47.54-.61.98-.14.44-.21,1.01-.21,1.7,0,1.04.16,1.8.47,2.29.32.48.75.73,1.31.73Z"/>',
-      }}
-    />
-  )
+export const Percentage = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Percentage"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m8.64,19.88c-.16.27-.35.45-.58.53-.22.09-.44.11-.68.05-.22-.05-.4-.15-.56-.32-.16-.15-.25-.34-.28-.57-.03-.24.03-.5.19-.78L15.33,4.13c.16-.27.34-.46.56-.55.23-.09.46-.11.68-.05.22.05.4.15.56.32s.25.37.28.62c.05.23-.01.47-.16.73l-8.61,14.68Zm-2.49-6.32c-1.31,0-2.32-.44-3.05-1.33-.73-.89-1.1-2.09-1.1-3.62,0-1.02.16-1.9.49-2.63s.8-1.3,1.42-1.69,1.37-.6,2.24-.6c1.31,0,2.32.44,3.05,1.33.73.87,1.1,2.07,1.1,3.6,0,1.02-.16,1.91-.49,2.66-.33.73-.8,1.3-1.42,1.7-.62.38-1.37.58-2.24.58Zm0-1.93c.37,0,.69-.11.96-.32.26-.23.47-.56.61-1.01.14-.44.21-1.01.21-1.69,0-1.02-.16-1.78-.47-2.27-.32-.48-.75-.73-1.31-.73-.37,0-.69.11-.96.32s-.46.54-.6.99-.21,1-.21,1.69c0,1.04.16,1.8.47,2.29.3.49.74.73,1.3.73Zm11.7,8.66c-1.31,0-2.32-.44-3.05-1.33s-1.1-2.09-1.1-3.62c0-1.02.16-1.9.49-2.63.33-.73.8-1.3,1.42-1.7s1.37-.6,2.24-.6c1.31,0,2.32.44,3.05,1.33.73.87,1.1,2.07,1.1,3.6,0,1.02-.16,1.91-.49,2.66-.33.73-.8,1.3-1.42,1.69-.62.4-1.37.6-2.24.6Zm0-1.92c.37,0,.69-.11.96-.32.26-.21.47-.54.61-.98.14-.46.21-1.03.21-1.72,0-1.02-.16-1.78-.47-2.27s-.75-.73-1.31-.73c-.37,0-.69.11-.96.32-.26.21-.47.54-.61.98-.14.44-.21,1.01-.21,1.7,0,1.04.16,1.8.47,2.29.32.48.75.73,1.31.73Z"/>',
+    }}
+  />
 )
 
 Percentage.displayName = 'Percentage'
diff --git a/packages/components/icons/src/icons/PhoneFill.tsx b/packages/components/icons/src/icons/PhoneFill.tsx
index dabe67855..ee6b86249 100644
--- a/packages/components/icons/src/icons/PhoneFill.tsx
+++ b/packages/components/icons/src/icons/PhoneFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PhoneFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PhoneFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m5.97,2c-.65,0-1.28.26-1.75.71,0,0-.01.01-.02.02l-.6.62c-.88.87-1.44,2.02-1.57,3.26-.14,1.24.16,2.48.83,3.53,0,0,0,.01.01.02,2.93,4.32,6.66,8.05,10.98,10.97h.02c1.04.69,2.29.98,3.53.84,1.23-.14,2.38-.69,3.25-1.57l.62-.6s.01-.01.02-.02c.46-.47.71-1.1.71-1.75s-.26-1.28-.71-1.75h-.01s-2.64-2.62-2.64-2.62h0c-.46-.46-1.09-.72-1.74-.72s-1.28.26-1.74.71h0c-.09.09-.21.14-.34.14s-.24-.05-.33-.13l-4.14-4.14h0s-.08-.1-.1-.15c-.02-.06-.04-.12-.04-.18s.01-.12.04-.18c.02-.06.06-.11.1-.15h.01c.46-.48.71-1.1.71-1.76s-.26-1.28-.71-1.74l-2.63-2.63h0c-.47-.47-1.09-.72-1.75-.72Z"/>',
-      }}
-    />
-  )
+export const PhoneFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PhoneFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m5.97,2c-.65,0-1.28.26-1.75.71,0,0-.01.01-.02.02l-.6.62c-.88.87-1.44,2.02-1.57,3.26-.14,1.24.16,2.48.83,3.53,0,0,0,.01.01.02,2.93,4.32,6.66,8.05,10.98,10.97h.02c1.04.69,2.29.98,3.53.84,1.23-.14,2.38-.69,3.25-1.57l.62-.6s.01-.01.02-.02c.46-.47.71-1.1.71-1.75s-.26-1.28-.71-1.75h-.01s-2.64-2.62-2.64-2.62h0c-.46-.46-1.09-.72-1.74-.72s-1.28.26-1.74.71h0c-.09.09-.21.14-.34.14s-.24-.05-.33-.13l-4.14-4.14h0s-.08-.1-.1-.15c-.02-.06-.04-.12-.04-.18s.01-.12.04-.18c.02-.06.06-.11.1-.15h.01c.46-.48.71-1.1.71-1.76s-.26-1.28-.71-1.74l-2.63-2.63h0c-.47-.47-1.09-.72-1.75-.72Z"/>',
+    }}
+  />
 )
 
 PhoneFill.displayName = 'PhoneFill'
diff --git a/packages/components/icons/src/icons/PhoneOutline.tsx b/packages/components/icons/src/icons/PhoneOutline.tsx
index b02d69008..c43b11c31 100644
--- a/packages/components/icons/src/icons/PhoneOutline.tsx
+++ b/packages/components/icons/src/icons/PhoneOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PhoneOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PhoneOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4.22,2.71c.47-.46,1.09-.71,1.75-.71s1.28.26,1.75.71h0s2.63,2.64,2.63,2.64c.46.47.71,1.09.71,1.74s-.26,1.28-.71,1.74h-.01c-.04.05-.08.1-.1.16-.02.06-.04.12-.04.18s.01.12.04.18c.02.06.06.11.1.15h0s4.14,4.15,4.14,4.15c.09.09.21.13.33.13s.25-.05.34-.14h0c.46-.46,1.09-.71,1.74-.71s1.28.26,1.74.71h0s2.64,2.61,2.64,2.61h.01c.46.48.71,1.11.71,1.76s-.26,1.28-.71,1.75c0,0-.01.01-.02.02l-.61.6c-.87.88-2.02,1.44-3.25,1.57-1.24.14-2.48-.16-3.53-.83h-.02c-4.33-2.93-8.05-6.66-10.98-10.98,0,0,0-.01-.01-.02-.67-1.05-.97-2.29-.83-3.53.14-1.23.69-2.38,1.57-3.26l.6-.62s.01-.01.02-.02Zm1.42,1.44l-.6.61h-.01c-.56.56-.9,1.28-.99,2.06-.08.77.1,1.55.52,2.21,2.78,4.1,6.32,7.64,10.43,10.41.65.42,1.43.6,2.2.52.78-.09,1.5-.44,2.05-.99h.01s.61-.61.61-.61c.08-.09.13-.21.13-.33s-.05-.24-.13-.33l-2.63-2.6h0c-.09-.09-.2-.13-.33-.13s-.24.05-.33.13h0c-.47.46-1.09.72-1.75.72s-1.28-.26-1.75-.71h0s-4.14-4.15-4.14-4.15c-.23-.23-.42-.5-.54-.8-.13-.3-.19-.63-.19-.96s.07-.65.19-.96c.13-.3.31-.57.54-.8.08-.09.13-.2.13-.33s-.05-.24-.13-.33l-2.61-2.62c-.09-.09-.21-.13-.33-.13s-.24.05-.33.13Z"/>',
-      }}
-    />
-  )
+export const PhoneOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PhoneOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4.22,2.71c.47-.46,1.09-.71,1.75-.71s1.28.26,1.75.71h0s2.63,2.64,2.63,2.64c.46.47.71,1.09.71,1.74s-.26,1.28-.71,1.74h-.01c-.04.05-.08.1-.1.16-.02.06-.04.12-.04.18s.01.12.04.18c.02.06.06.11.1.15h0s4.14,4.15,4.14,4.15c.09.09.21.13.33.13s.25-.05.34-.14h0c.46-.46,1.09-.71,1.74-.71s1.28.26,1.74.71h0s2.64,2.61,2.64,2.61h.01c.46.48.71,1.11.71,1.76s-.26,1.28-.71,1.75c0,0-.01.01-.02.02l-.61.6c-.87.88-2.02,1.44-3.25,1.57-1.24.14-2.48-.16-3.53-.83h-.02c-4.33-2.93-8.05-6.66-10.98-10.98,0,0,0-.01-.01-.02-.67-1.05-.97-2.29-.83-3.53.14-1.23.69-2.38,1.57-3.26l.6-.62s.01-.01.02-.02Zm1.42,1.44l-.6.61h-.01c-.56.56-.9,1.28-.99,2.06-.08.77.1,1.55.52,2.21,2.78,4.1,6.32,7.64,10.43,10.41.65.42,1.43.6,2.2.52.78-.09,1.5-.44,2.05-.99h.01s.61-.61.61-.61c.08-.09.13-.21.13-.33s-.05-.24-.13-.33l-2.63-2.6h0c-.09-.09-.2-.13-.33-.13s-.24.05-.33.13h0c-.47.46-1.09.72-1.75.72s-1.28-.26-1.75-.71h0s-4.14-4.15-4.14-4.15c-.23-.23-.42-.5-.54-.8-.13-.3-.19-.63-.19-.96s.07-.65.19-.96c.13-.3.31-.57.54-.8.08-.09.13-.2.13-.33s-.05-.24-.13-.33l-2.61-2.62c-.09-.09-.21-.13-.33-.13s-.24.05-.33.13Z"/>',
+    }}
+  />
 )
 
 PhoneOutline.displayName = 'PhoneOutline'
diff --git a/packages/components/icons/src/icons/PinFill.tsx b/packages/components/icons/src/icons/PinFill.tsx
index 25c8e11c5..e18261890 100644
--- a/packages/components/icons/src/icons/PinFill.tsx
+++ b/packages/components/icons/src/icons/PinFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PinFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PinFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m4,9.75c0-4.28,3.58-7.75,8-7.75s8,3.47,8,7.75c0,1.14-.41,2.45-.97,3.72-.57,1.29-1.34,2.63-2.15,3.84-.81,1.21-1.67,2.31-2.43,3.12-.38.4-.76.76-1.11,1.02-.18.13-.37.26-.57.35-.19.09-.46.19-.77.19s-.58-.1-.77-.19c-.2-.09-.39-.22-.57-.35-.35-.26-.73-.62-1.11-1.02-.77-.81-1.63-1.92-2.43-3.12-.81-1.21-1.58-2.55-2.15-3.84-.56-1.27-.97-2.59-.97-3.72Zm8,1.82c1.52,0,2.76-1.2,2.76-2.67s-1.24-2.67-2.76-2.67-2.76,1.2-2.76,2.67,1.24,2.67,2.76,2.67Z"/>',
-      }}
-    />
-  )
+export const PinFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PinFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m4,9.75c0-4.28,3.58-7.75,8-7.75s8,3.47,8,7.75c0,1.14-.41,2.45-.97,3.72-.57,1.29-1.34,2.63-2.15,3.84-.81,1.21-1.67,2.31-2.43,3.12-.38.4-.76.76-1.11,1.02-.18.13-.37.26-.57.35-.19.09-.46.19-.77.19s-.58-.1-.77-.19c-.2-.09-.39-.22-.57-.35-.35-.26-.73-.62-1.11-1.02-.77-.81-1.63-1.92-2.43-3.12-.81-1.21-1.58-2.55-2.15-3.84-.56-1.27-.97-2.59-.97-3.72Zm8,1.82c1.52,0,2.76-1.2,2.76-2.67s-1.24-2.67-2.76-2.67-2.76,1.2-2.76,2.67,1.24,2.67,2.76,2.67Z"/>',
+    }}
+  />
 )
 
 PinFill.displayName = 'PinFill'
diff --git a/packages/components/icons/src/icons/PinOutline.tsx b/packages/components/icons/src/icons/PinOutline.tsx
index 56dc1f9b3..269d4887b 100644
--- a/packages/components/icons/src/icons/PinOutline.tsx
+++ b/packages/components/icons/src/icons/PinOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PinOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PinOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m15.38,8.9c0,1.81-1.51,3.27-3.38,3.27s-3.38-1.46-3.38-3.27,1.51-3.27,3.38-3.27,3.38,1.46,3.38,3.27Zm-2.07,0c0,.7-.58,1.26-1.3,1.26s-1.3-.57-1.3-1.26.58-1.26,1.3-1.26,1.3.57,1.3,1.26Z"/><path fill-rule="evenodd" d="m12,2c-4.42,0-8,3.47-8,7.75,0,1.14.41,2.45.97,3.72.57,1.29,1.34,2.63,2.15,3.84.81,1.21,1.67,2.31,2.43,3.12.38.4.76.76,1.11,1.02.18.13.37.26.57.35.19.09.46.19.77.19s.58-.1.77-.19c.2-.09.39-.22.57-.35.35-.26.73-.62,1.11-1.02.77-.81,1.63-1.92,2.43-3.12.81-1.21,1.58-2.55,2.15-3.84.56-1.27.97-2.59.97-3.72,0-4.28-3.58-7.75-8-7.75Zm-5.93,7.75c0-3.17,2.65-5.74,5.93-5.74s5.93,2.57,5.93,5.74c0,.73-.28,1.75-.81,2.93-.52,1.17-1.22,2.4-1.98,3.54-.76,1.14-1.55,2.15-2.22,2.86-.34.36-.62.62-.84.78-.03.02-.05.04-.07.05-.02-.02-.05-.03-.07-.05-.22-.16-.51-.42-.84-.78-.67-.71-1.46-1.72-2.22-2.86-.76-1.14-1.47-2.38-1.98-3.54-.53-1.19-.81-2.21-.81-2.93Z"/>',
-      }}
-    />
-  )
+export const PinOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PinOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m15.38,8.9c0,1.81-1.51,3.27-3.38,3.27s-3.38-1.46-3.38-3.27,1.51-3.27,3.38-3.27,3.38,1.46,3.38,3.27Zm-2.07,0c0,.7-.58,1.26-1.3,1.26s-1.3-.57-1.3-1.26.58-1.26,1.3-1.26,1.3.57,1.3,1.26Z"/><path fill-rule="evenodd" d="m12,2c-4.42,0-8,3.47-8,7.75,0,1.14.41,2.45.97,3.72.57,1.29,1.34,2.63,2.15,3.84.81,1.21,1.67,2.31,2.43,3.12.38.4.76.76,1.11,1.02.18.13.37.26.57.35.19.09.46.19.77.19s.58-.1.77-.19c.2-.09.39-.22.57-.35.35-.26.73-.62,1.11-1.02.77-.81,1.63-1.92,2.43-3.12.81-1.21,1.58-2.55,2.15-3.84.56-1.27.97-2.59.97-3.72,0-4.28-3.58-7.75-8-7.75Zm-5.93,7.75c0-3.17,2.65-5.74,5.93-5.74s5.93,2.57,5.93,5.74c0,.73-.28,1.75-.81,2.93-.52,1.17-1.22,2.4-1.98,3.54-.76,1.14-1.55,2.15-2.22,2.86-.34.36-.62.62-.84.78-.03.02-.05.04-.07.05-.02-.02-.05-.03-.07-.05-.22-.16-.51-.42-.84-.78-.67-.71-1.46-1.72-2.22-2.86-.76-1.14-1.47-2.38-1.98-3.54-.53-1.19-.81-2.21-.81-2.93Z"/>',
+    }}
+  />
 )
 
 PinOutline.displayName = 'PinOutline'
diff --git a/packages/components/icons/src/icons/PlayFill.tsx b/packages/components/icons/src/icons/PlayFill.tsx
index 6b04a1900..52cb00c36 100644
--- a/packages/components/icons/src/icons/PlayFill.tsx
+++ b/packages/components/icons/src/icons/PlayFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PlayFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PlayFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m2,11.97c0,5.52,4.48,10,10,10s10-4.48,10-10c-.53-13.26-19.48-13.26-20,0Zm7.69,3.85v-7.69l6.15,3.85-6.15,3.85Z"/>',
-      }}
-    />
-  )
+export const PlayFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PlayFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m2,11.97c0,5.52,4.48,10,10,10s10-4.48,10-10c-.53-13.26-19.48-13.26-20,0Zm7.69,3.85v-7.69l6.15,3.85-6.15,3.85Z"/>',
+    }}
+  />
 )
 
 PlayFill.displayName = 'PlayFill'
diff --git a/packages/components/icons/src/icons/PlayOutline.tsx b/packages/components/icons/src/icons/PlayOutline.tsx
index bc8b9c5e4..a15628a8e 100644
--- a/packages/components/icons/src/icons/PlayOutline.tsx
+++ b/packages/components/icons/src/icons/PlayOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PlayOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PlayOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,3.94C7.55,3.94,3.94,7.55,3.94,12s3.61,8.06,8.06,8.06,8.06-3.61,8.06-8.06S16.45,3.94,12,3.94ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m9.45,7.68c.31-.17.69-.16.99.03l5.56,3.47c.28.18.46.49.46.82s-.17.65-.46.82l-5.56,3.47c-.3.19-.68.2-.99.03-.31-.17-.5-.5-.5-.85v-6.94c0-.35.19-.68.5-.85Zm1.44,2.6v3.44l2.75-1.72-2.75-1.72Z"/>',
-      }}
-    />
-  )
+export const PlayOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PlayOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,3.94C7.55,3.94,3.94,7.55,3.94,12s3.61,8.06,8.06,8.06,8.06-3.61,8.06-8.06S16.45,3.94,12,3.94ZM2,12C2,6.48,6.48,2,12,2s10,4.48,10,10-4.48,10-10,10S2,17.52,2,12Z"/><path fill-rule="evenodd" d="m9.45,7.68c.31-.17.69-.16.99.03l5.56,3.47c.28.18.46.49.46.82s-.17.65-.46.82l-5.56,3.47c-.3.19-.68.2-.99.03-.31-.17-.5-.5-.5-.85v-6.94c0-.35.19-.68.5-.85Zm1.44,2.6v3.44l2.75-1.72-2.75-1.72Z"/>',
+    }}
+  />
 )
 
 PlayOutline.displayName = 'PlayOutline'
diff --git a/packages/components/icons/src/icons/Plus.tsx b/packages/components/icons/src/icons/Plus.tsx
index 406da1b72..0cf02ff8f 100644
--- a/packages/components/icons/src/icons/Plus.tsx
+++ b/packages/components/icons/src/icons/Plus.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Plus = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Plus"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,2c.55,0,1,.45,1,1v7.94h8c.55,0,1,.45,1,1s-.45,1-1,1h-8v8.06c0,.55-.45,1-1,1s-1-.45-1-1v-8.06H3c-.55,0-1-.45-1-1s.45-1,1-1h8V3c0-.55.45-1,1-1Z"/>',
-      }}
-    />
-  )
+export const Plus = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Plus"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,2c.55,0,1,.45,1,1v7.94h8c.55,0,1,.45,1,1s-.45,1-1,1h-8v8.06c0,.55-.45,1-1,1s-1-.45-1-1v-8.06H3c-.55,0-1-.45-1-1s.45-1,1-1h8V3c0-.55.45-1,1-1Z"/>',
+    }}
+  />
 )
 
 Plus.displayName = 'Plus'
diff --git a/packages/components/icons/src/icons/PrintFill.tsx b/packages/components/icons/src/icons/PrintFill.tsx
index 40b58d47f..0b5c5cd71 100644
--- a/packages/components/icons/src/icons/PrintFill.tsx
+++ b/packages/components/icons/src/icons/PrintFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PrintFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PrintFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m21.61,8.83c-.27-.25-.72-.42-1.08-.42H3.54c-.45,0-.81.17-1.08.42-.27.25-.45.67-.45,1v6.42c0,.42.18.75.45,1,.27.25.72.42,1.08.42h2.26v2.83c0,.42.18.75.45,1,.36.33.72.5,1.18.5h9.22c.45,0,.81-.17,1.08-.42s.45-.67.45-1v-2.83h2.26c.45,0,.81-.17,1.08-.42.27-.25.45-.67.45-1v-6.5c.09-.33-.09-.67-.36-1Zm-4.97,11.67H7.42v-2.83h9.22v2.83Zm1.54-7.75h-1.54c-.45,0-.81-.33-.81-.75s.36-.75.81-.75h1.54c.45,0,.81.33.81.75s-.36.75-.81.75Zm.09-10.17c0-.17-.09-.33-.27-.42-.18-.08-.36-.17-.63-.17H6.7c-.27,0-.45.08-.63.17-.18.17-.27.25-.27.42v4.33h12.47V2.58Z"/>',
-      }}
-    />
-  )
+export const PrintFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PrintFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m21.61,8.83c-.27-.25-.72-.42-1.08-.42H3.54c-.45,0-.81.17-1.08.42-.27.25-.45.67-.45,1v6.42c0,.42.18.75.45,1,.27.25.72.42,1.08.42h2.26v2.83c0,.42.18.75.45,1,.36.33.72.5,1.18.5h9.22c.45,0,.81-.17,1.08-.42s.45-.67.45-1v-2.83h2.26c.45,0,.81-.17,1.08-.42.27-.25.45-.67.45-1v-6.5c.09-.33-.09-.67-.36-1Zm-4.97,11.67H7.42v-2.83h9.22v2.83Zm1.54-7.75h-1.54c-.45,0-.81-.33-.81-.75s.36-.75.81-.75h1.54c.45,0,.81.33.81.75s-.36.75-.81.75Zm.09-10.17c0-.17-.09-.33-.27-.42-.18-.08-.36-.17-.63-.17H6.7c-.27,0-.45.08-.63.17-.18.17-.27.25-.27.42v4.33h12.47V2.58Z"/>',
+    }}
+  />
 )
 
 PrintFill.displayName = 'PrintFill'
diff --git a/packages/components/icons/src/icons/PrintOutline.tsx b/packages/components/icons/src/icons/PrintOutline.tsx
index 6b7e54712..d3702ad34 100644
--- a/packages/components/icons/src/icons/PrintOutline.tsx
+++ b/packages/components/icons/src/icons/PrintOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const PrintOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="PrintOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.3,8.25c-.44-.44-1.04-.69-1.67-.69h-1.8v-3.89c0-.44-.17-.87-.49-1.18-.32-.32-.74-.49-1.18-.49H7.84c-.44,0-.87.17-1.18.49-.32.32-.49.74-.49,1.18v3.88h-1.8c-.62,0-1.22.25-1.67.69-.44.44-.69,1.04-.69,1.67v6.24c0,.62.25,1.22.69,1.67.44.45,1.04.69,1.67.69h1.8v1.8c0,.44.17.87.49,1.18.32.32.74.49,1.18.49h8.33c.44,0,.87-.17,1.18-.49s.49-.74.49-1.18v-1.8h1.8c.62,0,1.22-.25,1.67-.69.44-.44.69-1.04.69-1.67v-6.24c0-.62-.25-1.22-.69-1.67h0ZM8.12,3.96h7.76v3.6h-7.76v-3.6Zm0,16.09v-3.6h7.76v3.6h-7.76Zm11.92-3.88c0,.11-.04.22-.12.29-.08.08-.18.12-.29.12h-1.8v-1.11c0-.54-.43-.97-.97-.97H7.15c-.54,0-.97.43-.97.97v1.11h-1.8c-.11,0-.22-.04-.29-.12-.07-.07-.12-.18-.12-.29v-6.24c0-.11.04-.22.12-.29.07-.07.18-.12.29-.12h15.26c.11,0,.22.04.29.12.07.08.12.18.12.29v6.24h0Z"/><path fill-rule="evenodd" d="m17.55,11.03h-1.39c-.54,0-.97.43-.97.97s.43.97.97.97h1.39c.54,0,.97-.43.97-.97s-.43-.97-.97-.97Z"/>',
-      }}
-    />
-  )
+export const PrintOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="PrintOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.3,8.25c-.44-.44-1.04-.69-1.67-.69h-1.8v-3.89c0-.44-.17-.87-.49-1.18-.32-.32-.74-.49-1.18-.49H7.84c-.44,0-.87.17-1.18.49-.32.32-.49.74-.49,1.18v3.88h-1.8c-.62,0-1.22.25-1.67.69-.44.44-.69,1.04-.69,1.67v6.24c0,.62.25,1.22.69,1.67.44.45,1.04.69,1.67.69h1.8v1.8c0,.44.17.87.49,1.18.32.32.74.49,1.18.49h8.33c.44,0,.87-.17,1.18-.49s.49-.74.49-1.18v-1.8h1.8c.62,0,1.22-.25,1.67-.69.44-.44.69-1.04.69-1.67v-6.24c0-.62-.25-1.22-.69-1.67h0ZM8.12,3.96h7.76v3.6h-7.76v-3.6Zm0,16.09v-3.6h7.76v3.6h-7.76Zm11.92-3.88c0,.11-.04.22-.12.29-.08.08-.18.12-.29.12h-1.8v-1.11c0-.54-.43-.97-.97-.97H7.15c-.54,0-.97.43-.97.97v1.11h-1.8c-.11,0-.22-.04-.29-.12-.07-.07-.12-.18-.12-.29v-6.24c0-.11.04-.22.12-.29.07-.07.18-.12.29-.12h15.26c.11,0,.22.04.29.12.07.08.12.18.12.29v6.24h0Z"/><path fill-rule="evenodd" d="m17.55,11.03h-1.39c-.54,0-.97.43-.97.97s.43.97.97.97h1.39c.54,0,.97-.43.97-.97s-.43-.97-.97-.97Z"/>',
+    }}
+  />
 )
 
 PrintOutline.displayName = 'PrintOutline'
diff --git a/packages/components/icons/src/icons/ProfileFill.tsx b/packages/components/icons/src/icons/ProfileFill.tsx
index 02276be48..aff747805 100644
--- a/packages/components/icons/src/icons/ProfileFill.tsx
+++ b/packages/components/icons/src/icons/ProfileFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ProfileFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ProfileFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m5.13,19.27c-1.93-1.82-3.13-4.4-3.13-7.27C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.86-1.2,5.44-3.13,7.27h0s-.2.18-.2.18c-1.77,1.59-4.11,2.56-6.68,2.56s-4.9-.97-6.68-2.55l-.2-.17h0Zm6.87-6.85c1.96,0,3.54-1.59,3.54-3.54s-1.59-3.54-3.54-3.54-3.54,1.59-3.54,3.54,1.59,3.54,3.54,3.54Zm-6.25,4.69c1.67,2.08,4.33,2.92,6.67,2.92s5-1.67,5.83-2.92c-.83-.97-3.58-2.92-6.25-2.92s-5.28,1.94-6.25,2.92Z"/>',
-      }}
-    />
-  )
+export const ProfileFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ProfileFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m5.13,19.27c-1.93-1.82-3.13-4.4-3.13-7.27C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.86-1.2,5.44-3.13,7.27h0s-.2.18-.2.18c-1.77,1.59-4.11,2.56-6.68,2.56s-4.9-.97-6.68-2.55l-.2-.17h0Zm6.87-6.85c1.96,0,3.54-1.59,3.54-3.54s-1.59-3.54-3.54-3.54-3.54,1.59-3.54,3.54,1.59,3.54,3.54,3.54Zm-6.25,4.69c1.67,2.08,4.33,2.92,6.67,2.92s5-1.67,5.83-2.92c-.83-.97-3.58-2.92-6.25-2.92s-5.28,1.94-6.25,2.92Z"/>',
+    }}
+  />
 )
 
 ProfileFill.displayName = 'ProfileFill'
diff --git a/packages/components/icons/src/icons/ProfileOutline.tsx b/packages/components/icons/src/icons/ProfileOutline.tsx
index 4b736c229..d58a9b1ec 100644
--- a/packages/components/icons/src/icons/ProfileOutline.tsx
+++ b/packages/components/icons/src/icons/ProfileOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ProfileOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ProfileOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,5.38c-2.28,0-4.13,1.85-4.13,4.13s1.85,4.12,4.13,4.12,4.12-1.85,4.12-4.12-1.85-4.13-4.12-4.13Zm-2.13,4.13c0-1.17.95-2.13,2.13-2.13s2.12.95,2.12,2.13-.95,2.12-2.12,2.12-2.13-.95-2.13-2.12Z"/><path fill-rule="evenodd" d="m4.95,19.09c-1.82-1.81-2.95-4.32-2.95-7.09C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.77-1.13,5.28-2.95,7.09v.03s-.38.33-.38.33c-1.77,1.59-4.11,2.55-6.67,2.55h0c-.06,0-.13,0-.19,0-2.49-.05-4.75-1-6.47-2.55l-.39-.33v-.03Zm-.95-7.09c0-4.42,3.58-8,8-8s8,3.58,8,8c0,2.04-.77,3.91-2.03,5.32-1.39-1.76-3.58-2.84-5.97-2.84s-4.59,1.08-5.97,2.84c-1.26-1.41-2.03-3.28-2.03-5.32Zm7.65,7.99c.11,0,.21,0,.32,0h.03c1.65,0,3.19-.5,4.46-1.36-1-1.32-2.63-2.16-4.46-2.16s-3.46.84-4.46,2.16c1.19.8,2.6,1.29,4.12,1.36Z"/>',
-      }}
-    />
-  )
+export const ProfileOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ProfileOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,5.38c-2.28,0-4.13,1.85-4.13,4.13s1.85,4.12,4.13,4.12,4.12-1.85,4.12-4.12-1.85-4.13-4.12-4.13Zm-2.13,4.13c0-1.17.95-2.13,2.13-2.13s2.12.95,2.12,2.13-.95,2.12-2.12,2.12-2.13-.95-2.13-2.12Z"/><path fill-rule="evenodd" d="m4.95,19.09c-1.82-1.81-2.95-4.32-2.95-7.09C2,6.48,6.48,2,12,2s10,4.48,10,10c0,2.77-1.13,5.28-2.95,7.09v.03s-.38.33-.38.33c-1.77,1.59-4.11,2.55-6.67,2.55h0c-.06,0-.13,0-.19,0-2.49-.05-4.75-1-6.47-2.55l-.39-.33v-.03Zm-.95-7.09c0-4.42,3.58-8,8-8s8,3.58,8,8c0,2.04-.77,3.91-2.03,5.32-1.39-1.76-3.58-2.84-5.97-2.84s-4.59,1.08-5.97,2.84c-1.26-1.41-2.03-3.28-2.03-5.32Zm7.65,7.99c.11,0,.21,0,.32,0h.03c1.65,0,3.19-.5,4.46-1.36-1-1.32-2.63-2.16-4.46-2.16s-3.46.84-4.46,2.16c1.19.8,2.6,1.29,4.12,1.36Z"/>',
+    }}
+  />
 )
 
 ProfileOutline.displayName = 'ProfileOutline'
diff --git a/packages/components/icons/src/icons/QuestionFill.tsx b/packages/components/icons/src/icons/QuestionFill.tsx
index 786dceaa4..798a1ee03 100644
--- a/packages/components/icons/src/icons/QuestionFill.tsx
+++ b/packages/components/icons/src/icons/QuestionFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const QuestionFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="QuestionFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm.21,6.87c-.21-.04-.43-.02-.62.06-.2.08-.36.22-.48.4-.12.18-.18.39-.18.6,0,.55-.45,1-1,1s-1-.45-1-1c0-.61.18-1.2.52-1.71.34-.51.82-.9,1.38-1.13.56-.23,1.18-.29,1.78-.18.6.12,1.15.41,1.58.84.43.43.72.98.84,1.58.12.6.06,1.22-.18,1.78-.23.56-.63,1.04-1.13,1.38-.22.15-.46.27-.71.35v.55c0,.55-.45,1-1,1s-1-.45-1-1v-1.38c0-.55.45-1,1-1,.21,0,.42-.06.6-.18.18-.12.32-.29.4-.48s.1-.41.06-.62c-.04-.21-.14-.4-.29-.55-.15-.15-.34-.25-.55-.29Zm-.8,6.77c.17-.12.38-.18.59-.18.28,0,.55.12.75.32.2.2.31.47.32.75,0,.21-.06.42-.18.59-.12.17-.28.31-.48.39-.19.08-.41.1-.61.06-.21-.04-.4-.14-.54-.29-.15-.15-.25-.34-.29-.54-.04-.21-.02-.42.06-.61.08-.19.22-.36.39-.48Z"/>',
-      }}
-    />
-  )
+export const QuestionFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="QuestionFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm.21,6.87c-.21-.04-.43-.02-.62.06-.2.08-.36.22-.48.4-.12.18-.18.39-.18.6,0,.55-.45,1-1,1s-1-.45-1-1c0-.61.18-1.2.52-1.71.34-.51.82-.9,1.38-1.13.56-.23,1.18-.29,1.78-.18.6.12,1.15.41,1.58.84.43.43.72.98.84,1.58.12.6.06,1.22-.18,1.78-.23.56-.63,1.04-1.13,1.38-.22.15-.46.27-.71.35v.55c0,.55-.45,1-1,1s-1-.45-1-1v-1.38c0-.55.45-1,1-1,.21,0,.42-.06.6-.18.18-.12.32-.29.4-.48s.1-.41.06-.62c-.04-.21-.14-.4-.29-.55-.15-.15-.34-.25-.55-.29Zm-.8,6.77c.17-.12.38-.18.59-.18.28,0,.55.12.75.32.2.2.31.47.32.75,0,.21-.06.42-.18.59-.12.17-.28.31-.48.39-.19.08-.41.1-.61.06-.21-.04-.4-.14-.54-.29-.15-.15-.25-.34-.29-.54-.04-.21-.02-.42.06-.61.08-.19.22-.36.39-.48Z"/>',
+    }}
+  />
 )
 
 QuestionFill.displayName = 'QuestionFill'
diff --git a/packages/components/icons/src/icons/QuestionOutline.tsx b/packages/components/icons/src/icons/QuestionOutline.tsx
index 135c4b15c..58c2925d6 100644
--- a/packages/components/icons/src/icons/QuestionOutline.tsx
+++ b/packages/components/icons/src/icons/QuestionOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const QuestionOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="QuestionOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,22c-5.52,0-10-4.48-10-10S6.48,2,12,2s10,4.48,10,10-4.48,10-10,10Zm0-18c-4.41,0-8,3.59-8,8s3.59,8,8,8,8-3.59,8-8S16.41,4,12,4Z"/><path d="m12,14.38c-.55,0-1-.45-1-1v-1.38c0-.55.45-1,1-1,.22,0,.42-.07.6-.18.17-.12.32-.28.4-.48.08-.2.1-.42.06-.62-.04-.21-.14-.4-.29-.55-.15-.15-.34-.25-.55-.29-.21-.04-.42-.02-.62.06-.2.08-.37.22-.48.4-.12.18-.18.38-.18.6,0,.55-.45,1-1,1s-1-.45-1-1c0-.61.18-1.2.52-1.71.34-.51.82-.9,1.38-1.13.57-.23,1.18-.29,1.78-.18.6.12,1.14.41,1.57.84.43.43.72.98.84,1.57.12.6.06,1.22-.18,1.78-.23.57-.62,1.04-1.13,1.38-.22.15-.46.27-.71.35v.55c0,.55-.45,1-1,1Zm0,1.08c-.21,0-.42.06-.59.17-.18.12-.31.28-.39.48-.08.19-.1.41-.06.62.04.21.14.39.29.54s.34.25.54.29c.21.04.42.02.62-.06.19-.08.36-.22.47-.39.12-.17.18-.38.18-.59,0-.28-.12-.55-.32-.75-.2-.2-.47-.31-.75-.32h0Z"/>',
-      }}
-    />
-  )
+export const QuestionOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="QuestionOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,22c-5.52,0-10-4.48-10-10S6.48,2,12,2s10,4.48,10,10-4.48,10-10,10Zm0-18c-4.41,0-8,3.59-8,8s3.59,8,8,8,8-3.59,8-8S16.41,4,12,4Z"/><path d="m12,14.38c-.55,0-1-.45-1-1v-1.38c0-.55.45-1,1-1,.22,0,.42-.07.6-.18.17-.12.32-.28.4-.48.08-.2.1-.42.06-.62-.04-.21-.14-.4-.29-.55-.15-.15-.34-.25-.55-.29-.21-.04-.42-.02-.62.06-.2.08-.37.22-.48.4-.12.18-.18.38-.18.6,0,.55-.45,1-1,1s-1-.45-1-1c0-.61.18-1.2.52-1.71.34-.51.82-.9,1.38-1.13.57-.23,1.18-.29,1.78-.18.6.12,1.14.41,1.57.84.43.43.72.98.84,1.57.12.6.06,1.22-.18,1.78-.23.57-.62,1.04-1.13,1.38-.22.15-.46.27-.71.35v.55c0,.55-.45,1-1,1Zm0,1.08c-.21,0-.42.06-.59.17-.18.12-.31.28-.39.48-.08.19-.1.41-.06.62.04.21.14.39.29.54s.34.25.54.29c.21.04.42.02.62-.06.19-.08.36-.22.47-.39.12-.17.18-.38.18-.59,0-.28-.12-.55-.32-.75-.2-.2-.47-.31-.75-.32h0Z"/>',
+    }}
+  />
 )
 
 QuestionOutline.displayName = 'QuestionOutline'
diff --git a/packages/components/icons/src/icons/Refresh.tsx b/packages/components/icons/src/icons/Refresh.tsx
index 6228409a5..eee651920 100644
--- a/packages/components/icons/src/icons/Refresh.tsx
+++ b/packages/components/icons/src/icons/Refresh.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Refresh = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Refresh"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.94,16.54l-.69-2.73s-.03-.06-.04-.08c-.02-.06-.05-.12-.08-.18-.03-.05-.07-.1-.11-.14-.04-.04-.08-.08-.13-.12-.05-.04-.11-.07-.17-.1-.03-.02-.05-.03-.08-.05-.03,0-.06,0-.08,0-.07-.02-.12-.03-.19-.03s-.13,0-.2,0h-.08l-2.77.68c-.52.12-.84.65-.71,1.17.13.52.66.82,1.18.7l.72-.17c-.53.81-1.19,1.52-1.97,2.11-1.32.97-2.91,1.55-4.55,1.64-1.5,0-2.96-.46-4.19-1.31-1.23-.85-2.17-2.06-2.69-3.46-.18-.5-.74-.76-1.25-.57-.51.18-.77.73-.58,1.23.65,1.77,1.84,3.3,3.41,4.37,1.57,1.08,3.43,1.66,5.34,1.66h.05c2.04-.11,4-.82,5.64-2.02.91-.67,1.68-1.47,2.31-2.38l.07.27c.13.52.66.82,1.18.7.52-.12.84-.65.71-1.17l-.03-.02ZM3.09,10.7s.11.07.17.1c.02.02.05.03.07.05.03,0,.06,0,.09.02.07.02.12.02.19.02s.13,0,.2,0h.09l2.77-.68c.52-.12.84-.65.71-1.17-.13-.52-.66-.82-1.18-.7l-.65.16c.53-.75,1.2-1.45,1.97-2.04,1.37-1.05,2.95-1.69,4.46-1.69s2.99.47,4.23,1.33c1.24.87,2.17,2.08,2.68,3.49.18.5.73.77,1.24.58.51-.17.77-.72.59-1.22-.64-1.78-1.82-3.32-3.39-4.42-1.57-1.09-3.43-1.68-5.35-1.68-2.06,0-4.05.86-5.67,2.1-.88.68-1.67,1.5-2.31,2.38l-.08-.34c-.13-.52-.66-.82-1.18-.7-.52.12-.84.65-.71,1.17l.69,2.73s.02.05.04.08c.02.07.05.12.08.18.03.05.07.1.11.14.04.04.08.08.13.12Z"/>',
-      }}
-    />
-  )
+export const Refresh = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Refresh"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.94,16.54l-.69-2.73s-.03-.06-.04-.08c-.02-.06-.05-.12-.08-.18-.03-.05-.07-.1-.11-.14-.04-.04-.08-.08-.13-.12-.05-.04-.11-.07-.17-.1-.03-.02-.05-.03-.08-.05-.03,0-.06,0-.08,0-.07-.02-.12-.03-.19-.03s-.13,0-.2,0h-.08l-2.77.68c-.52.12-.84.65-.71,1.17.13.52.66.82,1.18.7l.72-.17c-.53.81-1.19,1.52-1.97,2.11-1.32.97-2.91,1.55-4.55,1.64-1.5,0-2.96-.46-4.19-1.31-1.23-.85-2.17-2.06-2.69-3.46-.18-.5-.74-.76-1.25-.57-.51.18-.77.73-.58,1.23.65,1.77,1.84,3.3,3.41,4.37,1.57,1.08,3.43,1.66,5.34,1.66h.05c2.04-.11,4-.82,5.64-2.02.91-.67,1.68-1.47,2.31-2.38l.07.27c.13.52.66.82,1.18.7.52-.12.84-.65.71-1.17l-.03-.02ZM3.09,10.7s.11.07.17.1c.02.02.05.03.07.05.03,0,.06,0,.09.02.07.02.12.02.19.02s.13,0,.2,0h.09l2.77-.68c.52-.12.84-.65.71-1.17-.13-.52-.66-.82-1.18-.7l-.65.16c.53-.75,1.2-1.45,1.97-2.04,1.37-1.05,2.95-1.69,4.46-1.69s2.99.47,4.23,1.33c1.24.87,2.17,2.08,2.68,3.49.18.5.73.77,1.24.58.51-.17.77-.72.59-1.22-.64-1.78-1.82-3.32-3.39-4.42-1.57-1.09-3.43-1.68-5.35-1.68-2.06,0-4.05.86-5.67,2.1-.88.68-1.67,1.5-2.31,2.38l-.08-.34c-.13-.52-.66-.82-1.18-.7-.52.12-.84.65-.71,1.17l.69,2.73s.02.05.04.08c.02.07.05.12.08.18.03.05.07.1.11.14.04.04.08.08.13.12Z"/>',
+    }}
+  />
 )
 
 Refresh.displayName = 'Refresh'
diff --git a/packages/components/icons/src/icons/RemoveFill.tsx b/packages/components/icons/src/icons/RemoveFill.tsx
index 2582ebb1b..d6446362f 100644
--- a/packages/components/icons/src/icons/RemoveFill.tsx
+++ b/packages/components/icons/src/icons/RemoveFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const RemoveFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="RemoveFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-14.17-1c-.55,0-1,.45-1,1s.45,1,1,1h8.54c.55,0,1-.45,1-1s-.45-1-1-1H7.83Z"/>',
-      }}
-    />
-  )
+export const RemoveFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="RemoveFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-14.17-1c-.55,0-1,.45-1,1s.45,1,1,1h8.54c.55,0,1-.45,1-1s-.45-1-1-1H7.83Z"/>',
+    }}
+  />
 )
 
 RemoveFill.displayName = 'RemoveFill'
diff --git a/packages/components/icons/src/icons/RemoveOutline.tsx b/packages/components/icons/src/icons/RemoveOutline.tsx
index 4339ccdc7..40f705fb5 100644
--- a/packages/components/icons/src/icons/RemoveOutline.tsx
+++ b/packages/components/icons/src/icons/RemoveOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const RemoveOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="RemoveOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m7.91,10.94c-.57,0-1.02.45-1.02,1s.46,1,1.02,1h8.51c.57,0,1.02-.45,1.02-1s-.46-1-1.02-1H7.91Z"/><path fill-rule="evenodd" d="m12,2C6.45,2,2,6.5,2,12s4.45,10,10,10,10-4.5,10-10S17.55,2,12,2Zm-7.95,10c0-4.44,3.59-8,7.95-8s7.95,3.56,7.95,8-3.59,8-7.95,8-7.95-3.56-7.95-8Z"/>',
-      }}
-    />
-  )
+export const RemoveOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="RemoveOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m7.91,10.94c-.57,0-1.02.45-1.02,1s.46,1,1.02,1h8.51c.57,0,1.02-.45,1.02-1s-.46-1-1.02-1H7.91Z"/><path fill-rule="evenodd" d="m12,2C6.45,2,2,6.5,2,12s4.45,10,10,10,10-4.5,10-10S17.55,2,12,2Zm-7.95,10c0-4.44,3.59-8,7.95-8s7.95,3.56,7.95,8-3.59,8-7.95,8-7.95-3.56-7.95-8Z"/>',
+    }}
+  />
 )
 
 RemoveOutline.displayName = 'RemoveOutline'
diff --git a/packages/components/icons/src/icons/RocketFill.tsx b/packages/components/icons/src/icons/RocketFill.tsx
index 7e53e4d46..872542e3a 100644
--- a/packages/components/icons/src/icons/RocketFill.tsx
+++ b/packages/components/icons/src/icons/RocketFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const RocketFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="RocketFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M19.64 2.04c1.38-.27 2.59.97 2.32 2.38l-.18.91c-.57 2.92-1.96 5.59-3.99 7.69l.04 3.52c.01 1.14-.61 2.18-1.61 2.7l-1.92.98c-1.23.63-2.73.13-3.36-1.11l-1.07-2.12-2.68-2.72-2.08-1.08c-1.23-.64-1.72-2.16-1.1-3.42l.97-1.95c.51-1.02 1.54-1.65 2.66-1.64l3.48.04c2.09-2.06 4.75-3.47 7.64-4.02l.88-.17ZM6.7 11.65l2.62-3.33-1.71-.02c-.33 0-.63.18-.78.48l-.97 1.95s-.04.09-.04.14c-.02.18.07.36.23.45l.64.33Zm5.76 5.85.33.65c.09.17.26.26.44.24.05 0 .1-.02.14-.04l1.92-.98c.29-.15.48-.46.47-.79l-.02-1.73-3.28 2.66ZM8.4 18.75c0-1.79-1.43-3.25-3.2-3.25s-3.2 1.45-3.2 3.25v3.25h3.2c1.77 0 3.2-1.45 3.2-3.25Zm-3.2-1.14c.62 0 1.12.51 1.12 1.14s-.5 1.14-1.12 1.14h-1.12v-1.14c0-.63.5-1.14 1.12-1.14Z"/>',
-      }}
-    />
-  )
+export const RocketFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="RocketFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M19.64 2.04c1.38-.27 2.59.97 2.32 2.38l-.18.91c-.57 2.92-1.96 5.59-3.99 7.69l.04 3.52c.01 1.14-.61 2.18-1.61 2.7l-1.92.98c-1.23.63-2.73.13-3.36-1.11l-1.07-2.12-2.68-2.72-2.08-1.08c-1.23-.64-1.72-2.16-1.1-3.42l.97-1.95c.51-1.02 1.54-1.65 2.66-1.64l3.48.04c2.09-2.06 4.75-3.47 7.64-4.02l.88-.17ZM6.7 11.65l2.62-3.33-1.71-.02c-.33 0-.63.18-.78.48l-.97 1.95s-.04.09-.04.14c-.02.18.07.36.23.45l.64.33Zm5.76 5.85.33.65c.09.17.26.26.44.24.05 0 .1-.02.14-.04l1.92-.98c.29-.15.48-.46.47-.79l-.02-1.73-3.28 2.66ZM8.4 18.75c0-1.79-1.43-3.25-3.2-3.25s-3.2 1.45-3.2 3.25v3.25h3.2c1.77 0 3.2-1.45 3.2-3.25Zm-3.2-1.14c.62 0 1.12.51 1.12 1.14s-.5 1.14-1.12 1.14h-1.12v-1.14c0-.63.5-1.14 1.12-1.14Z"/>',
+    }}
+  />
 )
 
 RocketFill.displayName = 'RocketFill'
diff --git a/packages/components/icons/src/icons/RocketOutline.tsx b/packages/components/icons/src/icons/RocketOutline.tsx
index 649f43367..936a0a26b 100644
--- a/packages/components/icons/src/icons/RocketOutline.tsx
+++ b/packages/components/icons/src/icons/RocketOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const RocketOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="RocketOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="M19.64 2.04c1.38-.27 2.59.97 2.32 2.38l-.18.91c-.57 2.92-1.96 5.59-3.99 7.69l.04 3.52c.01 1.14-.61 2.18-1.61 2.7l-1.92.98c-1.23.63-2.73.13-3.36-1.11l-1.07-2.12-2.68-2.72-2.08-1.08c-1.23-.64-1.72-2.16-1.1-3.42l.97-1.95c.51-1.02 1.54-1.65 2.66-1.64l3.48.04c2.09-2.06 4.75-3.47 7.64-4.02l.88-.17ZM6.7 11.65l2.62-3.33-1.71-.02c-.33 0-.63.18-.78.48l-.97 1.95s-.04.09-.04.14c-.02.18.07.36.23.45l.64.33Zm4.57 3.78-2.54-2.58 4.55-5.77c1.68-1.42 3.69-2.39 5.86-2.81l.76-.14-.15.79c-.42 2.16-1.37 4.17-2.74 5.85l-5.73 4.67Zm1.19 2.06.33.65c.09.17.26.26.44.24.05 0 .1-.02.14-.04l1.92-.98c.29-.15.48-.46.47-.79l-.02-1.73-3.28 2.66ZM8.4 18.75c0-1.79-1.43-3.25-3.2-3.25s-3.2 1.45-3.2 3.25v3.25h3.2c1.77 0 3.2-1.45 3.2-3.25Zm-3.2-1.14c.62 0 1.12.51 1.12 1.14s-.5 1.14-1.12 1.14h-1.12v-1.14c0-.63.5-1.14 1.12-1.14Z"/>',
-      }}
-    />
-  )
+export const RocketOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="RocketOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="M19.64 2.04c1.38-.27 2.59.97 2.32 2.38l-.18.91c-.57 2.92-1.96 5.59-3.99 7.69l.04 3.52c.01 1.14-.61 2.18-1.61 2.7l-1.92.98c-1.23.63-2.73.13-3.36-1.11l-1.07-2.12-2.68-2.72-2.08-1.08c-1.23-.64-1.72-2.16-1.1-3.42l.97-1.95c.51-1.02 1.54-1.65 2.66-1.64l3.48.04c2.09-2.06 4.75-3.47 7.64-4.02l.88-.17ZM6.7 11.65l2.62-3.33-1.71-.02c-.33 0-.63.18-.78.48l-.97 1.95s-.04.09-.04.14c-.02.18.07.36.23.45l.64.33Zm4.57 3.78-2.54-2.58 4.55-5.77c1.68-1.42 3.69-2.39 5.86-2.81l.76-.14-.15.79c-.42 2.16-1.37 4.17-2.74 5.85l-5.73 4.67Zm1.19 2.06.33.65c.09.17.26.26.44.24.05 0 .1-.02.14-.04l1.92-.98c.29-.15.48-.46.47-.79l-.02-1.73-3.28 2.66ZM8.4 18.75c0-1.79-1.43-3.25-3.2-3.25s-3.2 1.45-3.2 3.25v3.25h3.2c1.77 0 3.2-1.45 3.2-3.25Zm-3.2-1.14c.62 0 1.12.51 1.12 1.14s-.5 1.14-1.12 1.14h-1.12v-1.14c0-.63.5-1.14 1.12-1.14Z"/>',
+    }}
+  />
 )
 
 RocketOutline.displayName = 'RocketOutline'
diff --git a/packages/components/icons/src/icons/RotateImage.tsx b/packages/components/icons/src/icons/RotateImage.tsx
index fc78381cd..6dfb69b74 100644
--- a/packages/components/icons/src/icons/RotateImage.tsx
+++ b/packages/components/icons/src/icons/RotateImage.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const RotateImage = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="RotateImage"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m3,12.99c.26,0,.51-.11.7-.29.18-.19.29-.44.29-.71,0-1.63.5-3.22,1.43-4.57.93-1.34,2.25-2.36,3.78-2.93,1.53-.57,3.19-.65,4.77-.25,1.58.41,2.99,1.29,4.06,2.53l-1.27-.26c-.13-.03-.27-.04-.4-.02-.13.02-.26.07-.37.14-.11.07-.21.17-.29.28-.08.11-.13.24-.15.37-.03.13-.03.27,0,.4.03.13.08.26.16.37.08.11.18.2.29.27.11.07.24.12.38.14l3.67.75c.14.03.29.02.44-.01.14-.04.28-.1.39-.2.18-.15.3-.35.35-.57l.75-3.67c.03-.13.04-.27.02-.4s-.07-.26-.14-.37c-.07-.11-.17-.21-.28-.29-.11-.08-.24-.13-.37-.15-.13-.03-.27-.03-.4,0-.13.03-.26.08-.37.16-.11.07-.2.17-.27.28-.07.11-.12.24-.14.37l-.27,1.32c-.96-1.19-2.19-2.14-3.58-2.78-1.39-.64-2.91-.95-4.44-.91-1.53.04-3.03.43-4.38,1.15-1.35.71-2.53,1.73-3.43,2.96-1.24,1.71-1.91,3.77-1.91,5.88,0,.26.11.52.29.71.18.18.43.29.69.29Zm18.67-1.7c-.19-.18-.44-.29-.7-.29s-.52.1-.7.29c-.09.09-.17.2-.22.32-.05.12-.07.25-.07.38,0,1.63-.49,3.23-1.42,4.57-.93,1.34-2.25,2.37-3.78,2.93-1.53.57-3.2.65-4.78.24-1.58-.41-2.99-1.3-4.05-2.54l1.26.26c.13.03.27.04.4.02.13-.02.26-.07.37-.14.11-.07.21-.17.29-.28.08-.11.13-.24.16-.37.03-.13.03-.27,0-.4-.03-.13-.08-.26-.16-.37-.07-.11-.17-.2-.28-.27-.11-.07-.24-.12-.37-.14l-3.67-.75c-.13-.03-.26-.03-.39,0-.13.02-.25.07-.36.15-.11.07-.2.16-.28.27s-.13.23-.15.36l-.75,3.68c-.03.13-.03.26,0,.39s.07.25.15.36c.15.22.38.37.64.42.14.03.29.03.44,0,.14-.04.28-.1.39-.2.18-.14.31-.35.35-.57l.27-1.31c.94,1.15,2.12,2.08,3.46,2.72,1.34.64,2.81.97,4.29.98,1.58,0,3.13-.39,4.53-1.11,1.4-.72,2.62-1.76,3.55-3.04,1.24-1.71,1.91-3.77,1.91-5.88,0-.26-.12-.5-.31-.68Z"/><path d="m13.88,8h-3.8c-.56,0-1.09.22-1.48.61-.39.39-.61.93-.61,1.48v3.8c0,.56.22,1.09.62,1.48.39.39.92.62,1.48.62h3.8c.56,0,1.09-.22,1.48-.62.39-.39.61-.93.62-1.48v-3.8c0-.56-.22-1.09-.61-1.48-.39-.39-.93-.61-1.48-.61Zm.1,2.1v3.8s-.01.05-.03.07c-.02.02-.04.03-.07.03h-3.8s-.05-.01-.07-.03c-.02-.02-.03-.04-.03-.07v-3.8s0-.05,0-.07h3.87s.03,0,.04,0c.01,0,.03,0,.04.01.01,0,.02.02.03.03,0,.01.01.02.02.04Z"/>',
-      }}
-    />
-  )
+export const RotateImage = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="RotateImage"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m3,12.99c.26,0,.51-.11.7-.29.18-.19.29-.44.29-.71,0-1.63.5-3.22,1.43-4.57.93-1.34,2.25-2.36,3.78-2.93,1.53-.57,3.19-.65,4.77-.25,1.58.41,2.99,1.29,4.06,2.53l-1.27-.26c-.13-.03-.27-.04-.4-.02-.13.02-.26.07-.37.14-.11.07-.21.17-.29.28-.08.11-.13.24-.15.37-.03.13-.03.27,0,.4.03.13.08.26.16.37.08.11.18.2.29.27.11.07.24.12.38.14l3.67.75c.14.03.29.02.44-.01.14-.04.28-.1.39-.2.18-.15.3-.35.35-.57l.75-3.67c.03-.13.04-.27.02-.4s-.07-.26-.14-.37c-.07-.11-.17-.21-.28-.29-.11-.08-.24-.13-.37-.15-.13-.03-.27-.03-.4,0-.13.03-.26.08-.37.16-.11.07-.2.17-.27.28-.07.11-.12.24-.14.37l-.27,1.32c-.96-1.19-2.19-2.14-3.58-2.78-1.39-.64-2.91-.95-4.44-.91-1.53.04-3.03.43-4.38,1.15-1.35.71-2.53,1.73-3.43,2.96-1.24,1.71-1.91,3.77-1.91,5.88,0,.26.11.52.29.71.18.18.43.29.69.29Zm18.67-1.7c-.19-.18-.44-.29-.7-.29s-.52.1-.7.29c-.09.09-.17.2-.22.32-.05.12-.07.25-.07.38,0,1.63-.49,3.23-1.42,4.57-.93,1.34-2.25,2.37-3.78,2.93-1.53.57-3.2.65-4.78.24-1.58-.41-2.99-1.3-4.05-2.54l1.26.26c.13.03.27.04.4.02.13-.02.26-.07.37-.14.11-.07.21-.17.29-.28.08-.11.13-.24.16-.37.03-.13.03-.27,0-.4-.03-.13-.08-.26-.16-.37-.07-.11-.17-.2-.28-.27-.11-.07-.24-.12-.37-.14l-3.67-.75c-.13-.03-.26-.03-.39,0-.13.02-.25.07-.36.15-.11.07-.2.16-.28.27s-.13.23-.15.36l-.75,3.68c-.03.13-.03.26,0,.39s.07.25.15.36c.15.22.38.37.64.42.14.03.29.03.44,0,.14-.04.28-.1.39-.2.18-.14.31-.35.35-.57l.27-1.31c.94,1.15,2.12,2.08,3.46,2.72,1.34.64,2.81.97,4.29.98,1.58,0,3.13-.39,4.53-1.11,1.4-.72,2.62-1.76,3.55-3.04,1.24-1.71,1.91-3.77,1.91-5.88,0-.26-.12-.5-.31-.68Z"/><path d="m13.88,8h-3.8c-.56,0-1.09.22-1.48.61-.39.39-.61.93-.61,1.48v3.8c0,.56.22,1.09.62,1.48.39.39.92.62,1.48.62h3.8c.56,0,1.09-.22,1.48-.62.39-.39.61-.93.62-1.48v-3.8c0-.56-.22-1.09-.61-1.48-.39-.39-.93-.61-1.48-.61Zm.1,2.1v3.8s-.01.05-.03.07c-.02.02-.04.03-.07.03h-3.8s-.05-.01-.07-.03c-.02-.02-.03-.04-.03-.07v-3.8s0-.05,0-.07h3.87s.03,0,.04,0c.01,0,.03,0,.04.01.01,0,.02.02.03.03,0,.01.01.02.02.04Z"/>',
+    }}
+  />
 )
 
 RotateImage.displayName = 'RotateImage'
diff --git a/packages/components/icons/src/icons/Scan.tsx b/packages/components/icons/src/icons/Scan.tsx
index 48e684d25..9c2f2dde5 100644
--- a/packages/components/icons/src/icons/Scan.tsx
+++ b/packages/components/icons/src/icons/Scan.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Scan = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Scan"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m2.69,2.69c.44-.44,1.04-.69,1.67-.69h2.08c.54,0,.98.44.98.98s-.44.98-.98.98h-2.08c-.11,0-.21.04-.29.12-.08.08-.12.18-.12.29v2.08c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-2.08c0-.63.25-1.23.69-1.67Zm13.89.28c0-.54.44-.98.98-.98h2.08c.63,0,1.23.25,1.67.69.44.44.69,1.04.69,1.67v2.08c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-2.08c0-.11-.04-.21-.12-.29-.08-.08-.18-.12-.29-.12h-2.08c-.54,0-.98-.44-.98-.98ZM2.98,16.58c.54,0,.98.44.98.98v2.08c0,.11.04.21.12.29.08.08.18.12.29.12h2.08c.54,0,.98.44.98.98s-.44.98-.98.98h-2.08c-.63,0-1.23-.25-1.67-.69-.44-.44-.69-1.04-.69-1.67v-2.08c0-.54.44-.98.98-.98Zm18.05,0c.54,0,.98.44.98.98v2.08c0,.63-.25,1.23-.69,1.67-.44.44-1.04.69-1.67.69h-2.08c-.54,0-.98-.44-.98-.98s.44-.98.98-.98h2.08c.11,0,.21-.04.29-.12.08-.08.12-.18.12-.29v-2.08c0-.54.44-.98.98-.98ZM6.33,6.17c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm2.43,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm3.24,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm3.24,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm2.43,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm-12.31,10.69c0-.54.44-.98.98-.98h11.34c.54,0,.98.44.98.98s-.44.98-.98.98H6.33c-.54,0-.98-.44-.98-.98Z"/>',
-      }}
-    />
-  )
+export const Scan = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Scan"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m2.69,2.69c.44-.44,1.04-.69,1.67-.69h2.08c.54,0,.98.44.98.98s-.44.98-.98.98h-2.08c-.11,0-.21.04-.29.12-.08.08-.12.18-.12.29v2.08c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-2.08c0-.63.25-1.23.69-1.67Zm13.89.28c0-.54.44-.98.98-.98h2.08c.63,0,1.23.25,1.67.69.44.44.69,1.04.69,1.67v2.08c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-2.08c0-.11-.04-.21-.12-.29-.08-.08-.18-.12-.29-.12h-2.08c-.54,0-.98-.44-.98-.98ZM2.98,16.58c.54,0,.98.44.98.98v2.08c0,.11.04.21.12.29.08.08.18.12.29.12h2.08c.54,0,.98.44.98.98s-.44.98-.98.98h-2.08c-.63,0-1.23-.25-1.67-.69-.44-.44-.69-1.04-.69-1.67v-2.08c0-.54.44-.98.98-.98Zm18.05,0c.54,0,.98.44.98.98v2.08c0,.63-.25,1.23-.69,1.67-.44.44-1.04.69-1.67.69h-2.08c-.54,0-.98-.44-.98-.98s.44-.98.98-.98h2.08c.11,0,.21-.04.29-.12.08-.08.12-.18.12-.29v-2.08c0-.54.44-.98.98-.98ZM6.33,6.17c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm2.43,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm3.24,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm3.24,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm2.43,0c.54,0,.98.44.98.98v7.29c0,.54-.44.98-.98.98s-.98-.44-.98-.98v-7.29c0-.54.44-.98.98-.98Zm-12.31,10.69c0-.54.44-.98.98-.98h11.34c.54,0,.98.44.98.98s-.44.98-.98.98H6.33c-.54,0-.98-.44-.98-.98Z"/>',
+    }}
+  />
 )
 
 Scan.displayName = 'Scan'
diff --git a/packages/components/icons/src/icons/Search.tsx b/packages/components/icons/src/icons/Search.tsx
index a27481450..2d1f88d44 100644
--- a/packages/components/icons/src/icons/Search.tsx
+++ b/packages/components/icons/src/icons/Search.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const Search = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="Search"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m10.5,3.95c-3.62,0-6.55,2.93-6.55,6.55s2.93,6.55,6.55,6.55,6.55-2.93,6.55-6.55-2.93-6.55-6.55-6.55ZM2,10.5C2,5.81,5.81,2,10.5,2s8.5,3.81,8.5,8.5-3.81,8.5-8.5,8.5S2,15.2,2,10.5Z"/><path fill-rule="evenodd" d="m15.13,15.13c.38-.38,1-.38,1.38,0l5.21,5.21c.38.38.38,1,0,1.38-.38.38-1,.38-1.38,0l-5.21-5.21c-.38-.38-.38-1,0-1.38Z"/>',
-      }}
-    />
-  )
+export const Search = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="Search"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m10.5,3.95c-3.62,0-6.55,2.93-6.55,6.55s2.93,6.55,6.55,6.55,6.55-2.93,6.55-6.55-2.93-6.55-6.55-6.55ZM2,10.5C2,5.81,5.81,2,10.5,2s8.5,3.81,8.5,8.5-3.81,8.5-8.5,8.5S2,15.2,2,10.5Z"/><path fill-rule="evenodd" d="m15.13,15.13c.38-.38,1-.38,1.38,0l5.21,5.21c.38.38.38,1,0,1.38-.38.38-1,.38-1.38,0l-5.21-5.21c-.38-.38-.38-1,0-1.38Z"/>',
+    }}
+  />
 )
 
 Search.displayName = 'Search'
diff --git a/packages/components/icons/src/icons/SendFill.tsx b/packages/components/icons/src/icons/SendFill.tsx
index 88ac341e5..73022c696 100644
--- a/packages/components/icons/src/icons/SendFill.tsx
+++ b/packages/components/icons/src/icons/SendFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const SendFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="SendFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="M5.53 11.17h16.47c-.08-.17-.17-.33-.25-.5-.25-.42-.59-.67-1.01-.92L4.86 2.33c-.25-.17-.67-.33-1.09-.33s-.92.17-1.26.5c-.34.33-.5.75-.5 1.25 0 .33.17.75.42 1l3.11 6.42ZM2.42 19.25c-.25.33-.34.67-.34 1.08s.17.92.5 1.25c.34.25.76.42 1.26.42.42 0 .76-.17 1.09-.33l15.8-7.5c.42-.17.76-.5 1.01-.92.08-.17.17-.25.25-.42H5.53l-3.11 6.42Z"/>',
-      }}
-    />
-  )
+export const SendFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="SendFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="M5.53 11.17h16.47c-.08-.17-.17-.33-.25-.5-.25-.42-.59-.67-1.01-.92L4.86 2.33c-.25-.17-.67-.33-1.09-.33s-.92.17-1.26.5c-.34.33-.5.75-.5 1.25 0 .33.17.75.42 1l3.11 6.42ZM2.42 19.25c-.25.33-.34.67-.34 1.08s.17.92.5 1.25c.34.25.76.42 1.26.42.42 0 .76-.17 1.09-.33l15.8-7.5c.42-.17.76-.5 1.01-.92.08-.17.17-.25.25-.42H5.53l-3.11 6.42Z"/>',
+    }}
+  />
 )
 
 SendFill.displayName = 'SendFill'
diff --git a/packages/components/icons/src/icons/SendOutline.tsx b/packages/components/icons/src/icons/SendOutline.tsx
index 56cb3e91c..ecfd9f5e0 100644
--- a/packages/components/icons/src/icons/SendOutline.tsx
+++ b/packages/components/icons/src/icons/SendOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const SendOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="SendOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.6,14.17c.42-.2.77-.51,1.02-.9.25-.39.38-.83.38-1.29s-.13-.9-.38-1.29c-.25-.39-.6-.7-1.02-.9L4.85,2.37c-.31-.24-.69-.37-1.09-.37-.47,0-.92.18-1.25.5-.33.32-.52.76-.52,1.21,0,.39.13.76.38,1.06l3.53,7.21-3.47,7.24c-.24.3-.37.67-.37,1.06,0,.46.19.89.52,1.22.33.32.78.5,1.25.5.4,0,.78-.13,1.09-.37l15.68-7.47h0Zm-2.48-3.31L4.48,4.42l3.16,6.44h10.49Zm-10.37,2l-3.23,6.72,14.13-6.72H7.76Z"/>',
-      }}
-    />
-  )
+export const SendOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="SendOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.6,14.17c.42-.2.77-.51,1.02-.9.25-.39.38-.83.38-1.29s-.13-.9-.38-1.29c-.25-.39-.6-.7-1.02-.9L4.85,2.37c-.31-.24-.69-.37-1.09-.37-.47,0-.92.18-1.25.5-.33.32-.52.76-.52,1.21,0,.39.13.76.38,1.06l3.53,7.21-3.47,7.24c-.24.3-.37.67-.37,1.06,0,.46.19.89.52,1.22.33.32.78.5,1.25.5.4,0,.78-.13,1.09-.37l15.68-7.47h0Zm-2.48-3.31L4.48,4.42l3.16,6.44h10.49Zm-10.37,2l-3.23,6.72,14.13-6.72H7.76Z"/>',
+    }}
+  />
 )
 
 SendOutline.displayName = 'SendOutline'
diff --git a/packages/components/icons/src/icons/ShareExpand.tsx b/packages/components/icons/src/icons/ShareExpand.tsx
index 14b166340..0bf23853d 100644
--- a/packages/components/icons/src/icons/ShareExpand.tsx
+++ b/packages/components/icons/src/icons/ShareExpand.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ShareExpand = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ShareExpand"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21,12.39c-.55,0-1,.45-1,1v6.23c0,.1-.04.2-.12.27s-.17.12-.28.12H4.38c-.1,0-.2-.04-.28-.12-.07-.07-.12-.17-.12-.27V4.39c0-.1.04-.2.12-.28s.17-.12.28-.12h6.23c.55,0,1-.45,1-1s-.45-1-1-1h-6.23c-.63,0-1.24.25-1.68.7-.45.45-.7,1.05-.7,1.68v15.23c0,.63.25,1.24.7,1.68.45.45,1.05.7,1.68.7h15.23c.63,0,1.24-.25,1.68-.7.45-.45.7-1.05.7-1.68v-6.23c0-.55-.45-1-1-1h0Z"/><path fill-rule="evenodd" d="m21.92,2.62c-.1-.24-.3-.44-.54-.54-.12-.05-.25-.07-.38-.07h-4.85c-.55,0-1,.45-1,1s.45,1,1,1h2.43l-7.29,7.29c-.39.39-.39,1.02,0,1.42.39.39,1.02.39,1.42,0l7.29-7.29v2.43c0,.55.45,1,1,1s1-.45,1-1V3.01c0-.13-.02-.26-.08-.38Z"/>',
-      }}
-    />
-  )
+export const ShareExpand = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ShareExpand"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21,12.39c-.55,0-1,.45-1,1v6.23c0,.1-.04.2-.12.27s-.17.12-.28.12H4.38c-.1,0-.2-.04-.28-.12-.07-.07-.12-.17-.12-.27V4.39c0-.1.04-.2.12-.28s.17-.12.28-.12h6.23c.55,0,1-.45,1-1s-.45-1-1-1h-6.23c-.63,0-1.24.25-1.68.7-.45.45-.7,1.05-.7,1.68v15.23c0,.63.25,1.24.7,1.68.45.45,1.05.7,1.68.7h15.23c.63,0,1.24-.25,1.68-.7.45-.45.7-1.05.7-1.68v-6.23c0-.55-.45-1-1-1h0Z"/><path fill-rule="evenodd" d="m21.92,2.62c-.1-.24-.3-.44-.54-.54-.12-.05-.25-.07-.38-.07h-4.85c-.55,0-1,.45-1,1s.45,1,1,1h2.43l-7.29,7.29c-.39.39-.39,1.02,0,1.42.39.39,1.02.39,1.42,0l7.29-7.29v2.43c0,.55.45,1,1,1s1-.45,1-1V3.01c0-.13-.02-.26-.08-.38Z"/>',
+    }}
+  />
 )
 
 ShareExpand.displayName = 'ShareExpand'
diff --git a/packages/components/icons/src/icons/ShareFill.tsx b/packages/components/icons/src/icons/ShareFill.tsx
index cf7f01df8..7d138ef6e 100644
--- a/packages/components/icons/src/icons/ShareFill.tsx
+++ b/packages/components/icons/src/icons/ShareFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ShareFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ShareFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m18.23,2c-2.08,0-3.77,1.69-3.77,3.77v.03s-6.92,2.87-6.92,2.87c-.53-.28-1.13-.44-1.78-.44-2.08,0-3.77,1.69-3.77,3.77s1.69,3.77,3.77,3.77c.64,0,1.25-.16,1.78-.44l6.92,2.87s0,.02,0,.03c0,2.08,1.69,3.77,3.77,3.77s3.77-1.69,3.77-3.77-1.69-3.77-3.77-3.77c-1.36,0-2.55.72-3.22,1.8l-5.93-2.46c.29-.53.46-1.15.46-1.8s-.17-1.26-.46-1.8l5.93-2.46c.66,1.08,1.86,1.8,3.22,1.8,2.08,0,3.77-1.69,3.77-3.77s-1.69-3.77-3.77-3.77Z"/>',
-      }}
-    />
-  )
+export const ShareFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ShareFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m18.23,2c-2.08,0-3.77,1.69-3.77,3.77v.03s-6.92,2.87-6.92,2.87c-.53-.28-1.13-.44-1.78-.44-2.08,0-3.77,1.69-3.77,3.77s1.69,3.77,3.77,3.77c.64,0,1.25-.16,1.78-.44l6.92,2.87s0,.02,0,.03c0,2.08,1.69,3.77,3.77,3.77s3.77-1.69,3.77-3.77-1.69-3.77-3.77-3.77c-1.36,0-2.55.72-3.22,1.8l-5.93-2.46c.29-.53.46-1.15.46-1.8s-.17-1.26-.46-1.8l5.93-2.46c.66,1.08,1.86,1.8,3.22,1.8,2.08,0,3.77-1.69,3.77-3.77s-1.69-3.77-3.77-3.77Z"/>',
+    }}
+  />
 )
 
 ShareFill.displayName = 'ShareFill'
diff --git a/packages/components/icons/src/icons/ShareOutline.tsx b/packages/components/icons/src/icons/ShareOutline.tsx
index e63f96b6c..ce9dfa9c0 100644
--- a/packages/components/icons/src/icons/ShareOutline.tsx
+++ b/packages/components/icons/src/icons/ShareOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ShareOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ShareOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m14.46,5.77v.03s-6.92,2.87-6.92,2.87c-.53-.28-1.13-.44-1.78-.44-2.08,0-3.77,1.69-3.77,3.77s1.69,3.77,3.77,3.77c.64,0,1.25-.16,1.78-.44l6.92,2.87s0,.02,0,.03c0,2.08,1.69,3.77,3.77,3.77s3.77-1.69,3.77-3.77-1.69-3.77-3.77-3.77c-1.36,0-2.55.72-3.22,1.8l-5.93-2.46c.29-.53.46-1.15.46-1.8s-.17-1.26-.46-1.8l5.93-2.46c.66,1.08,1.86,1.8,3.22,1.8,2.08,0,3.77-1.69,3.77-3.77s-1.69-3.77-3.77-3.77-3.77,1.69-3.77,3.77Zm3.77-1.77c-.98,0-1.77.79-1.77,1.77,0,.13.01.25.04.37.01.04.02.08.03.12.21.74.89,1.28,1.7,1.28.98,0,1.77-.79,1.77-1.77s-.79-1.77-1.77-1.77ZM6.89,13.37c.4-.32.65-.82.65-1.37s-.25-1.05-.65-1.37c-.03-.02-.07-.05-.1-.07-.29-.2-.64-.32-1.02-.32-.98,0-1.77.79-1.77,1.77s.79,1.77,1.77,1.77c.38,0,.73-.12,1.02-.32.03-.03.06-.05.1-.07Zm9.61,4.49s.02-.08.03-.12c.21-.74.89-1.28,1.7-1.28.98,0,1.77.79,1.77,1.77s-.79,1.77-1.77,1.77-1.77-.79-1.77-1.77c0-.13.01-.25.04-.37Z"/>',
-      }}
-    />
-  )
+export const ShareOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ShareOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m14.46,5.77v.03s-6.92,2.87-6.92,2.87c-.53-.28-1.13-.44-1.78-.44-2.08,0-3.77,1.69-3.77,3.77s1.69,3.77,3.77,3.77c.64,0,1.25-.16,1.78-.44l6.92,2.87s0,.02,0,.03c0,2.08,1.69,3.77,3.77,3.77s3.77-1.69,3.77-3.77-1.69-3.77-3.77-3.77c-1.36,0-2.55.72-3.22,1.8l-5.93-2.46c.29-.53.46-1.15.46-1.8s-.17-1.26-.46-1.8l5.93-2.46c.66,1.08,1.86,1.8,3.22,1.8,2.08,0,3.77-1.69,3.77-3.77s-1.69-3.77-3.77-3.77-3.77,1.69-3.77,3.77Zm3.77-1.77c-.98,0-1.77.79-1.77,1.77,0,.13.01.25.04.37.01.04.02.08.03.12.21.74.89,1.28,1.7,1.28.98,0,1.77-.79,1.77-1.77s-.79-1.77-1.77-1.77ZM6.89,13.37c.4-.32.65-.82.65-1.37s-.25-1.05-.65-1.37c-.03-.02-.07-.05-.1-.07-.29-.2-.64-.32-1.02-.32-.98,0-1.77.79-1.77,1.77s.79,1.77,1.77,1.77c.38,0,.73-.12,1.02-.32.03-.03.06-.05.1-.07Zm9.61,4.49s.02-.08.03-.12c.21-.74.89-1.28,1.7-1.28.98,0,1.77.79,1.77,1.77s-.79,1.77-1.77,1.77-1.77-.79-1.77-1.77c0-.13.01-.25.04-.37Z"/>',
+    }}
+  />
 )
 
 ShareOutline.displayName = 'ShareOutline'
diff --git a/packages/components/icons/src/icons/ShareiOs.tsx b/packages/components/icons/src/icons/ShareiOs.tsx
index be8f7e1cf..96e7b38a2 100644
--- a/packages/components/icons/src/icons/ShareiOs.tsx
+++ b/packages/components/icons/src/icons/ShareiOs.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ShareiOs = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ShareiOS"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m10.98,5.41v7.28c0,.55.46,1,1.02,1s1.02-.45,1.02-1v-7.28l1.08,1.06c.4.39,1.04.39,1.44,0,.4-.39.4-1.02,0-1.41l-2.83-2.77c-.13-.12-.28-.21-.44-.25-.09-.03-.18-.04-.28-.04-.29,0-.55.12-.74.31l-2.81,2.76c-.4.39-.4,1.02,0,1.41.4.39,1.04.39,1.44,0l1.08-1.06Z"/><path d="m4.87,9.9h1.42c.56,0,1.02-.45,1.02-1s-.46-1-1.02-1h-1.63c-.45,0-.9.16-1.26.46-.35.31-.58.76-.58,1.25v10.68c0,.49.23.94.58,1.25.35.31.8.46,1.26.46h14.66c.45,0,.9-.16,1.26-.46.35-.31.58-.76.58-1.25v-10.68c0-.49-.23-.94-.58-1.25-.35-.31-.8-.46-1.26-.46h-1.63c-.56,0-1.02.45-1.02,1s.46,1,1.02,1h1.42v10.1H4.87v-10.1Z"/>',
-      }}
-    />
-  )
+export const ShareiOs = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ShareiOS"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m10.98,5.41v7.28c0,.55.46,1,1.02,1s1.02-.45,1.02-1v-7.28l1.08,1.06c.4.39,1.04.39,1.44,0,.4-.39.4-1.02,0-1.41l-2.83-2.77c-.13-.12-.28-.21-.44-.25-.09-.03-.18-.04-.28-.04-.29,0-.55.12-.74.31l-2.81,2.76c-.4.39-.4,1.02,0,1.41.4.39,1.04.39,1.44,0l1.08-1.06Z"/><path d="m4.87,9.9h1.42c.56,0,1.02-.45,1.02-1s-.46-1-1.02-1h-1.63c-.45,0-.9.16-1.26.46-.35.31-.58.76-.58,1.25v10.68c0,.49.23.94.58,1.25.35.31.8.46,1.26.46h14.66c.45,0,.9-.16,1.26-.46.35-.31.58-.76.58-1.25v-10.68c0-.49-.23-.94-.58-1.25-.35-.31-.8-.46-1.26-.46h-1.63c-.56,0-1.02.45-1.02,1s.46,1,1.02,1h1.42v10.1H4.87v-10.1Z"/>',
+    }}
+  />
 )
 
 ShareiOs.displayName = 'ShareiOs'
diff --git a/packages/components/icons/src/icons/StarFill.tsx b/packages/components/icons/src/icons/StarFill.tsx
index 073192b20..07682b08e 100644
--- a/packages/components/icons/src/icons/StarFill.tsx
+++ b/packages/components/icons/src/icons/StarFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const StarFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="StarFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m11.04,2.25c-.25.17-.5.42-.67.75l-2.08,4.58-4.74.67c-.33,0-.58.17-.91.33-.25.25-.5.5-.58.83-.08.42-.08.75,0,1.08.08.33.25.67.5.92l3.49,3.49-.83,4.99c-.08.33,0,.67.08,1,.08.33.33.58.58.75.25.17.58.33.91.33s.67-.08.91-.17l4.32-2.33,4.32,2.33c.25.17.58.25.91.17.33,0,.67-.17.91-.33.25-.17.5-.5.58-.75.08-.33.17-.67.08-1l-.83-4.99,3.41-3.58c.25-.25.42-.5.5-.83.08-.33.08-.67,0-1-.08-.33-.25-.58-.5-.83-.25-.25-.58-.33-.83-.42l-4.74-.75-2.16-4.49c-.17-.33-.33-.58-.67-.75-.25-.17-.5-.25-.75-.25h-.33c-.42.08-.67.17-.91.25Z"/>',
-      }}
-    />
-  )
+export const StarFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="StarFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m11.04,2.25c-.25.17-.5.42-.67.75l-2.08,4.58-4.74.67c-.33,0-.58.17-.91.33-.25.25-.5.5-.58.83-.08.42-.08.75,0,1.08.08.33.25.67.5.92l3.49,3.49-.83,4.99c-.08.33,0,.67.08,1,.08.33.33.58.58.75.25.17.58.33.91.33s.67-.08.91-.17l4.32-2.33,4.32,2.33c.25.17.58.25.91.17.33,0,.67-.17.91-.33.25-.17.5-.5.58-.75.08-.33.17-.67.08-1l-.83-4.99,3.41-3.58c.25-.25.42-.5.5-.83.08-.33.08-.67,0-1-.08-.33-.25-.58-.5-.83-.25-.25-.58-.33-.83-.42l-4.74-.75-2.16-4.49c-.17-.33-.33-.58-.67-.75-.25-.17-.5-.25-.75-.25h-.33c-.42.08-.67.17-.91.25Z"/>',
+    }}
+  />
 )
 
 StarFill.displayName = 'StarFill'
diff --git a/packages/components/icons/src/icons/StarOutline.tsx b/packages/components/icons/src/icons/StarOutline.tsx
index 96a107ab3..297152a04 100644
--- a/packages/components/icons/src/icons/StarOutline.tsx
+++ b/packages/components/icons/src/icons/StarOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const StarOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="StarOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12.02,4.31l-2.01,4.22c-.12.27-.3.5-.53.68-.23.18-.5.29-.79.32l-4.47.69,3.24,3.24c.21.2.36.45.45.73.09.28.11.58.06.87h0s-.78,4.73-.78,4.73l4.03-2.21s.02,0,.03-.01c.25-.13.52-.19.79-.19s.55.07.79.19c0,0,.02,0,.03.01l4.02,2.21-.78-4.66h0c-.05-.29-.03-.59.06-.87.09-.28.24-.52.44-.72l3.21-3.31-4.45-.68c-.28-.04-.56-.15-.79-.32-.23-.18-.41-.41-.53-.68l-2.01-4.22Zm4.91,15.92h0s0,0,0,0ZM11.09,2.28c.28-.18.6-.28.93-.28s.65.1.93.28c.27.18.49.44.63.74l2.16,4.53,4.77.73c.32.05.62.18.87.4.25.22.44.5.54.83.1.32.11.67.03,1-.08.32-.25.62-.48.85l-3.44,3.55.83,4.98c.06.33.02.68-.1.99-.12.31-.33.58-.59.78s-.58.32-.9.34c-.32.02-.65-.05-.94-.21h0s-4.3-2.36-4.3-2.36l-4.3,2.36h0c-.29.16-.61.23-.94.21-.32-.02-.64-.14-.9-.34s-.47-.47-.59-.78c-.12-.31-.16-.65-.1-.99h0s.83-5.04.83-5.04l-3.48-3.49c-.24-.24-.41-.54-.49-.88-.08-.34-.06-.69.05-1.02.11-.33.31-.61.58-.82.25-.2.56-.33.88-.36l4.75-.73,2.16-4.53c.14-.3.36-.56.63-.74Z"/>',
-      }}
-    />
-  )
+export const StarOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="StarOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12.02,4.31l-2.01,4.22c-.12.27-.3.5-.53.68-.23.18-.5.29-.79.32l-4.47.69,3.24,3.24c.21.2.36.45.45.73.09.28.11.58.06.87h0s-.78,4.73-.78,4.73l4.03-2.21s.02,0,.03-.01c.25-.13.52-.19.79-.19s.55.07.79.19c0,0,.02,0,.03.01l4.02,2.21-.78-4.66h0c-.05-.29-.03-.59.06-.87.09-.28.24-.52.44-.72l3.21-3.31-4.45-.68c-.28-.04-.56-.15-.79-.32-.23-.18-.41-.41-.53-.68l-2.01-4.22Zm4.91,15.92h0s0,0,0,0ZM11.09,2.28c.28-.18.6-.28.93-.28s.65.1.93.28c.27.18.49.44.63.74l2.16,4.53,4.77.73c.32.05.62.18.87.4.25.22.44.5.54.83.1.32.11.67.03,1-.08.32-.25.62-.48.85l-3.44,3.55.83,4.98c.06.33.02.68-.1.99-.12.31-.33.58-.59.78s-.58.32-.9.34c-.32.02-.65-.05-.94-.21h0s-4.3-2.36-4.3-2.36l-4.3,2.36h0c-.29.16-.61.23-.94.21-.32-.02-.64-.14-.9-.34s-.47-.47-.59-.78c-.12-.31-.16-.65-.1-.99h0s.83-5.04.83-5.04l-3.48-3.49c-.24-.24-.41-.54-.49-.88-.08-.34-.06-.69.05-1.02.11-.33.31-.61.58-.82.25-.2.56-.33.88-.36l4.75-.73,2.16-4.53c.14-.3.36-.56.63-.74Z"/>',
+    }}
+  />
 )
 
 StarOutline.displayName = 'StarOutline'
diff --git a/packages/components/icons/src/icons/TrashCloseFill.tsx b/packages/components/icons/src/icons/TrashCloseFill.tsx
index ba1f47766..8a1171e57 100644
--- a/packages/components/icons/src/icons/TrashCloseFill.tsx
+++ b/packages/components/icons/src/icons/TrashCloseFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TrashCloseFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TrashCloseFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m19.9,6.15h-3.76c-.08-1.06-.47-2.11-1.25-2.85-.78-.81-1.88-1.3-3.05-1.3s-2.19.49-3.05,1.3c-.63.81-1.1,1.79-1.1,2.85h-3.76c-.55,0-.94.49-.94.98s.39.98.94.98h1.1v11.54c0,.65.23,1.22.7,1.71.31.41.86.65,1.49.65h9.39c.63,0,1.17-.24,1.64-.73.39-.41.7-1.06.7-1.71v-11.46h1.1c.55,0,.94-.41.94-.98s-.55-.98-1.1-.98Zm-9.7-1.46c.94-.98,2.5-.98,3.37,0,.39.41.63.89.7,1.46h-4.7c0-.57.23-1.06.63-1.46Zm4.77,11.54c.39.41.39.98,0,1.38-.16.16-.39.33-.63.33s-.47-.08-.63-.33l-1.72-1.79-1.72,1.79c-.16.16-.39.33-.63.33s-.47-.08-.63-.33c-.39-.41-.39-.98,0-1.38l1.72-1.79-1.72-1.79c-.39-.41-.39-.98,0-1.38.39-.41.94-.41,1.33,0l1.72,1.79,1.72-1.79c.39-.41.94-.41,1.33,0,.39.41.39.98,0,1.38l-1.88,1.79,1.72,1.79Z"/>',
-      }}
-    />
-  )
+export const TrashCloseFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TrashCloseFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m19.9,6.15h-3.76c-.08-1.06-.47-2.11-1.25-2.85-.78-.81-1.88-1.3-3.05-1.3s-2.19.49-3.05,1.3c-.63.81-1.1,1.79-1.1,2.85h-3.76c-.55,0-.94.49-.94.98s.39.98.94.98h1.1v11.54c0,.65.23,1.22.7,1.71.31.41.86.65,1.49.65h9.39c.63,0,1.17-.24,1.64-.73.39-.41.7-1.06.7-1.71v-11.46h1.1c.55,0,.94-.41.94-.98s-.55-.98-1.1-.98Zm-9.7-1.46c.94-.98,2.5-.98,3.37,0,.39.41.63.89.7,1.46h-4.7c0-.57.23-1.06.63-1.46Zm4.77,11.54c.39.41.39.98,0,1.38-.16.16-.39.33-.63.33s-.47-.08-.63-.33l-1.72-1.79-1.72,1.79c-.16.16-.39.33-.63.33s-.47-.08-.63-.33c-.39-.41-.39-.98,0-1.38l1.72-1.79-1.72-1.79c-.39-.41-.39-.98,0-1.38.39-.41.94-.41,1.33,0l1.72,1.79,1.72-1.79c.39-.41.94-.41,1.33,0,.39.41.39.98,0,1.38l-1.88,1.79,1.72,1.79Z"/>',
+    }}
+  />
 )
 
 TrashCloseFill.displayName = 'TrashCloseFill'
diff --git a/packages/components/icons/src/icons/TrashCloseOutline.tsx b/packages/components/icons/src/icons/TrashCloseOutline.tsx
index dc453021e..18bfebf13 100644
--- a/packages/components/icons/src/icons/TrashCloseOutline.tsx
+++ b/packages/components/icons/src/icons/TrashCloseOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TrashCloseOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TrashCloseOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.11,6.17h-3.79c-.08-1.08-.48-2.08-1.21-2.83-.81-.83-1.94-1.33-3.07-1.33s-2.26.5-3.07,1.33c-.73.75-1.21,1.75-1.21,2.83h-3.79c-.57,0-.97.42-.97,1,0,.5.4,1,.97,1h1.05v11.5c0,.67.24,1.25.65,1.67.4.42,1.05.67,1.61.67h9.44c.65,0,1.21-.25,1.61-.67.4-.42.65-1.08.65-1.67v-11.58h1.05c.48,0,.97-.42.97-1,0-.5-.4-.92-.89-.92Zm-9.85-1.5c.48-.5,1.05-.75,1.7-.75s1.29.25,1.7.75c.4.42.65.92.65,1.5h-4.68c.08-.58.32-1.08.65-1.5Zm6.86,15c0,.08-.08.25-.08.33-.08.08-.16.08-.32.08H7.28c-.08,0-.24-.08-.32-.08-.08-.08-.08-.17-.08-.33v-11.58h10.25v11.58Z"/><path fill-rule="evenodd" d="m15.11,11.33c-.4-.42-.97-.42-1.37,0l-1.7,1.75-1.7-1.75c-.4-.42-.97-.42-1.37,0-.4.42-.4,1,0,1.42l1.7,1.75-1.7,1.75c-.4.42-.4,1,0,1.42.4.42.97.42,1.37,0l1.7-1.75,1.7,1.75c.4.42.97.42,1.37,0,.4-.42.4-1,0-1.42l-1.7-1.75,1.7-1.75c.32-.42.32-1.08,0-1.42Z"/>',
-      }}
-    />
-  )
+export const TrashCloseOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TrashCloseOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.11,6.17h-3.79c-.08-1.08-.48-2.08-1.21-2.83-.81-.83-1.94-1.33-3.07-1.33s-2.26.5-3.07,1.33c-.73.75-1.21,1.75-1.21,2.83h-3.79c-.57,0-.97.42-.97,1,0,.5.4,1,.97,1h1.05v11.5c0,.67.24,1.25.65,1.67.4.42,1.05.67,1.61.67h9.44c.65,0,1.21-.25,1.61-.67.4-.42.65-1.08.65-1.67v-11.58h1.05c.48,0,.97-.42.97-1,0-.5-.4-.92-.89-.92Zm-9.85-1.5c.48-.5,1.05-.75,1.7-.75s1.29.25,1.7.75c.4.42.65.92.65,1.5h-4.68c.08-.58.32-1.08.65-1.5Zm6.86,15c0,.08-.08.25-.08.33-.08.08-.16.08-.32.08H7.28c-.08,0-.24-.08-.32-.08-.08-.08-.08-.17-.08-.33v-11.58h10.25v11.58Z"/><path fill-rule="evenodd" d="m15.11,11.33c-.4-.42-.97-.42-1.37,0l-1.7,1.75-1.7-1.75c-.4-.42-.97-.42-1.37,0-.4.42-.4,1,0,1.42l1.7,1.75-1.7,1.75c-.4.42-.4,1,0,1.42.4.42.97.42,1.37,0l1.7-1.75,1.7,1.75c.4.42.97.42,1.37,0,.4-.42.4-1,0-1.42l-1.7-1.75,1.7-1.75c.32-.42.32-1.08,0-1.42Z"/>',
+    }}
+  />
 )
 
 TrashCloseOutline.displayName = 'TrashCloseOutline'
diff --git a/packages/components/icons/src/icons/TrashFill.tsx b/packages/components/icons/src/icons/TrashFill.tsx
index 54aa88197..266339bd5 100644
--- a/packages/components/icons/src/icons/TrashFill.tsx
+++ b/packages/components/icons/src/icons/TrashFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TrashFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TrashFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m20.2,6.25h-4.1c0-1.17-.48-2.25-1.21-3-.8-.83-1.85-1.25-2.97-1.25s-2.17.42-2.97,1.25c-.8.83-1.21,1.92-1.21,3H3.72c-.4,0-.72.33-.72.75s.32.75.72.75h1.37v12.08c0,.58.24,1.17.64,1.5.32.42.88.67,1.45.67h9.64c.56,0,1.12-.25,1.45-.67.4-.42.64-1,.64-1.5V7.75h1.37c.4,0,.72-.33.72-.75-.08-.42-.4-.75-.8-.75Zm-10.12-2c.48-.5,1.21-.83,1.93-.83s1.45.33,1.93.83c.48.5.8,1.25.8,1.92h-5.46c0-.67.32-1.33.8-1.92Z"/>',
-      }}
-    />
-  )
+export const TrashFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TrashFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m20.2,6.25h-4.1c0-1.17-.48-2.25-1.21-3-.8-.83-1.85-1.25-2.97-1.25s-2.17.42-2.97,1.25c-.8.83-1.21,1.92-1.21,3H3.72c-.4,0-.72.33-.72.75s.32.75.72.75h1.37v12.08c0,.58.24,1.17.64,1.5.32.42.88.67,1.45.67h9.64c.56,0,1.12-.25,1.45-.67.4-.42.64-1,.64-1.5V7.75h1.37c.4,0,.72-.33.72-.75-.08-.42-.4-.75-.8-.75Zm-10.12-2c.48-.5,1.21-.83,1.93-.83s1.45.33,1.93.83c.48.5.8,1.25.8,1.92h-5.46c0-.67.32-1.33.8-1.92Z"/>',
+    }}
+  />
 )
 
 TrashFill.displayName = 'TrashFill'
diff --git a/packages/components/icons/src/icons/TrashOutline.tsx b/packages/components/icons/src/icons/TrashOutline.tsx
index 94bcdd2b6..492632c72 100644
--- a/packages/components/icons/src/icons/TrashOutline.tsx
+++ b/packages/components/icons/src/icons/TrashOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TrashOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TrashOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m19.94,6.17h-3.83c-.08-1.08-.49-2.08-1.22-2.83-.81-.83-1.87-1.33-3.01-1.33s-2.12.5-2.93,1.33c-.73.75-1.14,1.75-1.22,2.83h-3.75c-.57,0-.98.42-.98,1,0,.5.41,1,.98,1h1.06v11.5c0,.67.24,1.25.65,1.67.41.42.98.67,1.63.67h9.37c.57,0,1.22-.25,1.63-.67.41-.42.65-1.08.65-1.67v-11.58h1.06c.49,0,.98-.42.98-1-.08-.5-.49-.92-1.06-.92Zm-9.69-1.5c.49-.5,1.06-.75,1.71-.75s1.22.25,1.71.75c.41.42.65.92.65,1.5h-4.72c.08-.58.24-1.08.65-1.5Zm6.76,15c0,.08-.08.25-.08.33-.08.08-.16.08-.24.08H7.32c-.08,0-.24-.08-.24-.08-.08-.08-.08-.17-.08-.33v-11.58h10.1v11.58h-.08Z"/>',
-      }}
-    />
-  )
+export const TrashOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TrashOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m19.94,6.17h-3.83c-.08-1.08-.49-2.08-1.22-2.83-.81-.83-1.87-1.33-3.01-1.33s-2.12.5-2.93,1.33c-.73.75-1.14,1.75-1.22,2.83h-3.75c-.57,0-.98.42-.98,1,0,.5.41,1,.98,1h1.06v11.5c0,.67.24,1.25.65,1.67.41.42.98.67,1.63.67h9.37c.57,0,1.22-.25,1.63-.67.41-.42.65-1.08.65-1.67v-11.58h1.06c.49,0,.98-.42.98-1-.08-.5-.49-.92-1.06-.92Zm-9.69-1.5c.49-.5,1.06-.75,1.71-.75s1.22.25,1.71.75c.41.42.65.92.65,1.5h-4.72c.08-.58.24-1.08.65-1.5Zm6.76,15c0,.08-.08.25-.08.33-.08.08-.16.08-.24.08H7.32c-.08,0-.24-.08-.24-.08-.08-.08-.08-.17-.08-.33v-11.58h10.1v11.58h-.08Z"/>',
+    }}
+  />
 )
 
 TrashOutline.displayName = 'TrashOutline'
diff --git a/packages/components/icons/src/icons/TypingFill.tsx b/packages/components/icons/src/icons/TypingFill.tsx
index 82882bc3f..c9a0a728e 100644
--- a/packages/components/icons/src/icons/TypingFill.tsx
+++ b/packages/components/icons/src/icons/TypingFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TypingFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TypingFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.9,2H6.02c-2.18,0-4.02,1.83-4.02,3.98v8.96c0,2.24,1.84,3.98,4.1,3.98h10.88l3.85,2.9c.17.08.25.17.42.17.08,0,.25,0,.33-.08.25-.08.42-.33.42-.66V6.07c0-2.24-1.84-4.07-4.1-4.07Zm-4.35,8.22c0,.75-.67,1.41-1.42,1.41s-1.42-.66-1.42-1.41.67-1.41,1.42-1.41,1.42.58,1.42,1.41Zm-4.69,0c0,.75-.67,1.41-1.42,1.41s-1.42-.66-1.42-1.41.67-1.41,1.42-1.41,1.42.58,1.42,1.41Zm7.87-1.41c.75,0,1.42.66,1.42,1.41s-.67,1.41-1.42,1.41-1.42-.66-1.42-1.41.67-1.41,1.42-1.41Z"/>',
-      }}
-    />
-  )
+export const TypingFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TypingFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.9,2H6.02c-2.18,0-4.02,1.83-4.02,3.98v8.96c0,2.24,1.84,3.98,4.1,3.98h10.88l3.85,2.9c.17.08.25.17.42.17.08,0,.25,0,.33-.08.25-.08.42-.33.42-.66V6.07c0-2.24-1.84-4.07-4.1-4.07Zm-4.35,8.22c0,.75-.67,1.41-1.42,1.41s-1.42-.66-1.42-1.41.67-1.41,1.42-1.41,1.42.58,1.42,1.41Zm-4.69,0c0,.75-.67,1.41-1.42,1.41s-1.42-.66-1.42-1.41.67-1.41,1.42-1.41,1.42.58,1.42,1.41Zm7.87-1.41c.75,0,1.42.66,1.42,1.41s-.67,1.41-1.42,1.41-1.42-.66-1.42-1.41.67-1.41,1.42-1.41Z"/>',
+    }}
+  />
 )
 
 TypingFill.displayName = 'TypingFill'
diff --git a/packages/components/icons/src/icons/TypingOutline.tsx b/packages/components/icons/src/icons/TypingOutline.tsx
index f07bed2b0..de0a11d04 100644
--- a/packages/components/icons/src/icons/TypingOutline.tsx
+++ b/packages/components/icons/src/icons/TypingOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const TypingOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="TypingOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.68,8.93c.75,0,1.42.66,1.42,1.41s-.67,1.41-1.42,1.41-1.42-.66-1.42-1.41.67-1.41,1.42-1.41Zm-4.63,2.82c.75,0,1.42-.66,1.42-1.41,0-.83-.67-1.41-1.42-1.41s-1.42.66-1.42,1.41.67,1.41,1.42,1.41Zm-4.57,0c.75,0,1.42-.66,1.42-1.41,0-.83-.67-1.41-1.42-1.41s-1.42.66-1.42,1.41.67,1.41,1.42,1.41Z"/><path fill-rule="evenodd" d="m2,6.13c0-2.31,1.88-4.13,4.18-4.13h11.57c2.35,0,4.25,1.89,4.25,4.23v14.77c0,.38-.21.73-.56.89s-.75.13-1.05-.09l-3.67-2.74H6.26c-2.33,0-4.24-1.87-4.25-4.2-.01-2.55-.02-6.1-.01-8.73Zm4.18-2.13c-1.21,0-2.17.95-2.17,2.13,0,2.62,0,6.17.01,8.71,0,1.22,1,2.21,2.24,2.21h10.79c.22,0,.43.07.6.2l2.33,1.74V6.23c0-1.23-1-2.23-2.24-2.23H6.18Z"/>',
-      }}
-    />
-  )
+export const TypingOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="TypingOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.68,8.93c.75,0,1.42.66,1.42,1.41s-.67,1.41-1.42,1.41-1.42-.66-1.42-1.41.67-1.41,1.42-1.41Zm-4.63,2.82c.75,0,1.42-.66,1.42-1.41,0-.83-.67-1.41-1.42-1.41s-1.42.66-1.42,1.41.67,1.41,1.42,1.41Zm-4.57,0c.75,0,1.42-.66,1.42-1.41,0-.83-.67-1.41-1.42-1.41s-1.42.66-1.42,1.41.67,1.41,1.42,1.41Z"/><path fill-rule="evenodd" d="m2,6.13c0-2.31,1.88-4.13,4.18-4.13h11.57c2.35,0,4.25,1.89,4.25,4.23v14.77c0,.38-.21.73-.56.89s-.75.13-1.05-.09l-3.67-2.74H6.26c-2.33,0-4.24-1.87-4.25-4.2-.01-2.55-.02-6.1-.01-8.73Zm4.18-2.13c-1.21,0-2.17.95-2.17,2.13,0,2.62,0,6.17.01,8.71,0,1.22,1,2.21,2.24,2.21h10.79c.22,0,.43.07.6.2l2.33,1.74V6.23c0-1.23-1-2.23-2.24-2.23H6.18Z"/>',
+    }}
+  />
 )
 
 TypingOutline.displayName = 'TypingOutline'
diff --git a/packages/components/icons/src/icons/UnlockFill.tsx b/packages/components/icons/src/icons/UnlockFill.tsx
index a6f4b363c..543c1f1f0 100644
--- a/packages/components/icons/src/icons/UnlockFill.tsx
+++ b/packages/components/icons/src/icons/UnlockFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const UnlockFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="UnlockFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.59,8.92h-9.48v-1.07c0-1.03.4-1.99,1.14-2.72.73-.72,1.73-1.12,2.75-1.12.51.02,1.01.09,1.48.29.47.2.89.48,1.25.83.39.39,1.03.4,1.43.02.4-.38.4-1.02.02-1.42-.55-.55-1.2-.98-1.91-1.28-.72-.3-1.46-.43-2.26-.44-1.57,0-3.06.61-4.17,1.72-1.12,1.1-1.73,2.57-1.73,4.13v1.11c-1.18.15-2.1,1.14-2.1,2.35v8.31c0,1.32,1.08,2.38,2.41,2.38h11.19c1.33,0,2.41-1.07,2.41-2.38v-8.31c0-1.32-1.08-2.38-2.41-2.38h0Zm-5.68,8.85c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
-      }}
-    />
-  )
+export const UnlockFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="UnlockFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.59,8.92h-9.48v-1.07c0-1.03.4-1.99,1.14-2.72.73-.72,1.73-1.12,2.75-1.12.51.02,1.01.09,1.48.29.47.2.89.48,1.25.83.39.39,1.03.4,1.43.02.4-.38.4-1.02.02-1.42-.55-.55-1.2-.98-1.91-1.28-.72-.3-1.46-.43-2.26-.44-1.57,0-3.06.61-4.17,1.72-1.12,1.1-1.73,2.57-1.73,4.13v1.11c-1.18.15-2.1,1.14-2.1,2.35v8.31c0,1.32,1.08,2.38,2.41,2.38h11.19c1.33,0,2.41-1.07,2.41-2.38v-8.31c0-1.32-1.08-2.38-2.41-2.38h0Zm-5.68,8.85c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
+    }}
+  />
 )
 
 UnlockFill.displayName = 'UnlockFill'
diff --git a/packages/components/icons/src/icons/UnlockOutline.tsx b/packages/components/icons/src/icons/UnlockOutline.tsx
index 3fb6398b4..e6a6bd27c 100644
--- a/packages/components/icons/src/icons/UnlockOutline.tsx
+++ b/packages/components/icons/src/icons/UnlockOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const UnlockOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="UnlockOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.59,22H6.41c-1.33,0-2.41-1.07-2.41-2.38v-8.31c0-1.21.92-2.22,2.1-2.37v-1.1c0-1.56.61-3.03,1.73-4.13,1.12-1.11,2.59-1.74,4.2-1.71.77,0,1.52.15,2.24.44.72.3,1.36.73,1.91,1.28.39.39.39,1.02-.02,1.42-.4.38-1.04.38-1.43-.02-.36-.36-.77-.64-1.25-.83-.47-.19-.96-.27-1.48-.29-1.03,0-2.03.41-2.75,1.12-.72.72-1.14,1.69-1.14,2.72v1.07h9.48c1.33,0,2.41,1.07,2.41,2.38v8.31c0,1.32-1.08,2.38-2.41,2.38h0ZM6.41,10.93c-.21,0-.39.18-.39.38v8.31c0,.21.18.38.39.38h11.19c.21,0,.39-.17.39-.38v-8.31c0-.21-.18-.38-.39-.38H6.41Zm5.5,6.85c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
-      }}
-    />
-  )
+export const UnlockOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="UnlockOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.59,22H6.41c-1.33,0-2.41-1.07-2.41-2.38v-8.31c0-1.21.92-2.22,2.1-2.37v-1.1c0-1.56.61-3.03,1.73-4.13,1.12-1.11,2.59-1.74,4.2-1.71.77,0,1.52.15,2.24.44.72.3,1.36.73,1.91,1.28.39.39.39,1.02-.02,1.42-.4.38-1.04.38-1.43-.02-.36-.36-.77-.64-1.25-.83-.47-.19-.96-.27-1.48-.29-1.03,0-2.03.41-2.75,1.12-.72.72-1.14,1.69-1.14,2.72v1.07h9.48c1.33,0,2.41,1.07,2.41,2.38v8.31c0,1.32-1.08,2.38-2.41,2.38h0ZM6.41,10.93c-.21,0-.39.18-.39.38v8.31c0,.21.18.38.39.38h11.19c.21,0,.39-.17.39-.38v-8.31c0-.21-.18-.38-.39-.38H6.41Zm5.5,6.85c-1.11,0-2.02-.9-2.02-2s.91-2,2.02-2,2.02.9,2.02,2-.91,2-2.02,2Z"/>',
+    }}
+  />
 )
 
 UnlockOutline.displayName = 'UnlockOutline'
diff --git a/packages/components/icons/src/icons/UserCheckFill.tsx b/packages/components/icons/src/icons/UserCheckFill.tsx
index b2083b19a..556d19e63 100644
--- a/packages/components/icons/src/icons/UserCheckFill.tsx
+++ b/packages/components/icons/src/icons/UserCheckFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const UserCheckFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="UserCheckFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m9.23,2c-2.27,0-4.12,1.84-4.12,4.12s1.84,4.12,4.12,4.12,4.12-1.84,4.12-4.12-1.84-4.12-4.12-4.12Zm3.13,19.72l-2.27-1.7c-1.03-.77-1.24-2.24-.47-3.27.77-1.03,2.24-1.24,3.27-.47l1.27.95c.37.28.89.2,1.17-.17l.14-.19c.32-.43.43-.99.22-1.49-.05-.13-.11-.25-.17-.37-.29-.58-.68-1.15-1.24-1.55-1-.97-2.26-1.64-3.64-1.91-1.4-.28-2.85-.14-4.18.41-1.32.55-2.45,1.47-3.24,2.66-.79,1.19-1.22,2.58-1.22,4.01v2.08c0,.55.45,1,1,1h9.36Z"/><path fill-rule="evenodd" d="m21.6,12.58c.44.33.53.96.2,1.4l-5.71,7.62c-.16.21-.4.35-.66.39-.26.04-.53-.03-.74-.19l-3.81-2.85c-.44-.33-.53-.96-.2-1.4.33-.44.96-.53,1.4-.2l3.01,2.25,5.11-6.81c.33-.44.96-.53,1.4-.2Z"/>',
-      }}
-    />
-  )
+export const UserCheckFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="UserCheckFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m9.23,2c-2.27,0-4.12,1.84-4.12,4.12s1.84,4.12,4.12,4.12,4.12-1.84,4.12-4.12-1.84-4.12-4.12-4.12Zm3.13,19.72l-2.27-1.7c-1.03-.77-1.24-2.24-.47-3.27.77-1.03,2.24-1.24,3.27-.47l1.27.95c.37.28.89.2,1.17-.17l.14-.19c.32-.43.43-.99.22-1.49-.05-.13-.11-.25-.17-.37-.29-.58-.68-1.15-1.24-1.55-1-.97-2.26-1.64-3.64-1.91-1.4-.28-2.85-.14-4.18.41-1.32.55-2.45,1.47-3.24,2.66-.79,1.19-1.22,2.58-1.22,4.01v2.08c0,.55.45,1,1,1h9.36Z"/><path fill-rule="evenodd" d="m21.6,12.58c.44.33.53.96.2,1.4l-5.71,7.62c-.16.21-.4.35-.66.39-.26.04-.53-.03-.74-.19l-3.81-2.85c-.44-.33-.53-.96-.2-1.4.33-.44.96-.53,1.4-.2l3.01,2.25,5.11-6.81c.33-.44.96-.53,1.4-.2Z"/>',
+    }}
+  />
 )
 
 UserCheckFill.displayName = 'UserCheckFill'
diff --git a/packages/components/icons/src/icons/UserCheckOutline.tsx b/packages/components/icons/src/icons/UserCheckOutline.tsx
index 109349c93..acb423d9f 100644
--- a/packages/components/icons/src/icons/UserCheckOutline.tsx
+++ b/packages/components/icons/src/icons/UserCheckOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const UserCheckOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="UserCheckOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m21.6,12.58c.44.33.53.96.2,1.4l-5.7,7.62c-.16.21-.4.35-.66.39-.26.04-.53-.03-.74-.19l-3.81-2.85c-.44-.33-.53-.96-.2-1.4.33-.44.96-.53,1.4-.2l3.01,2.25,5.1-6.81c.33-.44.96-.53,1.4-.2ZM9.23,4c-1.17,0-2.12.95-2.12,2.12s.95,2.12,2.12,2.12,2.12-.95,2.12-2.12-.95-2.12-2.12-2.12Zm-4.12,2.12c0-2.27,1.84-4.12,4.12-4.12s4.12,1.84,4.12,4.12-1.84,4.12-4.12,4.12-4.12-1.84-4.12-4.12Z"/><path fill-rule="evenodd" d="m10.25,13.52c-1.01-.2-2.06-.1-3.02.3-.96.4-1.77,1.07-2.35,1.92-.57.86-.88,1.87-.88,2.9v1.08h2.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.55,0-1-.45-1-1v-2.08c0-1.43.43-2.83,1.22-4.01.79-1.19,1.92-2.11,3.24-2.66,1.32-.55,2.77-.69,4.18-.41,1.4.28,2.69.97,3.7,1.98.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0-.73-.73-1.66-1.23-2.68-1.43Z"/>',
-      }}
-    />
-  )
+export const UserCheckOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="UserCheckOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m21.6,12.58c.44.33.53.96.2,1.4l-5.7,7.62c-.16.21-.4.35-.66.39-.26.04-.53-.03-.74-.19l-3.81-2.85c-.44-.33-.53-.96-.2-1.4.33-.44.96-.53,1.4-.2l3.01,2.25,5.1-6.81c.33-.44.96-.53,1.4-.2ZM9.23,4c-1.17,0-2.12.95-2.12,2.12s.95,2.12,2.12,2.12,2.12-.95,2.12-2.12-.95-2.12-2.12-2.12Zm-4.12,2.12c0-2.27,1.84-4.12,4.12-4.12s4.12,1.84,4.12,4.12-1.84,4.12-4.12,4.12-4.12-1.84-4.12-4.12Z"/><path fill-rule="evenodd" d="m10.25,13.52c-1.01-.2-2.06-.1-3.02.3-.96.4-1.77,1.07-2.35,1.92-.57.86-.88,1.87-.88,2.9v1.08h2.46c.55,0,1,.45,1,1s-.45,1-1,1h-3.46c-.55,0-1-.45-1-1v-2.08c0-1.43.43-2.83,1.22-4.01.79-1.19,1.92-2.11,3.24-2.66,1.32-.55,2.77-.69,4.18-.41,1.4.28,2.69.97,3.7,1.98.39.39.39,1.02,0,1.41-.39.39-1.02.39-1.41,0-.73-.73-1.66-1.23-2.68-1.43Z"/>',
+    }}
+  />
 )
 
 UserCheckOutline.displayName = 'UserCheckOutline'
diff --git a/packages/components/icons/src/icons/ValidFill.tsx b/packages/components/icons/src/icons/ValidFill.tsx
index ebc17b8f9..c8136db64 100644
--- a/packages/components/icons/src/icons/ValidFill.tsx
+++ b/packages/components/icons/src/icons/ValidFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ValidFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ValidFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-4.16-2.87c.36-.42.3-1.05-.12-1.41-.42-.36-1.05-.3-1.41.12l-5.64,6.66-2.24-2.55c-.36-.41-1-.46-1.41-.09-.41.36-.46,1-.09,1.41l2.46,2.8c.16.19.36.34.59.44.23.1.47.15.72.15.24,0,.48-.06.7-.16.22-.1.42-.26.58-.44l5.86-6.91Z"/>',
-      }}
-    />
-  )
+export const ValidFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ValidFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m22,12c0,5.52-4.48,10-10,10S2,17.52,2,12,6.48,2,12,2s10,4.48,10,10Zm-4.16-2.87c.36-.42.3-1.05-.12-1.41-.42-.36-1.05-.3-1.41.12l-5.64,6.66-2.24-2.55c-.36-.41-1-.46-1.41-.09-.41.36-.46,1-.09,1.41l2.46,2.8c.16.19.36.34.59.44.23.1.47.15.72.15.24,0,.48-.06.7-.16.22-.1.42-.26.58-.44l5.86-6.91Z"/>',
+    }}
+  />
 )
 
 ValidFill.displayName = 'ValidFill'
diff --git a/packages/components/icons/src/icons/ValidOutline.tsx b/packages/components/icons/src/icons/ValidOutline.tsx
index 310f2ff81..cc362047d 100644
--- a/packages/components/icons/src/icons/ValidOutline.tsx
+++ b/packages/components/icons/src/icons/ValidOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const ValidOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="ValidOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m17.29,9.14c.36-.42.3-1.05-.12-1.41-.42-.36-1.05-.3-1.41.12l-5.35,6.32-2.11-2.4c-.36-.41-1-.45-1.41-.09-.41.36-.46,1-.09,1.41l2.35,2.67c.16.18.36.33.58.43.22.1.46.15.71.14.24,0,.47-.06.69-.16.22-.1.41-.25.57-.44l5.59-6.6Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2ZM4,12c0-4.42,3.58-8,8-8s8,3.58,8,8-3.58,8-8,8-8-3.58-8-8Z"/>',
-      }}
-    />
-  )
+export const ValidOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="ValidOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m17.29,9.14c.36-.42.3-1.05-.12-1.41-.42-.36-1.05-.3-1.41.12l-5.35,6.32-2.11-2.4c-.36-.41-1-.45-1.41-.09-.41.36-.46,1-.09,1.41l2.35,2.67c.16.18.36.33.58.43.22.1.46.15.71.14.24,0,.47-.06.69-.16.22-.1.41-.25.57-.44l5.59-6.6Z"/><path fill-rule="evenodd" d="m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2ZM4,12c0-4.42,3.58-8,8-8s8,3.58,8,8-3.58,8-8,8-8-3.58-8-8Z"/>',
+    }}
+  />
 )
 
 ValidOutline.displayName = 'ValidOutline'
diff --git a/packages/components/icons/src/icons/VoiceFill.tsx b/packages/components/icons/src/icons/VoiceFill.tsx
index e065d1bcc..eda74cb9a 100644
--- a/packages/components/icons/src/icons/VoiceFill.tsx
+++ b/packages/components/icons/src/icons/VoiceFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const VoiceFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="VoiceFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m12,2c-1.19,0-2.34.47-3.18,1.3-.84.83-1.32,1.97-1.32,3.15v4.86c0,1.18.47,2.31,1.32,3.15.84.83,1.99,1.3,3.18,1.3s2.34-.47,3.18-1.3c.84-.83,1.32-1.97,1.32-3.15v-4.86c0-1.18-.47-2.31-1.32-3.15-.84-.83-1.99-1.3-3.18-1.3Z"/><path d="m5.98,12c0-.54-.44-.98-.99-.98-.55,0-.99.44-.99.98,0,.95.19,1.89.55,2.77.37.88.9,1.68,1.58,2.35.68.67,1.48,1.2,2.37,1.57.8.33,1.64.51,2.5.54v1.8c0,.54.44.98.99.98s.99-.44.99-.98v-1.8c.86-.03,1.71-.22,2.5-.54.89-.36,1.69-.89,2.37-1.57.68-.67,1.22-1.47,1.58-2.35.37-.88.55-1.82.55-2.77,0-.54-.45-.98-.99-.98-.55,0-.99.44-.99.98,0,.69-.13,1.38-.4,2.01-.27.64-.66,1.22-1.15,1.71-.49.49-1.08.88-1.73,1.14-.65.26-1.34.4-2.04.4h-1.41c-.7,0-1.39-.13-2.04-.4-.65-.26-1.23-.65-1.73-1.14-.49-.49-.89-1.07-1.15-1.71-.27-.64-.4-1.32-.4-2.01Z"/>',
-      }}
-    />
-  )
+export const VoiceFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="VoiceFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m12,2c-1.19,0-2.34.47-3.18,1.3-.84.83-1.32,1.97-1.32,3.15v4.86c0,1.18.47,2.31,1.32,3.15.84.83,1.99,1.3,3.18,1.3s2.34-.47,3.18-1.3c.84-.83,1.32-1.97,1.32-3.15v-4.86c0-1.18-.47-2.31-1.32-3.15-.84-.83-1.99-1.3-3.18-1.3Z"/><path d="m5.98,12c0-.54-.44-.98-.99-.98-.55,0-.99.44-.99.98,0,.95.19,1.89.55,2.77.37.88.9,1.68,1.58,2.35.68.67,1.48,1.2,2.37,1.57.8.33,1.64.51,2.5.54v1.8c0,.54.44.98.99.98s.99-.44.99-.98v-1.8c.86-.03,1.71-.22,2.5-.54.89-.36,1.69-.89,2.37-1.57.68-.67,1.22-1.47,1.58-2.35.37-.88.55-1.82.55-2.77,0-.54-.45-.98-.99-.98-.55,0-.99.44-.99.98,0,.69-.13,1.38-.4,2.01-.27.64-.66,1.22-1.15,1.71-.49.49-1.08.88-1.73,1.14-.65.26-1.34.4-2.04.4h-1.41c-.7,0-1.39-.13-2.04-.4-.65-.26-1.23-.65-1.73-1.14-.49-.49-.89-1.07-1.15-1.71-.27-.64-.4-1.32-.4-2.01Z"/>',
+    }}
+  />
 )
 
 VoiceFill.displayName = 'VoiceFill'
diff --git a/packages/components/icons/src/icons/VoiceOffFill.tsx b/packages/components/icons/src/icons/VoiceOffFill.tsx
index 2649a5d85..7c44c94e0 100644
--- a/packages/components/icons/src/icons/VoiceOffFill.tsx
+++ b/packages/components/icons/src/icons/VoiceOffFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const VoiceOffFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="VoiceOffFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m18.87,11.05c-.58,0-.99.41-.99,1,0,.66-.17,1.33-.41,1.99-.25.66-.66,1.24-1.16,1.66-.5.42-1.08.83-1.66,1.16-.66.25-1.32.41-1.99.41h-2.07c-.58,0-.99.41-1.08.91,0,.58.41,1,.91,1.08h.5v1.74c0,.58.41,1,.99,1s.99-.41.99-1v-1.74c.83,0,1.66-.25,2.48-.5.91-.33,1.66-.91,2.32-1.58.66-.66,1.16-1.49,1.57-2.32.33-.91.58-1.83.58-2.74,0-.66-.41-1.08-.99-1.08Z"/><path d="m13.41,15.44c.17,0,.25,0,.41-.08.99-.41,1.82-1.24,2.24-2.24.25-.5,0-1.08-.5-1.33-.5-.25-1.08,0-1.33.5-.25.58-.66,1-1.24,1.24-.5.25-.75.83-.5,1.33.17.41.5.58.91.58ZM21.69,2.33c-.41-.41-.99-.41-1.41,0l-3.81,3.82c-.08-1.08-.5-2.07-1.32-2.82-.83-.83-1.99-1.33-3.15-1.33-1.16.08-2.24.5-3.06,1.33-.83.83-1.33,1.99-1.33,3.15v4.81c0,.66.17,1.41.5,1.99.17.25.33.5.5.75l-1.24,1.24c-.25-.33-.5-.75-.75-1.16-.33-.66-.5-1.41-.5-2.16,0-.58-.41-1-.99-1s-.99.41-.99,1c0,1,.25,2.07.66,2.99.25.58.66,1.16,1.08,1.66l-3.56,3.57c-.41.41-.41,1,0,1.41.17.17.41.33.66.33s.5-.08.66-.33l6.87-6.89L21.69,3.74c.41-.41.41-1,0-1.41Z"/>',
-      }}
-    />
-  )
+export const VoiceOffFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="VoiceOffFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m18.87,11.05c-.58,0-.99.41-.99,1,0,.66-.17,1.33-.41,1.99-.25.66-.66,1.24-1.16,1.66-.5.42-1.08.83-1.66,1.16-.66.25-1.32.41-1.99.41h-2.07c-.58,0-.99.41-1.08.91,0,.58.41,1,.91,1.08h.5v1.74c0,.58.41,1,.99,1s.99-.41.99-1v-1.74c.83,0,1.66-.25,2.48-.5.91-.33,1.66-.91,2.32-1.58.66-.66,1.16-1.49,1.57-2.32.33-.91.58-1.83.58-2.74,0-.66-.41-1.08-.99-1.08Z"/><path d="m13.41,15.44c.17,0,.25,0,.41-.08.99-.41,1.82-1.24,2.24-2.24.25-.5,0-1.08-.5-1.33-.5-.25-1.08,0-1.33.5-.25.58-.66,1-1.24,1.24-.5.25-.75.83-.5,1.33.17.41.5.58.91.58ZM21.69,2.33c-.41-.41-.99-.41-1.41,0l-3.81,3.82c-.08-1.08-.5-2.07-1.32-2.82-.83-.83-1.99-1.33-3.15-1.33-1.16.08-2.24.5-3.06,1.33-.83.83-1.33,1.99-1.33,3.15v4.81c0,.66.17,1.41.5,1.99.17.25.33.5.5.75l-1.24,1.24c-.25-.33-.5-.75-.75-1.16-.33-.66-.5-1.41-.5-2.16,0-.58-.41-1-.99-1s-.99.41-.99,1c0,1,.25,2.07.66,2.99.25.58.66,1.16,1.08,1.66l-3.56,3.57c-.41.41-.41,1,0,1.41.17.17.41.33.66.33s.5-.08.66-.33l6.87-6.89L21.69,3.74c.41-.41.41-1,0-1.41Z"/>',
+    }}
+  />
 )
 
 VoiceOffFill.displayName = 'VoiceOffFill'
diff --git a/packages/components/icons/src/icons/VoiceOffOutline.tsx b/packages/components/icons/src/icons/VoiceOffOutline.tsx
index 61deea12a..dfc915472 100644
--- a/packages/components/icons/src/icons/VoiceOffOutline.tsx
+++ b/packages/components/icons/src/icons/VoiceOffOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const VoiceOffOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="VoiceOffOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m18.98,11c-.58,0-1,.42-1,1,0,.67-.17,1.33-.41,2-.25.67-.66,1.25-1.16,1.67-.5.5-1.08.83-1.66,1.17-.66.25-1.33.33-1.99.42h-2.07c-.58,0-1,.42-1.08.92,0,.58.41,1,.91,1.08h.5v1.75c0,.58.41,1,.99,1s1-.42,1-1v-1.75c.83,0,1.66-.25,2.49-.5.91-.33,1.66-.92,2.32-1.58.66-.67,1.16-1.5,1.58-2.33.33-.92.58-1.83.58-2.75,0-.58-.5-1.08-1-1.08Zm2.74-8.67c-.41-.42-1-.42-1.41,0l-3.81,3.83c-.08-1.08-.5-2.08-1.33-2.83-.83-.83-1.99-1.33-3.15-1.33s-2.24.5-3.07,1.33c-.83.83-1.33,2-1.33,3.17v4.83c0,.67.17,1.42.5,2,.17.25.33.5.5.75l-1.24,1.25c-.25-.33-.5-.75-.75-1.17-.33-.67-.5-1.42-.5-2.17,0-.58-.41-1-1-1s-1,.42-1,1c0,1,.25,2.08.66,3,.25.58.66,1.17,1.08,1.67l-3.57,3.58c-.41.42-.41,1,0,1.42.17.17.41.33.66.33s.5-.08.66-.33l12.27-12.33.08-.08,5.47-5.5c.66-.42.66-1,.25-1.42Zm-7.21,5.83l-4.48,4.5c-.08-.08-.08-.17-.17-.25-.17-.33-.25-.75-.25-1.08v-4.83c0-.67.25-1.25.75-1.75.5-.5,1.08-.75,1.74-.75s1.24.25,1.74.75.75,1.08.75,1.75v1.67h-.08Z"/><path d="m13.42,15.5c.17,0,.25,0,.41-.08.99-.42,1.82-1.25,2.24-2.25.25-.5,0-1.08-.5-1.33-.5-.25-1.08,0-1.33.5-.25.58-.66,1-1.24,1.25-.5.25-.75.83-.5,1.33.17.33.58.58.91.58Z"/>',
-      }}
-    />
-  )
+export const VoiceOffOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="VoiceOffOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m18.98,11c-.58,0-1,.42-1,1,0,.67-.17,1.33-.41,2-.25.67-.66,1.25-1.16,1.67-.5.5-1.08.83-1.66,1.17-.66.25-1.33.33-1.99.42h-2.07c-.58,0-1,.42-1.08.92,0,.58.41,1,.91,1.08h.5v1.75c0,.58.41,1,.99,1s1-.42,1-1v-1.75c.83,0,1.66-.25,2.49-.5.91-.33,1.66-.92,2.32-1.58.66-.67,1.16-1.5,1.58-2.33.33-.92.58-1.83.58-2.75,0-.58-.5-1.08-1-1.08Zm2.74-8.67c-.41-.42-1-.42-1.41,0l-3.81,3.83c-.08-1.08-.5-2.08-1.33-2.83-.83-.83-1.99-1.33-3.15-1.33s-2.24.5-3.07,1.33c-.83.83-1.33,2-1.33,3.17v4.83c0,.67.17,1.42.5,2,.17.25.33.5.5.75l-1.24,1.25c-.25-.33-.5-.75-.75-1.17-.33-.67-.5-1.42-.5-2.17,0-.58-.41-1-1-1s-1,.42-1,1c0,1,.25,2.08.66,3,.25.58.66,1.17,1.08,1.67l-3.57,3.58c-.41.42-.41,1,0,1.42.17.17.41.33.66.33s.5-.08.66-.33l12.27-12.33.08-.08,5.47-5.5c.66-.42.66-1,.25-1.42Zm-7.21,5.83l-4.48,4.5c-.08-.08-.08-.17-.17-.25-.17-.33-.25-.75-.25-1.08v-4.83c0-.67.25-1.25.75-1.75.5-.5,1.08-.75,1.74-.75s1.24.25,1.74.75.75,1.08.75,1.75v1.67h-.08Z"/><path d="m13.42,15.5c.17,0,.25,0,.41-.08.99-.42,1.82-1.25,2.24-2.25.25-.5,0-1.08-.5-1.33-.5-.25-1.08,0-1.33.5-.25.58-.66,1-1.24,1.25-.5.25-.75.83-.5,1.33.17.33.58.58.91.58Z"/>',
+    }}
+  />
 )
 
 VoiceOffOutline.displayName = 'VoiceOffOutline'
diff --git a/packages/components/icons/src/icons/VoiceOutline.tsx b/packages/components/icons/src/icons/VoiceOutline.tsx
index 5160f9506..fe3599452 100644
--- a/packages/components/icons/src/icons/VoiceOutline.tsx
+++ b/packages/components/icons/src/icons/VoiceOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const VoiceOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="VoiceOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,4c-.66,0-1.29.26-1.76.72-.47.46-.73,1.09-.73,1.74v4.85c0,.65.26,1.28.73,1.74.47.46,1.1.72,1.76.72s1.29-.26,1.76-.72c.47-.46.73-1.09.73-1.74v-4.85c0-.65-.26-1.28-.73-1.74-.47-.46-1.1-.72-1.76-.72Zm-3.19-.69c.84-.84,1.99-1.31,3.19-1.31s2.34.47,3.19,1.31c.84.84,1.32,1.97,1.32,3.15v4.85c0,1.18-.47,2.32-1.32,3.15-.84.84-1.99,1.31-3.19,1.31s-2.34-.47-3.19-1.31-1.32-1.97-1.32-3.15v-4.85c0-1.18.47-2.32,1.32-3.15Zm-3.8,7.69c.56,0,1.01.45,1.01,1,0,.69.13,1.37.4,2,.26.64.65,1.21,1.14,1.7.49.49,1.07.87,1.71,1.13.64.26,1.33.4,2.02.39h1.4c.69,0,1.38-.13,2.02-.39.64-.26,1.22-.65,1.71-1.13.49-.49.88-1.06,1.14-1.7.26-.64.4-1.32.4-2,0-.55.45-1,1.01-1,.56,0,1.01.45,1.01,1,0,.95-.19,1.89-.55,2.77-.37.88-.9,1.68-1.58,2.35s-1.48,1.2-2.37,1.57c-.79.32-1.63.51-2.48.54v1.78c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1v-1.78c-.85-.03-1.69-.22-2.48-.54-.89-.36-1.69-.9-2.37-1.57-.68-.67-1.22-1.47-1.58-2.35-.37-.88-.55-1.82-.55-2.77,0-.55.45-1,1.01-1Z"/>',
-      }}
-    />
-  )
+export const VoiceOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="VoiceOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,4c-.66,0-1.29.26-1.76.72-.47.46-.73,1.09-.73,1.74v4.85c0,.65.26,1.28.73,1.74.47.46,1.1.72,1.76.72s1.29-.26,1.76-.72c.47-.46.73-1.09.73-1.74v-4.85c0-.65-.26-1.28-.73-1.74-.47-.46-1.1-.72-1.76-.72Zm-3.19-.69c.84-.84,1.99-1.31,3.19-1.31s2.34.47,3.19,1.31c.84.84,1.32,1.97,1.32,3.15v4.85c0,1.18-.47,2.32-1.32,3.15-.84.84-1.99,1.31-3.19,1.31s-2.34-.47-3.19-1.31-1.32-1.97-1.32-3.15v-4.85c0-1.18.47-2.32,1.32-3.15Zm-3.8,7.69c.56,0,1.01.45,1.01,1,0,.69.13,1.37.4,2,.26.64.65,1.21,1.14,1.7.49.49,1.07.87,1.71,1.13.64.26,1.33.4,2.02.39h1.4c.69,0,1.38-.13,2.02-.39.64-.26,1.22-.65,1.71-1.13.49-.49.88-1.06,1.14-1.7.26-.64.4-1.32.4-2,0-.55.45-1,1.01-1,.56,0,1.01.45,1.01,1,0,.95-.19,1.89-.55,2.77-.37.88-.9,1.68-1.58,2.35s-1.48,1.2-2.37,1.57c-.79.32-1.63.51-2.48.54v1.78c0,.55-.45,1-1.01,1s-1.01-.45-1.01-1v-1.78c-.85-.03-1.69-.22-2.48-.54-.89-.36-1.69-.9-2.37-1.57-.68-.67-1.22-1.47-1.58-2.35-.37-.88-.55-1.82-.55-2.77,0-.55.45-1,1.01-1Z"/>',
+    }}
+  />
 )
 
 VoiceOutline.displayName = 'VoiceOutline'
diff --git a/packages/components/icons/src/icons/WarningFill.tsx b/packages/components/icons/src/icons/WarningFill.tsx
index 85e00ff20..a3da695f0 100644
--- a/packages/components/icons/src/icons/WarningFill.tsx
+++ b/packages/components/icons/src/icons/WarningFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WarningFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WarningFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,2c-.44,0-.87.12-1.24.35-.37.23-.68.56-.88.95l-7.62,15.24h0c-.18.36-.27.77-.25,1.17.02.41.14.8.35,1.15.21.35.51.63.86.83.35.2.75.3,1.16.31h15.24c.41,0,.81-.11,1.16-.31.35-.2.65-.49.86-.83.21-.35.33-.74.35-1.15.02-.41-.07-.81-.25-1.17h0S14.13,3.31,14.13,3.31h0c-.2-.4-.5-.73-.88-.96-.37-.23-.81-.35-1.24-.35Zm0,6.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Zm1.25,8.58c0,.69-.56,1.25-1.25,1.25s-1.25-.56-1.25-1.25.56-1.25,1.25-1.25,1.25.56,1.25,1.25Z"/>',
-      }}
-    />
-  )
+export const WarningFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WarningFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,2c-.44,0-.87.12-1.24.35-.37.23-.68.56-.88.95l-7.62,15.24h0c-.18.36-.27.77-.25,1.17.02.41.14.8.35,1.15.21.35.51.63.86.83.35.2.75.3,1.16.31h15.24c.41,0,.81-.11,1.16-.31.35-.2.65-.49.86-.83.21-.35.33-.74.35-1.15.02-.41-.07-.81-.25-1.17h0S14.13,3.31,14.13,3.31h0c-.2-.4-.5-.73-.88-.96-.37-.23-.81-.35-1.24-.35Zm0,6.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Zm1.25,8.58c0,.69-.56,1.25-1.25,1.25s-1.25-.56-1.25-1.25.56-1.25,1.25-1.25,1.25.56,1.25,1.25Z"/>',
+    }}
+  />
 )
 
 WarningFill.displayName = 'WarningFill'
diff --git a/packages/components/icons/src/icons/WarningOutline.tsx b/packages/components/icons/src/icons/WarningOutline.tsx
index 4ac0486f0..406691c13 100644
--- a/packages/components/icons/src/icons/WarningOutline.tsx
+++ b/packages/components/icons/src/icons/WarningOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WarningOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WarningOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m12,8.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Z"/><path d="m12,18.06c.69,0,1.25-.56,1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25,1.25.56,1.25,1.25,1.25Z"/><path fill-rule="evenodd" d="m10.76,2.35c.37-.23.8-.35,1.24-.35s.87.12,1.24.35c.37.23.68.56.88.95h0s7.62,15.24,7.62,15.24h0c.18.36.27.77.25,1.17-.02.41-.14.8-.35,1.15-.21.35-.51.63-.86.83-.35.2-.75.3-1.16.31H4.38c-.41,0-.81-.11-1.16-.31-.35-.2-.65-.49-.86-.83-.21-.35-.33-.74-.35-1.15-.02-.41.07-.81.25-1.17h0S9.88,3.3,9.88,3.3c.2-.39.5-.72.88-.95Zm1.24,1.65c-.07,0-.14.02-.2.06-.06.04-.11.09-.14.15l-7.62,15.23h0c-.03.06-.04.13-.04.19,0,.07.02.13.06.19.03.06.08.1.14.13.06.03.12.05.19.05h15.23c.07,0,.13-.02.19-.05.06-.03.11-.08.14-.13.03-.06.05-.12.06-.19,0-.07-.01-.13-.04-.19h0s-7.62-15.23-7.62-15.23c-.03-.06-.08-.11-.14-.15-.06-.04-.13-.06-.2-.06Z"/>',
-      }}
-    />
-  )
+export const WarningOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WarningOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m12,8.23c.55,0,1,.45,1,1v4.58c0,.55-.45,1-1,1s-1-.45-1-1v-4.58c0-.55.45-1,1-1Z"/><path d="m12,18.06c.69,0,1.25-.56,1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25,1.25.56,1.25,1.25,1.25Z"/><path fill-rule="evenodd" d="m10.76,2.35c.37-.23.8-.35,1.24-.35s.87.12,1.24.35c.37.23.68.56.88.95h0s7.62,15.24,7.62,15.24h0c.18.36.27.77.25,1.17-.02.41-.14.8-.35,1.15-.21.35-.51.63-.86.83-.35.2-.75.3-1.16.31H4.38c-.41,0-.81-.11-1.16-.31-.35-.2-.65-.49-.86-.83-.21-.35-.33-.74-.35-1.15-.02-.41.07-.81.25-1.17h0S9.88,3.3,9.88,3.3c.2-.39.5-.72.88-.95Zm1.24,1.65c-.07,0-.14.02-.2.06-.06.04-.11.09-.14.15l-7.62,15.23h0c-.03.06-.04.13-.04.19,0,.07.02.13.06.19.03.06.08.1.14.13.06.03.12.05.19.05h15.23c.07,0,.13-.02.19-.05.06-.03.11-.08.14-.13.03-.06.05-.12.06-.19,0-.07-.01-.13-.04-.19h0s-7.62-15.23-7.62-15.23c-.03-.06-.08-.11-.14-.15-.06-.04-.13-.06-.2-.06Z"/>',
+    }}
+  />
 )
 
 WarningOutline.displayName = 'WarningOutline'
diff --git a/packages/components/icons/src/icons/WheelFill.tsx b/packages/components/icons/src/icons/WheelFill.tsx
index da4dc5796..dc2d02f53 100644
--- a/packages/components/icons/src/icons/WheelFill.tsx
+++ b/packages/components/icons/src/icons/WheelFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WheelFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WheelFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m20.67,14.18l-.9-1.09v-1.93l.9-1.09c.25-.34.41-.76.49-1.18,0-.42-.08-.92-.25-1.26l-.57-1.01c-.25-.34-.49-.67-.9-.84-.41-.17-.82-.25-1.23-.17l-1.4.25-1.64-.92-.49-1.34c-.16-.42-.41-.76-.82-1.01-.49-.5-.9-.59-1.31-.59h-1.15c-.41,0-.82.17-1.23.42-.33.25-.66.59-.82,1.01l-.49,1.26-1.64.92-1.4-.17c-.41-.08-.82,0-1.23.17-.41.17-.74.5-.9.84l-.57,1.09c-.16.34-.33.84-.25,1.26,0,.42.16.84.49,1.18l.9,1.09v1.93l-.9,1.09c-.25.34-.41.76-.49,1.18,0,.42.08.92.25,1.26l.57,1.01c.25.34.49.67.9.84.41.17.82.25,1.23.17l1.4-.25,1.64.92.49,1.34c.16.42.41.76.82,1.01.33.25.74.42,1.23.42h1.15c.41,0,.82-.17,1.23-.42.33-.25.66-.59.82-1.01l.49-1.34,1.64-.92,1.4.25c.41.08.82,0,1.23-.17.41-.17.66-.5.9-.84l.57-1.01c.25-.42.33-.84.33-1.26-.08-.34-.25-.76-.49-1.09Zm-6.65-1.68c-.08.42-.25.76-.57,1.09-.33.34-.66.5-1.07.59s-.82,0-1.23-.08c-.41-.17-.74-.42-.9-.76-.25-.42-.33-.84-.33-1.26,0-.59.25-1.09.57-1.51.41-.42.9-.59,1.48-.59.41,0,.82.08,1.15.34.33.25.57.59.74.92.16.42.25.84.16,1.26Z"/>',
-      }}
-    />
-  )
+export const WheelFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WheelFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m20.67,14.18l-.9-1.09v-1.93l.9-1.09c.25-.34.41-.76.49-1.18,0-.42-.08-.92-.25-1.26l-.57-1.01c-.25-.34-.49-.67-.9-.84-.41-.17-.82-.25-1.23-.17l-1.4.25-1.64-.92-.49-1.34c-.16-.42-.41-.76-.82-1.01-.49-.5-.9-.59-1.31-.59h-1.15c-.41,0-.82.17-1.23.42-.33.25-.66.59-.82,1.01l-.49,1.26-1.64.92-1.4-.17c-.41-.08-.82,0-1.23.17-.41.17-.74.5-.9.84l-.57,1.09c-.16.34-.33.84-.25,1.26,0,.42.16.84.49,1.18l.9,1.09v1.93l-.9,1.09c-.25.34-.41.76-.49,1.18,0,.42.08.92.25,1.26l.57,1.01c.25.34.49.67.9.84.41.17.82.25,1.23.17l1.4-.25,1.64.92.49,1.34c.16.42.41.76.82,1.01.33.25.74.42,1.23.42h1.15c.41,0,.82-.17,1.23-.42.33-.25.66-.59.82-1.01l.49-1.34,1.64-.92,1.4.25c.41.08.82,0,1.23-.17.41-.17.66-.5.9-.84l.57-1.01c.25-.42.33-.84.33-1.26-.08-.34-.25-.76-.49-1.09Zm-6.65-1.68c-.08.42-.25.76-.57,1.09-.33.34-.66.5-1.07.59s-.82,0-1.23-.08c-.41-.17-.74-.42-.9-.76-.25-.42-.33-.84-.33-1.26,0-.59.25-1.09.57-1.51.41-.42.9-.59,1.48-.59.41,0,.82.08,1.15.34.33.25.57.59.74.92.16.42.25.84.16,1.26Z"/>',
+    }}
+  />
 )
 
 WheelFill.displayName = 'WheelFill'
diff --git a/packages/components/icons/src/icons/WheelOutline.tsx b/packages/components/icons/src/icons/WheelOutline.tsx
index 538c5204a..cbd33f024 100644
--- a/packages/components/icons/src/icons/WheelOutline.tsx
+++ b/packages/components/icons/src/icons/WheelOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WheelOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WheelOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m20.6,13.85l-.8-1.05v-1.61l.8-1.05c.32-.4.48-.81.48-1.29s-.08-.97-.32-1.37l-.56-.97c-.24-.4-.56-.73-.96-.97-.4-.24-.88-.24-1.37-.24l-1.29.16-1.45-.81-.48-1.21c-.16-.4-.48-.81-.88-1.05-.4-.24-.88-.4-1.29-.4h-1.13c-.48,0-.96.16-1.29.4-.32.32-.64.73-.8,1.21l-.48,1.21-1.45.81-1.29-.24c-.48-.08-.96,0-1.37.24-.4.24-.72.56-.96.97l-.56.89c-.24.48-.32.89-.32,1.37s.24.89.48,1.29l.8,1.05v1.61l-.8,1.05c-.32.4-.48.81-.48,1.29s.08.97.32,1.37l.56.97c.24.4.56.73.96.97.4.24.88.24,1.37.24l1.29-.16,1.45.81.48,1.21c.16.4.48.81.88,1.05.4.24.88.4,1.29.4h1.13c.48,0,.96-.16,1.29-.4.4-.24.72-.65.88-1.05l.48-1.21,1.45-.81,1.29.16c.48.08.96,0,1.37-.24.4-.24.72-.56.96-.97l.56-.97c.24-.4.32-.89.32-1.37-.08-.48-.24-.97-.56-1.29Zm-15.76,1.21l1.05-1.29c.16-.16.24-.4.24-.56v-2.34c0-.24-.08-.4-.24-.65l-1.05-1.29q-.08-.08-.08-.24c0-.08,0-.16.08-.24l.56-.97s.08-.08.16-.08.16-.08.24,0l1.61.24c.24,0,.4,0,.64-.08l2.01-1.13c.16-.08.32-.32.4-.48l.56-1.53c0-.08.08-.16.16-.16.08-.08.16-.08.24-.08h1.13c.08,0,.16,0,.24.08q.08.08.16.16l.56,1.37c.08.24.24.4.4.48l2.01,1.21c.16.08.4.16.64.08l1.61-.24h.24c.08,0,.16.08.16.16l.56,1.05s.08.08,0,.16c0,.08,0,.16-.08.24l-1.05,1.29c-.16.16-.24.4-.24.56v2.34c0,.24.08.4.24.65l1.05,1.29c.08.08.08.16.08.24s0,.16-.08.24l-.56.97c0,.08-.08.16-.16.16s-.16.08-.24,0l-1.61-.24c-.24,0-.4,0-.64.08l-2.01,1.13c-.16.08-.32.32-.4.48l-.56,1.53c0,.08-.08.16-.16.16s-.16.08-.24.08h-1.13c-.08,0-.16,0-.24-.08q-.08-.08-.16-.16l-.56-1.53c-.08-.24-.24-.4-.4-.48l-2.01-1.13c-.16-.08-.32-.16-.48-.16h-.16l-1.61.24h-.24c-.08,0-.16-.08-.16-.16l-.56-.97c-.08-.08-.08-.16-.08-.24.08-.08.16-.08.16-.16Z"/><path d="m10.55,15.47c.48.16.97.32,1.45.32.24,0,.48,0,.72-.08.72-.16,1.37-.48,1.93-1.05.48-.48.88-1.21,1.05-1.94.16-.73.08-1.45-.24-2.18-.24-.65-.72-1.29-1.37-1.69-.64-.4-1.29-.65-2.09-.65-.96,0-1.93.4-2.65,1.13-.72.73-1.13,1.61-1.13,2.66,0,.73.24,1.45.64,2.1.48.56,1.05,1.05,1.69,1.37Zm-.32-3.47c0-.48.16-.89.48-1.29.32-.4.8-.48,1.29-.48.32,0,.72.08.96.32.32.16.48.48.64.81.16.32.16.65.08,1.05-.08.32-.24.65-.48.89-.24.24-.56.4-.88.48-.32.08-.72,0-1.05-.08-.32-.08-.64-.4-.8-.65-.16-.32-.24-.73-.24-1.05Z"/>',
-      }}
-    />
-  )
+export const WheelOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WheelOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m20.6,13.85l-.8-1.05v-1.61l.8-1.05c.32-.4.48-.81.48-1.29s-.08-.97-.32-1.37l-.56-.97c-.24-.4-.56-.73-.96-.97-.4-.24-.88-.24-1.37-.24l-1.29.16-1.45-.81-.48-1.21c-.16-.4-.48-.81-.88-1.05-.4-.24-.88-.4-1.29-.4h-1.13c-.48,0-.96.16-1.29.4-.32.32-.64.73-.8,1.21l-.48,1.21-1.45.81-1.29-.24c-.48-.08-.96,0-1.37.24-.4.24-.72.56-.96.97l-.56.89c-.24.48-.32.89-.32,1.37s.24.89.48,1.29l.8,1.05v1.61l-.8,1.05c-.32.4-.48.81-.48,1.29s.08.97.32,1.37l.56.97c.24.4.56.73.96.97.4.24.88.24,1.37.24l1.29-.16,1.45.81.48,1.21c.16.4.48.81.88,1.05.4.24.88.4,1.29.4h1.13c.48,0,.96-.16,1.29-.4.4-.24.72-.65.88-1.05l.48-1.21,1.45-.81,1.29.16c.48.08.96,0,1.37-.24.4-.24.72-.56.96-.97l.56-.97c.24-.4.32-.89.32-1.37-.08-.48-.24-.97-.56-1.29Zm-15.76,1.21l1.05-1.29c.16-.16.24-.4.24-.56v-2.34c0-.24-.08-.4-.24-.65l-1.05-1.29q-.08-.08-.08-.24c0-.08,0-.16.08-.24l.56-.97s.08-.08.16-.08.16-.08.24,0l1.61.24c.24,0,.4,0,.64-.08l2.01-1.13c.16-.08.32-.32.4-.48l.56-1.53c0-.08.08-.16.16-.16.08-.08.16-.08.24-.08h1.13c.08,0,.16,0,.24.08q.08.08.16.16l.56,1.37c.08.24.24.4.4.48l2.01,1.21c.16.08.4.16.64.08l1.61-.24h.24c.08,0,.16.08.16.16l.56,1.05s.08.08,0,.16c0,.08,0,.16-.08.24l-1.05,1.29c-.16.16-.24.4-.24.56v2.34c0,.24.08.4.24.65l1.05,1.29c.08.08.08.16.08.24s0,.16-.08.24l-.56.97c0,.08-.08.16-.16.16s-.16.08-.24,0l-1.61-.24c-.24,0-.4,0-.64.08l-2.01,1.13c-.16.08-.32.32-.4.48l-.56,1.53c0,.08-.08.16-.16.16s-.16.08-.24.08h-1.13c-.08,0-.16,0-.24-.08q-.08-.08-.16-.16l-.56-1.53c-.08-.24-.24-.4-.4-.48l-2.01-1.13c-.16-.08-.32-.16-.48-.16h-.16l-1.61.24h-.24c-.08,0-.16-.08-.16-.16l-.56-.97c-.08-.08-.08-.16-.08-.24.08-.08.16-.08.16-.16Z"/><path d="m10.55,15.47c.48.16.97.32,1.45.32.24,0,.48,0,.72-.08.72-.16,1.37-.48,1.93-1.05.48-.48.88-1.21,1.05-1.94.16-.73.08-1.45-.24-2.18-.24-.65-.72-1.29-1.37-1.69-.64-.4-1.29-.65-2.09-.65-.96,0-1.93.4-2.65,1.13-.72.73-1.13,1.61-1.13,2.66,0,.73.24,1.45.64,2.1.48.56,1.05,1.05,1.69,1.37Zm-.32-3.47c0-.48.16-.89.48-1.29.32-.4.8-.48,1.29-.48.32,0,.72.08.96.32.32.16.48.48.64.81.16.32.16.65.08,1.05-.08.32-.24.65-.48.89-.24.24-.56.4-.88.48-.32.08-.72,0-1.05-.08-.32-.08-.64-.4-.8-.65-.16-.32-.24-.73-.24-1.05Z"/>',
+    }}
+  />
 )
 
 WheelOutline.displayName = 'WheelOutline'
diff --git a/packages/components/icons/src/icons/WorkFill.tsx b/packages/components/icons/src/icons/WorkFill.tsx
index 1caea86a7..ea4b172bd 100644
--- a/packages/components/icons/src/icons/WorkFill.tsx
+++ b/packages/components/icons/src/icons/WorkFill.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WorkFill = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WorkFill"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path fill-rule="evenodd" d="m15.53,4.17v2.08h1.49v.75c-.08.42-.41.75-.83.75H7.73c-.41,0-.75-.33-.75-.75v-.75h1.41v-2.08c0-.25.08-.42.25-.5.08-.17.25-.25.5-.25h5.64c.25,0,.41.08.5.25.17.17.25.33.25.5Zm-8.55,2.08v-2.08c0-.58.25-1.08.66-1.5.33-.42.91-.67,1.49-.67h5.73c.58,0,1.08.25,1.49.67.41.42.66.92.66,1.5v2.08h2.74c1.16,0,2.16,1,2.24,2.17v11.42c0,1.17-1,2.17-2.16,2.17H4.16c-1.16,0-2.16-1-2.16-2.17v-11.42c0-1.17,1-2.17,2.16-2.17h2.82Zm0,10.75h9.96c.41,0,.75-.33.75-.75s-.33-.75-.75-.75H6.98c-.41,0-.75.33-.75.75s.33.75.75.75Zm0-4.25h9.96c.41,0,.75-.33.75-.75s-.33-.75-.75-.75H6.98c-.41,0-.75.33-.75.75s.33.75.75.75Z"/><path d="m7.73,7.75h8.46c.41,0,.75-.33.83-.75v-.75H6.98v.75c0,.42.33.75.75.75Z"/>',
-      }}
-    />
-  )
+export const WorkFill = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WorkFill"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path fill-rule="evenodd" d="m15.53,4.17v2.08h1.49v.75c-.08.42-.41.75-.83.75H7.73c-.41,0-.75-.33-.75-.75v-.75h1.41v-2.08c0-.25.08-.42.25-.5.08-.17.25-.25.5-.25h5.64c.25,0,.41.08.5.25.17.17.25.33.25.5Zm-8.55,2.08v-2.08c0-.58.25-1.08.66-1.5.33-.42.91-.67,1.49-.67h5.73c.58,0,1.08.25,1.49.67.41.42.66.92.66,1.5v2.08h2.74c1.16,0,2.16,1,2.24,2.17v11.42c0,1.17-1,2.17-2.16,2.17H4.16c-1.16,0-2.16-1-2.16-2.17v-11.42c0-1.17,1-2.17,2.16-2.17h2.82Zm0,10.75h9.96c.41,0,.75-.33.75-.75s-.33-.75-.75-.75H6.98c-.41,0-.75.33-.75.75s.33.75.75.75Zm0-4.25h9.96c.41,0,.75-.33.75-.75s-.33-.75-.75-.75H6.98c-.41,0-.75.33-.75.75s.33.75.75.75Z"/><path d="m7.73,7.75h8.46c.41,0,.75-.33.83-.75v-.75H6.98v.75c0,.42.33.75.75.75Z"/>',
+    }}
+  />
 )
 
 WorkFill.displayName = 'WorkFill'
diff --git a/packages/components/icons/src/icons/WorkOutline.tsx b/packages/components/icons/src/icons/WorkOutline.tsx
index dc3dddeb7..a7648f797 100644
--- a/packages/components/icons/src/icons/WorkOutline.tsx
+++ b/packages/components/icons/src/icons/WorkOutline.tsx
@@ -1,25 +1,26 @@
-import React, { type Ref } from 'react'
+import React from 'react'
 
 import { IconProps } from '../Types'
 
-export const WorkOutline = React.forwardRef(
-  (
-    { title, fill = 'currentColor', stroke = 'none', ...props }: IconProps,
-    ref: Ref<SVGSVGElement>
-  ) => (
-    <svg
-      ref={ref}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      data-title="WorkOutline"
-      {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
-      dangerouslySetInnerHTML={{
-        __html:
-          (title === undefined ? '' : `<title>${title}</title>`) +
-          '<path d="m16.86,15.21H7.14c-.53,0-.97.44-.97.97s.44.97.97.97h9.72c.53,0,.97-.44.97-.97s-.44-.97-.97-.97Z"/><path d="m19.64,6.17h-2.5v-1.81c0-.62-.25-1.22-.69-1.67-.45-.45-1.05-.69-1.67-.69h-5.56c-.62,0-1.22.25-1.67.69-.45.44-.69,1.05-.69,1.67v1.81h-2.5c-1.3,0-2.36,1.05-2.36,2.36v11.11c0,1.31,1.05,2.36,2.36,2.36h15.28c1.3,0,2.36-1.05,2.36-2.36v-11.11c0-1.31-1.05-2.36-2.36-2.36Zm.41,2.36v11.11c0,.23-.19.41-.41.41H4.36c-.23,0-.41-.19-.41-.41v-11.11c0-.23.19-.41.41-.41h15.28c.23,0,.41.19.41.41Zm-11.25-4.17c0-.11.04-.22.12-.29.08-.07.19-.12.29-.12h5.56c.11,0,.22.04.29.12.08.08.12.19.12.29v1.81h-6.39v-1.81h0Z"/><path d="m16.86,11.03H7.14c-.53,0-.97.44-.97.97s.44.97.97.97h9.72c.53,0,.97-.44.97-.97s-.44-.97-.97-.97Z"/>',
-      }}
-    />
-  )
+export const WorkOutline = ({
+  title,
+  fill = 'currentColor',
+  stroke = 'none',
+  ref,
+  ...props
+}: IconProps) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    data-title="WorkOutline"
+    {...{ ...(title && { 'data-title': title }), fill, stroke, ...props }}
+    dangerouslySetInnerHTML={{
+      __html:
+        (title === undefined ? '' : `<title>${title}</title>`) +
+        '<path d="m16.86,15.21H7.14c-.53,0-.97.44-.97.97s.44.97.97.97h9.72c.53,0,.97-.44.97-.97s-.44-.97-.97-.97Z"/><path d="m19.64,6.17h-2.5v-1.81c0-.62-.25-1.22-.69-1.67-.45-.45-1.05-.69-1.67-.69h-5.56c-.62,0-1.22.25-1.67.69-.45.44-.69,1.05-.69,1.67v1.81h-2.5c-1.3,0-2.36,1.05-2.36,2.36v11.11c0,1.31,1.05,2.36,2.36,2.36h15.28c1.3,0,2.36-1.05,2.36-2.36v-11.11c0-1.31-1.05-2.36-2.36-2.36Zm.41,2.36v11.11c0,.23-.19.41-.41.41H4.36c-.23,0-.41-.19-.41-.41v-11.11c0-.23.19-.41.41-.41h15.28c.23,0,.41.19.41.41Zm-11.25-4.17c0-.11.04-.22.12-.29.08-.07.19-.12.29-.12h5.56c.11,0,.22.04.29.12.08.08.12.19.12.29v1.81h-6.39v-1.81h0Z"/><path d="m16.86,11.03H7.14c-.53,0-.97.44-.97.97s.44.97.97.97h9.72c.53,0,.97-.44.97-.97s-.44-.97-.97-.97Z"/>',
+    }}
+  />
 )
 
 WorkOutline.displayName = 'WorkOutline'
diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md
index 6fec256a3..d391216c4 100644
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/input
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/input
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index db447cdd0..470d45b9c 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/input",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Component used to get user input in a text field",
   "publishConfig": {
     "access": "public"
@@ -23,12 +23,12 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
-    "@spark-ui/use-combined-state": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
+    "@spark-ui/use-combined-state": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/input/src/Input.tsx b/packages/components/input/src/Input.tsx
index 57bcbfcbf..8fe60f150 100644
--- a/packages/components/input/src/Input.tsx
+++ b/packages/components/input/src/Input.tsx
@@ -1,11 +1,6 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
 import { Slot } from '@spark-ui/slot'
-import {
-  ChangeEventHandler,
-  ComponentPropsWithoutRef,
-  forwardRef,
-  KeyboardEventHandler,
-} from 'react'
+import { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'
 
 import { inputStyles } from './Input.styles'
 import { useInputGroup } from './InputGroupContext'
@@ -15,89 +10,86 @@ type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>
 export interface InputProps extends InputPrimitiveProps {
   asChild?: boolean
   onValueChange?: (value: string) => void
+  ref?: Ref<HTMLInputElement>
 }
 
-const Root = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      asChild = false,
-      onValueChange,
-      onChange,
-      onKeyDown,
-      disabled: disabledProp,
-      readOnly: readOnlyProp,
-      ...others
-    },
-    ref
-  ) => {
-    const field = useFormFieldControl()
-    const group = useInputGroup()
+const Root = ({
+  className,
+  asChild = false,
+  onValueChange,
+  onChange,
+  onKeyDown,
+  disabled: disabledProp,
+  readOnly: readOnlyProp,
+  ref,
+  ...others
+}: InputProps) => {
+  const field = useFormFieldControl()
+  const group = useInputGroup()
 
-    const { id, name, isInvalid, isRequired, description } = field
-    const {
-      hasLeadingAddon,
-      hasTrailingAddon,
-      hasLeadingIcon,
-      hasTrailingIcon,
-      hasClearButton,
-      onClear,
-    } = group
-    const Component = asChild ? Slot : 'input'
-    const state = field.state || group.state
-    const disabled = field.disabled || group.disabled || disabledProp
-    const readOnly = field.readOnly || group.readOnly || readOnlyProp
+  const { id, name, isInvalid, isRequired, description } = field
+  const {
+    hasLeadingAddon,
+    hasTrailingAddon,
+    hasLeadingIcon,
+    hasTrailingIcon,
+    hasClearButton,
+    onClear,
+  } = group
+  const Component = asChild ? Slot : 'input'
+  const state = field.state || group.state
+  const disabled = field.disabled || group.disabled || disabledProp
+  const readOnly = field.readOnly || group.readOnly || readOnlyProp
 
-    const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-      if (onChange) {
-        onChange(event)
-      }
-
-      if (onValueChange) {
-        onValueChange(event.target.value)
-      }
+  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+    if (onChange) {
+      onChange(event)
     }
 
-    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
+    if (onValueChange) {
+      onValueChange(event.target.value)
+    }
+  }
 
-      if (hasClearButton && onClear && event.key === 'Escape') {
-        onClear()
-      }
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+    if (onKeyDown) {
+      onKeyDown(event)
     }
 
-    return (
-      <Component
-        ref={ref}
-        id={id}
-        name={name}
-        className={inputStyles({
-          asChild,
-          className,
-          intent: state,
-          hasLeadingAddon: !!hasLeadingAddon,
-          hasTrailingAddon: !!hasTrailingAddon,
-          hasLeadingIcon: !!hasLeadingIcon,
-          hasTrailingIcon: !!hasTrailingIcon,
-          hasClearButton: !!hasClearButton,
-        })}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={isRequired}
-        aria-describedby={description}
-        aria-invalid={isInvalid}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        {...others}
-      />
-    )
+    if (hasClearButton && onClear && event.key === 'Escape') {
+      onClear()
+    }
   }
-)
+
+  return (
+    <Component
+      ref={ref}
+      id={id}
+      name={name}
+      className={inputStyles({
+        asChild,
+        className,
+        intent: state,
+        hasLeadingAddon: !!hasLeadingAddon,
+        hasTrailingAddon: !!hasTrailingAddon,
+        hasLeadingIcon: !!hasLeadingIcon,
+        hasTrailingIcon: !!hasTrailingIcon,
+        hasClearButton: !!hasClearButton,
+      })}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={isRequired}
+      aria-describedby={description}
+      aria-invalid={isInvalid}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      {...others}
+    />
+  )
+}
 
 export const Input = Object.assign(Root, {
   id: 'Input',
 })
 
-Input.displayName = 'Input'
+Root.displayName = 'Input'
diff --git a/packages/components/input/src/InputAddon.tsx b/packages/components/input/src/InputAddon.tsx
index fd02c992f..d3a4c0feb 100644
--- a/packages/components/input/src/InputAddon.tsx
+++ b/packages/components/input/src/InputAddon.tsx
@@ -1,48 +1,54 @@
 import { Slot } from '@spark-ui/slot'
-import { Children, type ComponentPropsWithoutRef, forwardRef, type PropsWithChildren } from 'react'
+import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'
 
 import { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'
 import { useInputGroup } from './InputGroupContext'
 
 export interface InputAddonProps
   extends ComponentPropsWithoutRef<'div'>,
-    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {}
-
-export const InputAddon = forwardRef<HTMLDivElement, PropsWithChildren<InputAddonProps>>(
-  ({ asChild: asChildProp, className, children, ...others }, ref) => {
-    const { state, disabled, readOnly } = useInputGroup()
-
-    const isRawText = typeof children === 'string'
-    const asChild = !!(isRawText ? false : asChildProp)
-    const child = isRawText ? children : Children.only(children)
-    const Component = asChild && !isRawText ? Slot : 'div'
-
-    const getDesign = (): InputAddonStylesProps['design'] => {
-      if (isRawText) return 'text'
-
-      return asChild ? 'solid' : 'inline'
-    }
-
-    const design = getDesign()
-
-    return (
-      <Component
-        ref={ref}
-        className={inputAddonStyles({
-          className,
-          intent: state,
-          disabled,
-          readOnly,
-          asChild,
-          design,
-        })}
-        {...(disabled && { tabIndex: -1 })}
-        {...others}
-      >
-        {child}
-      </Component>
-    )
+    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {
+  ref?: Ref<HTMLDivElement>
+}
+
+export const InputAddon = ({
+  asChild: asChildProp,
+  className,
+  children,
+  ref,
+  ...others
+}: PropsWithChildren<InputAddonProps>) => {
+  const { state, disabled, readOnly } = useInputGroup()
+
+  const isRawText = typeof children === 'string'
+  const asChild = !!(isRawText ? false : asChildProp)
+  const child = isRawText ? children : Children.only(children)
+  const Component = asChild && !isRawText ? Slot : 'div'
+
+  const getDesign = (): InputAddonStylesProps['design'] => {
+    if (isRawText) return 'text'
+
+    return asChild ? 'solid' : 'inline'
   }
-)
+
+  const design = getDesign()
+
+  return (
+    <Component
+      ref={ref}
+      className={inputAddonStyles({
+        className,
+        intent: state,
+        disabled,
+        readOnly,
+        asChild,
+        design,
+      })}
+      {...(disabled && { tabIndex: -1 })}
+      {...others}
+    >
+      {child}
+    </Component>
+  )
+}
 
 InputAddon.displayName = 'InputGroup.Addon'
diff --git a/packages/components/input/src/InputClearButton.tsx b/packages/components/input/src/InputClearButton.tsx
index 07c11de68..ce568bb89 100644
--- a/packages/components/input/src/InputClearButton.tsx
+++ b/packages/components/input/src/InputClearButton.tsx
@@ -1,53 +1,52 @@
 import { Icon } from '@spark-ui/icon'
 import { DeleteOutline } from '@spark-ui/icons/dist/icons/DeleteOutline'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from 'react'
+import { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'
 
 import { useInputGroup } from './InputGroupContext'
 
 export interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-const Root = forwardRef<HTMLButtonElement, InputClearButtonProps>(
-  ({ className, tabIndex = -1, onClick, ...others }, ref) => {
-    const { onClear, hasTrailingIcon } = useInputGroup()
+const Root = ({ className, tabIndex = -1, onClick, ref, ...others }: InputClearButtonProps) => {
+  const { onClear, hasTrailingIcon } = useInputGroup()
 
-    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
-      if (onClick) {
-        onClick(event)
-      }
-
-      if (onClear) {
-        onClear()
-      }
+  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    if (onClick) {
+      onClick(event)
     }
 
-    return (
-      <button
-        ref={ref}
-        className={cx(
-          className,
-          'pointer-events-auto absolute top-1/2 -translate-y-1/2',
-          'inline-flex h-full items-center justify-center outline-none',
-          'text-neutral hover:text-neutral-hovered',
-          hasTrailingIcon ? 'right-3xl px-[var(--sz-12)]' : 'right-none pl-md pr-lg'
-        )}
-        tabIndex={tabIndex}
-        onClick={handleClick}
-        type="button"
-        {...others}
-      >
-        <Icon size="sm">
-          <DeleteOutline />
-        </Icon>
-      </button>
-    )
+    if (onClear) {
+      onClear()
+    }
   }
-)
+
+  return (
+    <button
+      ref={ref}
+      className={cx(
+        className,
+        'pointer-events-auto absolute top-1/2 -translate-y-1/2',
+        'inline-flex h-full items-center justify-center outline-none',
+        'text-neutral hover:text-neutral-hovered',
+        hasTrailingIcon ? 'right-3xl px-[var(--sz-12)]' : 'right-none pl-md pr-lg'
+      )}
+      tabIndex={tabIndex}
+      onClick={handleClick}
+      type="button"
+      {...others}
+    >
+      <Icon size="sm">
+        <DeleteOutline />
+      </Icon>
+    </button>
+  )
+}
 
 export const InputClearButton = Object.assign(Root, {
   id: 'ClearButton',
 })
 
-InputClearButton.displayName = 'InputGroup.ClearButton'
+Root.displayName = 'InputGroup.ClearButton'
diff --git a/packages/components/input/src/InputGroup.tsx b/packages/components/input/src/InputGroup.tsx
index b9791c2f5..f6e35cd3a 100644
--- a/packages/components/input/src/InputGroup.tsx
+++ b/packages/components/input/src/InputGroup.tsx
@@ -11,10 +11,10 @@ import {
   ComponentPropsWithoutRef,
   DetailedReactHTMLElement,
   FC,
-  forwardRef,
   isValidElement,
   PropsWithChildren,
   ReactElement,
+  Ref,
   useCallback,
   useEffect,
   useMemo,
@@ -34,95 +34,82 @@ export interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputG
    * Function handler to be executed after the input has been cleared.
    */
   onClear?: () => void
+  ref?: Ref<HTMLDivElement>
 }
 
-export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGroupProps>>(
-  (
-    {
-      className,
-      children: childrenProp,
-      state: stateProp,
-      disabled: disabledProp,
-      readOnly: readOnlyProp,
-      onClear,
-      ...others
-    },
-    forwardRef
-  ) => {
-    const getElementId = (element?: ReactElement) => {
-      return element ? (element.type as FC & { id?: string }).id : ''
-    }
+export const InputGroup = ({
+  className,
+  children: childrenProp,
+  state: stateProp,
+  disabled: disabledProp,
+  readOnly: readOnlyProp,
+  onClear,
+  ref: forwardedRef,
+  ...others
+}: PropsWithChildren<InputGroupProps>) => {
+  const getElementId = (element?: ReactElement) => {
+    return element ? (element.type as FC & { id?: string }).id : ''
+  }
+
+  const findElement = (...values: string[]) => {
+    return children.find(child => values.includes(getElementId(child) || ''))
+  }
 
-    const findElement = (...values: string[]) => {
-      return children.find(child => values.includes(getElementId(child) || ''))
+  const children = Children.toArray(childrenProp).filter(isValidElement)
+  const input = findElement('Input') as
+    | DetailedReactHTMLElement<InputProps, HTMLInputElement>
+    | undefined
+  const props = input?.props || {}
+
+  const inputRef = useRef<HTMLInputElement>(null!)
+  const onClearRef = useRef(onClear)
+  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)
+  const [value, onChange] = useCombinedState(
+    props.value as string,
+    props.defaultValue as string,
+    props.onValueChange
+  )
+
+  // Data derivated from FormField context
+  const field = useFormFieldControl()
+  const state = field.state ?? stateProp
+  const disabled = field.disabled || !!disabledProp
+  const readOnly = field.readOnly || !!readOnlyProp
+
+  // InputGroup elements (in visual order)
+  const leadingAddon = findElement('LeadingAddon')
+  const leadingIcon = findElement('LeadingIcon')
+  const clearButton = findElement('ClearButton')
+  const trailingIcon = findElement('TrailingIcon')
+  const trailingAddon = findElement('TrailingAddon')
+
+  // Acknowledge which subComponents are used in the compound context
+  const hasLeadingAddon = !!leadingAddon
+  const hasTrailingAddon = !!trailingAddon
+  const hasLeadingIcon = !!leadingIcon
+  const hasTrailingIcon = !!trailingIcon
+  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+    if (props.onChange) {
+      props.onChange(event)
     }
 
-    const children = Children.toArray(childrenProp).filter(isValidElement)
-    const input = findElement('Input') as
-      | DetailedReactHTMLElement<InputProps, HTMLInputElement>
-      | undefined
-    const props = input?.props || {}
-
-    const inputRef = useRef<HTMLInputElement>(null!)
-    const onClearRef = useRef(onClear)
-    const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)
-    const [value, onChange] = useCombinedState(
-      props.value as string,
-      props.defaultValue as string,
-      props.onValueChange
-    )
-
-    // Data derivated from FormField context
-    const field = useFormFieldControl()
-    const state = field.state ?? stateProp
-    const disabled = field.disabled || !!disabledProp
-    const readOnly = field.readOnly || !!readOnlyProp
-
-    // InputGroup elements (in visual order)
-    const leadingAddon = findElement('LeadingAddon')
-    const leadingIcon = findElement('LeadingIcon')
-    const clearButton = findElement('ClearButton')
-    const trailingIcon = findElement('TrailingIcon')
-    const trailingAddon = findElement('TrailingAddon')
-
-    // Acknowledge which subComponents are used in the compound context
-    const hasLeadingAddon = !!leadingAddon
-    const hasTrailingAddon = !!trailingAddon
-    const hasLeadingIcon = !!leadingIcon
-    const hasTrailingIcon = !!trailingIcon
-    const hasClearButton = !!value && !!clearButton && !disabled && !readOnly
-
-    const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-      if (props.onChange) {
-        props.onChange(event)
-      }
-
-      onChange(event.target.value)
+    onChange(event.target.value)
+  }
+
+  const handleClear = useCallback(() => {
+    if (onClearRef.current) {
+      onClearRef.current()
     }
 
-    const handleClear = useCallback(() => {
-      if (onClearRef.current) {
-        onClearRef.current()
-      }
-
-      onChange('')
-
-      inputRef.current.focus()
-    }, [onChange])
-
-    const current = useMemo(() => {
-      return {
-        state,
-        disabled,
-        readOnly,
-        hasLeadingIcon,
-        hasTrailingIcon,
-        hasLeadingAddon,
-        hasTrailingAddon,
-        hasClearButton,
-        onClear: handleClear,
-      }
-    }, [
+    onChange('')
+
+    inputRef.current.focus()
+  }, [onChange])
+
+  const current = useMemo(() => {
+    return {
       state,
       disabled,
       readOnly,
@@ -131,43 +118,53 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
       hasLeadingAddon,
       hasTrailingAddon,
       hasClearButton,
-      handleClear,
-    ])
-
-    useEffect(() => {
-      onClearRef.current = onClear
-    }, [onClear])
-
-    return (
-      <InputGroupContext.Provider value={current}>
-        <div
-          ref={forwardRef}
-          className={inputGroupStyles({ disabled, readOnly, className })}
-          {...others}
-        >
-          {hasLeadingAddon && leadingAddon}
-
-          <div className="relative inline-flex w-full">
-            {input &&
-              cloneElement(input, {
-                ref,
-                defaultValue: undefined,
-                value: value ?? '',
-                onChange: handleChange,
-              })}
-
-            {leadingIcon}
-
-            {hasClearButton && clearButton}
-
-            {trailingIcon}
-          </div>
-
-          {hasTrailingAddon && trailingAddon}
+      onClear: handleClear,
+    }
+  }, [
+    state,
+    disabled,
+    readOnly,
+    hasLeadingIcon,
+    hasTrailingIcon,
+    hasLeadingAddon,
+    hasTrailingAddon,
+    hasClearButton,
+    handleClear,
+  ])
+
+  useEffect(() => {
+    onClearRef.current = onClear
+  }, [onClear])
+
+  return (
+    <InputGroupContext.Provider value={current}>
+      <div
+        ref={forwardedRef}
+        className={inputGroupStyles({ disabled, readOnly, className })}
+        {...others}
+      >
+        {hasLeadingAddon && leadingAddon}
+
+        <div className="relative inline-flex w-full">
+          {input &&
+            cloneElement(input, {
+              ref,
+              defaultValue: undefined,
+              value: value ?? '',
+              onChange: handleChange,
+            })}
+
+          {leadingIcon}
+
+          {hasClearButton && clearButton}
+
+          {trailingIcon}
         </div>
-      </InputGroupContext.Provider>
-    )
-  }
-)
+
+        {hasTrailingAddon && trailingAddon}
+      </div>
+    </InputGroupContext.Provider>
+  )
+}
 
 InputGroup.displayName = 'InputGroup'
diff --git a/packages/components/input/src/InputLeadingAddon.tsx b/packages/components/input/src/InputLeadingAddon.tsx
index 491588bf8..116eb1c68 100644
--- a/packages/components/input/src/InputLeadingAddon.tsx
+++ b/packages/components/input/src/InputLeadingAddon.tsx
@@ -1,12 +1,14 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { InputAddon, InputAddonProps } from './InputAddon'
 import { useInputGroup } from './InputGroupContext'
 
-export type InputLeadingAddonProps = InputAddonProps
+export type InputLeadingAddonProps = InputAddonProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-const Root = forwardRef<HTMLDivElement, InputLeadingAddonProps>(({ className, ...others }, ref) => {
+const Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {
   const { disabled, readOnly } = useInputGroup()
   const isInactive = disabled || readOnly
 
@@ -19,10 +21,10 @@ const Root = forwardRef<HTMLDivElement, InputLeadingAddonProps>(({ className, ..
       />
     </div>
   )
-})
+}
 
 export const InputLeadingAddon = Object.assign(Root, {
   id: 'LeadingAddon',
 })
 
-InputLeadingAddon.displayName = 'InputGroup.LeadingAddon'
+Root.displayName = 'InputGroup.LeadingAddon'
diff --git a/packages/components/input/src/InputTrailingAddon.tsx b/packages/components/input/src/InputTrailingAddon.tsx
index dd47150a8..0b9572b41 100644
--- a/packages/components/input/src/InputTrailingAddon.tsx
+++ b/packages/components/input/src/InputTrailingAddon.tsx
@@ -1,30 +1,30 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { InputAddon, InputAddonProps } from './InputAddon'
 import { useInputGroup } from './InputGroupContext'
 
-export type InputTrailingAddonProps = InputAddonProps
+export type InputTrailingAddonProps = InputAddonProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-const Root = forwardRef<HTMLDivElement, InputTrailingAddonProps>(
-  ({ className, ...others }, ref) => {
-    const { disabled, readOnly } = useInputGroup()
-    const isInactive = disabled || readOnly
+const Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {
+  const { disabled, readOnly } = useInputGroup()
+  const isInactive = disabled || readOnly
 
-    return (
-      <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>
-        <InputAddon
-          ref={ref}
-          className={cx(className, 'ml-[-1px] !rounded-l-none rounded-r-lg')}
-          {...others}
-        />
-      </div>
-    )
-  }
-)
+  return (
+    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>
+      <InputAddon
+        ref={ref}
+        className={cx(className, 'ml-[-1px] !rounded-l-none rounded-r-lg')}
+        {...others}
+      />
+    </div>
+  )
+}
 
 export const InputTrailingAddon = Object.assign(Root, {
   id: 'TrailingAddon',
 })
 
-InputTrailingAddon.displayName = 'InputGroup.TrailingAddon'
+Root.displayName = 'InputGroup.TrailingAddon'
diff --git a/packages/components/kbd/CHANGELOG.md b/packages/components/kbd/CHANGELOG.md
index 300e82ebf..22a91300c 100644
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/kbd
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/kbd
diff --git a/packages/components/kbd/package.json b/packages/components/kbd/package.json
index 60f102221..226cb04e9 100644
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/kbd",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "render a keyboard shortcut",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/kbd/src/Kbd.tsx b/packages/components/kbd/src/Kbd.tsx
index 29882f8b7..e77380e04 100644
--- a/packages/components/kbd/src/Kbd.tsx
+++ b/packages/components/kbd/src/Kbd.tsx
@@ -1,18 +1,18 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'
 
-export type KbdProps = ComponentPropsWithoutRef<'div'>
+export type KbdProps = ComponentPropsWithoutRef<'div'> & {
+  ref?: Ref<HTMLElement>
+}
 
-export const Kbd = forwardRef<HTMLElement, PropsWithChildren<KbdProps>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <kbd
-        ref={ref}
-        className={[
-          'whitespace-nowrap rounded-sm border-sm border-b-md border-outline bg-neutral-container pe-md ps-md font-mono text-caption font-bold leading-4',
-          className,
-        ].join(' ')}
-        {...props}
-      />
-    )
-  }
-)
+export const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {
+  return (
+    <kbd
+      ref={ref}
+      className={[
+        'whitespace-nowrap rounded-sm border-sm border-b-md border-outline bg-neutral-container pe-md ps-md font-mono text-caption font-bold leading-4',
+        className,
+      ].join(' ')}
+      {...props}
+    />
+  )
+}
diff --git a/packages/components/label/CHANGELOG.md b/packages/components/label/CHANGELOG.md
index 91069c91c..fb79e727b 100644
--- a/packages/components/label/CHANGELOG.md
+++ b/packages/components/label/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/label
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/label
diff --git a/packages/components/label/package.json b/packages/components/label/package.json
index 6468fc604..16508c7ab 100644
--- a/packages/components/label/package.json
+++ b/packages/components/label/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/label",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Renders an accessible label associated with controls",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/label/src/Label.tsx b/packages/components/label/src/Label.tsx
index cff0dfb19..6dfe39c82 100644
--- a/packages/components/label/src/Label.tsx
+++ b/packages/components/label/src/Label.tsx
@@ -1,10 +1,12 @@
 import { Label as LabelPrimitive, LabelProps as LabelPrimitiveProps } from '@radix-ui/react-label'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type LabelProps = LabelPrimitiveProps
+export type LabelProps = LabelPrimitiveProps & {
+  ref?: Ref<HTMLLabelElement>
+}
 
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(({ className, ...others }, ref) => {
+export const Label = ({ className, ref, ...others }: LabelProps) => {
   return (
     <LabelPrimitive
       ref={ref}
@@ -13,6 +15,6 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(({ className, ...o
       {...others}
     />
   )
-})
+}
 
 Label.displayName = 'Label'
diff --git a/packages/components/label/src/LabelRequiredIndicator.tsx b/packages/components/label/src/LabelRequiredIndicator.tsx
index d238773e8..76acadc4a 100644
--- a/packages/components/label/src/LabelRequiredIndicator.tsx
+++ b/packages/components/label/src/LabelRequiredIndicator.tsx
@@ -1,23 +1,26 @@
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithRef } from 'react'
 
-export type LabelRequiredIndicatorProps = ComponentPropsWithoutRef<'span'>
+export type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>
 
-export const LabelRequiredIndicator = forwardRef<HTMLSpanElement, LabelRequiredIndicatorProps>(
-  ({ className, children = '*', ...others }, ref) => {
-    return (
-      <span
-        ref={ref}
-        data-spark-component="label-required-indicator"
-        role="presentation"
-        aria-hidden="true"
-        className={cx(className, 'text-caption text-on-surface/dim-1')}
-        {...others}
-      >
-        {children}
-      </span>
-    )
-  }
-)
+export const LabelRequiredIndicator = ({
+  className,
+  children = '*',
+  ref,
+  ...others
+}: LabelRequiredIndicatorProps) => {
+  return (
+    <span
+      ref={ref}
+      data-spark-component="label-required-indicator"
+      role="presentation"
+      aria-hidden="true"
+      className={cx(className, 'text-caption text-on-surface/dim-1')}
+      {...others}
+    >
+      {children}
+    </span>
+  )
+}
 
 LabelRequiredIndicator.displayName = 'Label.RequiredIndicator'
diff --git a/packages/components/link-box/CHANGELOG.md b/packages/components/link-box/CHANGELOG.md
index 1f0683baf..876fe9b37 100644
--- a/packages/components/link-box/CHANGELOG.md
+++ b/packages/components/link-box/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/link-box
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/link-box
diff --git a/packages/components/link-box/package.json b/packages/components/link-box/package.json
index 2d422f282..fb93e6b4a 100644
--- a/packages/components/link-box/package.json
+++ b/packages/components/link-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/link-box",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Semantic component used to wrap elements (cards, blog posts, articles, etc.) in a link.",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/slot": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/link-box/src/LinkBox.tsx b/packages/components/link-box/src/LinkBox.tsx
index 28660f5a8..32850d294 100644
--- a/packages/components/link-box/src/LinkBox.tsx
+++ b/packages/components/link-box/src/LinkBox.tsx
@@ -1,24 +1,21 @@
 import { Slot } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
 
-export interface LinkBoxProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface LinkBoxProps extends React.ComponentPropsWithRef<'div'> {
   asChild?: boolean
 }
 
-export const LinkBox = forwardRef<HTMLDivElement, LinkBoxProps>(
-  ({ className, asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : 'div'
+export const LinkBox = ({ className, asChild, ref, ...props }: LinkBoxProps) => {
+  const Component = asChild ? Slot : 'div'
 
-    return (
-      <Component
-        ref={ref}
-        data-spark-component="link-box"
-        className={cx('relative', className)}
-        {...props}
-      />
-    )
-  }
-)
+  return (
+    <Component
+      ref={ref}
+      data-spark-component="link-box"
+      className={cx('relative', className)}
+      {...props}
+    />
+  )
+}
 
 LinkBox.displayName = 'LinkBox'
diff --git a/packages/components/link-box/src/LinkBoxLink.tsx b/packages/components/link-box/src/LinkBoxLink.tsx
index 021822df1..d18892f16 100644
--- a/packages/components/link-box/src/LinkBoxLink.tsx
+++ b/packages/components/link-box/src/LinkBoxLink.tsx
@@ -1,27 +1,25 @@
 import { Slot } from '@spark-ui/slot'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithRef } from 'react'
 
-export interface LinkBoxLinkProps extends ComponentPropsWithoutRef<'a'> {
+export interface LinkBoxLinkProps extends ComponentPropsWithRef<'a'> {
   asChild?: boolean
 }
 
-export const LinkBoxLink = forwardRef<HTMLAnchorElement, LinkBoxLinkProps>(
-  ({ className, asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : 'a'
+export const LinkBoxLink = ({ className, asChild, ref, ...props }: LinkBoxLinkProps) => {
+  const Component = asChild ? Slot : 'a'
 
-    return (
-      <Component
-        ref={ref}
-        data-spark-component="link-box-link"
-        className={cx(
-          "static before:absolute before:left-none before:top-none before:z-base before:block before:size-full before:content-['']",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
+  return (
+    <Component
+      ref={ref}
+      data-spark-component="link-box-link"
+      className={cx(
+        "static before:absolute before:left-none before:top-none before:z-base before:block before:size-full before:content-['']",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
 LinkBoxLink.displayName = 'LinkBox.Link'
diff --git a/packages/components/pagination/CHANGELOG.md b/packages/components/pagination/CHANGELOG.md
index 035d137ca..dd4e69e92 100644
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/pagination
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/pagination
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index 4dcd0e438..0579a52c0 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/pagination",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "interface that allows navigating between pages that contain split information, instead of being shown on a single page",
   "publishConfig": {
     "access": "public"
@@ -44,11 +44,11 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/button": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
+    "@spark-ui/button": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
     "@zag-js/pagination": "0.81.0",
     "@zag-js/react": "0.81.0"
   }
diff --git a/packages/components/pagination/src/PaginationEllipsis.tsx b/packages/components/pagination/src/PaginationEllipsis.tsx
index 66de42a3a..4cbd41562 100644
--- a/packages/components/pagination/src/PaginationEllipsis.tsx
+++ b/packages/components/pagination/src/PaginationEllipsis.tsx
@@ -1,37 +1,35 @@
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface EllipsisProps extends ComponentPropsWithoutRef<'span'> {
+interface EllipsisProps extends ComponentPropsWithRef<'span'> {
   index: number
 }
 
-export const Ellipsis = forwardRef<HTMLSpanElement, EllipsisProps>(
-  ({ children, index, className, ...rest }, ref) => {
-    const { pagination } = usePagination()
-    const apiProps = pagination.getEllipsisProps({ index })
-    const localProps = {
-      className: cx('flex size-sz-44 items-center justify-center', className),
-      ...rest,
-    }
+export const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {
+  const { pagination } = usePagination()
+  const apiProps = pagination.getEllipsisProps({ index })
+  const localProps = {
+    className: cx('flex size-sz-44 items-center justify-center', className),
+    ...rest,
+  }
 
-    const mergedProps = mergeProps(apiProps, localProps)
+  const mergedProps = mergeProps(apiProps, localProps)
 
-    return (
-      <li>
-        <span
-          data-spark-component="pagination-ellipsis"
-          ref={ref}
-          className={cx('flex size-sz-44 items-center justify-center')}
-          {...mergedProps}
-        >
-          {children || '\u2026'}
-        </span>
-      </li>
-    )
-  }
-)
+  return (
+    <li>
+      <span
+        data-spark-component="pagination-ellipsis"
+        ref={ref}
+        className={cx('flex size-sz-44 items-center justify-center')}
+        {...mergedProps}
+      >
+        {children || '\u2026'}
+      </span>
+    </li>
+  )
+}
 
 Ellipsis.displayName = 'Pagination.Ellipsis'
diff --git a/packages/components/pagination/src/PaginationFirstPageTrigger.tsx b/packages/components/pagination/src/PaginationFirstPageTrigger.tsx
index 291f98d6d..da0389196 100644
--- a/packages/components/pagination/src/PaginationFirstPageTrigger.tsx
+++ b/packages/components/pagination/src/PaginationFirstPageTrigger.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { ArrowDoubleLeft } from '@spark-ui/icons/dist/icons/ArrowDoubleLeft'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { usePagination } from './PaginationContext'
 
@@ -15,61 +15,66 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
 }
 export type FirstPageTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const FirstPageTrigger = forwardRef<HTMLButtonElement, FirstPageTriggerProps>(
-  ({ children, className, href, ...props }, ref) => {
-    const { pagination, type } = usePagination()
+export const FirstPageTrigger = ({
+  children,
+  className,
+  href,
+  ref,
+  ...props
+}: FirstPageTriggerProps) => {
+  const { pagination, type } = usePagination()
 
-    // ZagJS props
-    const apiProps = pagination.getFirstPageTriggerProps()
+  // ZagJS props
+  const apiProps = pagination.getFirstPageTriggerProps()
 
-    const shouldDisableLink =
-      type === 'link' &&
-      (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
+  const shouldDisableLink =
+    type === 'link' &&
+    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
 
-    // Locally managed props
-    const localProps = {
-      'data-spark-component': 'pagination-first-page-trigger',
-      intent: 'support',
-      design: 'ghost',
-      ...props,
-      className,
-      ...(shouldDisableLink && {
-        disabled: true,
-        role: 'link',
-        'aria-disabled': true,
-      }),
-    }
+  // Locally managed props
+  const localProps = {
+    'data-spark-component': 'pagination-first-page-trigger',
+    intent: 'support',
+    design: 'ghost',
+    ...props,
+    className,
+    ...(shouldDisableLink && {
+      disabled: true,
+      role: 'link',
+      'aria-disabled': true,
+    }),
+  }
 
-    // We know 'aria-label' is included in props
-    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+  // We know 'aria-label' is included in props
+  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
 
-    const mergedProps = mergeProps(
-      apiProps,
-      localProps as unknown as typeof apiProps
-    ) as WithAriaLabel
+  const mergedProps = mergeProps(
+    apiProps,
+    localProps as unknown as typeof apiProps
+  ) as WithAriaLabel
 
-    const content = children || (
-      <Icon>
-        <ArrowDoubleLeft />
-      </Icon>
-    )
+  const content = children || (
+    <Icon>
+      <ArrowDoubleLeft />
+    </Icon>
+  )
 
-    return (
-      <li>
-        {href ? (
-          <IconButton ref={ref} {...mergedProps} asChild>
-            <a href={shouldDisableLink ? undefined : href}>{content}</a>
-          </IconButton>
-        ) : (
-          <IconButton ref={ref} {...mergedProps}>
-            {content}
-          </IconButton>
-        )}
-      </li>
-    )
-  }
-)
+  return (
+    <li>
+      {href ? (
+        <IconButton ref={ref} {...mergedProps} asChild>
+          <a href={shouldDisableLink ? undefined : href}>{content}</a>
+        </IconButton>
+      ) : (
+        <IconButton ref={ref} {...mergedProps}>
+          {content}
+        </IconButton>
+      )}
+    </li>
+  )
+}
 
 FirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'
diff --git a/packages/components/pagination/src/PaginationItem.tsx b/packages/components/pagination/src/PaginationItem.tsx
index 081941eaf..cdeb848c4 100644
--- a/packages/components/pagination/src/PaginationItem.tsx
+++ b/packages/components/pagination/src/PaginationItem.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@spark-ui/button'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { usePagination } from './PaginationContext'
 
@@ -14,40 +14,39 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
 export type ItemProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
   'aria-label': string
   value: number
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const Item = forwardRef<HTMLButtonElement, ItemProps>(
-  ({ children, value, className, href, ...props }, ref) => {
-    const { pagination } = usePagination()
-
-    // ZagJS props
-    const apiProps = pagination.getItemProps({ type: 'page', value })
-
-    // Locally managed props
-    const localProps = {
-      'data-spark-component': 'pagination-item',
-      intent: 'support',
-      design: apiProps['aria-current'] === 'page' ? 'filled' : 'ghost',
-      className,
-      ...props,
-    }
-
-    const mergedProps = mergeProps(apiProps, localProps)
-
-    return (
-      <li>
-        {href ? (
-          <Button ref={ref} {...mergedProps} asChild>
-            <a href={href}>{children || value}</a>
-          </Button>
-        ) : (
-          <Button ref={ref} {...mergedProps}>
-            {children || value}
-          </Button>
-        )}
-      </li>
-    )
+export const Item = ({ children, value, className, href, ref, ...props }: ItemProps) => {
+  const { pagination } = usePagination()
+
+  // ZagJS props
+  const apiProps = pagination.getItemProps({ type: 'page', value })
+
+  // Locally managed props
+  const localProps = {
+    'data-spark-component': 'pagination-item',
+    intent: 'support',
+    design: apiProps['aria-current'] === 'page' ? 'filled' : 'ghost',
+    className,
+    ...props,
   }
-)
+
+  const mergedProps = mergeProps(apiProps, localProps)
+
+  return (
+    <li>
+      {href ? (
+        <Button ref={ref} {...mergedProps} asChild>
+          <a href={href}>{children || value}</a>
+        </Button>
+      ) : (
+        <Button ref={ref} {...mergedProps}>
+          {children || value}
+        </Button>
+      )}
+    </li>
+  )
+}
 
 Item.displayName = 'Pagination.Item'
diff --git a/packages/components/pagination/src/PaginationLastPageTrigger.tsx b/packages/components/pagination/src/PaginationLastPageTrigger.tsx
index 5c94d2635..26cc7e0fe 100644
--- a/packages/components/pagination/src/PaginationLastPageTrigger.tsx
+++ b/packages/components/pagination/src/PaginationLastPageTrigger.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { ArrowDoubleRight } from '@spark-ui/icons/dist/icons/ArrowDoubleRight'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { usePagination } from './PaginationContext'
 
@@ -15,61 +15,66 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
 }
 export type LastPageTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const LastPageTrigger = forwardRef<HTMLButtonElement, LastPageTriggerProps>(
-  ({ children, className, href, ...props }, ref) => {
-    const { pagination, type } = usePagination()
+export const LastPageTrigger = ({
+  children,
+  className,
+  href,
+  ref,
+  ...props
+}: LastPageTriggerProps) => {
+  const { pagination, type } = usePagination()
 
-    // ZagJS props
-    const apiProps = pagination.getLastPageTriggerProps()
+  // ZagJS props
+  const apiProps = pagination.getLastPageTriggerProps()
 
-    const shouldDisableLink =
-      type === 'link' &&
-      (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
+  const shouldDisableLink =
+    type === 'link' &&
+    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
 
-    // Locally managed props
-    const localProps = {
-      'data-spark-component': 'pagination-last-page-trigger',
-      intent: 'support',
-      design: 'ghost',
-      ...props,
-      className,
-      ...(shouldDisableLink && {
-        disabled: true,
-        role: 'link',
-        'aria-disabled': true,
-      }),
-    }
+  // Locally managed props
+  const localProps = {
+    'data-spark-component': 'pagination-last-page-trigger',
+    intent: 'support',
+    design: 'ghost',
+    ...props,
+    className,
+    ...(shouldDisableLink && {
+      disabled: true,
+      role: 'link',
+      'aria-disabled': true,
+    }),
+  }
 
-    // We know 'aria-label' is included in props
-    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+  // We know 'aria-label' is included in props
+  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
 
-    const mergedProps = mergeProps(
-      apiProps,
-      localProps as unknown as typeof apiProps
-    ) as WithAriaLabel
+  const mergedProps = mergeProps(
+    apiProps,
+    localProps as unknown as typeof apiProps
+  ) as WithAriaLabel
 
-    const content = children || (
-      <Icon>
-        <ArrowDoubleRight />
-      </Icon>
-    )
+  const content = children || (
+    <Icon>
+      <ArrowDoubleRight />
+    </Icon>
+  )
 
-    return (
-      <li>
-        {href ? (
-          <IconButton ref={ref} {...mergedProps} asChild>
-            <a href={shouldDisableLink ? undefined : href}>{content}</a>
-          </IconButton>
-        ) : (
-          <IconButton ref={ref} {...mergedProps}>
-            {content}
-          </IconButton>
-        )}
-      </li>
-    )
-  }
-)
+  return (
+    <li>
+      {href ? (
+        <IconButton ref={ref} {...mergedProps} asChild>
+          <a href={shouldDisableLink ? undefined : href}>{content}</a>
+        </IconButton>
+      ) : (
+        <IconButton ref={ref} {...mergedProps}>
+          {content}
+        </IconButton>
+      )}
+    </li>
+  )
+}
 
 LastPageTrigger.displayName = 'Pagination.LastPageTrigger'
diff --git a/packages/components/pagination/src/PaginationNextTrigger.tsx b/packages/components/pagination/src/PaginationNextTrigger.tsx
index efc62d884..70e8f33b7 100644
--- a/packages/components/pagination/src/PaginationNextTrigger.tsx
+++ b/packages/components/pagination/src/PaginationNextTrigger.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { ArrowVerticalRight } from '@spark-ui/icons/dist/icons/ArrowVerticalRight'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { usePagination } from './PaginationContext'
 
@@ -15,61 +15,60 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
 }
 export type NextTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const NextTrigger = forwardRef<HTMLButtonElement, NextTriggerProps>(
-  ({ children, className, href, ...props }, ref) => {
-    const { pagination, type } = usePagination()
+export const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {
+  const { pagination, type } = usePagination()
 
-    // ZagJS props
-    const apiProps = pagination.getNextTriggerProps()
+  // ZagJS props
+  const apiProps = pagination.getNextTriggerProps()
 
-    const shouldDisableLink =
-      type === 'link' &&
-      (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
+  const shouldDisableLink =
+    type === 'link' &&
+    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
 
-    // Locally managed props
-    const localProps = {
-      'data-spark-component': 'pagination-next-trigger',
-      intent: 'support',
-      design: 'ghost',
-      ...props,
-      className,
-      ...(shouldDisableLink && {
-        disabled: true,
-        role: 'link',
-        'aria-disabled': true,
-      }),
-    }
+  // Locally managed props
+  const localProps = {
+    'data-spark-component': 'pagination-next-trigger',
+    intent: 'support',
+    design: 'ghost',
+    ...props,
+    className,
+    ...(shouldDisableLink && {
+      disabled: true,
+      role: 'link',
+      'aria-disabled': true,
+    }),
+  }
 
-    // We know 'aria-label' is included in props
-    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+  // We know 'aria-label' is included in props
+  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
 
-    const mergedProps = mergeProps(
-      apiProps,
-      localProps as unknown as typeof apiProps
-    ) as WithAriaLabel
+  const mergedProps = mergeProps(
+    apiProps,
+    localProps as unknown as typeof apiProps
+  ) as WithAriaLabel
 
-    const content = children || (
-      <Icon>
-        <ArrowVerticalRight />
-      </Icon>
-    )
+  const content = children || (
+    <Icon>
+      <ArrowVerticalRight />
+    </Icon>
+  )
 
-    return (
-      <li>
-        {href ? (
-          <IconButton ref={ref} {...mergedProps} asChild>
-            <a href={shouldDisableLink ? undefined : href}>{content}</a>
-          </IconButton>
-        ) : (
-          <IconButton ref={ref} {...mergedProps}>
-            {content}
-          </IconButton>
-        )}
-      </li>
-    )
-  }
-)
+  return (
+    <li>
+      {href ? (
+        <IconButton ref={ref} {...mergedProps} asChild>
+          <a href={shouldDisableLink ? undefined : href}>{content}</a>
+        </IconButton>
+      ) : (
+        <IconButton ref={ref} {...mergedProps}>
+          {content}
+        </IconButton>
+      )}
+    </li>
+  )
+}
 
 NextTrigger.displayName = 'Pagination.NextTrigger'
diff --git a/packages/components/pagination/src/PaginationPrevTrigger.tsx b/packages/components/pagination/src/PaginationPrevTrigger.tsx
index 8ecf6b689..5b5a07b55 100644
--- a/packages/components/pagination/src/PaginationPrevTrigger.tsx
+++ b/packages/components/pagination/src/PaginationPrevTrigger.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { ArrowVerticalLeft } from '@spark-ui/icons/dist/icons/ArrowVerticalLeft'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, Ref } from 'react'
 
 import { usePagination } from './PaginationContext'
 
@@ -15,61 +15,60 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
 }
 export type PrevTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const PrevTrigger = forwardRef<HTMLButtonElement, PrevTriggerProps>(
-  ({ children, className, href, ...props }, ref) => {
-    const { pagination, type } = usePagination()
+export const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {
+  const { pagination, type } = usePagination()
 
-    // ZagJS props
-    const apiProps = pagination.getPrevTriggerProps()
+  // ZagJS props
+  const apiProps = pagination.getPrevTriggerProps()
 
-    const shouldDisableLink =
-      type === 'link' &&
-      (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
+  const shouldDisableLink =
+    type === 'link' &&
+    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''
 
-    // Locally managed props
-    const localProps = {
-      'data-spark-component': 'pagination-prev-trigger',
-      intent: 'support',
-      design: 'ghost',
-      ...props,
-      className,
-      ...(shouldDisableLink && {
-        disabled: true,
-        role: 'link',
-        'aria-disabled': true,
-      }),
-    }
+  // Locally managed props
+  const localProps = {
+    'data-spark-component': 'pagination-prev-trigger',
+    intent: 'support',
+    design: 'ghost',
+    ...props,
+    className,
+    ...(shouldDisableLink && {
+      disabled: true,
+      role: 'link',
+      'aria-disabled': true,
+    }),
+  }
 
-    // We know 'aria-label' is included in props
-    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+  // We know 'aria-label' is included in props
+  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
 
-    const mergedProps = mergeProps(
-      apiProps,
-      localProps as unknown as typeof apiProps
-    ) as WithAriaLabel
+  const mergedProps = mergeProps(
+    apiProps,
+    localProps as unknown as typeof apiProps
+  ) as WithAriaLabel
 
-    const content = children || (
-      <Icon>
-        <ArrowVerticalLeft />
-      </Icon>
-    )
+  const content = children || (
+    <Icon>
+      <ArrowVerticalLeft />
+    </Icon>
+  )
 
-    return (
-      <li>
-        {href ? (
-          <IconButton ref={ref} {...mergedProps} asChild>
-            <a href={shouldDisableLink ? undefined : href}>{content}</a>
-          </IconButton>
-        ) : (
-          <IconButton ref={ref} {...mergedProps}>
-            {content}
-          </IconButton>
-        )}
-      </li>
-    )
-  }
-)
+  return (
+    <li>
+      {href ? (
+        <IconButton ref={ref} {...mergedProps} asChild>
+          <a href={shouldDisableLink ? undefined : href}>{content}</a>
+        </IconButton>
+      ) : (
+        <IconButton ref={ref} {...mergedProps}>
+          {content}
+        </IconButton>
+      )}
+    </li>
+  )
+}
 
 PrevTrigger.displayName = 'Pagination.PrevTrigger'
diff --git a/packages/components/popover/CHANGELOG.md b/packages/components/popover/CHANGELOG.md
index c43126364..9c4c408d9 100644
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/popover
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/popover
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 730437551..94cd29997 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/popover",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Displays rich content in a portal, triggered by a button.",
   "publishConfig": {
     "access": "public"
@@ -43,9 +43,9 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "1.1.1",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7"
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0"
   },
   "devDependencies": {
     "jsdom-testing-mocks": "1.13.1"
diff --git a/packages/components/popover/src/Popover.stories.tsx b/packages/components/popover/src/Popover.stories.tsx
index 7d8323f12..9e07b17bf 100644
--- a/packages/components/popover/src/Popover.stories.tsx
+++ b/packages/components/popover/src/Popover.stories.tsx
@@ -2,7 +2,7 @@ import { Button } from '@spark-ui/button'
 import { RadioGroup } from '@spark-ui/radio-group'
 import { Meta, StoryFn } from '@storybook/react'
 import { cx } from 'class-variance-authority'
-import { forwardRef, PropsWithChildren, useState } from 'react'
+import { PropsWithChildren, Ref, useState } from 'react'
 
 import { Popover } from '.'
 import { type ContentProps } from './PopoverContent'
@@ -14,12 +14,14 @@ const meta: Meta<typeof Popover> = {
 
 export default meta
 
-const ShowcaseContainer = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{
-    className?: string
-  }>
->(({ children, className }, ref) => (
+const ShowcaseContainer = ({
+  children,
+  className,
+  ref,
+}: PropsWithChildren<{
+  className?: string
+  ref?: Ref<HTMLDivElement>
+}>) => (
   <div
     ref={ref}
     className={cx(
@@ -29,7 +31,7 @@ const ShowcaseContainer = forwardRef<
   >
     {children}
   </div>
-))
+)
 
 export const Default: StoryFn = _args => {
   return (
diff --git a/packages/components/popover/src/PopoverAnchor.tsx b/packages/components/popover/src/PopoverAnchor.tsx
index b194c7090..931f52228 100644
--- a/packages/components/popover/src/PopoverAnchor.tsx
+++ b/packages/components/popover/src/PopoverAnchor.tsx
@@ -1,19 +1,14 @@
 import * as RadixPopover from '@radix-ui/react-popover'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
-export type AnchorProps = RadixPopover.PopoverAnchorProps
+export type AnchorProps = RadixPopover.PopoverAnchorProps & {
+  ref?: Ref<HTMLDivElement>
+}
 
-export const Anchor = forwardRef<HTMLDivElement, AnchorProps>(
-  ({ asChild = false, children, ...rest }, ref) => (
-    <RadixPopover.Anchor
-      data-spark-component="popover-anchor"
-      ref={ref}
-      asChild={asChild}
-      {...rest}
-    >
-      {children}
-    </RadixPopover.Anchor>
-  )
+export const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (
+  <RadixPopover.Anchor data-spark-component="popover-anchor" ref={ref} asChild={asChild} {...rest}>
+    {children}
+  </RadixPopover.Anchor>
 )
 
 Anchor.displayName = 'Popover.Anchor'
diff --git a/packages/components/popover/src/PopoverArrow.tsx b/packages/components/popover/src/PopoverArrow.tsx
index 1f6acf49a..f9602cea9 100644
--- a/packages/components/popover/src/PopoverArrow.tsx
+++ b/packages/components/popover/src/PopoverArrow.tsx
@@ -1,51 +1,58 @@
 import * as RadixPopover from '@radix-ui/react-popover'
 import { cva } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { usePopover } from './PopoverContext'
 
-export type ArrowProps = RadixPopover.PopoverArrowProps
+export type ArrowProps = RadixPopover.PopoverArrowProps & {
+  ref?: Ref<SVGSVGElement>
+}
 
-export const Arrow = forwardRef<SVGSVGElement, ArrowProps>(
-  ({ asChild = false, width = 16, height = 8, className, ...rest }, ref) => {
-    const { intent } = usePopover()
+export const Arrow = ({
+  asChild = false,
+  width = 16,
+  height = 8,
+  className,
+  ref,
+  ...rest
+}: ArrowProps) => {
+  const { intent } = usePopover()
 
-    /**
-     * This is necessary to override a Radix UI behaviour.
-     * Radix hides the arrow when the Popover is too misaligned from its trigger element.
-     */
-    const styles = cva('visible', {
-      variants: {
-        intent: {
-          surface: 'fill-surface',
-          main: 'fill-main-container',
-          support: 'fill-support-container',
-          accent: 'fill-accent-container',
-          basic: 'fill-basic-container',
-          success: 'fill-success-container',
-          alert: 'fill-alert-container',
-          danger: 'fill-error-container',
-          info: 'fill-info-container',
-          neutral: 'fill-neutral-container',
-        },
+  /**
+   * This is necessary to override a Radix UI behaviour.
+   * Radix hides the arrow when the Popover is too misaligned from its trigger element.
+   */
+  const styles = cva('visible', {
+    variants: {
+      intent: {
+        surface: 'fill-surface',
+        main: 'fill-main-container',
+        support: 'fill-support-container',
+        accent: 'fill-accent-container',
+        basic: 'fill-basic-container',
+        success: 'fill-success-container',
+        alert: 'fill-alert-container',
+        danger: 'fill-error-container',
+        info: 'fill-info-container',
+        neutral: 'fill-neutral-container',
       },
-      defaultVariants: {
-        intent: 'surface',
-      },
-    })
+    },
+    defaultVariants: {
+      intent: 'surface',
+    },
+  })
 
-    return (
-      <RadixPopover.Arrow
-        data-spark-component="popover-arrow"
-        ref={ref}
-        className={styles({ intent, className })}
-        asChild={asChild}
-        width={width}
-        height={height}
-        {...rest}
-      />
-    )
-  }
-)
+  return (
+    <RadixPopover.Arrow
+      data-spark-component="popover-arrow"
+      ref={ref}
+      className={styles({ intent, className })}
+      asChild={asChild}
+      width={width}
+      height={height}
+      {...rest}
+    />
+  )
+}
 
 Arrow.displayName = 'Popover.Arrow'
diff --git a/packages/components/popover/src/PopoverCloseButton.tsx b/packages/components/popover/src/PopoverCloseButton.tsx
index 917cf248f..fc89f6bbb 100644
--- a/packages/components/popover/src/PopoverCloseButton.tsx
+++ b/packages/components/popover/src/PopoverCloseButton.tsx
@@ -3,30 +3,34 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { Close as CloseSVG } from '@spark-ui/icons/dist/icons/Close'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 export type CloseButtonProps = RadixPopover.PopoverCloseProps & {
   'aria-label': string
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
-  ({ 'aria-label': ariaLabel, className, ...rest }, ref) => {
-    return (
-      <RadixPopover.Close
-        data-spark-component="popover-close-button"
-        ref={ref}
-        className={cx('absolute right-md top-md', className)}
-        asChild
-        {...rest}
-      >
-        <IconButton size="sm" intent="neutral" design="ghost" aria-label={ariaLabel}>
-          <Icon>
-            <CloseSVG />
-          </Icon>
-        </IconButton>
-      </RadixPopover.Close>
-    )
-  }
-)
+export const CloseButton = ({
+  'aria-label': ariaLabel,
+  className,
+  ref,
+  ...rest
+}: CloseButtonProps) => {
+  return (
+    <RadixPopover.Close
+      data-spark-component="popover-close-button"
+      ref={ref}
+      className={cx('absolute right-md top-md', className)}
+      asChild
+      {...rest}
+    >
+      <IconButton size="sm" intent="neutral" design="ghost" aria-label={ariaLabel}>
+        <Icon>
+          <CloseSVG />
+        </Icon>
+      </IconButton>
+    </RadixPopover.Close>
+  )
+}
 
 CloseButton.displayName = 'Popover.CloseButton'
diff --git a/packages/components/popover/src/PopoverContent.tsx b/packages/components/popover/src/PopoverContent.tsx
index fbf0dffca..54ef85bce 100644
--- a/packages/components/popover/src/PopoverContent.tsx
+++ b/packages/components/popover/src/PopoverContent.tsx
@@ -1,69 +1,68 @@
 import * as RadixPopover from '@radix-ui/react-popover'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { styles, type StylesProps } from './PopoverContent.styles'
 import { usePopover } from './PopoverContext'
 
-export type ContentProps = RadixPopover.PopoverContentProps & StylesProps
+export type ContentProps = RadixPopover.PopoverContentProps &
+  StylesProps & {
+    ref?: Ref<HTMLDivElement>
+  }
 
-export const Content = forwardRef<HTMLDivElement, ContentProps>(
-  (
-    {
-      // Spark props
-      className,
-      children,
-      matchTriggerWidth = false,
-      // Radix props
-      align = 'center',
-      arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.
-      asChild = false,
-      avoidCollisions = true,
-      'aria-labelledby': ariaLabelledBy,
-      collisionBoundary,
-      collisionPadding = 0,
-      hideWhenDetached = false,
-      side = 'bottom',
-      sideOffset = 8,
-      sticky = 'partial',
-      inset = false,
-      elevation = 'popover',
-      ...rest
-    },
-    ref
-  ) => {
-    const { headerId, intent } = usePopover()
+export const Content = ({
+  // Spark props
+  className,
+  children,
+  matchTriggerWidth = false,
+  // Radix props
+  align = 'center',
+  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.
+  asChild = false,
+  avoidCollisions = true,
+  'aria-labelledby': ariaLabelledBy,
+  collisionBoundary,
+  collisionPadding = 0,
+  hideWhenDetached = false,
+  side = 'bottom',
+  sideOffset = 8,
+  sticky = 'partial',
+  inset = false,
+  elevation = 'popover',
+  ref,
+  ...rest
+}: ContentProps) => {
+  const { headerId, intent } = usePopover()
 
-    return (
-      <RadixPopover.Content
-        aria-labelledby={headerId || ariaLabelledBy}
-        className={styles({
-          enforceBoundaries: !!collisionBoundary,
-          matchTriggerWidth,
-          inset,
-          elevation,
-          intent,
-          className,
-        })}
-        data-spark-component="popover-content"
-        ref={ref}
-        {...{
-          align,
-          arrowPadding,
-          asChild,
-          avoidCollisions,
-          collisionBoundary,
-          collisionPadding,
-          hideWhenDetached,
-          side,
-          sideOffset,
-          sticky,
-        }}
-        {...rest}
-      >
-        {children}
-      </RadixPopover.Content>
-    )
-  }
-)
+  return (
+    <RadixPopover.Content
+      aria-labelledby={headerId || ariaLabelledBy}
+      className={styles({
+        enforceBoundaries: !!collisionBoundary,
+        matchTriggerWidth,
+        inset,
+        elevation,
+        intent,
+        className,
+      })}
+      data-spark-component="popover-content"
+      ref={ref}
+      {...{
+        align,
+        arrowPadding,
+        asChild,
+        avoidCollisions,
+        collisionBoundary,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky,
+      }}
+      {...rest}
+    >
+      {children}
+    </RadixPopover.Content>
+  )
+}
 
 Content.displayName = 'Popover.Content'
diff --git a/packages/components/popover/src/PopoverHeader.tsx b/packages/components/popover/src/PopoverHeader.tsx
index 8277eb5f4..78e99caa8 100644
--- a/packages/components/popover/src/PopoverHeader.tsx
+++ b/packages/components/popover/src/PopoverHeader.tsx
@@ -1,30 +1,29 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, type ReactNode, useId, useLayoutEffect } from 'react'
+import { type ReactNode, Ref, useId, useLayoutEffect } from 'react'
 
 import { ID_PREFIX, usePopover } from './PopoverContext'
 
 export interface HeaderProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Header = forwardRef<HTMLDivElement, HeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    const id = `${ID_PREFIX}-header-${useId()}`
-    const { setHeaderId } = usePopover()
+export const Header = ({ children, className, ref, ...rest }: HeaderProps) => {
+  const id = `${ID_PREFIX}-header-${useId()}`
+  const { setHeaderId } = usePopover()
 
-    useLayoutEffect(() => {
-      setHeaderId(id)
+  useLayoutEffect(() => {
+    setHeaderId(id)
 
-      return () => setHeaderId(null)
-    }, [id, setHeaderId])
+    return () => setHeaderId(null)
+  }, [id, setHeaderId])
 
-    return (
-      <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>
-        {children}
-      </header>
-    )
-  }
-)
+  return (
+    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>
+      {children}
+    </header>
+  )
+}
 
 Header.displayName = 'Popover.Header'
diff --git a/packages/components/popover/src/PopoverTrigger.tsx b/packages/components/popover/src/PopoverTrigger.tsx
index 832781812..3fae4e1a4 100644
--- a/packages/components/popover/src/PopoverTrigger.tsx
+++ b/packages/components/popover/src/PopoverTrigger.tsx
@@ -1,20 +1,19 @@
 import * as RadixPopover from '@radix-ui/react-popover'
-import { type ElementRef, forwardRef } from 'react'
+import { Ref } from 'react'
 
-type TriggerElement = ElementRef<typeof RadixPopover.Trigger>
-export type TriggerProps = RadixPopover.PopoverTriggerProps
+export type TriggerProps = RadixPopover.PopoverTriggerProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
-export const Trigger = forwardRef<TriggerElement, TriggerProps>(
-  ({ asChild = false, children, ...rest }, ref) => (
-    <RadixPopover.Trigger
-      data-spark-component="popover-trigger"
-      ref={ref}
-      asChild={asChild}
-      {...rest}
-    >
-      {children}
-    </RadixPopover.Trigger>
-  )
+export const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (
+  <RadixPopover.Trigger
+    data-spark-component="popover-trigger"
+    ref={ref}
+    asChild={asChild}
+    {...rest}
+  >
+    {children}
+  </RadixPopover.Trigger>
 )
 
 Trigger.displayName = 'Popover.Trigger'
diff --git a/packages/components/portal/CHANGELOG.md b/packages/components/portal/CHANGELOG.md
index 982a7a341..6b42a2fcb 100644
--- a/packages/components/portal/CHANGELOG.md
+++ b/packages/components/portal/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/portal
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/portal
diff --git a/packages/components/portal/package.json b/packages/components/portal/package.json
index e0d855993..9ad1ee0ba 100644
--- a/packages/components/portal/package.json
+++ b/packages/components/portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/portal",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Renders a React subtree in a different part of the DOM.",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/portal/src/Portal.tsx b/packages/components/portal/src/Portal.tsx
index 34acf850c..0ddc9bdd5 100644
--- a/packages/components/portal/src/Portal.tsx
+++ b/packages/components/portal/src/Portal.tsx
@@ -1,16 +1,14 @@
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal'
-import type * as Radix from '@radix-ui/react-primitive'
-import React, { forwardRef, type PropsWithChildren } from 'react'
+import React, { type PropsWithChildren, Ref } from 'react'
 
 interface PortalProps {
   /**
    * An optional different container where the portaled content should be appended.
    */
   container?: HTMLElement | null
+  ref?: Ref<HTMLDivElement>
 }
 
-type PortalRef = React.ElementRef<typeof Radix.Primitive.div>
-
-export const Portal = forwardRef<PortalRef, PropsWithChildren<PortalProps>>((props, ref) => {
-  return <PortalPrimitive ref={ref} {...props} />
-})
+export const Portal = (props: PropsWithChildren<PortalProps>) => {
+  return <PortalPrimitive {...props} />
+}
diff --git a/packages/components/progress-tracker/CHANGELOG.md b/packages/components/progress-tracker/CHANGELOG.md
index e6fd7e9bd..73d5f3733 100644
--- a/packages/components/progress-tracker/CHANGELOG.md
+++ b/packages/components/progress-tracker/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+### Code Refactoring
+
+- fixing remaining TS errors ([918544c](https://github.com/adevinta/spark/commit/918544c278a370ec82384842cc8f60b59982eb9f))
+
+### BREAKING CHANGES
+
+- forwardRef has been removed from all packages
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/progress-tracker
diff --git a/packages/components/progress-tracker/package.json b/packages/components/progress-tracker/package.json
index 523318e3e..c5025789d 100644
--- a/packages/components/progress-tracker/package.json
+++ b/packages/components/progress-tracker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress-tracker",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A progress tracker component is a visual navigation element typically used to display progress or guide user through a multi-step process.",
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/progress-tracker/src/ProgressTracker.tsx b/packages/components/progress-tracker/src/ProgressTracker.tsx
index dc6362e39..05bdfa6fe 100644
--- a/packages/components/progress-tracker/src/ProgressTracker.tsx
+++ b/packages/components/progress-tracker/src/ProgressTracker.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef, type PropsWithChildren, useState } from 'react'
+import { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'
 
 import { progressList } from './ProgressTracker.styles'
 import {
@@ -9,7 +9,7 @@ import {
 import type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'
 
 export interface ProgressTrackerProps
-  extends ComponentPropsWithoutRef<'div'>,
+  extends ComponentPropsWithRef<'div'>,
     Pick<StepIndicatorVariantProps, 'size' | 'intent' | 'design'> {
   /**
    * The orientation of the progress tracker
@@ -32,45 +32,43 @@ export interface ProgressTrackerProps
   readOnly?: boolean
 }
 
-export const ProgressTracker = forwardRef<HTMLDivElement, PropsWithChildren<ProgressTrackerProps>>(
-  (
-    {
-      stepIndex = 0,
-      onStepClick,
-      readOnly = false,
-      intent = 'basic',
-      size = 'lg',
-      design = 'outline',
-      orientation = 'horizontal',
-      children,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())
+export const ProgressTracker = ({
+  stepIndex = 0,
+  onStepClick,
+  readOnly = false,
+  intent = 'basic',
+  size = 'lg',
+  design = 'outline',
+  orientation = 'horizontal',
+  children,
+  className,
+  ref,
+  ...rest
+}: PropsWithChildren<ProgressTrackerProps>) => {
+  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())
 
-    const Component = readOnly ? 'div' : 'nav'
+  const Component = readOnly ? 'div' : 'nav'
 
-    return (
-      <ProgressTrackerContext.Provider
-        value={{ stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly }}
+  return (
+    <ProgressTrackerContext.Provider
+      value={{ stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly }}
+    >
+      <Component
+        ref={ref}
+        data-spark-component="progress-tracker"
+        className={cx('inline-flex', className)}
+        {...rest}
       >
-        <Component
-          ref={ref}
-          data-spark-component="progress-tracker"
-          className={cx('inline-flex', className)}
-          {...rest}
+        <ol
+          data-orientation={orientation}
+          className={progressList}
+          style={{ counterReset: 'step' }}
         >
-          <ol
-            data-orientation={orientation}
-            className={progressList}
-            style={{ counterReset: 'step' }}
-          >
-            {children}
-          </ol>
-        </Component>
-      </ProgressTrackerContext.Provider>
-    )
-  }
-)
+          {children}
+        </ol>
+      </Component>
+    </ProgressTrackerContext.Provider>
+  )
+}
+
+ProgressTracker.displayName = 'ProgressTracker'
diff --git a/packages/components/progress-tracker/src/ProgressTrackerStep.tsx b/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
index 86e1e3495..9417c12bd 100644
--- a/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
+++ b/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, forwardRef, type ReactNode, useEffect, useId } from 'react'
+import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'
 
 import {
   ID_PREFIX,
@@ -8,7 +8,7 @@ import {
 import { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'
 import { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'
 
-export type ProgressTrackerStepProps = ComponentPropsWithoutRef<'li'> &
+export type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &
   (
     | {
         disabled?: boolean
@@ -20,96 +20,101 @@ export type ProgressTrackerStepProps = ComponentPropsWithoutRef<'li'> &
       }
   )
 
-export const ProgressTrackerStep = forwardRef<HTMLLIElement, ProgressTrackerStepProps>(
-  ({ disabled = false, children, 'aria-label': ariaLabel, className, ...rest }, ref) => {
-    const {
-      stepIndex: currentStepIndex,
-      steps,
-      onStepClick,
-      setSteps,
-      size,
-      intent,
-      readOnly,
-    } = useProgressTrackerContext()
+export const ProgressTrackerStep = ({
+  disabled = false,
+  children,
+  'aria-label': ariaLabel,
+  className,
+  ref,
+  ...rest
+}: ProgressTrackerStepProps) => {
+  const {
+    stepIndex: currentStepIndex,
+    steps,
+    onStepClick,
+    setSteps,
+    size,
+    intent,
+    readOnly,
+  } = useProgressTrackerContext()
 
-    const stepId = `${ID_PREFIX}-step-${useId()}`
-    const stepIndex = [...steps.keys()].indexOf(stepId)
+  const stepId = `${ID_PREFIX}-step-${useId()}`
+  const stepIndex = [...steps.keys()].indexOf(stepId)
 
-    const disabledAfter = (() => {
-      const nextStepId = [...steps.keys()][stepIndex + 1]
+  const disabledAfter = (() => {
+    const nextStepId = [...steps.keys()][stepIndex + 1]
 
-      return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))
-    })()
+    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))
+  })()
 
-    const progressState = (() => {
-      if (stepIndex === currentStepIndex) return 'active'
-      else if (stepIndex < currentStepIndex) return 'complete'
-      else return 'incomplete'
-    })()
+  const progressState = (() => {
+    if (stepIndex === currentStepIndex) return 'active'
+    else if (stepIndex < currentStepIndex) return 'complete'
+    else return 'incomplete'
+  })()
 
-    useEffect(() => {
-      setSteps(steps => {
-        const newSteps = new Map(steps)
+  useEffect(() => {
+    setSteps(steps => {
+      const newSteps = new Map(steps)
 
-        return newSteps.set(
-          stepId,
-          [progressState, disabled ? 'disabled' : ''].filter(v => !!v)
-        )
-      })
+      return newSteps.set(
+        stepId,
+        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)
+      )
+    })
 
-      return () => {
-        setSteps(steps => {
-          steps.delete(stepId)
+    return () => {
+      setSteps(steps => {
+        steps.delete(stepId)
 
-          return steps
-        })
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
+        return steps
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-    return (
-      <li
-        id={stepId}
-        ref={ref}
-        data-state={progressState}
-        {...(progressState === 'active' && {
-          'aria-current': 'step',
-        })}
-        className={stepItemVariant({
+  return (
+    <li
+      id={stepId}
+      ref={ref}
+      data-state={progressState}
+      {...(progressState === 'active' && {
+        'aria-current': 'step',
+      })}
+      className={stepItemVariant({
+        size,
+        intent,
+        disabled,
+        disabledAfter,
+      })}
+      {...rest}
+    >
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        data-interactive={!disabled && !readOnly}
+        {...(!disabled &&
+          !readOnly && {
+            onClick: () => onStepClick?.(stepIndex),
+          })}
+        disabled={disabled}
+        className={stepButtonVariant({
           size,
-          intent,
-          disabled,
-          disabledAfter,
+          readOnly,
+          className,
         })}
-        {...rest}
       >
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          data-interactive={!disabled && !readOnly}
-          {...(!disabled &&
-            !readOnly && {
-              onClick: () => onStepClick?.(stepIndex),
-            })}
-          disabled={disabled}
-          className={stepButtonVariant({
-            size,
-            readOnly,
-            className,
-          })}
+        <ProgressTrackerStepContext.Provider
+          value={{
+            index: stepIndex,
+            state: progressState,
+          }}
         >
-          <ProgressTrackerStepContext.Provider
-            value={{
-              index: stepIndex,
-              state: progressState,
-            }}
-          >
-            {children || <ProgressTrackerStepIndicator />}
-          </ProgressTrackerStepContext.Provider>
-        </button>
-      </li>
-    )
-  }
-)
+          {children || <ProgressTrackerStepIndicator />}
+        </ProgressTrackerStepContext.Provider>
+      </button>
+    </li>
+  )
+}
 
 ProgressTrackerStep.displayName = 'ProgressTracker.Step'
diff --git a/packages/components/progress/CHANGELOG.md b/packages/components/progress/CHANGELOG.md
index aa9ece214..a8ff2449f 100644
--- a/packages/components/progress/CHANGELOG.md
+++ b/packages/components/progress/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/progress
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/progress
diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json
index 72e5b411b..0c98aba19 100644
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@radix-ui/react-progress": "1.1.0",
-    "@spark-ui/use-merge-refs": "^7.3.7",
+    "@spark-ui/use-merge-refs": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/progress/src/Progress.tsx b/packages/components/progress/src/Progress.tsx
index 086c568b9..6fc6d1e93 100644
--- a/packages/components/progress/src/Progress.tsx
+++ b/packages/components/progress/src/Progress.tsx
@@ -3,7 +3,7 @@ import {
   ProgressProps as ProgressPrimitiveProps,
 } from '@radix-ui/react-progress'
 import { cx } from 'class-variance-authority'
-import { ElementRef, forwardRef, PropsWithChildren, useMemo, useState } from 'react'
+import { PropsWithChildren, Ref, useMemo, useState } from 'react'
 
 import { ProgressBar } from './ProgressBar'
 import { ProgressContext } from './ProgressContext'
@@ -14,46 +14,40 @@ export interface ProgressProps
     Pick<ProgressIndicatorStylesProps, 'intent'> {
   shape?: 'square' | 'rounded'
   isIndeterminate?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Progress = forwardRef<
-  ElementRef<typeof ProgressPrimitive>,
-  PropsWithChildren<ProgressProps>
->(
-  (
-    {
-      className,
-      value: valueProp,
-      max = 100,
-      shape = 'square',
-      intent = 'basic',
-      isIndeterminate = false,
-      children = <ProgressBar />,
-      ...others
-    },
-    ref
-  ) => {
-    const [labelId, setLabelId] = useState<string>()
+export const Progress = ({
+  className,
+  value: valueProp,
+  max = 100,
+  shape = 'square',
+  intent = 'basic',
+  isIndeterminate = false,
+  children = <ProgressBar />,
+  ref,
+  ...others
+}: PropsWithChildren<ProgressProps>) => {
+  const [labelId, setLabelId] = useState<string>()
 
-    const value = useMemo(() => {
-      return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId }
-    }, [max, valueProp, intent, shape, isIndeterminate, setLabelId])
+  const value = useMemo(() => {
+    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId }
+  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId])
 
-    return (
-      <ProgressContext.Provider data-spark-component="progress" value={value}>
-        <ProgressPrimitive
-          ref={ref}
-          className={cx('flex flex-col gap-sm', className)}
-          value={valueProp}
-          aria-labelledby={labelId}
-          max={max}
-          {...others}
-        >
-          {children}
-        </ProgressPrimitive>
-      </ProgressContext.Provider>
-    )
-  }
-)
+  return (
+    <ProgressContext.Provider data-spark-component="progress" value={value}>
+      <ProgressPrimitive
+        ref={ref}
+        className={cx('flex flex-col gap-sm', className)}
+        value={valueProp}
+        aria-labelledby={labelId}
+        max={max}
+        {...others}
+      >
+        {children}
+      </ProgressPrimitive>
+    </ProgressContext.Provider>
+  )
+}
 
 Progress.displayName = 'Progress'
diff --git a/packages/components/progress/src/ProgressBar.tsx b/packages/components/progress/src/ProgressBar.tsx
index fdcbfac2e..ed3389898 100644
--- a/packages/components/progress/src/ProgressBar.tsx
+++ b/packages/components/progress/src/ProgressBar.tsx
@@ -1,21 +1,24 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
 import { progressBarStyles } from './ProgressBar.styles'
 import { useProgress } from './ProgressContext'
 import { ProgressIndicator } from './ProgressIndicator'
 
-export type ProgressBarProps = ComponentPropsWithoutRef<'div'>
+export type ProgressBarProps = ComponentPropsWithRef<'div'>
 
-export const ProgressBar = forwardRef<HTMLDivElement, PropsWithChildren<ProgressBarProps>>(
-  ({ className, children = <ProgressIndicator />, ...others }, ref) => {
-    const { shape } = useProgress()
+export const ProgressBar = ({
+  className,
+  children = <ProgressIndicator />,
+  ref,
+  ...others
+}: PropsWithChildren<ProgressBarProps>) => {
+  const { shape } = useProgress()
 
-    return (
-      <div className={progressBarStyles({ className, shape })} ref={ref} {...others}>
-        {children}
-      </div>
-    )
-  }
-)
+  return (
+    <div className={progressBarStyles({ className, shape })} ref={ref} {...others}>
+      {children}
+    </div>
+  )
+}
 
 ProgressBar.displayName = 'Progress.Bar'
diff --git a/packages/components/progress/src/ProgressIndicator.tsx b/packages/components/progress/src/ProgressIndicator.tsx
index 3715ae5bc..c17a57d61 100644
--- a/packages/components/progress/src/ProgressIndicator.tsx
+++ b/packages/components/progress/src/ProgressIndicator.tsx
@@ -1,15 +1,17 @@
 import { ProgressIndicator as ProgressIndicatorPrimitive } from '@radix-ui/react-progress'
-import { ComponentPropsWithoutRef, ElementRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
 import { useProgress } from './ProgressContext'
 import { progressIndicatorStyles } from './ProgressIndicator.styles'
 
-export type ProgressIndicatorProps = ComponentPropsWithoutRef<'div'>
+export type ProgressIndicatorProps = ComponentPropsWithRef<'div'>
 
-export const ProgressIndicator = forwardRef<
-  ElementRef<typeof ProgressIndicatorPrimitive>,
-  PropsWithChildren<ProgressIndicatorProps>
->(({ className, style, ...others }, ref) => {
+export const ProgressIndicator = ({
+  className,
+  style,
+  ref,
+  ...others
+}: PropsWithChildren<ProgressIndicatorProps>) => {
   const { value, max, intent, shape, isIndeterminate } = useProgress()
   const x = ((max - value) / max) * 100
 
@@ -21,6 +23,6 @@ export const ProgressIndicator = forwardRef<
       {...others}
     />
   )
-})
+}
 
 ProgressIndicator.displayName = 'Progress.Indicator'
diff --git a/packages/components/progress/src/ProgressLabel.tsx b/packages/components/progress/src/ProgressLabel.tsx
index d13c432f6..721521bba 100644
--- a/packages/components/progress/src/ProgressLabel.tsx
+++ b/packages/components/progress/src/ProgressLabel.tsx
@@ -1,30 +1,33 @@
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
-import { ComponentPropsWithoutRef, forwardRef, useCallback, useId } from 'react'
+import { ComponentPropsWithRef, useCallback, useId } from 'react'
 
 import { ID_PREFIX, useProgress } from './ProgressContext'
 
-export type ProgressLabelProps = ComponentPropsWithoutRef<'span'>
+export type ProgressLabelProps = ComponentPropsWithRef<'span'>
 
-export const ProgressLabel = forwardRef<HTMLSpanElement, ProgressLabelProps>(
-  ({ id: idProp, children, ...others }, forwardedRef) => {
-    const internalID = `${ID_PREFIX}-label-${useId()}`
-    const id = idProp || internalID
+export const ProgressLabel = ({
+  id: idProp,
+  children,
+  ref: forwardedRef,
+  ...others
+}: ProgressLabelProps) => {
+  const internalID = `${ID_PREFIX}-label-${useId()}`
+  const id = idProp || internalID
 
-    const { onLabelId } = useProgress()
-    const rootRef = useCallback(
-      (el: HTMLSpanElement) => {
-        onLabelId(el ? id : undefined)
-      },
-      [id, onLabelId]
-    )
-    const ref = useMergeRefs(forwardedRef, rootRef)
+  const { onLabelId } = useProgress()
+  const rootRef = useCallback(
+    (el: HTMLSpanElement) => {
+      onLabelId(el ? id : undefined)
+    },
+    [id, onLabelId]
+  )
+  const ref = useMergeRefs(forwardedRef, rootRef)
 
-    return (
-      <span id={id} className="text-body-2 text-on-surface" ref={ref} {...others}>
-        {children}
-      </span>
-    )
-  }
-)
+  return (
+    <span id={id} className="text-body-2 text-on-surface" ref={ref} {...others}>
+      {children}
+    </span>
+  )
+}
 
 ProgressLabel.displayName = 'Progress.Label'
diff --git a/packages/components/radio-group/CHANGELOG.md b/packages/components/radio-group/CHANGELOG.md
index 15055cdbf..073600485 100644
--- a/packages/components/radio-group/CHANGELOG.md
+++ b/packages/components/radio-group/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/radio-group
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/radio-group
diff --git a/packages/components/radio-group/package.json b/packages/components/radio-group/package.json
index 0375bfd87..3d94dbbbc 100644
--- a/packages/components/radio-group/package.json
+++ b/packages/components/radio-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/radio-group",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Component used when only one choice may be selected in a series of options",
   "publishConfig": {
     "access": "public"
@@ -26,8 +26,8 @@
   "dependencies": {
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-radio-group": "1.2.1",
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/radio-group/src/Radio.tsx b/packages/components/radio-group/src/Radio.tsx
index d6f48b44a..681569bc1 100644
--- a/packages/components/radio-group/src/Radio.tsx
+++ b/packages/components/radio-group/src/Radio.tsx
@@ -1,52 +1,59 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, useId } from 'react'
+import { Ref, useId } from 'react'
 
 import { useRadioGroup } from './RadioGroupContext'
 import { RadioInput, RadioInputProps } from './RadioInput'
 import { RadioLabel } from './RadioLabel'
 
-export type RadioProps = RadioInputProps
+export type RadioProps = RadioInputProps & {
+  ref?: Ref<HTMLButtonElement>
+}
 
 const ID_PREFIX = ':radio'
 
-export const Radio = forwardRef<HTMLButtonElement, RadioProps>(
-  ({ className, children, id, disabled: disabledProp, ...others }, ref) => {
-    const innerId = `${ID_PREFIX}-input-${useId()}`
-    const innerLabelId = `${ID_PREFIX}-label-${useId()}`
-
-    const { intent, disabled, reverse } = useRadioGroup()
-
-    const radioLabel = children && (
-      <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>
-        {children}
-      </RadioLabel>
-    )
-
-    const radioInput = (
-      <RadioInput
-        ref={ref}
-        id={id || innerId}
-        intent={intent}
-        aria-labelledby={children ? innerLabelId : undefined}
-        {...others}
-        disabled={disabledProp}
-      />
-    )
-
-    const content = reverse ? (
-      <>
-        {radioLabel}
-        {radioInput}
-      </>
-    ) : (
-      <>
-        {radioInput}
-        {radioLabel}
-      </>
-    )
-
-    return <div className={cx('flex items-start gap-md text-body-1', className)}>{content}</div>
-  }
-)
+export const Radio = ({
+  className,
+  children,
+  id,
+  disabled: disabledProp,
+  ref,
+  ...others
+}: RadioProps) => {
+  const innerId = `${ID_PREFIX}-input-${useId()}`
+  const innerLabelId = `${ID_PREFIX}-label-${useId()}`
+
+  const { intent, disabled, reverse } = useRadioGroup()
+
+  const radioLabel = children && (
+    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>
+      {children}
+    </RadioLabel>
+  )
+
+  const radioInput = (
+    <RadioInput
+      ref={ref}
+      id={id || innerId}
+      intent={intent}
+      aria-labelledby={children ? innerLabelId : undefined}
+      {...others}
+      disabled={disabledProp}
+    />
+  )
+
+  const content = reverse ? (
+    <>
+      {radioLabel}
+      {radioInput}
+    </>
+  ) : (
+    <>
+      {radioInput}
+      {radioLabel}
+    </>
+  )
+
+  return <div className={cx('flex items-start gap-md text-body-1', className)}>{content}</div>
+}
 
 Radio.displayName = 'RadioGroup.Radio'
diff --git a/packages/components/radio-group/src/RadioGroup.tsx b/packages/components/radio-group/src/RadioGroup.tsx
index 35cc37bbd..0ead668f6 100644
--- a/packages/components/radio-group/src/RadioGroup.tsx
+++ b/packages/components/radio-group/src/RadioGroup.tsx
@@ -1,6 +1,6 @@
 import { RadioGroup as RadioGroupPrimitive } from '@radix-ui/react-radio-group'
 import { useFormFieldControl } from '@spark-ui/form-field'
-import { forwardRef, HTMLAttributes } from 'react'
+import { HTMLAttributes, Ref } from 'react'
 
 import { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'
 import { RadioGroupProvider } from './RadioGroupProvider'
@@ -54,45 +54,42 @@ export interface RadioGroupProps
    * When true, the label will be placed on the left side of the Radio
    */
   reverse?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  (
-    {
-      orientation = 'vertical',
-      loop = true,
-      intent = 'basic',
-      disabled,
-      className,
-      required: requiredProp,
-      reverse = false,
-      ...others
-    },
-    ref
-  ) => {
-    const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()
-    const required = requiredProp !== undefined ? requiredProp : isRequired
+export const RadioGroup = ({
+  orientation = 'vertical',
+  loop = true,
+  intent = 'basic',
+  disabled,
+  className,
+  required: requiredProp,
+  reverse = false,
+  ref,
+  ...others
+}: RadioGroupProps) => {
+  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()
+  const required = requiredProp !== undefined ? requiredProp : isRequired
 
-    return (
-      <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>
-        <RadioGroupPrimitive
-          data-spark-component="radio-group"
-          className={radioGroupStyles({ orientation, className })}
-          name={name}
-          ref={ref}
-          disabled={disabled}
-          orientation={orientation}
-          loop={loop}
-          required={required}
-          aria-labelledby={labelId}
-          aria-invalid={isInvalid}
-          aria-required={required}
-          aria-describedby={description}
-          {...others}
-        />
-      </RadioGroupProvider>
-    )
-  }
-)
+  return (
+    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>
+      <RadioGroupPrimitive
+        data-spark-component="radio-group"
+        className={radioGroupStyles({ orientation, className })}
+        name={name}
+        ref={ref}
+        disabled={disabled}
+        orientation={orientation}
+        loop={loop}
+        required={required}
+        aria-labelledby={labelId}
+        aria-invalid={isInvalid}
+        aria-required={required}
+        aria-describedby={description}
+        {...others}
+      />
+    </RadioGroupProvider>
+  )
+}
 
 RadioGroup.displayName = 'RadioGroup'
diff --git a/packages/components/radio-group/src/RadioIndicator.tsx b/packages/components/radio-group/src/RadioIndicator.tsx
index b7d59f1e0..4b654240b 100644
--- a/packages/components/radio-group/src/RadioIndicator.tsx
+++ b/packages/components/radio-group/src/RadioIndicator.tsx
@@ -1,5 +1,5 @@
 import { RadioGroupIndicator as RadioIndicatorPrimitive } from '@radix-ui/react-radio-group'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'
 
@@ -13,18 +13,17 @@ export interface RadioIndicatorProps extends RadioIndicatorStylesProps {
    * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
    */
   forceMount?: true | undefined
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const RadioIndicator = forwardRef<HTMLSpanElement, RadioIndicatorProps>(
-  ({ intent, className, ...others }, ref) => {
-    return (
-      <RadioIndicatorPrimitive
-        ref={ref}
-        className={radioIndicatorStyles({ intent, className })}
-        {...others}
-      />
-    )
-  }
-)
+export const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {
+  return (
+    <RadioIndicatorPrimitive
+      ref={ref}
+      className={radioIndicatorStyles({ intent, className })}
+      {...others}
+    />
+  )
+}
 
 RadioIndicator.displayName = 'RadioGroup.RadioIndicator'
diff --git a/packages/components/radio-group/src/RadioInput.tsx b/packages/components/radio-group/src/RadioInput.tsx
index 25fed9212..e038f1a45 100644
--- a/packages/components/radio-group/src/RadioInput.tsx
+++ b/packages/components/radio-group/src/RadioInput.tsx
@@ -1,6 +1,6 @@
 import { RadioGroupItem as RadioPrimitive } from '@radix-ui/react-radio-group'
 import { useFormFieldControl } from '@spark-ui/form-field'
-import { ButtonHTMLAttributes, forwardRef } from 'react'
+import { ButtonHTMLAttributes, Ref } from 'react'
 
 import { RadioIndicator } from './RadioIndicator'
 import { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'
@@ -24,20 +24,19 @@ export interface RadioInputProps
    * When true, indicates that the user must check the radio item before the owning form can be submitted.
    */
   required?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const RadioInput = forwardRef<HTMLButtonElement, RadioInputProps>(
-  ({ intent: intentProp, className, ...others }, ref) => {
-    const { state } = useFormFieldControl()
+export const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {
+  const { state } = useFormFieldControl()
 
-    const intent = state ?? intentProp
+  const intent = state ?? intentProp
 
-    return (
-      <RadioPrimitive ref={ref} className={radioInputVariants({ intent, className })} {...others}>
-        <RadioIndicator intent={intent} forceMount />
-      </RadioPrimitive>
-    )
-  }
-)
+  return (
+    <RadioPrimitive ref={ref} className={radioInputVariants({ intent, className })} {...others}>
+      <RadioIndicator intent={intent} forceMount />
+    </RadioPrimitive>
+  )
+}
 
 RadioInput.displayName = 'RadioGroup.RadioInput'
diff --git a/packages/components/rating/CHANGELOG.md b/packages/components/rating/CHANGELOG.md
index de3b17c7e..e197a3a28 100644
--- a/packages/components/rating/CHANGELOG.md
+++ b/packages/components/rating/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/rating
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/rating
diff --git a/packages/components/rating/package.json b/packages/components/rating/package.json
index 6ea5813df..663ec0997 100644
--- a/packages/components/rating/package.json
+++ b/packages/components/rating/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/rating",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Ratings let users see and/or set a star rating for a product or other item",
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7"
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0"
   },
   "peerDependencies": {
     "react": "^19.0",
diff --git a/packages/components/rating/src/Rating.tsx b/packages/components/rating/src/Rating.tsx
index 09882d306..d3cb09593 100644
--- a/packages/components/rating/src/Rating.tsx
+++ b/packages/components/rating/src/Rating.tsx
@@ -2,8 +2,7 @@ import { useCombinedState } from '@spark-ui/use-combined-state'
 import { cx } from 'class-variance-authority'
 import {
   type ChangeEvent,
-  type ComponentPropsWithoutRef,
-  forwardRef,
+  type ComponentPropsWithRef,
   type MouseEvent,
   type PropsWithChildren,
   useCallback,
@@ -13,7 +12,7 @@ import {
 import { RatingStar, type RatingStarProps } from './RatingStar'
 import { getNearestHalfDecimal, getStarValue, splitAt } from './utils'
 
-export interface RatingProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
+export interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {
   /**
    * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.
    *
@@ -63,119 +62,115 @@ export interface RatingProps extends PropsWithChildren<ComponentPropsWithoutRef<
   'aria-label': string
 }
 
-export const Rating = forwardRef<HTMLDivElement, RatingProps>(
-  (
-    {
-      defaultValue,
-      value: propValue,
-      onValueChange,
-      size = 'md',
-      disabled,
-      readOnly,
-      name,
-      id,
-      'aria-label': ariaLabel,
-      ...rest
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const starRefList = useRef<HTMLDivElement[]>([])
-
-    const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)
-
-    const valueRef = useRef(value)
-    const isInteractive = !(disabled || readOnly)
-
-    function onStarClick(index: number) {
-      if (!inputRef.current) return
-
-      setRatingValue(index + 1)
-      valueRef.current = index + 1
-
-      inputRef.current.focus()
-      inputRef.current.setAttribute('data-clicked', '')
-    }
-
-    function onInputChange(event: ChangeEvent<HTMLInputElement>) {
-      // 1. Avoiding unnecessary calls to onValueChange prop if value doesn't change
-      // 2. Preventing value to be resetted to 0
-      if (valueRef.current === Number(event.target.value) || Number(event.target.value) === 0) {
-        return
-      }
-      valueRef.current = Number(event.target.value)
+export const Rating = ({
+  defaultValue,
+  value: propValue,
+  onValueChange,
+  size = 'md',
+  disabled,
+  readOnly,
+  name,
+  id,
+  'aria-label': ariaLabel,
+  ref,
+  ...rest
+}: RatingProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const starRefList = useRef<HTMLDivElement[]>([])
+
+  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)
+
+  const valueRef = useRef(value)
+  const isInteractive = !(disabled || readOnly)
+
+  function onStarClick(index: number) {
+    if (!inputRef.current) return
+
+    setRatingValue(index + 1)
+    valueRef.current = index + 1
+
+    inputRef.current.focus()
+    inputRef.current.setAttribute('data-clicked', '')
+  }
 
-      setRatingValue(Number(event.target.value))
+  function onInputChange(event: ChangeEvent<HTMLInputElement>) {
+    // 1. Avoiding unnecessary calls to onValueChange prop if value doesn't change
+    // 2. Preventing value to be resetted to 0
+    if (valueRef.current === Number(event.target.value) || Number(event.target.value) === 0) {
+      return
     }
+    valueRef.current = Number(event.target.value)
 
-    function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {
-      const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)
+    setRatingValue(Number(event.target.value))
+  }
 
-      const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)
+  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {
+    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)
 
-      previousStars.forEach(star => star.setAttribute('data-hovered', ''))
-      followingStars.forEach(star => star.removeAttribute('data-hovered'))
-    }
+    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)
 
-    const handleStarRef = useCallback((elm: HTMLDivElement | null) => {
-      if (!elm) return
-      starRefList.current.push(elm)
-    }, [])
+    previousStars.forEach(star => star.setAttribute('data-hovered', ''))
+    followingStars.forEach(star => star.removeAttribute('data-hovered'))
+  }
 
-    function resetDataPartInputAttr() {
-      inputRef.current?.removeAttribute('data-clicked')
-    }
+  const handleStarRef = useCallback((elm: HTMLDivElement | null) => {
+    if (!elm) return
+    starRefList.current.push(elm)
+  }, [])
 
-    function resetDataPartStarAttr() {
-      starRefList.current.forEach(star => star.removeAttribute('data-hovered'))
-    }
+  function resetDataPartInputAttr() {
+    inputRef.current?.removeAttribute('data-clicked')
+  }
+
+  function resetDataPartStarAttr() {
+    starRefList.current.forEach(star => star.removeAttribute('data-hovered'))
+  }
 
-    return (
+  return (
+    <div
+      className="relative inline-flex"
+      ref={ref}
+      data-spark-component="rating"
+      {...rest}
+      onMouseLeave={resetDataPartStarAttr}
+    >
+      <input
+        name={name}
+        id={id}
+        aria-label={ariaLabel}
+        ref={inputRef}
+        data-part="input"
+        className="peer absolute inset-none opacity-0"
+        type="range"
+        min="0"
+        max="5"
+        step={readOnly ? 0.5 : 1}
+        disabled={disabled}
+        readOnly={readOnly}
+        value={getNearestHalfDecimal(value ?? 0)}
+        onChange={event => isInteractive && onInputChange(event)}
+        onBlur={resetDataPartInputAttr}
+      />
       <div
-        className="relative inline-flex"
-        ref={ref}
-        data-spark-component="rating"
-        {...rest}
-        onMouseLeave={resetDataPartStarAttr}
+        className={cx(
+          size === 'lg' ? 'gap-x-md' : 'gap-x-sm',
+          'flex',
+          'peer-focus-visible:u-ring peer-[[data-part=input][data-clicked]]:shadow-none'
+        )}
       >
-        <input
-          name={name}
-          id={id}
-          aria-label={ariaLabel}
-          ref={inputRef}
-          data-part="input"
-          className="peer absolute inset-none opacity-0"
-          type="range"
-          min="0"
-          max="5"
-          step={readOnly ? 0.5 : 1}
-          disabled={disabled}
-          readOnly={readOnly}
-          value={getNearestHalfDecimal(value ?? 0)}
-          onChange={event => isInteractive && onInputChange(event)}
-          onBlur={resetDataPartInputAttr}
-        />
-        <div
-          className={cx(
-            size === 'lg' ? 'gap-x-md' : 'gap-x-sm',
-            'flex',
-            'peer-focus-visible:u-ring peer-[[data-part=input][data-clicked]]:shadow-none'
-          )}
-        >
-          {Array.from({ length: 5 }).map((_, index) => (
-            <RatingStar
-              disabled={disabled}
-              readOnly={readOnly}
-              size={size}
-              onClick={() => isInteractive && onStarClick(index)}
-              onMouseEnter={event => isInteractive && onStarMouseEnter(event)}
-              ref={handleStarRef}
-              key={index}
-              value={getStarValue({ index, value })}
-            />
-          ))}
-        </div>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <RatingStar
+            disabled={disabled}
+            readOnly={readOnly}
+            size={size}
+            onClick={() => isInteractive && onStarClick(index)}
+            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}
+            ref={handleStarRef}
+            key={index}
+            value={getStarValue({ index, value })}
+          />
+        ))}
       </div>
-    )
-  }
-)
+    </div>
+  )
+}
diff --git a/packages/components/rating/src/RatingStar.tsx b/packages/components/rating/src/RatingStar.tsx
index f2534e3a6..03f3ad370 100644
--- a/packages/components/rating/src/RatingStar.tsx
+++ b/packages/components/rating/src/RatingStar.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@spark-ui/icon'
 import { StarFill } from '@spark-ui/icons/dist/icons/StarFill'
 import { StarOutline } from '@spark-ui/icons/dist/icons/StarOutline'
 import { cx } from 'class-variance-authority'
-import { forwardRef, type MouseEvent } from 'react'
+import { type MouseEvent, Ref } from 'react'
 
 import {
   ratingStarIconStyles,
@@ -16,43 +16,50 @@ export interface RatingStarProps extends RatingStarstylesProps, RatingStarIconSt
   value: StarValue
   onClick?: (event: MouseEvent<HTMLDivElement>) => void
   onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void
+  ref?: Ref<HTMLDivElement>
 }
 
-export const RatingStar = forwardRef<HTMLDivElement, RatingStarProps>(
-  ({ value, size, disabled, readOnly, onClick, onMouseEnter }, forwardedRef) => {
-    return (
+export const RatingStar = ({
+  value,
+  size,
+  disabled,
+  readOnly,
+  onClick,
+  onMouseEnter,
+  ref: forwardedRef,
+}: RatingStarProps) => {
+  return (
+    <div
+      ref={forwardedRef}
+      onMouseEnter={onMouseEnter}
+      className={ratingStarStyles({
+        gap: size === 'lg' ? 'md' : 'sm',
+        disabled,
+        readOnly,
+      })}
+      data-part="star"
+      onClick={onClick}
+    >
       <div
-        ref={forwardedRef}
-        onMouseEnter={onMouseEnter}
-        className={ratingStarStyles({
-          gap: size === 'lg' ? 'md' : 'sm',
-          disabled,
-          readOnly,
-        })}
-        data-part="star"
-        onClick={onClick}
+        className={cx(
+          'absolute z-raised overflow-hidden',
+          'group-[[data-part=star][data-hovered]]:overflow-visible'
+        )}
+        style={{ width: value * 100 + '%' }}
       >
-        <div
-          className={cx(
-            'absolute z-raised overflow-hidden',
-            'group-[[data-part=star][data-hovered]]:overflow-visible'
-          )}
-          style={{ width: value * 100 + '%' }}
+        <Icon
+          className={ratingStarIconStyles({
+            size,
+            design: 'filled',
+          })}
         >
-          <Icon
-            className={ratingStarIconStyles({
-              size,
-              design: 'filled',
-            })}
-          >
-            <StarFill />
-          </Icon>
-        </div>
-
-        <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>
-          <StarOutline />
+          <StarFill />
         </Icon>
       </div>
-    )
-  }
-)
+
+      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>
+        <StarOutline />
+      </Icon>
+    </div>
+  )
+}
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
index 1d1696cc4..d649b938e 100644
--- a/packages/components/select/CHANGELOG.md
+++ b/packages/components/select/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/select
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/select
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 3e08578b2..f910c56e7 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/select",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Displays a list of options for the user to pick from—triggered by a button.",
   "publishConfig": {
     "access": "public"
@@ -42,9 +42,9 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/use-combined-state": "^7.3.7"
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/use-combined-state": "^8.0.0"
   }
 }
diff --git a/packages/components/select/src/SelectGroup.tsx b/packages/components/select/src/SelectGroup.tsx
index 2d5bdf6c9..76fc06161 100644
--- a/packages/components/select/src/SelectGroup.tsx
+++ b/packages/components/select/src/SelectGroup.tsx
@@ -1,40 +1,37 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, type Ref } from 'react'
 
 import { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'
 
 interface GroupProps {
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLOptGroupElement>
 }
 
-export const Group = forwardRef(
-  ({ children, ...props }: GroupProps, forwardedRef: Ref<HTMLOptGroupElement>) => {
-    return (
-      <SelectGroupProvider>
-        <GroupContent ref={forwardedRef} {...props}>
-          {children}
-        </GroupContent>
-      </SelectGroupProvider>
-    )
-  }
-)
+export const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {
+  return (
+    <SelectGroupProvider>
+      <GroupContent ref={forwardedRef} {...props}>
+        {children}
+      </GroupContent>
+    </SelectGroupProvider>
+  )
+}
 
-const GroupContent = forwardRef(
-  ({ children, className }: GroupProps, forwardedRef: Ref<HTMLOptGroupElement>) => {
-    const { groupLabel } = useSelectGroupContext()
+const GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {
+  const { groupLabel } = useSelectGroupContext()
 
-    return (
-      <optgroup
-        data-spark-component="select-group"
-        ref={forwardedRef}
-        className={cx(className)}
-        label={groupLabel}
-      >
-        {children}
-      </optgroup>
-    )
-  }
-)
+  return (
+    <optgroup
+      data-spark-component="select-group"
+      ref={forwardedRef}
+      className={cx(className)}
+      label={groupLabel}
+    >
+      {children}
+    </optgroup>
+  )
+}
 
 Group.displayName = 'Select.Group'
diff --git a/packages/components/select/src/SelectItem.tsx b/packages/components/select/src/SelectItem.tsx
index 6a6c86d4b..e9021360c 100644
--- a/packages/components/select/src/SelectItem.tsx
+++ b/packages/components/select/src/SelectItem.tsx
@@ -1,26 +1,25 @@
-import { forwardRef, type Ref } from 'react'
+import { type Ref } from 'react'
 
 export interface ItemProps {
   disabled?: boolean
   value: string
   children: string
+  ref?: Ref<HTMLOptionElement>
 }
 
-export const Item = forwardRef(
-  ({ disabled = false, value, children }: ItemProps, forwardedRef: Ref<HTMLOptionElement>) => {
-    return (
-      <option
-        data-spark-component="select-item"
-        ref={forwardedRef}
-        key={value}
-        value={value}
-        disabled={disabled}
-        // label
-      >
-        {children}
-      </option>
-    )
-  }
-)
+export const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {
+  return (
+    <option
+      data-spark-component="select-item"
+      ref={forwardedRef}
+      key={value}
+      value={value}
+      disabled={disabled}
+      // label
+    >
+      {children}
+    </option>
+  )
+}
 
 Item.displayName = 'Select.Item'
diff --git a/packages/components/select/src/SelectItems.tsx b/packages/components/select/src/SelectItems.tsx
index 8e2d1b71a..6736a193f 100644
--- a/packages/components/select/src/SelectItems.tsx
+++ b/packages/components/select/src/SelectItems.tsx
@@ -1,5 +1,5 @@
 import { cva } from 'class-variance-authority'
-import { ChangeEvent, ComponentPropsWithoutRef, forwardRef, PropsWithChildren, Ref } from 'react'
+import { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'
 
 import { useSelectContext } from './SelectContext'
 
@@ -35,54 +35,54 @@ export const styles = cva(
   }
 )
 
-export const Items = forwardRef(
-  (
-    { children, className, ...rest }: PropsWithChildren<ComponentPropsWithoutRef<'select'>>,
-    ref: Ref<HTMLSelectElement>
-  ) => {
-    const {
-      state,
-      disabled,
-      readOnly,
-      ariaLabel,
-      fieldLabelId,
-      isControlled,
-      onValueChange,
-      selectedItem,
-      setValue,
-      name,
-      required,
-      fieldId,
-    } = useSelectContext()
+export const Items = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {
+  const {
+    state,
+    disabled,
+    readOnly,
+    ariaLabel,
+    fieldLabelId,
+    isControlled,
+    onValueChange,
+    selectedItem,
+    setValue,
+    name,
+    required,
+    fieldId,
+  } = useSelectContext()
 
-    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
-      if (isControlled) {
-        event.preventDefault()
-        onValueChange?.(event.target.value)
-      } else {
-        setValue(event.target.value)
-      }
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (isControlled) {
+      event.preventDefault()
+      onValueChange?.(event.target.value)
+    } else {
+      setValue(event.target.value)
     }
-
-    return (
-      <select
-        data-spark-component="select-items"
-        ref={ref}
-        disabled={disabled || readOnly}
-        name={name}
-        required={required}
-        aria-labelledby={fieldLabelId}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
-        className={styles({ className, state, disabled, readOnly })}
-        value={selectedItem?.value}
-        onChange={handleChange}
-        id={fieldId}
-        {...rest}
-      >
-        {children}
-      </select>
-    )
   }
-)
+
+  return (
+    <select
+      data-spark-component="select-items"
+      ref={ref}
+      disabled={disabled || readOnly}
+      name={name}
+      required={required}
+      aria-labelledby={fieldLabelId}
+      {...(ariaLabel && { 'aria-label': ariaLabel })}
+      className={styles({ className, state, disabled, readOnly })}
+      value={selectedItem?.value}
+      onChange={handleChange}
+      id={fieldId}
+      {...rest}
+    >
+      {children}
+    </select>
+  )
+}
 
 Items.displayName = 'Select.Items'
diff --git a/packages/components/select/src/SelectPlaceholder.tsx b/packages/components/select/src/SelectPlaceholder.tsx
index 0d9410762..9916c6f12 100644
--- a/packages/components/select/src/SelectPlaceholder.tsx
+++ b/packages/components/select/src/SelectPlaceholder.tsx
@@ -1,32 +1,35 @@
-import { forwardRef, type Ref, useEffect } from 'react'
+import { type Ref, useEffect } from 'react'
 
 import { useSelectContext } from './SelectContext'
 
 export interface PlaceholderProps {
   disabled?: boolean
   children: string
+  ref?: Ref<HTMLOptionElement>
 }
 
-export const Placeholder = forwardRef(
-  ({ disabled = false, children }: PlaceholderProps, forwardedRef: Ref<HTMLOptionElement>) => {
-    const { setPlaceholder } = useSelectContext()
+export const Placeholder = ({
+  disabled = false,
+  children,
+  ref: forwardedRef,
+}: PlaceholderProps) => {
+  const { setPlaceholder } = useSelectContext()
 
-    useEffect(() => {
-      setPlaceholder(children)
-    }, [children])
+  useEffect(() => {
+    setPlaceholder(children)
+  }, [children])
 
-    return (
-      <option
-        data-spark-component="select-placeholder"
-        ref={forwardedRef}
-        key="placeholder"
-        value=""
-        disabled={disabled}
-      >
-        {children}
-      </option>
-    )
-  }
-)
+  return (
+    <option
+      data-spark-component="select-placeholder"
+      ref={forwardedRef}
+      key="placeholder"
+      value=""
+      disabled={disabled}
+    >
+      {children}
+    </option>
+  )
+}
 
 Placeholder.displayName = 'Select.Placeholder'
diff --git a/packages/components/select/src/SelectTrigger.tsx b/packages/components/select/src/SelectTrigger.tsx
index e036744bf..c7c00a89a 100644
--- a/packages/components/select/src/SelectTrigger.tsx
+++ b/packages/components/select/src/SelectTrigger.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@spark-ui/icon'
 import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
-import { forwardRef, ReactNode, type Ref, useEffect } from 'react'
+import { ReactNode, type Ref, useEffect } from 'react'
 
 import { useSelectContext } from './SelectContext'
 import { styles } from './SelectTrigger.styles'
@@ -9,41 +9,42 @@ interface TriggerProps {
   'aria-label'?: string
   children: ReactNode
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
 /**
  * This trigger acts as a fake button for the `select` tag.
  * It is not interactive.
  */
-export const Trigger = forwardRef(
-  (
-    { 'aria-label': ariaLabel, children, className }: TriggerProps,
-    forwardedRef: Ref<HTMLDivElement>
-  ) => {
-    const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()
-
-    useEffect(() => {
-      if (ariaLabel) {
-        setAriaLabel(ariaLabel)
-      }
-    }, [ariaLabel])
-
-    return (
-      <div
-        data-spark-component="select-trigger"
-        ref={forwardedRef}
-        className={styles({ className, state, disabled, readOnly })}
-      >
-        <span className="flex items-center justify-start gap-md">{children}</span>
-
-        <Icon className="ml-md shrink-0" size="sm">
-          <ArrowHorizontalDown />
-        </Icon>
-
-        {itemsComponent}
-      </div>
-    )
-  }
-)
+export const Trigger = ({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  ref: forwardedRef,
+}: TriggerProps) => {
+  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()
+
+  useEffect(() => {
+    if (ariaLabel) {
+      setAriaLabel(ariaLabel)
+    }
+  }, [ariaLabel])
+
+  return (
+    <div
+      data-spark-component="select-trigger"
+      ref={forwardedRef}
+      className={styles({ className, state, disabled, readOnly })}
+    >
+      <span className="flex items-center justify-start gap-md">{children}</span>
+
+      <Icon className="ml-md shrink-0" size="sm">
+        <ArrowHorizontalDown />
+      </Icon>
+
+      {itemsComponent}
+    </div>
+  )
+}
 
 Trigger.displayName = 'Select.Trigger'
diff --git a/packages/components/select/src/SelectValue.tsx b/packages/components/select/src/SelectValue.tsx
index 5afaf8e0d..2ed4a3709 100644
--- a/packages/components/select/src/SelectValue.tsx
+++ b/packages/components/select/src/SelectValue.tsx
@@ -1,5 +1,5 @@
 import { cx } from 'class-variance-authority'
-import { forwardRef, ReactNode, type Ref } from 'react'
+import { ReactNode, type Ref } from 'react'
 
 import { useSelectContext } from './SelectContext'
 
@@ -11,36 +11,37 @@ export interface ValueProps {
    * If not specified, the value inside `Select.Placeholder` item will be used.
    */
   placeholder?: string
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const Value = forwardRef(
-  (
-    { children, className, placeholder: customPlaceholder }: ValueProps,
-    forwardedRef: Ref<HTMLSpanElement>
-  ) => {
-    const { selectedItem, placeholder, disabled } = useSelectContext()
+export const Value = ({
+  children,
+  className,
+  placeholder: customPlaceholder,
+  ref: forwardedRef,
+}: ValueProps) => {
+  const { selectedItem, placeholder, disabled } = useSelectContext()
 
-    const isPlaceholderSelected = selectedItem?.value == null
-    const valuePlaceholder = customPlaceholder || placeholder
+  const isPlaceholderSelected = selectedItem?.value == null
+  const valuePlaceholder = customPlaceholder || placeholder
 
-    return (
+  return (
+    <span
+      role="presentation"
+      data-spark-component="select-value"
+      ref={forwardedRef}
+      className={cx('flex shrink items-center text-left', className)}
+    >
       <span
-        role="presentation"
-        data-spark-component="select-value"
-        ref={forwardedRef}
-        className={cx('flex shrink items-center text-left', className)}
+        className={cx(
+          'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'
+        )}
       >
-        <span
-          className={cx(
-            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
-            isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'
-          )}
-        >
-          {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}
-        </span>
+        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}
       </span>
-    )
-  }
-)
+    </span>
+  )
+}
 
 Value.displayName = 'Select.Value'
diff --git a/packages/components/skeleton/CHANGELOG.md b/packages/components/skeleton/CHANGELOG.md
index 94c176081..3073bbdf5 100644
--- a/packages/components/skeleton/CHANGELOG.md
+++ b/packages/components/skeleton/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/skeleton
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/skeleton
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index 525c97d11..6ea5bdc25 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/skeleton",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A skeleton gives feedback about loading state of some component.",
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/visually-hidden": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/visually-hidden": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/skeleton/src/Skeleton.tsx b/packages/components/skeleton/src/Skeleton.tsx
index 9859502ca..901357ec9 100644
--- a/packages/components/skeleton/src/Skeleton.tsx
+++ b/packages/components/skeleton/src/Skeleton.tsx
@@ -1,9 +1,9 @@
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
 import { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'
 
-export interface SkeletonProps extends ComponentPropsWithoutRef<'div'>, SkeletonStyleProps {
+export interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {
   /**
    * Displays an animated light effect.
    * @default true
@@ -15,20 +15,25 @@ export interface SkeletonProps extends ComponentPropsWithoutRef<'div'>, Skeleton
   label?: string
 }
 
-export const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonProps>>(
-  ({ isAnimated = true, label, className, children, ...rest }, forwardedRef) => (
-    <div
-      ref={forwardedRef}
-      data-spark-component="skeleton"
-      role="presentation"
-      className={skeletonStyles({ isAnimated, className })}
-      {...rest}
-    >
-      {children}
+export const Skeleton = ({
+  isAnimated = true,
+  label,
+  className,
+  children,
+  ref: forwardedRef,
+  ...rest
+}: PropsWithChildren<SkeletonProps>) => (
+  <div
+    ref={forwardedRef}
+    data-spark-component="skeleton"
+    role="presentation"
+    className={skeletonStyles({ isAnimated, className })}
+    {...rest}
+  >
+    {children}
 
-      {label && <VisuallyHidden>{label}</VisuallyHidden>}
-    </div>
-  )
+    {label && <VisuallyHidden>{label}</VisuallyHidden>}
+  </div>
 )
 
 Skeleton.displayName = 'Skeleton'
diff --git a/packages/components/skeleton/src/SkeletonItem.tsx b/packages/components/skeleton/src/SkeletonItem.tsx
index 33c3c2024..51eb272a7 100644
--- a/packages/components/skeleton/src/SkeletonItem.tsx
+++ b/packages/components/skeleton/src/SkeletonItem.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from 'react'
+import { ComponentPropsWithRef, CSSProperties } from 'react'
 
 import {
   type SkeletonItemStyleProps,
@@ -6,7 +6,7 @@ import {
   skeletonLineStyles,
 } from './SkeletonItem.styles'
 
-interface SkeletonItemProps extends ComponentPropsWithoutRef<'div'>, SkeletonItemStyleProps {}
+interface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}
 
 export type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {
   width?: string | number
@@ -27,18 +27,16 @@ const getSizeValue = (size?: number | string): string | undefined => {
   return size
 }
 
-const SkeletonItem = forwardRef<HTMLDivElement, SkeletonItemProps>(
-  ({ shape, className, ...rest }, forwardedRef) => {
-    return (
-      <div
-        ref={forwardedRef}
-        aria-hidden="true"
-        className={skeletonItemStyles({ shape, className })}
-        {...rest}
-      />
-    )
-  }
-)
+const SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {
+  return (
+    <div
+      ref={forwardedRef}
+      aria-hidden="true"
+      className={skeletonItemStyles({ shape, className })}
+      {...rest}
+    />
+  )
+}
 
 export const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {
   return (
diff --git a/packages/components/slider/CHANGELOG.md b/packages/components/slider/CHANGELOG.md
index 91917a7e4..5c560600f 100644
--- a/packages/components/slider/CHANGELOG.md
+++ b/packages/components/slider/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/slider
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/slider
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
index e9230384e..31b55cd1c 100644
--- a/packages/components/slider/package.json
+++ b/packages/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/slider",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "An input where the user selects a value from within a given range.",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/slider/src/Slider.tsx b/packages/components/slider/src/Slider.tsx
index 234daa5d1..101e9cedf 100644
--- a/packages/components/slider/src/Slider.tsx
+++ b/packages/components/slider/src/Slider.tsx
@@ -1,5 +1,5 @@
 import * as RadixSlider from '@radix-ui/react-slider'
-import { forwardRef, type PropsWithChildren } from 'react'
+import { type PropsWithChildren, Ref } from 'react'
 
 import { rootStyles } from './Slider.styles'
 import { SliderContext } from './SliderContext'
@@ -56,26 +56,33 @@ export interface SliderProps
    * @default 1
    */
   step?: number
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Slider = forwardRef<HTMLDivElement, SliderProps>(
-  ({ asChild = false, intent = 'basic', shape = 'square', children, className, ...rest }, ref) => (
-    <SliderContext.Provider value={{ intent, shape }}>
-      <RadixSlider.Root
-        ref={ref}
-        data-spark-component="slider"
-        asChild={asChild}
-        className={rootStyles({ className })}
-        dir="ltr"
-        orientation="horizontal"
-        inverted={false}
-        minStepsBetweenThumbs={0}
-        {...rest}
-      >
-        {children}
-      </RadixSlider.Root>
-    </SliderContext.Provider>
-  )
+export const Slider = ({
+  asChild = false,
+  intent = 'basic',
+  shape = 'square',
+  children,
+  className,
+  ref,
+  ...rest
+}: SliderProps) => (
+  <SliderContext.Provider value={{ intent, shape }}>
+    <RadixSlider.Root
+      ref={ref}
+      data-spark-component="slider"
+      asChild={asChild}
+      className={rootStyles({ className })}
+      dir="ltr"
+      orientation="horizontal"
+      inverted={false}
+      minStepsBetweenThumbs={0}
+      {...rest}
+    >
+      {children}
+    </RadixSlider.Root>
+  </SliderContext.Provider>
 )
 
 Slider.displayName = 'Slider'
diff --git a/packages/components/slider/src/SliderThumb.tsx b/packages/components/slider/src/SliderThumb.tsx
index 303491806..a0f18762f 100644
--- a/packages/components/slider/src/SliderThumb.tsx
+++ b/packages/components/slider/src/SliderThumb.tsx
@@ -1,5 +1,5 @@
 import * as RadixSlider from '@radix-ui/react-slider'
-import { type FocusEvent, forwardRef, type KeyboardEvent, type PointerEvent, useRef } from 'react'
+import { type FocusEvent, type KeyboardEvent, type PointerEvent, Ref, useRef } from 'react'
 
 import { useSliderContext } from './SliderContext'
 import { thumbVariants } from './SliderThumb.styles'
@@ -10,46 +10,53 @@ export interface SliderThumbProps extends RadixSlider.SliderThumbProps {
    * @default false
    */
   asChild?: boolean
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const SliderThumb = forwardRef<HTMLSpanElement, SliderThumbProps>(
-  ({ asChild = false, className, onPointerDown, onKeyDown, onBlur, ...rest }, forwardedRef) => {
-    const { intent } = useSliderContext()
+export const SliderThumb = ({
+  asChild = false,
+  className,
+  onPointerDown,
+  onKeyDown,
+  onBlur,
+  ref: forwardedRef,
+  ...rest
+}: SliderThumbProps) => {
+  const { intent } = useSliderContext()
 
-    const innerRef = useRef(null)
-    const ref = forwardedRef || innerRef
+  const innerRef = useRef(null)
+  const ref = forwardedRef || innerRef
 
-    const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {
-      /**
-       * Radix Slider implementation uses `.focus()` and thus prevent us to handle
-       * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay
-       * aware of the type of event, and adapt styles if needed.
-       */
-      if (typeof ref === 'function' || !ref.current) return
-      ref.current.dataset.interaction = e.type
-    }
-
-    return (
-      <RadixSlider.Thumb
-        ref={ref}
-        asChild={asChild}
-        onPointerDown={(e: PointerEvent<HTMLSpanElement>) => {
-          setInteractionType(e)
-          onPointerDown?.(e)
-        }}
-        onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {
-          setInteractionType(e)
-          onKeyDown?.(e)
-        }}
-        onBlur={(e: FocusEvent<HTMLSpanElement>) => {
-          setInteractionType(e)
-          onBlur?.(e)
-        }}
-        className={thumbVariants({ intent, className })}
-        {...rest}
-      />
-    )
+  const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {
+    /**
+     * Radix Slider implementation uses `.focus()` and thus prevent us to handle
+     * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay
+     * aware of the type of event, and adapt styles if needed.
+     */
+    if (typeof ref === 'function' || !ref.current) return
+    ref.current.dataset.interaction = e.type
   }
-)
+
+  return (
+    <RadixSlider.Thumb
+      ref={ref}
+      asChild={asChild}
+      onPointerDown={(e: PointerEvent<HTMLSpanElement>) => {
+        setInteractionType(e)
+        onPointerDown?.(e)
+      }}
+      onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {
+        setInteractionType(e)
+        onKeyDown?.(e)
+      }}
+      onBlur={(e: FocusEvent<HTMLSpanElement>) => {
+        setInteractionType(e)
+        onBlur?.(e)
+      }}
+      className={thumbVariants({ intent, className })}
+      {...rest}
+    />
+  )
+}
 
 SliderThumb.displayName = 'Slider.Thumb'
diff --git a/packages/components/slider/src/SliderTrack.tsx b/packages/components/slider/src/SliderTrack.tsx
index f04527c66..60c3512fa 100644
--- a/packages/components/slider/src/SliderTrack.tsx
+++ b/packages/components/slider/src/SliderTrack.tsx
@@ -1,5 +1,5 @@
 import * as RadixSlider from '@radix-ui/react-slider'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import { useSliderContext } from './SliderContext'
 import { rangeVariants, trackVariants } from './SliderTrack.styles'
@@ -12,18 +12,17 @@ export interface SliderTrackProps
    * @default false
    */
   asChild?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
-export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
-  ({ asChild = false, className, ...rest }, ref) => {
-    const { intent, shape } = useSliderContext()
+export const SliderTrack = ({ asChild = false, className, ref, ...rest }: SliderTrackProps) => {
+  const { intent, shape } = useSliderContext()
 
-    return (
-      <RadixSlider.Track ref={ref} asChild={asChild} className={trackVariants({ shape })} {...rest}>
-        <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />
-      </RadixSlider.Track>
-    )
-  }
-)
+  return (
+    <RadixSlider.Track ref={ref} asChild={asChild} className={trackVariants({ shape })} {...rest}>
+      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />
+    </RadixSlider.Track>
+  )
+}
 
 SliderTrack.displayName = 'Slider.Track'
diff --git a/packages/components/slot/CHANGELOG.md b/packages/components/slot/CHANGELOG.md
index 8fb68f2a0..810cc7aaa 100644
--- a/packages/components/slot/CHANGELOG.md
+++ b/packages/components/slot/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/slot
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/slot
diff --git a/packages/components/slot/package.json b/packages/components/slot/package.json
index 80c0499c7..8537b467e 100644
--- a/packages/components/slot/package.json
+++ b/packages/components/slot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/slot",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Merges its props onto its immediate child",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/slot/src/Slot.tsx b/packages/components/slot/src/Slot.tsx
index f5dcbbd00..1fd74269a 100644
--- a/packages/components/slot/src/Slot.tsx
+++ b/packages/components/slot/src/Slot.tsx
@@ -1,13 +1,15 @@
 import { Slot as SlotPrimitive } from '@radix-ui/react-slot'
-import React, { forwardRef, PropsWithChildren, ReactNode } from 'react'
+import React, { PropsWithChildren, ReactNode, Ref } from 'react'
 
 export { Slottable } from '@radix-ui/react-slot'
 
-export type SlotProps = PropsWithChildren<React.HTMLAttributes<HTMLElement>>
+export type SlotProps = PropsWithChildren<React.HTMLAttributes<HTMLElement>> & {
+  ref?: Ref<HTMLElement>
+}
 
-export const Slot = forwardRef<HTMLElement, SlotProps>((props, ref) => {
+export const Slot = ({ ref, ...props }: SlotProps) => {
   return <SlotPrimitive ref={ref} {...props} />
-})
+}
 
 /**
  * When using Radix `Slot` component, it will consider its first child to merge its props with.
diff --git a/packages/components/snackbar/CHANGELOG.md b/packages/components/snackbar/CHANGELOG.md
index 36c03fbef..314a9cee6 100644
--- a/packages/components/snackbar/CHANGELOG.md
+++ b/packages/components/snackbar/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/snackbar
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/snackbar
diff --git a/packages/components/snackbar/package.json b/packages/components/snackbar/package.json
index 4d98feb37..cce3da1ea 100644
--- a/packages/components/snackbar/package.json
+++ b/packages/components/snackbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/snackbar",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Display brief, temporary notifications of actions, errors, or other events in an application.",
   "publishConfig": {
     "access": "public"
@@ -25,9 +25,9 @@
   "dependencies": {
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/toast": "3.0.0-beta.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/snackbar/src/Snackbar.tsx b/packages/components/snackbar/src/Snackbar.tsx
index cc31345e0..e07a08dd7 100644
--- a/packages/components/snackbar/src/Snackbar.tsx
+++ b/packages/components/snackbar/src/Snackbar.tsx
@@ -3,7 +3,7 @@ import {
   ToastQueue,
   useToastQueue,
 } from '@react-stately/toast'
-import { forwardRef, type ReactElement, type RefObject, useEffect, useRef } from 'react'
+import { type ReactElement, Ref, type RefObject, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 
 import { type SnackbarItemValue } from './SnackbarItem'
@@ -42,34 +42,34 @@ const GLOBAL_SNACKBAR_STORE = {
   subscriptions: new Set<() => void>(),
 }
 
-export type SnackbarProps = Omit<SnackbarRegionProps, 'state'>
-
-export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
-  (props, forwardedRef): ReactElement | null => {
-    const ref = useRef<HTMLDivElement>(null)
+export type SnackbarProps = Omit<SnackbarRegionProps, 'state'> & {
+  ref?: Ref<HTMLDivElement>
+}
 
-    const state = useToastQueue(getGlobalSnackBarQueue())
+export const Snackbar = ({ ref: forwardedRef, ...props }: SnackbarProps): ReactElement | null => {
+  const ref = useRef<HTMLDivElement>(null)
 
-    const { provider, addProvider, deleteProvider } = useSnackbarGlobalStore(GLOBAL_SNACKBAR_STORE)
+  const state = useToastQueue(getGlobalSnackBarQueue())
 
-    useEffect(() => {
-      addProvider(ref)
+  const { provider, addProvider, deleteProvider } = useSnackbarGlobalStore(GLOBAL_SNACKBAR_STORE)
 
-      return () => {
-        for (const toast of getGlobalSnackBarQueue().visibleToasts) {
-          toast.animation = undefined
-        }
+  useEffect(() => {
+    addProvider(ref)
 
-        deleteProvider(ref)
+    return () => {
+      for (const toast of getGlobalSnackBarQueue().visibleToasts) {
+        toast.animation = undefined
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
 
-    return ref === provider && state.visibleToasts.length > 0
-      ? createPortal(<SnackbarRegion ref={forwardedRef} state={state} {...props} />, document.body)
-      : null
-  }
-)
+      deleteProvider(ref)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return ref === provider && state.visibleToasts.length > 0
+    ? createPortal(<SnackbarRegion ref={forwardedRef} state={state} {...props} />, document.body)
+    : null
+}
 
 Snackbar.displayName = 'Snackbar'
 
diff --git a/packages/components/snackbar/src/SnackbarItem.tsx b/packages/components/snackbar/src/SnackbarItem.tsx
index 113edc369..1014e6f5b 100644
--- a/packages/components/snackbar/src/SnackbarItem.tsx
+++ b/packages/components/snackbar/src/SnackbarItem.tsx
@@ -3,9 +3,8 @@ import { useToast } from '@react-aria/toast'
 import {
   Children,
   cloneElement,
-  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
   type FC,
-  forwardRef,
   isValidElement,
   type PropsWithChildren,
   type ReactElement,
@@ -47,9 +46,7 @@ export interface SnackbarItemValue extends SnackbarItemVariantProps {
   actionOnNewline?: boolean
 }
 
-export interface SnackbarItemProps
-  extends ComponentPropsWithoutRef<'div'>,
-    SnackbarItemVariantProps {
+export interface SnackbarItemProps extends ComponentPropsWithRef<'div'>, SnackbarItemVariantProps {
   /**
    * Defines a string value that labels the current element.
    */
@@ -68,127 +65,119 @@ export interface SnackbarItemProps
   'aria-details'?: string
 }
 
-export const SnackbarItem = forwardRef<HTMLDivElement, PropsWithChildren<SnackbarItemProps>>(
-  (
-    {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby,
-      'aria-describedby': ariaDescribedby,
-      'aria-details': ariaDetails,
-      design: designProp,
-      intent: intentProp,
-      actionOnNewline: actionOnNewlineProp,
-      className,
-      children,
-      ...rest
+export const SnackbarItem = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+  'aria-details': ariaDetails,
+  design: designProp,
+  intent: intentProp,
+  actionOnNewline: actionOnNewlineProp,
+  className,
+  children,
+  ref: forwardedRef,
+  ...rest
+}: PropsWithChildren<SnackbarItemProps>) => {
+  const innerRef = useRef(null)
+  const ref = typeof forwardedRef !== 'function' ? forwardedRef || innerRef : innerRef
+
+  const { toast, state } = useSnackbarItemContext()
+
+  const { state: swipeState, direction: swipeDirection } = useSwipe({
+    swipeRef: ref,
+    onSwipeStart: state.pauseAll,
+    onSwipeCancel: state.resumeAll,
+    onSwipeEnd: ({ direction }) => {
+      ;['left', 'right'].includes(`${direction}`) && state.close(toast.key)
     },
-    forwardedRef
-  ) => {
-    const innerRef = useRef(null)
-    const ref = typeof forwardedRef !== 'function' ? forwardedRef || innerRef : innerRef
-
-    const { toast, state } = useSnackbarItemContext()
-
-    const { state: swipeState, direction: swipeDirection } = useSwipe({
-      swipeRef: ref,
-      onSwipeStart: state.pauseAll,
-      onSwipeCancel: state.resumeAll,
-      onSwipeEnd: ({ direction }) => {
-        ;['left', 'right'].includes(`${direction}`) && state.close(toast.key)
-      },
-    })
-
-    const { message, icon, isClosable, onAction, actionLabel } = toast.content
-    const intent = intentProp ?? toast.content.intent
-    const design = designProp ?? toast.content.design
-    const actionOnNewline = actionOnNewlineProp ?? toast.content.actionOnNewline
-
-    const ariaProps = {
-      ariaLabel,
-      ariaLabelledby,
-      ariaDescribedby,
-      ariaDetails,
-    }
-
-    const { toastProps, titleProps, closeButtonProps } = useToast(
-      { toast, ...ariaProps },
-      state,
-      ref
-    )
-
-    const findElement = useCallback(
-      <P extends object>(elementDisplayName: string): ReactElement<P> | undefined => {
-        const childrenArray = Children.toArray(children)
-
-        const match = childrenArray
-          .filter(isValidElement)
-          .find(
-            (child): child is ReactElement<P> =>
-              !!(child.type as FC<P> & { displayName?: string }).displayName?.includes(
-                elementDisplayName
-              )
-          )
-
-        return match as ReactElement<P> | undefined
-      },
-      [children]
-    )
-
-    const iconFromChildren = findElement<SnackbarItemIconProps>('Snackbar.ItemIcon')
-    const actionBtnFromChildren = findElement<SnackbarItemActionProps>('Snackbar.ItemAction')
-    const closeBtnFromChildren = findElement<SnackbarItemCloseProps>('Snackbar.ItemClose')
-
-    return (
-      <div
-        ref={ref}
-        {...toastProps}
-        {...rest}
-        data-animation={toast.animation}
-        {...(!(swipeState === 'cancel' && toast.animation === 'exiting') && {
-          'data-swipe': swipeState,
-          'data-swipe-direction': swipeDirection,
-        })}
-        {...(toast.animation === 'exiting' && {
-          // Remove snackbar when the exiting animation completes
-          onAnimationEnd: () => state.remove(toast.key),
-        })}
-        className={snackbarItemVariant({ design, intent, actionOnNewline, className })}
-      >
-        {/* 1. ICON */}
-        {renderSubComponent(iconFromChildren, icon ? SnackbarItemIcon : null, {
-          children: icon,
-        })}
-
-        {/* 2. MESSAGE */}
-        <p
-          className="row-span-3 px-md py-lg text-body-2"
-          style={{ gridArea: 'message' }}
-          {...titleProps}
-        >
-          {message}
-        </p>
-
-        {/* 3. ACTION BUTTON */}
-        {renderSubComponent(
-          actionBtnFromChildren,
-          actionLabel && onAction ? SnackbarItemAction : null,
-          { intent, design, onClick: onAction, children: actionLabel }
-        )}
-
-        {/* 4. CLOSE BUTTON */}
-        {renderSubComponent(closeBtnFromChildren, isClosable ? SnackbarItemClose : null, {
-          intent,
-          design,
-          /**
-           * React Spectrum typing of aria-label is inaccurate, and aria-label value should never be undefined.
-           * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useLocalizedStringFormatter.ts#L40
-           */
-          'aria-label': closeButtonProps['aria-label'] as string,
-        })}
-      </div>
-    )
+  })
+
+  const { message, icon, isClosable, onAction, actionLabel } = toast.content
+  const intent = intentProp ?? toast.content.intent
+  const design = designProp ?? toast.content.design
+  const actionOnNewline = actionOnNewlineProp ?? toast.content.actionOnNewline
+
+  const ariaProps = {
+    ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaDetails,
   }
-)
+
+  const { toastProps, titleProps, closeButtonProps } = useToast({ toast, ...ariaProps }, state, ref)
+
+  const findElement = useCallback(
+    <P extends object>(elementDisplayName: string): ReactElement<P> | undefined => {
+      const childrenArray = Children.toArray(children)
+
+      const match = childrenArray
+        .filter(isValidElement)
+        .find(
+          (child): child is ReactElement<P> =>
+            !!(child.type as FC<P> & { displayName?: string }).displayName?.includes(
+              elementDisplayName
+            )
+        )
+
+      return match as ReactElement<P> | undefined
+    },
+    [children]
+  )
+
+  const iconFromChildren = findElement<SnackbarItemIconProps>('Snackbar.ItemIcon')
+  const actionBtnFromChildren = findElement<SnackbarItemActionProps>('Snackbar.ItemAction')
+  const closeBtnFromChildren = findElement<SnackbarItemCloseProps>('Snackbar.ItemClose')
+
+  return (
+    <div
+      ref={ref}
+      {...toastProps}
+      {...rest}
+      data-animation={toast.animation}
+      {...(!(swipeState === 'cancel' && toast.animation === 'exiting') && {
+        'data-swipe': swipeState,
+        'data-swipe-direction': swipeDirection,
+      })}
+      {...(toast.animation === 'exiting' && {
+        // Remove snackbar when the exiting animation completes
+        onAnimationEnd: () => state.remove(toast.key),
+      })}
+      className={snackbarItemVariant({ design, intent, actionOnNewline, className })}
+    >
+      {/* 1. ICON */}
+      {renderSubComponent(iconFromChildren, icon ? SnackbarItemIcon : null, {
+        children: icon,
+      })}
+
+      {/* 2. MESSAGE */}
+      <p
+        className="row-span-3 px-md py-lg text-body-2"
+        style={{ gridArea: 'message' }}
+        {...titleProps}
+      >
+        {message}
+      </p>
+
+      {/* 3. ACTION BUTTON */}
+      {renderSubComponent(
+        actionBtnFromChildren,
+        actionLabel && onAction ? SnackbarItemAction : null,
+        { intent, design, onClick: onAction, children: actionLabel }
+      )}
+
+      {/* 4. CLOSE BUTTON */}
+      {renderSubComponent(closeBtnFromChildren, isClosable ? SnackbarItemClose : null, {
+        intent,
+        design,
+        /**
+         * React Spectrum typing of aria-label is inaccurate, and aria-label value should never be undefined.
+         * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useLocalizedStringFormatter.ts#L40
+         */
+        'aria-label': closeButtonProps['aria-label'] as string,
+      })}
+    </div>
+  )
+}
 
 SnackbarItem.displayName = 'Snackbar.Item'
 
diff --git a/packages/components/snackbar/src/SnackbarItemAction.tsx b/packages/components/snackbar/src/SnackbarItemAction.tsx
index d3584cc13..56d367a53 100644
--- a/packages/components/snackbar/src/SnackbarItemAction.tsx
+++ b/packages/components/snackbar/src/SnackbarItemAction.tsx
@@ -1,56 +1,54 @@
 import { Button, type ButtonProps } from '@spark-ui/button'
 import { cx } from 'class-variance-authority'
-import { forwardRef } from 'react'
+import { Ref } from 'react'
 
 import type { SnackbarItemVariantProps } from './SnackbarItem.styles'
 import { useSnackbarItemContext } from './SnackbarItemContext'
 
 export type SnackbarItemActionProps = Omit<ButtonProps, 'size' | 'shape' | 'intent'> &
-  SnackbarItemVariantProps
+  SnackbarItemVariantProps & {
+    ref?: Ref<HTMLButtonElement>
+  }
 
-export const SnackbarItemAction = forwardRef<HTMLButtonElement, SnackbarItemActionProps>(
-  (
-    {
-      design: designProp = 'filled',
-      intent: intentProp = 'neutral',
-      onClick,
-      children,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const { toast, state } = useSnackbarItemContext()
+export const SnackbarItemAction = ({
+  design: designProp = 'filled',
+  intent: intentProp = 'neutral',
+  onClick,
+  children,
+  className,
+  ref,
+  ...rest
+}: SnackbarItemActionProps) => {
+  const { toast, state } = useSnackbarItemContext()
 
-    const intent = intentProp ?? toast.content.intent
-    const design = designProp ?? toast.content.design
+  const intent = intentProp ?? toast.content.intent
+  const design = designProp ?? toast.content.design
 
-    return (
-      <Button
-        ref={ref}
-        size="md"
-        shape="rounded"
-        {...(intent === 'inverse'
-          ? {
-              design: 'ghost',
-              intent: 'surface',
-            }
-          : {
-              design,
-              intent: intent === 'error' ? 'danger' : intent,
-            })}
-        onClick={e => {
-          onClick?.(e)
-          state.close(toast.key)
-        }}
-        style={{ gridArea: 'action', ...rest.style }}
-        className={cx('ml-md justify-self-end', className)}
-        {...rest}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
+  return (
+    <Button
+      ref={ref}
+      size="md"
+      shape="rounded"
+      {...(intent === 'inverse'
+        ? {
+            design: 'ghost',
+            intent: 'surface',
+          }
+        : {
+            design,
+            intent: intent === 'error' ? 'danger' : intent,
+          })}
+      onClick={e => {
+        onClick?.(e)
+        state.close(toast.key)
+      }}
+      style={{ gridArea: 'action', ...rest.style }}
+      className={cx('ml-md justify-self-end', className)}
+      {...rest}
+    >
+      {children}
+    </Button>
+  )
+}
 
 SnackbarItemAction.displayName = 'Snackbar.ItemAction'
diff --git a/packages/components/snackbar/src/SnackbarItemClose.tsx b/packages/components/snackbar/src/SnackbarItemClose.tsx
index f96687a14..0bcd4bfba 100644
--- a/packages/components/snackbar/src/SnackbarItemClose.tsx
+++ b/packages/components/snackbar/src/SnackbarItemClose.tsx
@@ -2,62 +2,58 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
 import { Close } from '@spark-ui/icons/dist/icons/Close'
 import { cx } from 'class-variance-authority'
-import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { type ComponentPropsWithRef } from 'react'
 
 import type { SnackbarItemVariantProps } from './SnackbarItem.styles'
 import { useSnackbarItemContext } from './SnackbarItemContext'
 
 export interface SnackbarItemCloseProps
-  extends Omit<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'disabled'>,
+  extends Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'disabled'>,
     Pick<IconButtonProps, 'aria-label'>,
     SnackbarItemVariantProps {}
 
-export const SnackbarItemClose = forwardRef<HTMLButtonElement, SnackbarItemCloseProps>(
-  (
-    {
-      design: designProp = 'filled',
-      intent: intentProp = 'neutral',
-      'aria-label': ariaLabel,
-      onClick,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const { toast, state } = useSnackbarItemContext()
+export const SnackbarItemClose = ({
+  design: designProp = 'filled',
+  intent: intentProp = 'neutral',
+  'aria-label': ariaLabel,
+  onClick,
+  className,
+  ref,
+  ...rest
+}: SnackbarItemCloseProps) => {
+  const { toast, state } = useSnackbarItemContext()
 
-    const intent = intentProp ?? toast.content.intent
-    const design = designProp ?? toast.content.design
+  const intent = intentProp ?? toast.content.intent
+  const design = designProp ?? toast.content.design
 
-    return (
-      <IconButton
-        ref={ref}
-        size="md"
-        shape="rounded"
-        {...(intent === 'inverse'
-          ? {
-              design: 'ghost',
-              intent: 'surface',
-            }
-          : {
-              design,
-              intent: intent === 'error' ? 'danger' : intent,
-            })}
-        aria-label={ariaLabel}
-        onClick={e => {
-          onClick?.(e)
-          state.close(toast.key)
-        }}
-        style={{ gridArea: 'close', ...rest.style }}
-        className={cx('ml-md justify-self-end', className)}
-        {...rest}
-      >
-        <Icon size="sm">
-          <Close />
-        </Icon>
-      </IconButton>
-    )
-  }
-)
+  return (
+    <IconButton
+      ref={ref}
+      size="md"
+      shape="rounded"
+      {...(intent === 'inverse'
+        ? {
+            design: 'ghost',
+            intent: 'surface',
+          }
+        : {
+            design,
+            intent: intent === 'error' ? 'danger' : intent,
+          })}
+      aria-label={ariaLabel}
+      onClick={e => {
+        onClick?.(e)
+        state.close(toast.key)
+      }}
+      style={{ gridArea: 'close', ...rest.style }}
+      className={cx('ml-md justify-self-end', className)}
+      {...rest}
+    >
+      <Icon size="sm">
+        <Close />
+      </Icon>
+    </IconButton>
+  )
+}
 
 SnackbarItemClose.displayName = 'Snackbar.ItemClose'
diff --git a/packages/components/snackbar/src/SnackbarRegion.tsx b/packages/components/snackbar/src/SnackbarRegion.tsx
index 46e70848c..2bf4a58d7 100644
--- a/packages/components/snackbar/src/SnackbarRegion.tsx
+++ b/packages/components/snackbar/src/SnackbarRegion.tsx
@@ -1,18 +1,12 @@
 import { type AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import {
-  cloneElement,
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactElement,
-  useRef,
-} from 'react'
+import { cloneElement, type ComponentPropsWithRef, type ReactElement, useRef } from 'react'
 
 import { SnackbarItem, type SnackbarItemProps } from './SnackbarItem'
 import { SnackbarItemContext, type SnackbarItemState } from './SnackbarItemContext'
 import { snackbarRegionVariant, type SnackbarRegionVariantProps } from './SnackbarRegion.styles'
 
 export interface SnackbarRegionProps
-  extends ComponentPropsWithoutRef<'div'>,
+  extends ComponentPropsWithRef<'div'>,
     AriaToastRegionProps,
     SnackbarRegionVariantProps,
     Pick<SnackbarItemState, 'state'> {
@@ -40,29 +34,31 @@ export interface SnackbarRegionProps
   children?: ReactElement<SnackbarItemProps, typeof SnackbarItem>
 }
 
-export const SnackbarRegion = forwardRef<HTMLDivElement, SnackbarRegionProps>(
-  (
-    { children = <SnackbarItem />, state, position = 'bottom', className, ...rest },
-    forwardedRef
-  ): ReactElement => {
-    const innerRef = useRef<HTMLDivElement>(null)
-    const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
+export const SnackbarRegion = ({
+  children = <SnackbarItem />,
+  state,
+  position = 'bottom',
+  className,
+  ref: forwardedRef,
+  ...rest
+}: SnackbarRegionProps): ReactElement => {
+  const innerRef = useRef<HTMLDivElement>(null)
+  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
 
-    const { regionProps } = useToastRegion(rest, state, ref)
+  const { regionProps } = useToastRegion(rest, state, ref)
 
-    return (
-      <div
-        {...regionProps}
-        ref={ref}
-        data-position={position}
-        className={snackbarRegionVariant({ position, className })}
-      >
-        {state.visibleToasts.map(toast => (
-          <SnackbarItemContext.Provider key={toast.key} value={{ toast, state }}>
-            {cloneElement(children, { key: toast.key })}
-          </SnackbarItemContext.Provider>
-        ))}
-      </div>
-    )
-  }
-)
+  return (
+    <div
+      {...regionProps}
+      ref={ref}
+      data-position={position}
+      className={snackbarRegionVariant({ position, className })}
+    >
+      {state.visibleToasts.map(toast => (
+        <SnackbarItemContext.Provider key={toast.key} value={{ toast, state }}>
+          {cloneElement(children, { key: toast.key })}
+        </SnackbarItemContext.Provider>
+      ))}
+    </div>
+  )
+}
diff --git a/packages/components/spinner/CHANGELOG.md b/packages/components/spinner/CHANGELOG.md
index d0ac2f821..a527ae4dc 100644
--- a/packages/components/spinner/CHANGELOG.md
+++ b/packages/components/spinner/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/spinner
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/spinner
diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json
index 08d10855f..7566169f8 100644
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/spinner",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Spinners provide a visual cue that an action is processing awaiting a course of change or a result.",
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/visually-hidden": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/visually-hidden": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/spinner/src/Spinner.tsx b/packages/components/spinner/src/Spinner.tsx
index aed4eedc3..f5b1ea207 100644
--- a/packages/components/spinner/src/Spinner.tsx
+++ b/packages/components/spinner/src/Spinner.tsx
@@ -1,30 +1,33 @@
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
 import { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'
 
-export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, SpinnerStylesProps {
+export interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {
   /**
    * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
    */
   label?: string
 }
 
-export const Spinner = forwardRef<HTMLDivElement, PropsWithChildren<SpinnerProps>>(
-  (
-    { className, size = 'current', intent = 'current', label, isBackgroundVisible, ...others },
-    ref
-  ) => {
-    return (
-      <div
-        role="status"
-        data-spark-component="spinner"
-        ref={ref}
-        className={spinnerStyles({ className, size, intent, isBackgroundVisible })}
-        {...others}
-      >
-        {label && <VisuallyHidden>{label}</VisuallyHidden>}
-      </div>
-    )
-  }
-)
+export const Spinner = ({
+  className,
+  size = 'current',
+  intent = 'current',
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}: PropsWithChildren<SpinnerProps>) => {
+  return (
+    <div
+      role="status"
+      data-spark-component="spinner"
+      ref={ref}
+      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}
+      {...others}
+    >
+      {label && <VisuallyHidden>{label}</VisuallyHidden>}
+    </div>
+  )
+}
diff --git a/packages/components/stepper/CHANGELOG.md b/packages/components/stepper/CHANGELOG.md
index a82389ff4..17a7e54ed 100644
--- a/packages/components/stepper/CHANGELOG.md
+++ b/packages/components/stepper/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/stepper
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/stepper
diff --git a/packages/components/stepper/package.json b/packages/components/stepper/package.json
index 61c7f4284..edd85f871 100644
--- a/packages/components/stepper/package.json
+++ b/packages/components/stepper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/stepper",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Stepper allows a user to enter a number, and increment or decrement the value using dedicated buttons.",
   "publishConfig": {
     "access": "public"
@@ -26,11 +26,11 @@
     "@react-aria/button": "3.11.0",
     "@react-aria/numberfield": "3.11.9",
     "@react-stately/numberfield": "3.9.6",
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icon-button": "^7.3.7",
-    "@spark-ui/input": "^7.3.7",
-    "@spark-ui/use-merge-refs": "^7.3.7"
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icon-button": "^8.0.0",
+    "@spark-ui/input": "^8.0.0",
+    "@spark-ui/use-merge-refs": "^8.0.0"
   },
   "peerDependencies": {
     "@react-types/numberfield": "3.8.5",
diff --git a/packages/components/stepper/src/Stepper.tsx b/packages/components/stepper/src/Stepper.tsx
index c448c4557..b6cfa1b09 100644
--- a/packages/components/stepper/src/Stepper.tsx
+++ b/packages/components/stepper/src/Stepper.tsx
@@ -1,13 +1,6 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
 import { InputGroup } from '@spark-ui/input'
-import {
-  createContext,
-  forwardRef,
-  type PropsWithChildren,
-  RefObject,
-  useContext,
-  useRef,
-} from 'react'
+import { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'
 
 import type { StepperProps, UseStepperReturn } from './types'
 import { useStepper } from './useStepper'
@@ -16,79 +9,75 @@ const StepperContext = createContext<
   (Omit<UseStepperReturn, 'groupProps'> & { inputRef: RefObject<HTMLInputElement | null> }) | null
 >(null)
 
-export const Stepper = forwardRef<HTMLDivElement, PropsWithChildren<StepperProps>>(
-  (
-    {
-      children,
-      formatOptions,
-      minValue,
-      maxValue,
-      incrementAriaLabel,
-      decrementAriaLabel,
-      ...stepperProps
-    },
-    forwardedRef
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
+export const Stepper = ({
+  children,
+  formatOptions,
+  minValue,
+  maxValue,
+  incrementAriaLabel,
+  decrementAriaLabel,
+  ref: forwardedRef,
+  ...stepperProps
+}: PropsWithChildren<StepperProps>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
 
-    const {
-      groupProps,
-      inputProps: _inputProps,
-      incrementButtonProps: _incrementButtonProps,
-      decrementButtonProps: _decrementButtonProps,
-    } = useStepper({
-      ...{
-        ...stepperProps,
-        onChange: stepperProps.onValueChange,
-      },
-      formatOptions,
-      minValue,
-      maxValue,
-      incrementAriaLabel,
-      decrementAriaLabel,
-      inputRef,
-    })
+  const {
+    groupProps,
+    inputProps: _inputProps,
+    incrementButtonProps: _incrementButtonProps,
+    decrementButtonProps: _decrementButtonProps,
+  } = useStepper({
+    ...{
+      ...stepperProps,
+      onChange: stepperProps.onValueChange,
+    },
+    formatOptions,
+    minValue,
+    maxValue,
+    incrementAriaLabel,
+    decrementAriaLabel,
+    inputRef,
+  })
 
-    const formFieldControlProps = useFormFieldControl()
-    const isWrappedInFormField = !!formFieldControlProps.id
+  const formFieldControlProps = useFormFieldControl()
+  const isWrappedInFormField = !!formFieldControlProps.id
 
-    const incrementButtonProps = {
-      ..._incrementButtonProps,
-      ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),
-    }
+  const incrementButtonProps = {
+    ..._incrementButtonProps,
+    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),
+  }
 
-    const decrementButtonProps = {
-      ..._decrementButtonProps,
-      ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),
-    }
+  const decrementButtonProps = {
+    ..._decrementButtonProps,
+    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),
+  }
 
-    const inputProps = {
-      ..._inputProps,
-      ...(isWrappedInFormField && {
-        id: formFieldControlProps.id,
-        required: formFieldControlProps.isRequired,
-        'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,
-      }),
-    }
+  const inputProps = {
+    ..._inputProps,
+    ...(isWrappedInFormField && {
+      id: formFieldControlProps.id,
+      required: formFieldControlProps.isRequired,
+      'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,
+    }),
+  }
 
-    const { onValueChange: _, ...remainingStepperProps } = stepperProps
+  const { onValueChange: _, ...remainingStepperProps } = stepperProps
 
-    return (
-      <StepperContext.Provider
-        value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}
+  return (
+    <StepperContext.Provider
+      value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}
+    >
+      <InputGroup
+        {...remainingStepperProps}
+        {...groupProps}
+        data-spark-component="stepper"
+        ref={forwardedRef}
       >
-        <InputGroup
-          {...remainingStepperProps}
-          {...groupProps}
-          data-spark-component="stepper"
-          ref={forwardedRef}
-        >
-          {children}
-        </InputGroup>
-      </StepperContext.Provider>
-    )
-  }
-)
+        {children}
+      </InputGroup>
+    </StepperContext.Provider>
+  )
+}
 
 Stepper.displayName = 'Stepper'
 
diff --git a/packages/components/stepper/src/StepperButton.tsx b/packages/components/stepper/src/StepperButton.tsx
index 3407dffc6..e49b833a2 100644
--- a/packages/components/stepper/src/StepperButton.tsx
+++ b/packages/components/stepper/src/StepperButton.tsx
@@ -4,68 +4,78 @@ import { IconButton } from '@spark-ui/icon-button'
 import { Minus } from '@spark-ui/icons/dist/icons/Minus'
 import { Plus } from '@spark-ui/icons/dist/icons/Plus'
 import { InputGroup } from '@spark-ui/input'
-import { forwardRef, type PropsWithChildren, useRef } from 'react'
+import { type PropsWithChildren, useRef } from 'react'
 
 import { useStepperContext } from './Stepper'
 import type { StepperButtonProps } from './types'
 
-const IncrementButton = forwardRef<HTMLButtonElement, PropsWithChildren<StepperButtonProps>>(
-  ({ children, design = 'ghost', intent = 'neutral', className, ...rest }, forwardedRef) => {
-    const innerRef = useRef<HTMLButtonElement>(null)
-    const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
+const IncrementButton = ({
+  children,
+  design = 'ghost',
+  intent = 'neutral',
+  className,
+  ref: forwardedRef,
+  ...rest
+}: PropsWithChildren<StepperButtonProps>) => {
+  const innerRef = useRef<HTMLButtonElement>(null)
+  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
 
-    const { incrementButtonProps } = useStepperContext()
-    const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)
+  const { incrementButtonProps } = useStepperContext()
+  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)
 
-    return (
-      <InputGroup.TrailingAddon asChild>
-        <IconButton
-          ref={ref}
-          design={design}
-          intent={intent}
-          className={className}
-          aria-label={buttonProps['aria-label'] as string}
-          {...buttonProps}
-        >
-          {children || (
-            <Icon>
-              <Plus />
-            </Icon>
-          )}
-        </IconButton>
-      </InputGroup.TrailingAddon>
-    )
-  }
-)
+  return (
+    <InputGroup.TrailingAddon asChild>
+      <IconButton
+        ref={ref}
+        design={design}
+        intent={intent}
+        className={className}
+        aria-label={buttonProps['aria-label'] as string}
+        {...buttonProps}
+      >
+        {children || (
+          <Icon>
+            <Plus />
+          </Icon>
+        )}
+      </IconButton>
+    </InputGroup.TrailingAddon>
+  )
+}
 
-const DecrementButton = forwardRef<HTMLButtonElement, PropsWithChildren<StepperButtonProps>>(
-  ({ children, design = 'ghost', intent = 'neutral', className, ...rest }, forwardedRef) => {
-    const innerRef = useRef<HTMLButtonElement>(null)
-    const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
+const DecrementButton = ({
+  children,
+  design = 'ghost',
+  intent = 'neutral',
+  className,
+  ref: forwardedRef,
+  ...rest
+}: PropsWithChildren<StepperButtonProps>) => {
+  const innerRef = useRef<HTMLButtonElement>(null)
+  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef
 
-    const { decrementButtonProps } = useStepperContext()
-    const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)
+  const { decrementButtonProps } = useStepperContext()
+  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)
 
-    return (
-      <InputGroup.LeadingAddon asChild>
-        <IconButton
-          ref={ref}
-          design={design}
-          intent={intent}
-          className={className}
-          aria-label={buttonProps['aria-label'] as string}
-          {...buttonProps}
-        >
-          {children || (
-            <Icon>
-              <Minus />
-            </Icon>
-          )}
-        </IconButton>
-      </InputGroup.LeadingAddon>
-    )
-  }
-)
+  return (
+    <InputGroup.LeadingAddon asChild>
+      <IconButton
+        ref={ref}
+        design={design}
+        intent={intent}
+        className={className}
+        aria-label={buttonProps['aria-label'] as string}
+        {...buttonProps}
+      >
+        {children || (
+          <Icon>
+            <Minus />
+          </Icon>
+        )}
+      </IconButton>
+    </InputGroup.LeadingAddon>
+  )
+}
 
 export const StepperIncrementButton = Object.assign(IncrementButton, {
   id: 'TrailingAddon',
@@ -75,5 +85,5 @@ export const StepperDecrementButton = Object.assign(DecrementButton, {
   id: 'LeadingAddon',
 })
 
-StepperIncrementButton.displayName = 'Stepper.DecrementButton'
-StepperDecrementButton.displayName = 'Stepper.DecrementButton'
+IncrementButton.displayName = 'Stepper.DecrementButton'
+DecrementButton.displayName = 'Stepper.DecrementButton'
diff --git a/packages/components/stepper/src/StepperInput.tsx b/packages/components/stepper/src/StepperInput.tsx
index 920164caa..13d2be4bd 100644
--- a/packages/components/stepper/src/StepperInput.tsx
+++ b/packages/components/stepper/src/StepperInput.tsx
@@ -1,11 +1,10 @@
 import { Input as SparkInput } from '@spark-ui/input'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
-import { forwardRef } from 'react'
 
 import { useStepperContext } from './Stepper'
 import type { StepperInputProps } from './types'
 
-const Input = forwardRef<HTMLInputElement, StepperInputProps>((props, forwardedRef) => {
+const Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {
   const { inputRef, inputProps } = useStepperContext()
   const ref = useMergeRefs(forwardedRef, inputRef)
   const { className = '', ...remainingProps } = props
@@ -18,10 +17,10 @@ const Input = forwardRef<HTMLInputElement, StepperInputProps>((props, forwardedR
       className={`min-w-sz-56 text-center ${className}`}
     />
   )
-})
+}
 
 export const StepperInput = Object.assign(Input, {
   id: 'Input',
 })
 
-StepperInput.displayName = 'Stepper.Input'
+Input.displayName = 'Stepper.Input'
diff --git a/packages/components/stepper/src/types.ts b/packages/components/stepper/src/types.ts
index fa3ff55d4..bcaad0b68 100644
--- a/packages/components/stepper/src/types.ts
+++ b/packages/components/stepper/src/types.ts
@@ -4,7 +4,7 @@ import type { NumberFieldStateOptions } from '@react-stately/numberfield'
 import type { AriaNumberFieldProps } from '@react-types/numberfield'
 import type { IconButtonProps } from '@spark-ui/icon-button'
 import type { InputGroupProps, InputProps } from '@spark-ui/input'
-import type { RefObject } from 'react'
+import type { Ref, RefObject } from 'react'
 
 /**
  * As we're using React Spectrum library to build this component, we also want
@@ -18,6 +18,7 @@ export type StepperButtonProps = Omit<IconButtonProps, 'disabled'> &
     'elementType' | 'href' | 'target' | 'isDisabled' | 'excludeFromTabOrder' | 'aria-label'
   > & {
     disabled?: boolean
+    ref?: Ref<HTMLButtonElement>
   }
 
 type SpectrumNumberFieldPropsFilter =
@@ -78,6 +79,9 @@ export type StepperProps = Omit<
   'onChange'
 > & {
   onValueChange?: (e: number) => void
+  ref?: Ref<HTMLDivElement>
 }
 
-export type StepperInputProps = InputProps
+export type StepperInputProps = InputProps & {
+  ref?: Ref<HTMLInputElement>
+}
diff --git a/packages/components/switch/CHANGELOG.md b/packages/components/switch/CHANGELOG.md
index e6e0aa0b6..fffa130a7 100644
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/switch
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/switch
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 96ab47fea..66dbd9f38 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/switch",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@radix-ui/react-switch": "1.1.0",
-    "@spark-ui/form-field": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/label": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
-    "@spark-ui/use-combined-state": "^7.3.7",
+    "@spark-ui/form-field": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/label": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
+    "@spark-ui/use-combined-state": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/switch/src/Switch.tsx b/packages/components/switch/src/Switch.tsx
index cabefe9c6..0ce60f75e 100644
--- a/packages/components/switch/src/Switch.tsx
+++ b/packages/components/switch/src/Switch.tsx
@@ -1,6 +1,6 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
 import { cx } from 'class-variance-authority'
-import { forwardRef, useId } from 'react'
+import { useId } from 'react'
 
 import { SwitchInput, SwitchInputProps } from './SwitchInput'
 import { SwitchLabel } from './SwitchLabel'
@@ -9,57 +9,64 @@ export type SwitchProps = SwitchInputProps
 
 const ID_PREFIX = ':switch'
 
-export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
-  ({ size = 'md', children, className, id, disabled, reverse = false, ...rest }, ref) => {
-    const field = useFormFieldControl()
+export const Switch = ({
+  size = 'md',
+  children,
+  className,
+  id,
+  disabled,
+  reverse = false,
+  ref,
+  ...rest
+}: SwitchProps) => {
+  const field = useFormFieldControl()
 
-    const labelID = `${ID_PREFIX}-label-${useId()}`
-    const innerID = `${ID_PREFIX}-input-${useId()}`
-    const fieldID = field.id || id || innerID
+  const labelID = `${ID_PREFIX}-label-${useId()}`
+  const innerID = `${ID_PREFIX}-input-${useId()}`
+  const fieldID = field.id || id || innerID
 
-    const switchLabel = children && (
-      <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>
-        {children}
-      </SwitchLabel>
-    )
+  const switchLabel = children && (
+    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>
+      {children}
+    </SwitchLabel>
+  )
 
-    const switchInput = (
-      <SwitchInput
-        ref={ref}
-        size={size}
-        id={fieldID}
-        disabled={disabled}
-        /**
-         * If the switch doesn't have any direct label (children) then we should try to
-         * get an eventual alternative label from FormField.
-         * On last resort, we shouldn't forget to define an aria-label attribute.
-         */
-        aria-labelledby={children ? labelID : field.labelId}
-        {...rest}
-      />
-    )
+  const switchInput = (
+    <SwitchInput
+      ref={ref}
+      size={size}
+      id={fieldID}
+      disabled={disabled}
+      /**
+       * If the switch doesn't have any direct label (children) then we should try to
+       * get an eventual alternative label from FormField.
+       * On last resort, we shouldn't forget to define an aria-label attribute.
+       */
+      aria-labelledby={children ? labelID : field.labelId}
+      {...rest}
+    />
+  )
 
-    const content = reverse ? (
-      <>
-        {switchLabel}
-        {switchInput}
-      </>
-    ) : (
-      <>
-        {switchInput}
-        {switchLabel}
-      </>
-    )
+  const content = reverse ? (
+    <>
+      {switchLabel}
+      {switchInput}
+    </>
+  ) : (
+    <>
+      {switchInput}
+      {switchLabel}
+    </>
+  )
 
-    return (
-      <div
-        data-spark-component="switch"
-        className={cx('flex items-center gap-md text-body-1', className)}
-      >
-        {content}
-      </div>
-    )
-  }
-)
+  return (
+    <div
+      data-spark-component="switch"
+      className={cx('flex items-center gap-md text-body-1', className)}
+    >
+      {content}
+    </div>
+  )
+}
 
 Switch.displayName = 'Switch'
diff --git a/packages/components/switch/src/SwitchInput.tsx b/packages/components/switch/src/SwitchInput.tsx
index af0e3eba6..4a2cf20bb 100644
--- a/packages/components/switch/src/SwitchInput.tsx
+++ b/packages/components/switch/src/SwitchInput.tsx
@@ -4,7 +4,7 @@ import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { Close } from '@spark-ui/icons/dist/icons/Close'
 import { Slot } from '@spark-ui/slot'
 import { useCombinedState } from '@spark-ui/use-combined-state'
-import React, { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react'
+import React, { type ComponentPropsWithRef, type ReactNode } from 'react'
 
 import {
   styles,
@@ -16,7 +16,7 @@ import {
 
 export interface SwitchInputProps
   extends StylesProps,
-    Omit<ComponentPropsWithoutRef<'button'>, 'value'> {
+    Omit<ComponentPropsWithRef<'button'>, 'value'> {
   /**
    * The state of the switch when it is initially rendered. Use when you do not need to control its state.
    */
@@ -62,59 +62,55 @@ export interface SwitchInputProps
   reverse?: boolean
 }
 
-export const SwitchInput = forwardRef<HTMLButtonElement, SwitchInputProps>(
-  (
-    {
-      checked,
-      checkedIcon = <Check />,
-      defaultChecked,
-      intent: intentProp,
-      uncheckedIcon = <Close />,
-      size = 'md',
-      value = 'on',
-      onCheckedChange,
-      className,
-      required,
-      ...rest
-    },
-    ref
-  ) => {
-    const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)
-    const { name, description, state, isRequired, isInvalid } = useFormFieldControl()
-    const intent = state ?? intentProp
+export const SwitchInput = ({
+  checked,
+  checkedIcon = <Check />,
+  defaultChecked,
+  intent: intentProp,
+  uncheckedIcon = <Close />,
+  size = 'md',
+  value = 'on',
+  onCheckedChange,
+  className,
+  required,
+  ref,
+  ...rest
+}: SwitchInputProps) => {
+  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)
+  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()
+  const intent = state ?? intentProp
 
-    const handleCheckedChange = (updatedValue: boolean): void => {
-      setIsChecked(updatedValue)
-      onCheckedChange?.(updatedValue)
-    }
-
-    return (
-      <SwitchPrimitive.Root
-        ref={ref}
-        className={styles({ intent, size, className })}
-        value={value}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onCheckedChange={handleCheckedChange}
-        name={name}
-        required={required || isRequired}
-        aria-invalid={isInvalid}
-        aria-describedby={description}
-        {...rest}
-      >
-        <span className={thumbWrapperStyles({ checked: isChecked })}>
-          <SwitchPrimitive.Thumb className={thumbStyles({ size, checked: isChecked })}>
-            {isChecked && checkedIcon && (
-              <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>
-            )}
-            {!isChecked && uncheckedIcon && (
-              <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>
-            )}
-          </SwitchPrimitive.Thumb>
-        </span>
-      </SwitchPrimitive.Root>
-    )
+  const handleCheckedChange = (updatedValue: boolean): void => {
+    setIsChecked(updatedValue)
+    onCheckedChange?.(updatedValue)
   }
-)
+
+  return (
+    <SwitchPrimitive.Root
+      ref={ref}
+      className={styles({ intent, size, className })}
+      value={value}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={handleCheckedChange}
+      name={name}
+      required={required || isRequired}
+      aria-invalid={isInvalid}
+      aria-describedby={description}
+      {...rest}
+    >
+      <span className={thumbWrapperStyles({ checked: isChecked })}>
+        <SwitchPrimitive.Thumb className={thumbStyles({ size, checked: isChecked })}>
+          {isChecked && checkedIcon && (
+            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>
+          )}
+          {!isChecked && uncheckedIcon && (
+            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>
+          )}
+        </SwitchPrimitive.Thumb>
+      </span>
+    </SwitchPrimitive.Root>
+  )
+}
 
 SwitchInput.displayName = 'SwitchInput'
diff --git a/packages/components/tabs/CHANGELOG.md b/packages/components/tabs/CHANGELOG.md
index f871a2f00..43927569a 100644
--- a/packages/components/tabs/CHANGELOG.md
+++ b/packages/components/tabs/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/tabs
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/tabs
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index c2fff4c82..dceecd5fa 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tabs",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "publishConfig": {
     "access": "public"
@@ -37,9 +37,9 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "1.1.1",
-    "@spark-ui/button": "^7.3.7",
-    "@spark-ui/icon": "^7.3.7",
-    "@spark-ui/icons": "^7.3.7",
+    "@spark-ui/button": "^8.0.0",
+    "@spark-ui/icon": "^8.0.0",
+    "@spark-ui/icons": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "devDependencies": {
diff --git a/packages/components/tabs/src/Tabs.tsx b/packages/components/tabs/src/Tabs.tsx
index 904b90406..2f07dd46d 100644
--- a/packages/components/tabs/src/Tabs.tsx
+++ b/packages/components/tabs/src/Tabs.tsx
@@ -1,5 +1,5 @@
 import * as RadixTabs from '@radix-ui/react-tabs'
-import { forwardRef, type PropsWithChildren } from 'react'
+import { type PropsWithChildren, Ref } from 'react'
 
 import { TabsContext } from './TabsContext'
 import { rootStyles } from './TabsRoot.styles'
@@ -18,6 +18,7 @@ export interface TabsProps
    * @default false
    */
   forceMount?: boolean
+  ref?: Ref<HTMLDivElement>
 }
 
 /**
@@ -25,47 +26,43 @@ export interface TabsProps
  */
 export type TabsRootProps = TabsProps
 
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  (
-    {
-      intent = 'basic',
-      size = 'md',
-      /**
-       * Default Radix Primitive values
-       * see https://www.radix-ui.com/docs/primitives/components/tabs#root
-       */
-      asChild = false,
-      forceMount = false,
-      orientation = 'horizontal',
-      children,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <TabsContext.Provider
-        value={{
-          intent,
-          size,
-          orientation,
-          forceMount,
-        }}
+export const Tabs = ({
+  intent = 'basic',
+  size = 'md',
+  /**
+   * Default Radix Primitive values
+   * see https://www.radix-ui.com/docs/primitives/components/tabs#root
+   */
+  asChild = false,
+  forceMount = false,
+  orientation = 'horizontal',
+  children,
+  className,
+  ref,
+  ...rest
+}: TabsProps) => {
+  return (
+    <TabsContext.Provider
+      value={{
+        intent,
+        size,
+        orientation,
+        forceMount,
+      }}
+    >
+      <RadixTabs.Root
+        ref={ref}
+        asChild={asChild}
+        orientation={orientation}
+        className={rootStyles({ className })}
+        data-spark-component="tabs"
+        activationMode="automatic"
+        {...rest}
       >
-        <RadixTabs.Root
-          ref={ref}
-          asChild={asChild}
-          orientation={orientation}
-          className={rootStyles({ className })}
-          data-spark-component="tabs"
-          activationMode="automatic"
-          {...rest}
-        >
-          {children}
-        </RadixTabs.Root>
-      </TabsContext.Provider>
-    )
-  }
-)
+        {children}
+      </RadixTabs.Root>
+    </TabsContext.Provider>
+  )
+}
 
 Tabs.displayName = 'Tabs'
diff --git a/packages/components/tabs/src/TabsContent.tsx b/packages/components/tabs/src/TabsContent.tsx
index f1e9d50ab..814e135b7 100644
--- a/packages/components/tabs/src/TabsContent.tsx
+++ b/packages/components/tabs/src/TabsContent.tsx
@@ -1,5 +1,5 @@
 import * as RadixTabs from '@radix-ui/react-tabs'
-import { forwardRef, type PropsWithChildren } from 'react'
+import { type PropsWithChildren, Ref } from 'react'
 
 import { contentStyles } from './TabsContent.styles'
 import { useTabsContext } from './TabsContext'
@@ -19,36 +19,33 @@ export interface TabsContentProps
    * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
    */
   forceMount?: true
+  ref?: Ref<HTMLDivElement>
 }
 
-export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
-  (
-    {
-      /**
-       * Default Radix Primitive values
-       * see https://www.radix-ui.com/docs/primitives/components/tabs#content
-       */
-      children,
-      asChild = false,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const { forceMount } = useTabsContext()
+export const TabsContent = ({
+  /**
+   * Default Radix Primitive values
+   * see https://www.radix-ui.com/docs/primitives/components/tabs#content
+   */
+  children,
+  asChild = false,
+  className,
+  ref,
+  ...rest
+}: TabsContentProps) => {
+  const { forceMount } = useTabsContext()
 
-    return (
-      <RadixTabs.Content
-        ref={ref}
-        forceMount={forceMount || rest.forceMount}
-        className={contentStyles({ className, forceMount })}
-        asChild={asChild}
-        {...rest}
-      >
-        {children}
-      </RadixTabs.Content>
-    )
-  }
-)
+  return (
+    <RadixTabs.Content
+      ref={ref}
+      forceMount={forceMount || rest.forceMount}
+      className={contentStyles({ className, forceMount })}
+      asChild={asChild}
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Content>
+  )
+}
 
 TabsContent.displayName = 'Tabs.Content'
diff --git a/packages/components/tabs/src/TabsList.tsx b/packages/components/tabs/src/TabsList.tsx
index 77b3ae58b..c7c416429 100644
--- a/packages/components/tabs/src/TabsList.tsx
+++ b/packages/components/tabs/src/TabsList.tsx
@@ -3,7 +3,7 @@ import { Button } from '@spark-ui/button'
 import { Icon } from '@spark-ui/icon'
 import { ArrowVerticalLeft } from '@spark-ui/icons/dist/icons/ArrowVerticalLeft'
 import { ArrowVerticalRight } from '@spark-ui/icons/dist/icons/ArrowVerticalRight'
-import { forwardRef, type ReactElement, useEffect, useRef, useState } from 'react'
+import { type ReactElement, Ref, useEffect, useRef, useState } from 'react'
 
 import { useTabsContext } from './TabsContext'
 import { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'
@@ -21,161 +21,157 @@ export interface TabsListProps extends Omit<RadixTabs.TabsListProps, 'children'>
    */
   loop?: boolean
   children: ReactElement[] | ReactElement
+  ref?: Ref<HTMLDivElement>
 }
 
 type ArrowState = 'visible' | 'hidden' | 'disabled'
 
-export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
-  (
-    {
-      /**
-       * Default Radix Primitive values
-       * see https://www.radix-ui.com/docs/primitives/components/tabs#list
-       */
-      asChild = false,
-      loop = false,
-      children,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const wrapperRef = useRef<HTMLDivElement>(null)
-    const innerRef = useRef(null)
-    const listRef = ref || innerRef
-    const { orientation } = useTabsContext()
-
-    const { width } = useResizeObserver(wrapperRef)
-
-    const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({
-      prev: 'hidden',
-      next: 'hidden',
-    })
+export const TabsList = ({
+  /**
+   * Default Radix Primitive values
+   * see https://www.radix-ui.com/docs/primitives/components/tabs#list
+   */
+  asChild = false,
+  loop = false,
+  children,
+  className,
+  ref,
+  ...rest
+}: TabsListProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const innerRef = useRef(null)
+  const listRef = ref || innerRef
+  const { orientation } = useTabsContext()
+
+  const { width } = useResizeObserver(wrapperRef)
+
+  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({
+    prev: 'hidden',
+    next: 'hidden',
+  })
+
+  useEffect(() => {
+    /**
+     * Show/hide arrows
+     */
+    if (typeof listRef === 'function' || !listRef.current) {
+      return
+    }
 
-    useEffect(() => {
-      /**
-       * Show/hide arrows
-       */
-      if (typeof listRef === 'function' || !listRef.current) {
-        return
-      }
-
-      if (orientation !== 'horizontal') {
-        setArrows({ prev: 'hidden', next: 'hidden' })
-      } else {
-        setArrows({
-          prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',
-          next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',
-        })
-      }
-    }, [orientation, listRef, width])
-
-    useEffect(() => {
-      /**
-       * Enable/disable arrows
-       */
-      if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {
-        return
-      }
-
-      const toggleArrowsVisibility = (target: HTMLDivElement) => {
-        setArrows({
-          prev: target.scrollLeft > 0 ? 'visible' : 'disabled',
-          next:
-            target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',
-        })
-      }
-
-      const currentList = listRef.current
-
-      toggleArrowsVisibility(currentList)
-
-      currentList.addEventListener('scroll', ({ target }) =>
-        toggleArrowsVisibility(target as HTMLDivElement)
-      )
+    if (orientation !== 'horizontal') {
+      setArrows({ prev: 'hidden', next: 'hidden' })
+    } else {
+      setArrows({
+        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',
+        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',
+      })
+    }
+  }, [orientation, listRef, width])
+
+  useEffect(() => {
+    /**
+     * Enable/disable arrows
+     */
+    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {
+      return
+    }
 
-      return () =>
-        currentList.removeEventListener('scroll', ({ target }) =>
-          toggleArrowsVisibility(target as HTMLDivElement)
-        )
-    }, [listRef, arrows.prev, loop])
+    const toggleArrowsVisibility = (target: HTMLDivElement) => {
+      setArrows({
+        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',
+        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',
+      })
+    }
 
-    const handlePrevClick = () => {
-      if (typeof listRef === 'function' || !listRef.current) {
-        return
-      }
+    const currentList = listRef.current
 
-      const shouldLoopForward = loop && listRef.current.scrollLeft <= 0
+    toggleArrowsVisibility(currentList)
 
-      listRef.current.scrollTo({
-        left: shouldLoopForward
-          ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth
-          : listRef.current.scrollLeft - listRef.current.clientWidth,
-        behavior: 'smooth',
-      })
+    currentList.addEventListener('scroll', ({ target }) =>
+      toggleArrowsVisibility(target as HTMLDivElement)
+    )
+
+    return () =>
+      currentList.removeEventListener('scroll', ({ target }) =>
+        toggleArrowsVisibility(target as HTMLDivElement)
+      )
+  }, [listRef, arrows.prev, loop])
+
+  const handlePrevClick = () => {
+    if (typeof listRef === 'function' || !listRef.current) {
+      return
     }
 
-    const handleNextClick = () => {
-      if (typeof listRef === 'function' || !listRef.current) {
-        return
-      }
+    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0
 
-      const shouldLoopBackward =
-        loop &&
-        listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth
+    listRef.current.scrollTo({
+      left: shouldLoopForward
+        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth
+        : listRef.current.scrollLeft - listRef.current.clientWidth,
+      behavior: 'smooth',
+    })
+  }
 
-      listRef.current.scrollTo({
-        left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,
-        behavior: 'smooth',
-      })
+  const handleNextClick = () => {
+    if (typeof listRef === 'function' || !listRef.current) {
+      return
     }
 
-    return (
-      <div className={wrapperStyles({ className })} ref={wrapperRef}>
-        {arrows.prev !== 'hidden' && (
-          <Button
-            shape="square"
-            intent="surface"
-            size="sm"
-            className={navigationArrowStyles()}
-            onClick={handlePrevClick}
-            disabled={arrows.prev === 'disabled'}
-            aria-label="Scroll left"
-          >
-            <Icon>
-              <ArrowVerticalLeft />
-            </Icon>
-          </Button>
-        )}
-
-        <RadixTabs.List
-          ref={listRef}
-          className={listStyles()}
-          asChild={asChild}
-          loop={loop}
-          {...rest}
-        >
-          {children}
-        </RadixTabs.List>
-
-        {arrows.next !== 'hidden' && (
-          <Button
-            shape="square"
-            intent="surface"
-            size="sm"
-            className={navigationArrowStyles()}
-            onClick={handleNextClick}
-            disabled={arrows.next === 'disabled'}
-            aria-label="Scroll right"
-          >
-            <Icon>
-              <ArrowVerticalRight />
-            </Icon>
-          </Button>
-        )}
-      </div>
-    )
+    const shouldLoopBackward =
+      loop &&
+      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth
+
+    listRef.current.scrollTo({
+      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,
+      behavior: 'smooth',
+    })
   }
-)
+
+  return (
+    <div className={wrapperStyles({ className })} ref={wrapperRef}>
+      {arrows.prev !== 'hidden' && (
+        <Button
+          shape="square"
+          intent="surface"
+          size="sm"
+          className={navigationArrowStyles()}
+          onClick={handlePrevClick}
+          disabled={arrows.prev === 'disabled'}
+          aria-label="Scroll left"
+        >
+          <Icon>
+            <ArrowVerticalLeft />
+          </Icon>
+        </Button>
+      )}
+
+      <RadixTabs.List
+        ref={listRef}
+        className={listStyles()}
+        asChild={asChild}
+        loop={loop}
+        {...rest}
+      >
+        {children}
+      </RadixTabs.List>
+
+      {arrows.next !== 'hidden' && (
+        <Button
+          shape="square"
+          intent="surface"
+          size="sm"
+          className={navigationArrowStyles()}
+          onClick={handleNextClick}
+          disabled={arrows.next === 'disabled'}
+          aria-label="Scroll right"
+        >
+          <Icon>
+            <ArrowVerticalRight />
+          </Icon>
+        </Button>
+      )}
+    </div>
+  )
+}
 
 TabsList.displayName = 'Tabs.List'
diff --git a/packages/components/tabs/src/TabsTrigger.tsx b/packages/components/tabs/src/TabsTrigger.tsx
index 8ae92b6de..ff8b7d231 100644
--- a/packages/components/tabs/src/TabsTrigger.tsx
+++ b/packages/components/tabs/src/TabsTrigger.tsx
@@ -1,5 +1,5 @@
 import * as RadixTabs from '@radix-ui/react-tabs'
-import { type FocusEvent, forwardRef } from 'react'
+import { type FocusEvent, Ref } from 'react'
 
 import { useTabsContext } from './TabsContext'
 import { triggerVariants } from './TabsTrigger.styles'
@@ -19,47 +19,44 @@ export interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {
    * @default false
    */
   disabled?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
-export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  (
-    {
-      /**
-       * Default Radix Primitive values
-       * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
-       */
-      asChild = false,
-      value,
-      disabled = false,
-      children,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const { intent, size } = useTabsContext()
+export const TabsTrigger = ({
+  /**
+   * Default Radix Primitive values
+   * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
+   */
+  asChild = false,
+  value,
+  disabled = false,
+  children,
+  className,
+  ref,
+  ...rest
+}: TabsTriggerProps) => {
+  const { intent, size } = useTabsContext()
 
-    const scrollToFocusedElement = ({ target }: FocusEvent<HTMLButtonElement>) =>
-      target.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest',
-      })
+  const scrollToFocusedElement = ({ target }: FocusEvent<HTMLButtonElement>) =>
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    })
 
-    return (
-      <RadixTabs.Trigger
-        ref={ref}
-        className={triggerVariants({ intent, size, className })}
-        asChild={asChild}
-        disabled={disabled}
-        value={value}
-        onFocus={scrollToFocusedElement}
-        {...rest}
-      >
-        {children}
-      </RadixTabs.Trigger>
-    )
-  }
-)
+  return (
+    <RadixTabs.Trigger
+      ref={ref}
+      className={triggerVariants({ intent, size, className })}
+      asChild={asChild}
+      disabled={disabled}
+      value={value}
+      onFocus={scrollToFocusedElement}
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Trigger>
+  )
+}
 
 TabsTrigger.displayName = 'Tabs.Trigger'
diff --git a/packages/components/tag/CHANGELOG.md b/packages/components/tag/CHANGELOG.md
index d0eebd0c2..a780551cf 100644
--- a/packages/components/tag/CHANGELOG.md
+++ b/packages/components/tag/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/tag
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/tag
diff --git a/packages/components/tag/package.json b/packages/components/tag/package.json
index 137478ad2..100aebd0d 100644
--- a/packages/components/tag/package.json
+++ b/packages/components/tag/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tag",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
   "publishConfig": {
     "access": "public"
@@ -24,8 +24,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/tag/src/Tag.tsx b/packages/components/tag/src/Tag.tsx
index df379cb84..692feff00 100644
--- a/packages/components/tag/src/Tag.tsx
+++ b/packages/components/tag/src/Tag.tsx
@@ -1,5 +1,5 @@
 import { Slot } from '@spark-ui/slot'
-import { forwardRef, type PropsWithChildren } from 'react'
+import { type PropsWithChildren, Ref } from 'react'
 
 import { tagStyles, type TagStylesProps } from './Tag.styles'
 
@@ -18,6 +18,7 @@ interface FilteredDesignIntent<
 > {
   design?: Design
   intent?: Exclude<TagStylesProps['intent'], K>
+  ref?: Ref<HTMLButtonElement>
 }
 
 export type ValidTagDesignIntent =
@@ -27,21 +28,26 @@ export type ValidTagDesignIntent =
 
 export type TagProps = BaseTagProps & ValidTagDesignIntent
 
-export const Tag = forwardRef<HTMLButtonElement, TagProps>(
-  ({ design = 'filled', intent = 'basic', asChild, className, ...others }, ref) => {
-    const Component = asChild ? Slot : 'span'
+export const Tag = ({
+  design = 'filled',
+  intent = 'basic',
+  asChild,
+  className,
+  ref,
+  ...others
+}: TagProps) => {
+  const Component = asChild ? Slot : 'span'
 
-    return (
-      <Component
-        data-spark-component="tag"
-        ref={ref}
-        className={tagStyles({
-          className,
-          design,
-          intent,
-        })}
-        {...others}
-      />
-    )
-  }
-)
+  return (
+    <Component
+      data-spark-component="tag"
+      ref={ref}
+      className={tagStyles({
+        className,
+        design,
+        intent,
+      })}
+      {...others}
+    />
+  )
+}
diff --git a/packages/components/text-link/CHANGELOG.md b/packages/components/text-link/CHANGELOG.md
index c9f55ca49..51172db12 100644
--- a/packages/components/text-link/CHANGELOG.md
+++ b/packages/components/text-link/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/text-link
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/text-link
diff --git a/packages/components/text-link/package.json b/packages/components/text-link/package.json
index 8bc06cf75..9daf3d522 100644
--- a/packages/components/text-link/package.json
+++ b/packages/components/text-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/text-link",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "TextLink is an accessible element for navigation.",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/slot": "^7.3.7",
+    "@spark-ui/slot": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
diff --git a/packages/components/text-link/src/TextLink.tsx b/packages/components/text-link/src/TextLink.tsx
index 399d4f716..7601fb2d9 100644
--- a/packages/components/text-link/src/TextLink.tsx
+++ b/packages/components/text-link/src/TextLink.tsx
@@ -1,6 +1,6 @@
 import { Slot } from '@spark-ui/slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-import React, { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 
 const textLinkStyles = cva(
   ['inline-flex items-center', 'focus-visible:u-ring focus-visible:outline-none'],
@@ -41,7 +41,7 @@ const textLinkStyles = cva(
 
 export type StylesProps = VariantProps<typeof textLinkStyles>
 
-export type TextLinkProps = ComponentPropsWithoutRef<'a'> &
+export type TextLinkProps = ComponentPropsWithRef<'a'> &
   StylesProps & {
     /**
      * Change the component to the HTML tag or custom component of the only child.
@@ -49,29 +49,25 @@ export type TextLinkProps = ComponentPropsWithoutRef<'a'> &
     asChild?: boolean
   }
 
-export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
-  (
-    {
-      asChild = false,
-      bold = false,
-      children,
-      className,
-      intent = 'current',
-      underline = true,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = asChild ? Slot : 'a'
+export const TextLink = ({
+  asChild = false,
+  bold = false,
+  children,
+  className,
+  intent = 'current',
+  underline = true,
+  ref,
+  ...props
+}: TextLinkProps) => {
+  const Component = asChild ? Slot : 'a'
 
-    return (
-      <Component
-        ref={ref}
-        className={textLinkStyles({ className, bold, intent, underline })}
-        {...props}
-      >
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component
+      ref={ref}
+      className={textLinkStyles({ className, bold, intent, underline })}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
diff --git a/packages/components/textarea/CHANGELOG.md b/packages/components/textarea/CHANGELOG.md
index 1926bbe78..d27cc7a48 100644
--- a/packages/components/textarea/CHANGELOG.md
+++ b/packages/components/textarea/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/textarea
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/textarea
diff --git a/packages/components/textarea/package.json b/packages/components/textarea/package.json
index 385ecc918..8dcdc5389 100644
--- a/packages/components/textarea/package.json
+++ b/packages/components/textarea/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/textarea",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "The textarea component allows you to easily create multi-line text inputs",
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "tailwindcss": "^3.0.0"
   },
   "dependencies": {
-    "@spark-ui/input": "^7.3.7"
+    "@spark-ui/input": "^8.0.0"
   },
   "repository": {
     "type": "git",
diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
index 0cb403015..f259936aa 100644
--- a/packages/components/textarea/src/Textarea.tsx
+++ b/packages/components/textarea/src/Textarea.tsx
@@ -1,31 +1,36 @@
 import { Input } from '@spark-ui/input'
 import { cx } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
-export interface TextareaProps extends ComponentPropsWithoutRef<'textarea'> {
+export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
   /**
    * If `false`, the textarea won't be resizable.
    */
   isResizable?: boolean
 }
 
-const Root = forwardRef<HTMLTextAreaElement, PropsWithChildren<TextareaProps>>(
-  ({ className, disabled, rows = 1, isResizable = true, ...others }, ref) => {
-    return (
-      <Input
-        className={cx(className, 'py-[var(--sz-10)]', isResizable ? 'resize-y' : 'resize-none')}
-        data-spark-component="textarea"
-        disabled={disabled}
-        asChild
-      >
-        <textarea ref={ref} rows={rows} {...others} />
-      </Input>
-    )
-  }
-)
+const Root = ({
+  className,
+  disabled,
+  rows = 1,
+  isResizable = true,
+  ref,
+  ...others
+}: PropsWithChildren<TextareaProps>) => {
+  return (
+    <Input
+      className={cx(className, 'py-[var(--sz-10)]', isResizable ? 'resize-y' : 'resize-none')}
+      data-spark-component="textarea"
+      disabled={disabled}
+      asChild
+    >
+      <textarea ref={ref} rows={rows} {...others} />
+    </Input>
+  )
+}
 
 export const Textarea = Object.assign(Root, {
   id: Input.id,
 })
 
-Textarea.displayName = 'Textarea'
+Root.displayName = 'Textarea'
diff --git a/packages/components/visually-hidden/CHANGELOG.md b/packages/components/visually-hidden/CHANGELOG.md
index f27315276..acc6c95d7 100644
--- a/packages/components/visually-hidden/CHANGELOG.md
+++ b/packages/components/visually-hidden/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/visually-hidden
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/visually-hidden
diff --git a/packages/components/visually-hidden/package.json b/packages/components/visually-hidden/package.json
index 9ea977d4e..bbc347a9c 100644
--- a/packages/components/visually-hidden/package.json
+++ b/packages/components/visually-hidden/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/visually-hidden",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Hides content from the screen in an accessible way",
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/visually-hidden/src/VisuallyHidden.tsx b/packages/components/visually-hidden/src/VisuallyHidden.tsx
index 19fe98500..63eba7301 100644
--- a/packages/components/visually-hidden/src/VisuallyHidden.tsx
+++ b/packages/components/visually-hidden/src/VisuallyHidden.tsx
@@ -1,8 +1,10 @@
-import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { HTMLAttributes, PropsWithChildren, Ref } from 'react'
 
-export type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+export type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+  ref?: Ref<HTMLElement>
+}
 
-export const VisuallyHidden = forwardRef<HTMLElement, VisuallyHiddenProps>((props, ref) => {
+export const VisuallyHidden = ({ ref, ...props }: VisuallyHiddenProps) => {
   return (
     <span
       {...props}
@@ -23,6 +25,6 @@ export const VisuallyHidden = forwardRef<HTMLElement, VisuallyHiddenProps>((prop
       }}
     />
   )
-})
+}
 
 VisuallyHidden.displayName = 'VisuallyHidden'
diff --git a/packages/hooks/use-combined-state/CHANGELOG.md b/packages/hooks/use-combined-state/CHANGELOG.md
index 3429b80d9..30d7eff9a 100644
--- a/packages/hooks/use-combined-state/CHANGELOG.md
+++ b/packages/hooks/use-combined-state/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/use-combined-state
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/use-combined-state
diff --git a/packages/hooks/use-combined-state/package.json b/packages/hooks/use-combined-state/package.json
index 5ccde4b43..8eebf8201 100644
--- a/packages/hooks/use-combined-state/package.json
+++ b/packages/hooks/use-combined-state/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/use-combined-state",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "combine controlled-uncontrolled component state by stateful-stateless inner state management",
   "publishConfig": {
     "access": "public"
@@ -18,7 +18,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/use-mounted-state": "^7.3.7",
+    "@spark-ui/use-mounted-state": "^8.0.0",
     "@types/lodash.isequal": "4.5.8",
     "lodash.isequal": "4.5.0"
   },
diff --git a/packages/hooks/use-merge-refs/CHANGELOG.md b/packages/hooks/use-merge-refs/CHANGELOG.md
index 982c28703..bd01fd605 100644
--- a/packages/hooks/use-merge-refs/CHANGELOG.md
+++ b/packages/hooks/use-merge-refs/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/use-merge-refs
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/use-merge-refs
diff --git a/packages/hooks/use-merge-refs/package.json b/packages/hooks/use-merge-refs/package.json
index 40d1a2868..70fa79024 100644
--- a/packages/hooks/use-merge-refs/package.json
+++ b/packages/hooks/use-merge-refs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/use-merge-refs",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "merge and sync the passed references into a single one",
   "publishConfig": {
     "access": "public"
diff --git a/packages/hooks/use-merge-refs/src/useMergeRefs.doc.mdx b/packages/hooks/use-merge-refs/src/useMergeRefs.doc.mdx
index 20ee29403..3f6076f99 100644
--- a/packages/hooks/use-merge-refs/src/useMergeRefs.doc.mdx
+++ b/packages/hooks/use-merge-refs/src/useMergeRefs.doc.mdx
@@ -24,7 +24,7 @@ import { useMergeRefs } from "@spark-ui/use-merge-refs"
 import * as React from 'react'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 
-const Demo = React.forwardRef((props, forwardedRef) => {
+const Demo = ({ ref: forwardedRef, ...props }) => {
   const innerRef = useRef()
   const inputRef = useMergeRefs(innerRef, forwardedRef)
 
@@ -39,5 +39,5 @@ const Demo = React.forwardRef((props, forwardedRef) => {
       <Icon ><Close/></Icon>
     </>
   )
-})
+}
 ```
diff --git a/packages/hooks/use-merge-refs/src/useMergeRefs.test.tsx b/packages/hooks/use-merge-refs/src/useMergeRefs.test.tsx
index 874420387..dc1b98532 100644
--- a/packages/hooks/use-merge-refs/src/useMergeRefs.test.tsx
+++ b/packages/hooks/use-merge-refs/src/useMergeRefs.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import { createRef, forwardRef, RefCallback, useEffect, useRef } from 'react'
+import { createRef, RefCallback, RefObject, useEffect, useRef } from 'react'
 import { describe, expect, it } from 'vitest'
 
 import { useMergeRefs } from './index'
@@ -42,7 +42,12 @@ describe('useMergeRefs', () => {
   it('should merge both legacy and object references', () => {
     // Given
     const refs = {} as refsInterface
-    const TestComponent = forwardRef(function TestComponent(props, forwardedRef) {
+    const TestComponent = function TestComponent({
+      ref: forwardedRef,
+      ...props
+    }: {
+      ref?: RefObject<HTMLElement | null | undefined>
+    }) {
       const firstRef = useRef(null)
       const secondRef = useRef(null)
 
@@ -54,7 +59,7 @@ describe('useMergeRefs', () => {
       }, [])
 
       return <div ref={ref} {...props} />
-    })
+    }
     const refToBeForwarded = createRef<HTMLElement | null | undefined>()
 
     // When
diff --git a/packages/hooks/use-mounted-state/CHANGELOG.md b/packages/hooks/use-mounted-state/CHANGELOG.md
index 72ea5778f..2339cbf72 100644
--- a/packages/hooks/use-mounted-state/CHANGELOG.md
+++ b/packages/hooks/use-mounted-state/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/use-mounted-state
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/use-mounted-state
diff --git a/packages/hooks/use-mounted-state/package.json b/packages/hooks/use-mounted-state/package.json
index 39dbdcf11..c53c94a41 100644
--- a/packages/hooks/use-mounted-state/package.json
+++ b/packages/hooks/use-mounted-state/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/use-mounted-state",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "check the component's mount state",
   "publishConfig": {
     "access": "public"
diff --git a/packages/utils/cli/CHANGELOG.md b/packages/utils/cli/CHANGELOG.md
index 3af9043cc..8d18f46a4 100644
--- a/packages/utils/cli/CHANGELOG.md
+++ b/packages/utils/cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/cli-utils
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/cli-utils
diff --git a/packages/utils/cli/package.json b/packages/utils/cli/package.json
index cc5789438..57835d887 100644
--- a/packages/utils/cli/package.json
+++ b/packages/utils/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
diff --git a/packages/utils/cli/src/generate/templates/component/src/[Component.tsx].js b/packages/utils/cli/src/generate/templates/component/src/[Component.tsx].js
index da65bf88a..eec0137b6 100644
--- a/packages/utils/cli/src/generate/templates/component/src/[Component.tsx].js
+++ b/packages/utils/cli/src/generate/templates/component/src/[Component.tsx].js
@@ -3,12 +3,12 @@ import { pascalCase } from 'pascal-case'
 export default ({ name }) => {
   const componentName = pascalCase(name)
 
-  return `import { forwardRef, ComponentPropsWithoutRef, PropsWithChildren } from 'react'
+  return `import { ComponentPropsWithRef, PropsWithChildren } from 'react'
 
-export type ${componentName}Props = ComponentPropsWithoutRef<'div'>
+export type ${componentName}Props = ComponentPropsWithRef<'div'>
 
-export const ${componentName} = forwardRef<HTMLDivElement, PropsWithChildren<${componentName}Props>>((props, ref) => {
+export const ${componentName} = ({ ref, ...props }: PropsWithChildren<${componentName}Props>) => {
   return <div ref={ref} {...props} />
-})
+}
 `
 }
diff --git a/packages/utils/internal-utils/CHANGELOG.md b/packages/utils/internal-utils/CHANGELOG.md
index 2777a0864..5cb1db4a6 100644
--- a/packages/utils/internal-utils/CHANGELOG.md
+++ b/packages/utils/internal-utils/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/internal-utils
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/internal-utils
diff --git a/packages/utils/internal-utils/package.json b/packages/utils/internal-utils/package.json
index 5d20c908a..f380a4809 100644
--- a/packages/utils/internal-utils/package.json
+++ b/packages/utils/internal-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/internal-utils",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "package for sharing reusable code and resources across the codebase",
   "publishConfig": {
     "access": "public"
diff --git a/packages/utils/tailwind-plugins/CHANGELOG.md b/packages/utils/tailwind-plugins/CHANGELOG.md
index 423687747..20565bbba 100644
--- a/packages/utils/tailwind-plugins/CHANGELOG.md
+++ b/packages/utils/tailwind-plugins/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/tailwind-plugins
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/tailwind-plugins
diff --git a/packages/utils/tailwind-plugins/package.json b/packages/utils/tailwind-plugins/package.json
index feb912b22..930fa96fb 100644
--- a/packages/utils/tailwind-plugins/package.json
+++ b/packages/utils/tailwind-plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
   ],
   "main": "index.js",
   "dependencies": {
-    "@spark-ui/theme-utils": "^7.3.7",
+    "@spark-ui/theme-utils": "^8.0.0",
     "tailwindcss-radix": "2.9.0"
   },
   "peerDependencies": {
diff --git a/packages/utils/theme/CHANGELOG.md b/packages/utils/theme/CHANGELOG.md
index ab62656c1..09bcee9e9 100644
--- a/packages/utils/theme/CHANGELOG.md
+++ b/packages/utils/theme/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/theme-utils
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/theme-utils
diff --git a/packages/utils/theme/package.json b/packages/utils/theme/package.json
index 3553ed03f..10c8b4afb 100644
--- a/packages/utils/theme/package.json
+++ b/packages/utils/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/theme-utils",
-  "version": "7.3.7",
+  "version": "8.0.0",
   "description": "package for managing Spark theme configuration",
   "publishConfig": {
     "access": "public"