diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx
index fc15988a13..ebef213315 100644
--- a/apps/docs/app/examples/table/custom-styles/page.tsx
+++ b/apps/docs/app/examples/table/custom-styles/page.tsx
@@ -467,7 +467,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx
index a1ddf0a2af..02c54d3f4a 100644
--- a/apps/docs/app/examples/table/use-case/page.tsx
+++ b/apps/docs/app/examples/table/use-case/page.tsx
@@ -459,7 +459,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx
index fd3ae95404..38ca2a6a66 100644
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@@ -63,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx
index fc463f2d1c..2481e0f4a1 100644
--- a/apps/docs/components/docs/sidebar.tsx
+++ b/apps/docs/components/docs/sidebar.tsx
@@ -196,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
+        "flex flex-col outline-hidden w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
diff --git a/apps/docs/components/featurebase/fb-roadmap-link.tsx b/apps/docs/components/featurebase/fb-roadmap-link.tsx
index 8484d7af99..556635984f 100644
--- a/apps/docs/components/featurebase/fb-roadmap-link.tsx
+++ b/apps/docs/components/featurebase/fb-roadmap-link.tsx
@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
       <div className={clsx("relative", innerClassName)}>
         Roadmap
         <Icon
-          className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
           icon={arrowRightUpIcon}
           width={10}
         />
diff --git a/apps/docs/components/heroui-chat-banner.tsx b/apps/docs/components/heroui-chat-banner.tsx
index 543e9263c3..2170272f2b 100644
--- a/apps/docs/components/heroui-chat-banner.tsx
+++ b/apps/docs/components/heroui-chat-banner.tsx
@@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
             HeroUI Chat
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/components/marketing/custom-themes/styles.ts b/apps/docs/components/marketing/custom-themes/styles.ts
index 6ae05fbd74..8e57cd5115 100644
--- a/apps/docs/components/marketing/custom-themes/styles.ts
+++ b/apps/docs/components/marketing/custom-themes/styles.ts
@@ -59,7 +59,7 @@ export const shopCartStyles = tv({
       "text-sm",
       "rounded-full",
       // focus ring
-      "group-data-[focus-visible=true]:outline-solid outline-transparent",
+      "group-data-[focus-visible=true]:outline-hidden",
       "group-data-[focus-visible=true]:ring-2",
       "group-data-[focus-visible=true]:ring-focus",
       "group-data-[focus-visible=true]:ring-offset-2",
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
index 26b6f5cdf4..9e34fc156f 100644
--- a/apps/docs/components/marketing/hero/hero.tsx
+++ b/apps/docs/components/marketing/hero/hero.tsx
@@ -67,7 +67,7 @@ export const Hero = () => {
             color="primary"
             endContent={
               <ArrowRightIcon
-                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                 strokeWidth={2}
               />
             }
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index a003fb7b25..39f267a6cc 100644
--- a/apps/docs/components/marketing/install-banner.tsx
+++ b/apps/docs/components/marketing/install-banner.tsx
@@ -66,7 +66,7 @@ export const InstallBanner = () => {
               color="secondary"
               endContent={
                 <ArrowRightIcon
-                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                   strokeWidth={2}
                 />
               }
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index c0f156f2b2..11bff1f3b0 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
                     {/* Mobile popover */}
                     <Components.Popover placement="top">
                       <Components.PopoverTrigger>
-                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
+                        <button className="flex items-center gap-1 sm:hidden outline-hidden">
                           <InfoCircle className="text-default-400" size={16} />
                         </button>
                       </Components.PopoverTrigger>
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index 98d728ce4c..d4a3e4e7f9 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -227,7 +227,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
         <NavbarItem className="flex h-full items-center">
           <button
             className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
               // focus ring
               ...dataFocusVisibleClasses,
             )}
diff --git a/apps/docs/components/ph-banner.tsx b/apps/docs/components/ph-banner.tsx
index 337cb479e2..c1196d57d7 100644
--- a/apps/docs/components/ph-banner.tsx
+++ b/apps/docs/components/ph-banner.tsx
@@ -97,7 +97,7 @@ export const PhBanner = () => {
             Get 30% off
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/components/pro-banner.tsx b/apps/docs/components/pro-banner.tsx
index 6c02716939..bb110062db 100644
--- a/apps/docs/components/pro-banner.tsx
+++ b/apps/docs/components/pro-banner.tsx
@@ -105,7 +105,7 @@ export const ProBanner = () => {
             HeroUI Pro
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
index 41142d5321..d294550848 100644
--- a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
+++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
@@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },
diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
index f348c26196..030ff669ed 100644
--- a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
+++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
@@ -40,7 +40,7 @@ export default function App() {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },
diff --git a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
index 56743b4a62..f986debcca 100644
--- a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
+++ b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
@@ -99,7 +99,7 @@ export default function App() {
             className="cursor-default"
             endContent={
               <select
-                className="z-10 outline-solid outline-transparent w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
+                className="z-10 outline-hidden w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
                 id="theme"
                 name="theme"
               >
diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx
index a64c81a0a7..d41c63e1a7 100644
--- a/apps/docs/content/components/input/password.raw.jsx
+++ b/apps/docs/content/components/input/password.raw.jsx
@@ -71,7 +71,7 @@ export default function App() {
       endContent={
         <button
           aria-label="toggle password visibility"
-          className="focus:outline-solid outline-transparent"
+          className="focus:outline-hidden"
           type="button"
           onClick={toggleVisibility}
         >
diff --git a/apps/docs/content/components/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx
index 6561c2c9a7..0eeb06b97b 100644
--- a/apps/docs/content/components/input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/input/start-end-content.raw.jsx
@@ -110,7 +110,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 id="currency"
                 name="currency"
               >
diff --git a/apps/docs/content/components/number-input/start-end-content.raw.jsx b/apps/docs/content/components/number-input/start-end-content.raw.jsx
index b9abe31a9d..d3334ca08b 100644
--- a/apps/docs/content/components/number-input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/number-input/start-end-content.raw.jsx
@@ -21,7 +21,7 @@ export default function App() {
               </label>
               <select
                 aria-label="Select currency"
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 defaultValue="USD"
                 id="currency"
                 name="currency"
diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx
index ddc4513697..7b796b30e1 100644
--- a/apps/docs/content/components/slider/render-value.raw.jsx
+++ b/apps/docs/content/components/slider/render-value.raw.jsx
@@ -31,7 +31,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e) => {
diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx
index a57b7a7100..27f3291b12 100644
--- a/apps/docs/content/components/slider/render-value.raw.tsx
+++ b/apps/docs/content/components/slider/render-value.raw.tsx
@@ -34,7 +34,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx
index 15bc34e31a..99131d2dfc 100644
--- a/apps/docs/content/components/table/custom-styles.raw.jsx
+++ b/apps/docs/content/components/table/custom-styles.raw.jsx
@@ -554,7 +554,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx
index 8617c729c2..2730fd74fc 100644
--- a/apps/docs/content/components/table/custom-styles.raw.tsx
+++ b/apps/docs/content/components/table/custom-styles.raw.tsx
@@ -566,7 +566,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx
index 58d4c3f681..1e8ea1a324 100644
--- a/apps/docs/content/components/table/use-case.raw.jsx
+++ b/apps/docs/content/components/table/use-case.raw.jsx
@@ -550,7 +550,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/use-case.raw.tsx b/apps/docs/content/components/table/use-case.raw.tsx
index ef62c3d9af..e4acc09e13 100644
--- a/apps/docs/content/components/table/use-case.raw.tsx
+++ b/apps/docs/content/components/table/use-case.raw.tsx
@@ -563,7 +563,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/packages/components/autocomplete/CHANGELOG.md b/packages/components/autocomplete/CHANGELOG.md
index f2b519b063..ded9568188 100644
--- a/packages/components/autocomplete/CHANGELOG.md
+++ b/packages/components/autocomplete/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @heroui/autocomplete
 
+## 2.3.25
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/button@2.2.23
+  - @heroui/form@2.1.23
+  - @heroui/input@2.4.24
+  - @heroui/listbox@2.3.22
+  - @heroui/popover@2.3.23
+  - @heroui/scroll-shadow@2.3.16
+
 ## 2.3.24
 
 ### Patch Changes
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 2b4ec12d8f..d2c810e075 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.24",
+  "version": "2.3.25",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md
index ac61607f89..f51aa49a77 100644
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/checkbox
 
+## 2.3.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.3.22
 
 ### Patch Changes
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 594ee8825a..5af0b86971 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/checkbox",
-  "version": "2.3.22",
+  "version": "2.3.23",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"
diff --git a/packages/components/date-input/CHANGELOG.md b/packages/components/date-input/CHANGELOG.md
index 50425b7ec8..db238d7675 100644
--- a/packages/components/date-input/CHANGELOG.md
+++ b/packages/components/date-input/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/date-input
 
+## 2.3.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.3.22
 
 ### Patch Changes
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
index 89cd7134c8..1daf2dd09c 100644
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/date-input",
-  "version": "2.3.22",
+  "version": "2.3.23",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"
diff --git a/packages/components/date-picker/CHANGELOG.md b/packages/components/date-picker/CHANGELOG.md
index ac96248094..00aed7b22f 100644
--- a/packages/components/date-picker/CHANGELOG.md
+++ b/packages/components/date-picker/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @heroui/date-picker
 
+## 2.3.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/button@2.2.23
+  - @heroui/calendar@2.2.23
+  - @heroui/date-input@2.3.23
+  - @heroui/form@2.1.23
+  - @heroui/popover@2.3.23
+
 ## 2.3.23
 
 ### Patch Changes
diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
index e48a3ac023..95faf34879 100644
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/date-picker",
-  "version": "2.3.23",
+  "version": "2.3.24",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
diff --git a/packages/components/form/CHANGELOG.md b/packages/components/form/CHANGELOG.md
index f3ee27c3be..12bcdb896f 100644
--- a/packages/components/form/CHANGELOG.md
+++ b/packages/components/form/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/form
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies [[`8ddc6e7`](https://github.com/heroui-inc/heroui/commit/8ddc6e795e56b7ecaac94bb0bbf99a7147dc027b)]:
+  - @heroui/theme@2.4.19
+
 ## 2.1.22
 
 ### Patch Changes
diff --git a/packages/components/form/package.json b/packages/components/form/package.json
index 8603bfa093..6e85b79e79 100644
--- a/packages/components/form/package.json
+++ b/packages/components/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/form",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
   "keywords": [
     "form"
diff --git a/packages/components/input-otp/CHANGELOG.md b/packages/components/input-otp/CHANGELOG.md
index e250766d50..f864ce6a5e 100644
--- a/packages/components/input-otp/CHANGELOG.md
+++ b/packages/components/input-otp/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/input-otp
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.1.22
 
 ### Patch Changes
diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json
index 3f8bdfda72..fd5ea35ec1 100644
--- a/packages/components/input-otp/package.json
+++ b/packages/components/input-otp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/input-otp",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "",
   "keywords": [
     "input-otp"
diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md
index 2d30cae3c3..07690c2a95 100644
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/input
 
+## 2.4.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.4.23
 
 ### Patch Changes
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index 37af69ef3f..df47085e51 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/input",
-  "version": "2.4.23",
+  "version": "2.4.24",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 0047e36197..641998d569 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -300,7 +300,7 @@ const StartAndEndContentTemplate = (args) => (
             Currency
           </label>
           <select
-            className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
+            className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
             id="currency"
             name="currency"
           >
diff --git a/packages/components/number-input/CHANGELOG.md b/packages/components/number-input/CHANGELOG.md
index 07c7d8e16a..ca01ce1c35 100644
--- a/packages/components/number-input/CHANGELOG.md
+++ b/packages/components/number-input/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heroui/number-input
 
+## 2.0.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/button@2.2.23
+  - @heroui/form@2.1.23
+
 ## 2.0.13
 
 ### Patch Changes
diff --git a/packages/components/number-input/package.json b/packages/components/number-input/package.json
index 609a7de67b..8892348a98 100644
--- a/packages/components/number-input/package.json
+++ b/packages/components/number-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/number-input",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "The numeric input component is designed for users to enter a number, and increase or decrease the value using stepper buttons",
   "keywords": [
     "input",
diff --git a/packages/components/number-input/stories/number-input.stories.tsx b/packages/components/number-input/stories/number-input.stories.tsx
index 2f7f9d8b6d..fc4d9b7cd4 100644
--- a/packages/components/number-input/stories/number-input.stories.tsx
+++ b/packages/components/number-input/stories/number-input.stories.tsx
@@ -372,7 +372,7 @@ export const StartAndEndContent = {
           Currency
         </label>
         <select
-          className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
+          className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
           id="currency"
           name="currency"
         >
diff --git a/packages/components/radio/CHANGELOG.md b/packages/components/radio/CHANGELOG.md
index 801ce24c60..50270b8de9 100644
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @heroui/radio
 
+## 2.3.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.3.22
 
 ### Patch Changes
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index 02a7de8526..376a59c3c0 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/radio",
-  "version": "2.3.22",
+  "version": "2.3.23",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
index b6bb81582a..8b86b6b5f5 100644
--- a/packages/components/select/CHANGELOG.md
+++ b/packages/components/select/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @heroui/select
 
+## 2.4.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+  - @heroui/listbox@2.3.22
+  - @heroui/popover@2.3.23
+  - @heroui/scroll-shadow@2.3.16
+  - @heroui/spinner@2.2.20
+
 ## 2.4.23
 
 ### Patch Changes
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index c106bad8db..0c1b17a451 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/select",
-  "version": "2.4.23",
+  "version": "2.4.24",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index 2109deecde..62738c3421 100644
--- a/packages/components/slider/stories/slider.stories.tsx
+++ b/packages/components/slider/stories/slider.stories.tsx
@@ -165,7 +165,7 @@ const CustomValueTemplate = (args: SliderProps) => {
             >
               <input
                 aria-label="Temperature"
-                className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+                className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
                 type="text"
                 value={inputValue}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/components/table/CHANGELOG.md b/packages/components/table/CHANGELOG.md
index fad76a8844..abe0b2aab5 100644
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heroui/table
 
+## 2.2.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/checkbox@2.3.23
+  - @heroui/spacer@2.2.17
+
 ## 2.2.22
 
 ### Patch Changes
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index a8615ea100..637f425f90 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/table",
-  "version": "2.2.22",
+  "version": "2.2.23",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"
diff --git a/packages/core/react/CHANGELOG.md b/packages/core/react/CHANGELOG.md
index d4d3101aa8..ffcd8b4396 100644
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@@ -1,5 +1,58 @@
 # @heroui/react
 
+## 2.8.1
+
+### Patch Changes
+
+- Updated dependencies [[`8ddc6e7`](https://github.com/heroui-inc/heroui/commit/8ddc6e795e56b7ecaac94bb0bbf99a7147dc027b)]:
+  - @heroui/theme@2.4.19
+  - @heroui/accordion@2.2.20
+  - @heroui/alert@2.2.23
+  - @heroui/autocomplete@2.3.25
+  - @heroui/avatar@2.2.19
+  - @heroui/badge@2.2.15
+  - @heroui/breadcrumbs@2.2.19
+  - @heroui/button@2.2.23
+  - @heroui/calendar@2.2.23
+  - @heroui/card@2.2.22
+  - @heroui/checkbox@2.3.23
+  - @heroui/chip@2.2.19
+  - @heroui/code@2.2.17
+  - @heroui/date-input@2.3.23
+  - @heroui/date-picker@2.3.24
+  - @heroui/divider@2.2.16
+  - @heroui/drawer@2.2.20
+  - @heroui/dropdown@2.3.23
+  - @heroui/form@2.1.23
+  - @heroui/image@2.2.15
+  - @heroui/input@2.4.24
+  - @heroui/input-otp@2.1.23
+  - @heroui/kbd@2.2.18
+  - @heroui/link@2.2.20
+  - @heroui/listbox@2.3.22
+  - @heroui/menu@2.2.22
+  - @heroui/modal@2.2.20
+  - @heroui/navbar@2.2.21
+  - @heroui/number-input@2.0.14
+  - @heroui/pagination@2.2.21
+  - @heroui/popover@2.3.23
+  - @heroui/progress@2.2.19
+  - @heroui/radio@2.3.23
+  - @heroui/ripple@2.2.18
+  - @heroui/scroll-shadow@2.3.16
+  - @heroui/select@2.4.24
+  - @heroui/skeleton@2.2.15
+  - @heroui/slider@2.4.20
+  - @heroui/snippet@2.2.24
+  - @heroui/spacer@2.2.17
+  - @heroui/spinner@2.2.20
+  - @heroui/switch@2.2.21
+  - @heroui/table@2.2.23
+  - @heroui/tabs@2.2.20
+  - @heroui/toast@2.0.13
+  - @heroui/tooltip@2.2.20
+  - @heroui/user@2.2.19
+
 ## 2.8.0
 
 ### Minor Changes
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index e2567b9a72..f81c62980f 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/react",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
diff --git a/packages/core/system-rsc/test-utils/slots-component.tsx b/packages/core/system-rsc/test-utils/slots-component.tsx
index 57223550c1..2a9dd7dc79 100644
--- a/packages/core/system-rsc/test-utils/slots-component.tsx
+++ b/packages/core/system-rsc/test-utils/slots-component.tsx
@@ -19,7 +19,7 @@ const card = tv({
       "relative",
       "overflow-hidden",
       "h-auto",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md
index 537ef42887..27fc3b243f 100644
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heroui/theme
 
+## 2.4.19
+
+### Patch Changes
+
+- [#5486](https://github.com/heroui-inc/heroui/pull/5486) [`8ddc6e7`](https://github.com/heroui-inc/heroui/commit/8ddc6e795e56b7ecaac94bb0bbf99a7147dc027b) Thanks [@wingkwong](https://github.com/wingkwong)! - use `outline-hidden` which is equivalent to `outline-none` in v3 (#5485)
+
 ## 2.4.18
 
 ### Patch Changes
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index 77c39b0c36..802e245649 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heroui/theme",
-  "version": "2.4.18",
+  "version": "2.4.19",
   "description": "The default theme for HeroUI components",
   "keywords": [
     "theme",
diff --git a/packages/core/theme/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts
index 57643976e8..90fd55921e 100644
--- a/packages/core/theme/src/components/accordion.ts
+++ b/packages/core/theme/src/components/accordion.ts
@@ -59,7 +59,7 @@ const accordionItem = tv({
     base: "",
     heading: "",
     trigger: [
-      "flex py-4 w-full h-full gap-3 outline-solid outline-transparent items-center tap-highlight-transparent",
+      "flex py-4 w-full h-full gap-3 outline-hidden items-center tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/components/breadcrumbs.ts b/packages/core/theme/src/components/breadcrumbs.ts
index a768b88d7a..7ec73d0b4c 100644
--- a/packages/core/theme/src/components/breadcrumbs.ts
+++ b/packages/core/theme/src/components/breadcrumbs.ts
@@ -17,8 +17,7 @@ const breadcrumbItem = tv({
       "flex gap-1 items-center",
       "cursor-pointer",
       "whitespace-nowrap",
-      "line-clamp-1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
index 039ce8e691..4479b4da3d 100644
--- a/packages/core/theme/src/components/button.ts
+++ b/packages/core/theme/src/components/button.ts
@@ -29,7 +29,7 @@ const button = tv({
     "justify-center",
     "box-border",
     "appearance-none",
-    "outline-solid outline-transparent",
+    "outline-hidden",
     "select-none",
     "whitespace-nowrap",
     "min-w-max",
diff --git a/packages/core/theme/src/components/card.ts b/packages/core/theme/src/components/card.ts
index 8341f58750..fc63f79c68 100644
--- a/packages/core/theme/src/components/card.ts
+++ b/packages/core/theme/src/components/card.ts
@@ -25,7 +25,7 @@ const card = tv({
       "relative",
       "overflow-hidden",
       "h-auto",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/src/components/chip.ts b/packages/core/theme/src/components/chip.ts
index 2c74a69406..5a104de4c4 100644
--- a/packages/core/theme/src/components/chip.ts
+++ b/packages/core/theme/src/components/chip.ts
@@ -38,7 +38,7 @@ const chip = tv({
     closeButton: [
       "z-10",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "transition-opacity",
       "opacity-70",
diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
index c0a80e84b6..fe32c0b265 100644
--- a/packages/core/theme/src/components/date-input.ts
+++ b/packages/core/theme/src/components/date-input.ts
@@ -29,7 +29,7 @@ const dateInput = tv({
     ], // this wraps the input and the start/end content
     segment: [
       "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
-      "inline-block outline-solid outline-transparent focus:shadow-xs rounded-md",
+      "inline-block outline-hidden focus:shadow-xs rounded-md",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
       // isInvalid=true
diff --git a/packages/core/theme/src/components/dropdown.ts b/packages/core/theme/src/components/dropdown.ts
index 4d0bba9f13..5612e6ca43 100644
--- a/packages/core/theme/src/components/dropdown.ts
+++ b/packages/core/theme/src/components/dropdown.ts
@@ -58,7 +58,7 @@ const dropdownItem = tv({
       "h-full",
       "box-border",
       "rounded-small",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       "data-[pressed=true]:opacity-70",
diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts
index a7931f1244..789691c15b 100644
--- a/packages/core/theme/src/components/input-otp.ts
+++ b/packages/core/theme/src/components/input-otp.ts
@@ -11,7 +11,7 @@ const inputOtp = tv({
       "absolute",
       "inset-0",
       "border-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "bg-transparent",
       "text-transparent",
     ],
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 654efce64e..c59c8b7b42 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -42,7 +42,7 @@ const input = tv({
       "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-xs px-3 gap-3",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
-      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
+      "w-full font-normal bg-transparent !outline-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
       "data-[type=color]:rounded-none",
@@ -58,7 +58,7 @@ const input = tv({
       "start-auto",
       "pointer-events-none",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "opacity-0",
       "cursor-pointer",
diff --git a/packages/core/theme/src/components/link.ts b/packages/core/theme/src/components/link.ts
index d971ae1283..4cdc1c2729 100644
--- a/packages/core/theme/src/components/link.ts
+++ b/packages/core/theme/src/components/link.ts
@@ -11,7 +11,7 @@ import {dataFocusVisibleClasses} from "../utils";
  */
 const link = tv({
   base: [
-    "relative inline-flex items-center outline-solid outline-transparent tap-highlight-transparent",
+    "relative inline-flex items-center outline-hidden tap-highlight-transparent",
     // focus ring
     ...dataFocusVisibleClasses,
   ],
diff --git a/packages/core/theme/src/components/menu.ts b/packages/core/theme/src/components/menu.ts
index be2ec604e0..3baf9524ec 100644
--- a/packages/core/theme/src/components/menu.ts
+++ b/packages/core/theme/src/components/menu.ts
@@ -12,7 +12,7 @@ import {dataFocusVisibleClasses} from "../utils";
 const menu = tv({
   slots: {
     base: "w-full relative flex flex-col gap-1 p-1 overflow-clip",
-    list: "w-full flex flex-col gap-0.5 outline-solid outline-transparent",
+    list: "w-full flex flex-col gap-0.5 outline-hidden",
     emptyContent: [
       "h-10",
       "px-2",
@@ -63,7 +63,7 @@ const menuItem = tv({
       "box-border",
       "rounded-small",
       "subpixel-antialiased",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       // focus ring
diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
index 0e1f520710..049fe26cc7 100644
--- a/packages/core/theme/src/components/modal.ts
+++ b/packages/core/theme/src/components/modal.ts
@@ -43,7 +43,7 @@ const modal = tv({
       "w-full",
       "box-border",
       "bg-content1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "mx-1",
       "my-1",
       "sm:mx-6",
@@ -56,7 +56,7 @@ const modal = tv({
     closeButton: [
       "absolute",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "top-1",
       "end-1",
diff --git a/packages/core/theme/src/components/navbar.ts b/packages/core/theme/src/components/navbar.ts
index d350bef48e..6f56addc5f 100644
--- a/packages/core/theme/src/components/navbar.ts
+++ b/packages/core/theme/src/components/navbar.ts
@@ -77,7 +77,7 @@ const navbar = tv({
       "justify-center",
       "w-6",
       "h-full",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "rounded-small",
       "tap-highlight-transparent",
       // focus ring
diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts
index 42299b12d5..7cf82ea9a1 100644
--- a/packages/core/theme/src/components/number-input.ts
+++ b/packages/core/theme/src/components/number-input.ts
@@ -42,7 +42,7 @@ const numberInput = tv({
       "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
-      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
+      "w-full font-normal bg-transparent !outline-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
       "autofill:bg-transparent bg-clip-text",
@@ -55,7 +55,7 @@ const numberInput = tv({
       "start-auto",
       "pointer-events-none",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "opacity-0",
       "hover:!opacity-100",
diff --git a/packages/core/theme/src/components/pagination.ts b/packages/core/theme/src/components/pagination.ts
index 58ee289a7e..575c47fb32 100644
--- a/packages/core/theme/src/components/pagination.ts
+++ b/packages/core/theme/src/components/pagination.ts
@@ -344,7 +344,7 @@ const pagination = tv({
         "flex-wrap",
         "truncate",
         "box-border",
-        "outline-solid outline-transparent",
+        "outline-hidden",
         "items-center",
         "justify-center",
         "text-default-foreground",
diff --git a/packages/core/theme/src/components/popover.ts b/packages/core/theme/src/components/popover.ts
index a2c486778d..4242ea2ca0 100644
--- a/packages/core/theme/src/components/popover.ts
+++ b/packages/core/theme/src/components/popover.ts
@@ -81,7 +81,7 @@ const popover = tv({
       "justify-center",
       "box-border",
       "subpixel-antialiased",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "box-border",
     ],
     trigger: ["z-10"],
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 8fba4e53d2..f328ab1dda 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -22,7 +22,7 @@ const select = tv({
     ],
     mainWrapper: "w-full flex flex-col",
     trigger:
-      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-xs outline-solid outline-transparent tap-highlight-transparent",
+      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-xs outline-hidden tap-highlight-transparent",
     innerWrapper:
       "inline-flex h-fit w-[calc(100%_-theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute end-3 w-4 h-4",
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 5e4dd256b0..41c9f2e7b8 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -56,7 +56,7 @@ const table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "after:block",
-    tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-hidden", ...dataFocusVisibleClasses],
     th: [
       "group/th",
       "px-3",
@@ -70,7 +70,7 @@ const table = tv({
       "font-semibold",
       "first:rounded-s-lg",
       "last:rounded-e-lg",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "data-[sortable=true]:cursor-pointer",
       "data-[hover=true]:text-foreground-400",
       ...dataFocusVisibleClasses,
@@ -83,7 +83,7 @@ const table = tv({
       "whitespace-normal",
       "text-small",
       "font-normal",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "[&>*]:z-1",
       "[&>*]:relative",
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts
index 065b0091ff..3f713bc8a2 100644
--- a/packages/core/theme/src/components/tabs.ts
+++ b/packages/core/theme/src/components/tabs.ts
@@ -44,7 +44,7 @@ const tabs = tv({
       "relative",
       "justify-center",
       "items-center",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "transition-opacity",
       "tap-highlight-transparent",
@@ -67,7 +67,7 @@ const tabs = tv({
     panel: [
       "py-3",
       "px-1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "data-[inert=true]:hidden",
       // focus ring
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
index 243c2f8b94..6483245ee1 100644
--- a/packages/core/theme/src/components/toast.ts
+++ b/packages/core/theme/src/components/toast.ts
@@ -38,7 +38,7 @@ const toast = tv({
       "relative",
       "z-50",
       "box-border",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "p-3 sm:mx-1",
       "my-1",
       "w-full sm:w-[356px]",
diff --git a/packages/core/theme/src/components/user.ts b/packages/core/theme/src/components/user.ts
index b9f622a2e5..9e7d648154 100644
--- a/packages/core/theme/src/components/user.ts
+++ b/packages/core/theme/src/components/user.ts
@@ -18,7 +18,7 @@ import {dataFocusVisibleClasses} from "../utils";
 const user = tv({
   slots: {
     base: [
-      "inline-flex items-center justify-center gap-2 rounded-small outline-solid outline-transparent",
+      "inline-flex items-center justify-center gap-2 rounded-small outline-hidden",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 7df76142a5..7d7223380c 100644
--- a/packages/core/theme/src/utils/classes.ts
+++ b/packages/core/theme/src/utils/classes.ts
@@ -18,7 +18,7 @@ export const focusVisibleClasses = [
 ];
 
 export const dataFocusVisibleClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "data-[focus-visible=true]:z-10",
   "data-[focus-visible=true]:outline-2",
   "data-[focus-visible=true]:outline-focus",
@@ -26,7 +26,7 @@ export const dataFocusVisibleClasses = [
 ];
 
 export const groupDataFocusVisibleClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "group-data-[focus-visible=true]:z-10",
   "group-data-[focus-visible=true]:ring-2",
   "group-data-[focus-visible=true]:ring-focus",
@@ -35,7 +35,7 @@ export const groupDataFocusVisibleClasses = [
 ];
 
 export const ringClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "ring-2",
   "ring-focus",
   "ring-offset-2",