diff --git a/.github/workflows/QA.yaml b/.github/workflows/QA.yaml
index fadba9af32..cbb0f48507 100644
--- a/.github/workflows/QA.yaml
+++ b/.github/workflows/QA.yaml
@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - canary
+      - beta/release-next
 
 jobs:
   build:
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6b36bf07d3..fe28926d9f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,10 +5,14 @@
     "source.fixAll.eslint": "explicit"
   },
   "tailwindCSS.experimental.configFile": {
-    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
-    "apps/docs/tailwind.config.js": "apps/docs/**/*"
+    "apps/docs/styles/globals.css": "apps/docs/**/*",
+    "packages/storybook/.storybook/style.css": ["packages/core/theme/**/*", "packages/components/**/*"],
+
   },
   "tailwindCSS.experimental.classRegex": [
     ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
+  "cSpell.words": [
+    "heroui"
+  ],
 }
diff --git a/apps/docs/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx
index b724bb9bae..ccde2a1a7c 100644
--- a/apps/docs/app/blog/layout.tsx
+++ b/apps/docs/app/blog/layout.tsx
@@ -9,7 +9,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         {children}
       </main>
       <div
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
index 90a29d8f1f..6a383b3104 100644
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <div className="grid grid-cols-12">
           <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />
diff --git a/apps/docs/app/examples/navbar/layout.tsx b/apps/docs/app/examples/navbar/layout.tsx
index 0eb386dd1c..cdabd0ab65 100644
--- a/apps/docs/app/examples/navbar/layout.tsx
+++ b/apps/docs/app/examples/navbar/layout.tsx
@@ -1,5 +1,5 @@
 const Content = () => (
-  <div className="px-6 flex gap-4 flex-col pb-16 flex-grow">
+  <div className="px-6 flex gap-4 flex-col pb-16 grow">
     <h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
diff --git a/apps/docs/app/examples/perf/client-page.tsx b/apps/docs/app/examples/perf/client-page.tsx
index 3a7b61bcb0..bb6c4d2526 100644
--- a/apps/docs/app/examples/perf/client-page.tsx
+++ b/apps/docs/app/examples/perf/client-page.tsx
@@ -101,7 +101,7 @@ const MyInput = extendVariants(Input, {
         inputWrapper: [
           "bg-zinc-100",
           "border",
-          "shadow",
+          "shadow-sm",
           "transition-colors",
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
@@ -138,7 +138,7 @@ const MyInput = extendVariants(Input, {
     },
     radius: {
       xs: {
-        inputWrapper: "rounded",
+        inputWrapper: "rounded-sm",
       },
       sm: {
         inputWrapper: "rounded-[4px]",
@@ -454,7 +454,7 @@ export default function HeroUIPerf() {
           classNames: {
             base: [
               "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
-              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
+              "before:top-0 before:left-0 before:bg-linear-to-b before:from-default-50",
             ],
           },
         }}
@@ -468,7 +468,7 @@ export default function HeroUIPerf() {
         {(item) => (
           <SelectItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>
diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx
index 2ecd1ebc22..6a8d5302e5 100644
--- a/apps/docs/app/examples/table/custom-styles/page.tsx
+++ b/apps/docs/app/examples/table/custom-styles/page.tsx
@@ -469,7 +469,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -521,13 +521,13 @@ export default function Page() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
+        "first:group-data-[first=true]:before:rounded-none",
+        "last:group-data-[first=true]:before:rounded-none",
         // middle
         "group-data-[middle=true]:before:rounded-none",
         // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
+        "first:group-data-[last=true]:before:rounded-none",
+        "last:group-data-[last=true]:before:rounded-none",
       ],
     }),
     [],
diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx
index 4fd31c6203..a690067ecb 100644
--- a/apps/docs/app/examples/table/use-case/page.tsx
+++ b/apps/docs/app/examples/table/use-case/page.tsx
@@ -461,7 +461,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none 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/page.tsx b/apps/docs/app/page.tsx
index 680cd852ad..c2429fd556 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -17,7 +17,7 @@ import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
   return (
-    <main className="container mx-auto max-w-7xl px-6 flex-grow">
+    <main className="container mx-auto max-w-7xl px-6 grow">
       <section className="flex flex-col items-center justify-center">
         <Hero />
         <FeaturesGrid features={landingContent.topFeatures} />
diff --git a/apps/docs/app/playground/page.tsx b/apps/docs/app/playground/page.tsx
index f9dd08e61e..d10e4f581b 100644
--- a/apps/docs/app/playground/page.tsx
+++ b/apps/docs/app/playground/page.tsx
@@ -5,7 +5,7 @@ import PlaygroundTabs from "./playground-tabs";
 export default function FigmaPage() {
   return (
     <>
-      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <section className="w-full flex flex-col items-center mt-12 gap-6">
           <div className="text-center">
             <h1 className="mb-2">Playground</h1>
diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx
index b5f0c5271b..1103f5ca61 100644
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@@ -60,7 +60,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-none",
+      "outline-hidden",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
@@ -78,7 +78,7 @@ const cmdk = tv({
       "justify-between",
       "items-center",
       "rounded-lg",
-      "shadow",
+      "shadow-xs",
       "bg-content2/50",
       "active:opacity-70",
       "cursor-pointer",
@@ -394,10 +394,10 @@ export const Cmdk: FC<{}> = () => {
           "mt-[20vh]",
           "border-small",
           "dark:border-default-100",
-          "supports-[backdrop-filter]:bg-background/80",
-          "dark:supports-[backdrop-filter]:bg-background/30",
-          "supports-[backdrop-filter]:backdrop-blur-md",
-          "supports-[backdrop-filter]:backdrop-saturate-150",
+          "supports-backdrop-filter:bg-background/80",
+          "dark:supports-backdrop-filter:bg-background/30",
+          "supports-backdrop-filter:backdrop-blur-md",
+          "supports-backdrop-filter:backdrop-saturate-150",
         ],
         backdrop: ["bg-black/80"],
       }}
diff --git a/apps/docs/components/demo-code-modal.tsx b/apps/docs/components/demo-code-modal.tsx
index 163cad20df..58013a1f61 100644
--- a/apps/docs/components/demo-code-modal.tsx
+++ b/apps/docs/components/demo-code-modal.tsx
@@ -35,8 +35,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
   return (
     <Modal
       classNames={{
-        backdrop: "z-[100002]", // to appear above the navbar
-        wrapper: "z-[100003]", // to appear above the backdrop
+        backdrop: "z-100002", // to appear above the navbar
+        wrapper: "z-100003", // to appear above the backdrop
       }}
       isOpen={isOpen}
       motionProps={{
@@ -69,7 +69,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
             <CodeWindow
               showCopy
               showWindowIcons
-              className="min-h-[320px] !h-[60vh] max-h-full"
+              className="min-h-[320px] h-[60vh]! max-h-full"
               language="jsx"
               title={fileName}
               value={code}
diff --git a/apps/docs/components/demos/custom-button.tsx b/apps/docs/components/demos/custom-button.tsx
index 57cb5f25d9..b3cc38d9af 100644
--- a/apps/docs/components/demos/custom-button.tsx
+++ b/apps/docs/components/demos/custom-button.tsx
@@ -39,7 +39,7 @@ export const CustomButton = () => {
     <Button
       ref={buttonRef}
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
       onPress={handleConfetti}
     >
diff --git a/apps/docs/components/demos/music-player.tsx b/apps/docs/components/demos/music-player.tsx
index fe86ed0957..f21997b89b 100644
--- a/apps/docs/components/demos/music-player.tsx
+++ b/apps/docs/components/demos/music-player.tsx
@@ -49,7 +49,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Like"
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -82,7 +82,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Repeat"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -91,7 +91,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Previous"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -100,7 +100,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Play"
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -109,7 +109,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Next"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -118,7 +118,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Shuffle"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx
index 6208c27a23..8306362ef9 100644
--- a/apps/docs/components/docs/components/codeblock.tsx
+++ b/apps/docs/components/docs/components/codeblock.tsx
@@ -152,7 +152,7 @@ const CodeBlockHighlight = ({
                         "px-2": showLines,
                       },
                       {
-                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-linear-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
                           shouldHighlightLine(i),
                       },
                     )}
diff --git a/apps/docs/components/docs/components/component-links.tsx b/apps/docs/components/docs/components/component-links.tsx
index 83f43c5f6c..f7ba62d4d8 100644
--- a/apps/docs/components/docs/components/component-links.tsx
+++ b/apps/docs/components/docs/components/component-links.tsx
@@ -42,7 +42,7 @@ const ButtonLink = ({
     <Button
       isExternal
       as={Link}
-      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      className="text-small! py-4 bg-default-100 dark:bg-default-50 text-default-700"
       href={href}
       size="sm"
       startContent={startContent}
diff --git a/apps/docs/components/docs/heroui-pro-callout.tsx b/apps/docs/components/docs/heroui-pro-callout.tsx
index 4be203ec67..87506b51f0 100644
--- a/apps/docs/components/docs/heroui-pro-callout.tsx
+++ b/apps/docs/components/docs/heroui-pro-callout.tsx
@@ -18,7 +18,7 @@ export const HeroUIProCallout = () => {
       <div>
         <p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
           Ship&nbsp;
-          <span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
+          <span className="bg-clip-text text-transparent bg-linear-to-b from-[#5EA2EF] to-[#0072F5]">
             faster
           </span>
           <br />
@@ -37,7 +37,7 @@ export const HeroUIProCallout = () => {
         </div>
       </div>
       <NextLink
-        className="absolute inset-0 z-[1]"
+        className="absolute inset-0 z-1"
         href="https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout"
         onClick={handleClick}
       />
diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx
index 5297d465c3..3fdc310e95 100644
--- a/apps/docs/components/docs/sidebar.tsx
+++ b/apps/docs/components/docs/sidebar.tsx
@@ -192,7 +192,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-none 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 d615b556ac..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-none 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/gradient-box.tsx b/apps/docs/components/gradient-box.tsx
index 13ec32d308..9f75483d8d 100644
--- a/apps/docs/components/gradient-box.tsx
+++ b/apps/docs/components/gradient-box.tsx
@@ -5,14 +5,14 @@ const styles = tv({
   base: "flex relative w-full h-auto",
   variants: {
     to: {
-      top: "bg-gradient-to-t",
-      right: "bg-gradient-to-r",
-      left: "bg-gradient-to-l",
-      bottom: "bg-gradient-to-b",
-      "top-right": "bg-gradient-to-tr",
-      "top-left": "bg-gradient-to-tl",
-      "bottom-right": "bg-gradient-to-br",
-      "bottom-left": "bg-gradient-to-bl",
+      top: "bg-linear-to-t",
+      right: "bg-linear-to-r",
+      left: "bg-linear-to-l",
+      bottom: "bg-linear-to-b",
+      "top-right": "bg-linear-to-tr",
+      "top-left": "bg-linear-to-tl",
+      "bottom-right": "bg-linear-to-br",
+      "bottom-left": "bg-linear-to-bl",
     },
     color: {
       orange: "from-[#FFB457] to-[#FF705B]",
diff --git a/apps/docs/components/heroui-logo.tsx b/apps/docs/components/heroui-logo.tsx
index 465694af65..6b4b77506d 100644
--- a/apps/docs/components/heroui-logo.tsx
+++ b/apps/docs/components/heroui-logo.tsx
@@ -20,7 +20,7 @@ export const SmallLogoOutlined: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -50,7 +50,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -73,7 +73,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
 export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
   <svg
     className={cn(
-      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
+      "data-[auto=true]:hidden sm:data-[auto=true]:block block text-foreground",
       className,
     )}
     data-auto={dataAttr(auto)}
diff --git a/apps/docs/components/marketing/a11y-otb.tsx b/apps/docs/components/marketing/a11y-otb.tsx
index a6e1c4547d..eddafb2c12 100644
--- a/apps/docs/components/marketing/a11y-otb.tsx
+++ b/apps/docs/components/marketing/a11y-otb.tsx
@@ -70,7 +70,7 @@ const a11yItems = [
   },
 ];
 
-const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
 export const A11yOtb = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -148,7 +148,7 @@ export const A11yOtb = () => {
               <Button
                 isIconOnly
                 aria-label="Show code"
-                className="absolute top-1 right-1 text-success-50 data-[hover]:bg-foreground/10"
+                className="absolute top-1 right-1 text-success-50 data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
                 onPress={() => setIsModalOpen(true)}
@@ -218,7 +218,7 @@ export const A11yOtb = () => {
                       description="Permanently delete the file"
                       shortcut="⌘⇧D"
                       startContent={
-                        <DeleteDocumentBulkIcon className={clsx(iconClasses, "!text-danger")} />
+                        <DeleteDocumentBulkIcon className={clsx(iconClasses, "text-danger!")} />
                       }
                     >
                       Delete file
diff --git a/apps/docs/components/marketing/custom-themes/custom-themes.tsx b/apps/docs/components/marketing/custom-themes/custom-themes.tsx
index 76fd84c373..d8874310ed 100644
--- a/apps/docs/components/marketing/custom-themes/custom-themes.tsx
+++ b/apps/docs/components/marketing/custom-themes/custom-themes.tsx
@@ -261,7 +261,7 @@ export const CustomThemes = () => {
           />
         </div>
       </div>
-      <div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-[1]">
+      <div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-1">
         <Image
           removeWrapper
           alt="custom themes background"
diff --git a/apps/docs/components/marketing/custom-themes/styles.ts b/apps/docs/components/marketing/custom-themes/styles.ts
index 7e24bb2e09..6c96b11878 100644
--- a/apps/docs/components/marketing/custom-themes/styles.ts
+++ b/apps/docs/components/marketing/custom-themes/styles.ts
@@ -17,10 +17,10 @@ export const shopCartStyles = tv({
       "before:left-0",
       "before:w-full",
       "before:h-full",
-      "before:bg-gradient-to-br",
+      "before:bg-linear-to-br",
       "transition-all",
-      "!ease-soft-spring",
-      "!duration-500",
+      "ease-soft-spring!",
+      "duration-500!",
       "will-change-auto",
       "before:transition-all",
     ],
@@ -38,8 +38,8 @@ export const shopCartStyles = tv({
       "rounded-lg",
       "transition-all",
       "will-change-auto",
-      "!ease-soft-spring",
-      "!duration-300",
+      "ease-soft-spring!",
+      "duration-300!",
     ],
     contentWrapper: "flex flex-col justify-center transition-all h-full min-h-[200px]",
     title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
@@ -57,7 +57,7 @@ export const shopCartStyles = tv({
       "text-sm",
       "rounded-full",
       // focus ring
-      "group-data-[focus-visible=true]:outline-none",
+      "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",
@@ -179,7 +179,7 @@ export const shopCartStyles = tv({
           "group-data-[selected=true]:text-white",
           "group-data-[focus-visible=true]:ring-[#EE457E]",
           "group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "group-data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         price: "text-black",
         previousPrice: "text-black/60 ml-2",
@@ -193,7 +193,7 @@ export const shopCartStyles = tv({
           "rounded-sm",
           "data-[focus-visible=true]:ring-[#EE457E]",
           "data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         addToBagButton: [
           "border-[#FFD34E]",
@@ -204,7 +204,7 @@ export const shopCartStyles = tv({
           "rounded-sm",
           "data-[focus-visible=true]:ring-[#EE457E]",
           "data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         learnMoreButton: "bg-warning/20 text-warning",
       },
diff --git a/apps/docs/components/marketing/dark-mode.tsx b/apps/docs/components/marketing/dark-mode.tsx
index 57e6aa9192..6daf34cb50 100644
--- a/apps/docs/components/marketing/dark-mode.tsx
+++ b/apps/docs/components/marketing/dark-mode.tsx
@@ -46,7 +46,7 @@ export const DarkMode = () => {
                   <Button
                     isIconOnly
                     aria-label="Show code"
-                    className="text-white/70 dark:text-black/70 data-[hover]:bg-foreground/10"
+                    className="text-white/70 dark:text-black/70 data-hover:bg-foreground/10"
                     radius="full"
                     variant="light"
                     onPress={() => setIsModalOpen(true)}
@@ -57,7 +57,7 @@ export const DarkMode = () => {
                 <ThemeSwitch
                   classNames={{
                     base: "mt-1 bg-transparent rounded-xl",
-                    wrapper: "!text-white/70 dark:!text-black/70",
+                    wrapper: "text-white/70! dark:text-black/70!",
                   }}
                 />
               </div>
diff --git a/apps/docs/components/marketing/hero/bg-looper.tsx b/apps/docs/components/marketing/hero/bg-looper.tsx
index 305cd14fce..0d05198251 100644
--- a/apps/docs/components/marketing/hero/bg-looper.tsx
+++ b/apps/docs/components/marketing/hero/bg-looper.tsx
@@ -14,7 +14,7 @@ export const BgLooper = () => {
         "data-[mounted=true]:opacity-100 transition-opacity",
         "bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
         "after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
-        "after:bg-gradient-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
+        "after:bg-linear-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
       )}
       data-mounted={isMounted}
     />
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
index 19f728b3f7..4ba4f930ce 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-none transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                 strokeWidth={2}
               />
             }
diff --git a/apps/docs/components/marketing/heroui-pro-section.tsx b/apps/docs/components/marketing/heroui-pro-section.tsx
index 3d48ee2702..9a17e01de0 100644
--- a/apps/docs/components/marketing/heroui-pro-section.tsx
+++ b/apps/docs/components/marketing/heroui-pro-section.tsx
@@ -61,7 +61,7 @@ export const HeroUIProSection = () => {
         <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
           <Chip
             classNames={{
-              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+              base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
               content: "text-tiny font-semibold",
             }}
             color="primary"
diff --git a/apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx b/apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx
index c6072be38c..b165e64d12 100644
--- a/apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx
+++ b/apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx
@@ -3,7 +3,7 @@ import {Chip} from "@heroui/react";
 export const HeroUIProChip = () => (
   <Chip
     classNames={{
-      base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+      base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
       content: "text-tiny font-semibold",
     }}
     color="primary"
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index cdfa1c2063..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-none transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                   strokeWidth={2}
                 />
               }
@@ -119,7 +119,7 @@ export const InstallBanner = () => {
           "data-[mounted=true]:opacity-100 transition-opacity",
           "bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
           "after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
-          "after:bg-gradient-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
+          "after:bg-linear-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
         )}
         data-mounted={isMounted}
       />
diff --git a/apps/docs/components/marketing/marquee.tsx b/apps/docs/components/marketing/marquee.tsx
index cbc71bc52b..8758caaaa2 100644
--- a/apps/docs/components/marketing/marquee.tsx
+++ b/apps/docs/components/marketing/marquee.tsx
@@ -62,7 +62,7 @@ export const Marquee = ({
     >
       <div
         className={cn(
-          "flex w-max items-stretch gap-[--gap]",
+          "flex w-max items-stretch gap-(--gap)",
           {
             "flex-col": vertical,
             "h-full": vertical,
diff --git a/apps/docs/components/marketing/support-client.tsx b/apps/docs/components/marketing/support-client.tsx
index 6873176e12..aa8f84a224 100644
--- a/apps/docs/components/marketing/support-client.tsx
+++ b/apps/docs/components/marketing/support-client.tsx
@@ -187,7 +187,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
                   <Button
                     isIconOnly
                     aria-label="Become a sponsor"
-                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    className="z-50 w-auto h-auto bg-linear-to-b from-[#FF1CF7] to-[#7928CA]"
                     radius="full"
                     onPress={handleBecomeSponsor}
                   >
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index 707c59d20f..ca2f4f041a 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -252,7 +252,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
         </TableHeader>
         <TableBody>
           {data.map((item, index) => (
-            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
+            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 first:[&>td]:pt-4">
               <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
                 <InlineCodeChip className={item.deprecated ? "line-through" : ""}>
                   {item.attribute}
@@ -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-none">
+                        <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 c74a4f79a1..1fb55ea769 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -133,7 +133,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
       }
       startContent={
         <SearchLinearIcon
-          className="text-base text-default-400 pointer-events-none flex-shrink-0"
+          className="text-base text-default-400 pointer-events-none shrink-0"
           size={16}
           strokeWidth={2}
         />
@@ -190,7 +190,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     <HeroUINavbar
       ref={ref}
       className={clsx({
-        "z-[100001]": isMenuOpen,
+        "z-100001": isMenuOpen,
       })}
       classNames={{
         base: "bg-white/[.90] dark:bg-black/[.65]",
@@ -247,14 +247,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
         <NavbarItem className="flex h-full items-center">
           <ThemeSwitch
             classNames={{
-              wrapper: "!text-default-500 dark:!text-default-500",
+              wrapper: "text-default-500! dark:text-default-500!",
             }}
           />
         </NavbarItem>
         <NavbarItem className="flex h-full items-center">
           <button
             className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
               // focus ring
               ...dataFocusVisibleClasses,
             )}
@@ -364,7 +364,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
           <ThemeSwitch
             className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
             classNames={{
-              wrapper: "!text-default-400 dark:!text-default-500",
+              wrapper: "text-default-400! dark:text-default-500!",
             }}
           />
         </NavbarItem>
diff --git a/apps/docs/components/primitives.ts b/apps/docs/components/primitives.ts
index b624194fab..66c091dc63 100644
--- a/apps/docs/components/primitives.ts
+++ b/apps/docs/components/primitives.ts
@@ -32,7 +32,7 @@ export const title = tv({
   compoundVariants: [
     {
       color: ["violet", "yellow", "blue", "cyan", "green", "pink", "foreground"],
-      class: "bg-clip-text text-transparent bg-gradient-to-b",
+      class: "bg-clip-text text-transparent bg-linear-to-b",
     },
   ],
 });
@@ -41,7 +41,7 @@ export const subtitle = tv({
   base: "w-full md:w-1/2 my-2 text-medium lg:text-large font-normal text-default-500 block max-w-full",
   variants: {
     fullWidth: {
-      true: "!w-full",
+      true: "w-full!",
     },
   },
 });
diff --git a/apps/docs/components/pro-banner.tsx b/apps/docs/components/pro-banner.tsx
index 81182e6033..bb110062db 100644
--- a/apps/docs/components/pro-banner.tsx
+++ b/apps/docs/components/pro-banner.tsx
@@ -51,7 +51,7 @@ export const ProBanner = () => {
         className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
           style={{
             clipPath:
               "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
@@ -63,7 +63,7 @@ export const ProBanner = () => {
         className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r  from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7]  opacity-30 dark:opacity-20"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r  from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7]  opacity-30 dark:opacity-20"
           style={{
             clipPath:
               "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
@@ -105,7 +105,7 @@ export const ProBanner = () => {
             HeroUI Pro
             <Icon
               aria-hidden="true"
-              className="outline-none 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/sandpack/entries.ts b/apps/docs/components/sandpack/entries.ts
index ce03d380d0..b89f84fa58 100644
--- a/apps/docs/components/sandpack/entries.ts
+++ b/apps/docs/components/sandpack/entries.ts
@@ -46,13 +46,11 @@ module.exports = {
 
 export const postcssConfig = `module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 }`;
 
-export const stylesConfig = `@tailwind base;
-@tailwind components;
-@tailwind utilities;`;
+export const stylesConfig = `@import "tailwindcss";
+@config "./tailwind.config.js";`;
 
 export const npmrcConfig = `public-hoist-pattern[]=*@heroui/*`;
diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
index 71ed7d33b3..1126804a0e 100644
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@@ -184,9 +184,9 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "10.4.20",
-      postcss: "8.4.49",
-      tailwindcss: "3.4.17",
+      postcss: "^8.4.21",
+      tailwindcss: "^4.0.0",
+      "@tailwindcss/postcss": "^4.0.0",
     },
   };
 
diff --git a/apps/docs/components/theme-switch.tsx b/apps/docs/components/theme-switch.tsx
index 0c69eb96e2..7fc03e83c8 100644
--- a/apps/docs/components/theme-switch.tsx
+++ b/apps/docs/components/theme-switch.tsx
@@ -74,7 +74,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "rounded-lg",
               "flex items-center justify-center",
               "group-data-[selected=true]:bg-transparent",
-              "!text-default-600 dark:!text-default-300",
+              "text-default-600! dark:text-default-300!",
               "pt-0",
               "px-0",
               "mx-0",
diff --git a/apps/docs/content/blog/v2.2.0.mdx b/apps/docs/content/blog/v2.2.0.mdx
index 80e00de952..01888622d2 100644
--- a/apps/docs/content/blog/v2.2.0.mdx
+++ b/apps/docs/content/blog/v2.2.0.mdx
@@ -343,7 +343,7 @@ Popover changes:
       backdrop="opaque"
       placement="right"
       classNames={{
--        base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
+-        base: "py-3 px-4 border border-default-200 bg-linear-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
 -        arrow: "bg-default-200",
 +        base: [
 +          // the "before" pseudo element is now the popover' arrow
@@ -351,7 +351,7 @@ Popover changes:
 +        ],
 +        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
 +          "py-3 px-4 border border-default-200",
-+          "bg-gradient-to-br from-white to-default-300",
++          "bg-linear-to-br from-white to-default-300",
 +          "dark:from-default-100 dark:to-default-50",
         ],
       }}
@@ -368,7 +368,7 @@ Tooltip changes:
       placement="right"
       content="I am a tooltip"
       classNames={{
--        base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
+-        base: "py-2 px-4 shadow-xl text-black bg-linear-to-br from-white to-neutral-400",
 -        arrow: "bg-neutral-400 dark:bg-white",
 +        base: [
 +          // the "before" pseudo element is now the popover' arrow
@@ -376,7 +376,7 @@ Tooltip changes:
 +        ],
 +        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
 +          "py-2 px-4 shadow-xl",
-+          "text-black bg-gradient-to-br from-white to-neutral-400",
++          "text-black bg-linear-to-br from-white to-neutral-400",
 +        ],
       }}
     >
@@ -413,9 +413,9 @@ Dropdown Changes
     <Dropdown
       showArrow
       classNames={{
--        base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
+-        base: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
 -        arrow: "bg-default-200",
-+        content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content"
++        content: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content"
 +        base: "before:bg-default-200",  // the before pseudo element controls the popover's arrow
       }}
     >
diff --git a/apps/docs/content/components/alert/custom-impl.raw.jsx b/apps/docs/content/components/alert/custom-impl.raw.jsx
index 76a6cc2c13..dac6e4ee5f 100644
--- a/apps/docs/content/components/alert/custom-impl.raw.jsx
+++ b/apps/docs/content/components/alert/custom-impl.raw.jsx
@@ -41,13 +41,13 @@ const styles = {
   base: [
     "bg-slate-100",
     "border",
-    "shadow",
+    "shadow-sm",
     "hover:bg-slate-200",
-    "focus-within:!bg-slate-100",
+    "focus-within:bg-slate-100!",
     "dark:bg-slate-900",
     "dark:hover:bg-slate-800",
     "dark:border-slate-800",
-    "dark:focus-within:!bg-slate-900",
+    "dark:focus-within:bg-slate-900!",
     "cursor-pointer",
   ],
   title: ["text-base", "text-slate-500", "font-bold"],
diff --git a/apps/docs/content/components/autocomplete/custom-items.raw.jsx b/apps/docs/content/components/autocomplete/custom-items.raw.jsx
index 89bfa62a85..b8ef92fe44 100644
--- a/apps/docs/content/components/autocomplete/custom-items.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-items.raw.jsx
@@ -216,7 +216,7 @@ export default function App() {
       {(user) => (
         <AutocompleteItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx
index 7d9aaec94a..4337daf72a 100644
--- a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx
@@ -281,7 +281,7 @@ export default function App() {
         <AutocompleteItem key={item.id} textValue={item.name}>
           <div className="flex justify-between items-center">
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.team}</span>
diff --git a/apps/docs/content/components/avatar/custom.raw.jsx b/apps/docs/content/components/avatar/custom.raw.jsx
index 7ae47c883a..409c0610dc 100644
--- a/apps/docs/content/components/avatar/custom.raw.jsx
+++ b/apps/docs/content/components/avatar/custom.raw.jsx
@@ -5,7 +5,7 @@ export default function App() {
     <div className="flex items-center">
       <Avatar
         classNames={{
-          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
+          base: "bg-linear-to-br from-[#FFB457] to-[#FF705B]",
           icon: "text-black/80",
         }}
         icon={<AvatarIcon />}
diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
index 208816239e..71b3056458 100644
--- a/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
+++ b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
@@ -36,7 +36,7 @@ export default function App() {
   return (
     <Breadcrumbs
       classNames={{
-        list: "bg-gradient-to-br from-violet-500 to-fuchsia-500 shadow-small",
+        list: "bg-linear-to-br from-violet-500 to-fuchsia-500 shadow-small",
       }}
       itemClasses={{
         item: "text-white/60 data-[current=true]:text-white",
diff --git a/apps/docs/content/components/button/custom-styles.raw.jsx b/apps/docs/content/components/button/custom-styles.raw.jsx
index ec8796c558..784dd64990 100644
--- a/apps/docs/content/components/button/custom-styles.raw.jsx
+++ b/apps/docs/content/components/button/custom-styles.raw.jsx
@@ -3,7 +3,7 @@ import {Button} from "@heroui/react";
 export default function App() {
   return (
     <Button
-      className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+      className="bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
       radius="full"
     >
       Button
diff --git a/apps/docs/content/components/card/blurred.raw.jsx b/apps/docs/content/components/card/blurred.raw.jsx
index bf6de6bc51..058f06c140 100644
--- a/apps/docs/content/components/card/blurred.raw.jsx
+++ b/apps/docs/content/components/card/blurred.raw.jsx
@@ -185,7 +185,7 @@ export default function App() {
               </div>
               <Button
                 isIconOnly
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -217,7 +217,7 @@ export default function App() {
             <div className="flex w-full items-center justify-center">
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -225,7 +225,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -233,7 +233,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -241,7 +241,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -249,7 +249,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
diff --git a/apps/docs/content/components/card/cover-image.raw.jsx b/apps/docs/content/components/card/cover-image.raw.jsx
index 2fe2360557..82a25a7aed 100644
--- a/apps/docs/content/components/card/cover-image.raw.jsx
+++ b/apps/docs/content/components/card/cover-image.raw.jsx
@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
           <h4 className="text-white font-medium text-large">Stream the Acme event</h4>
         </CardHeader>
@@ -16,7 +16,7 @@ export default function App() {
         />
       </Card>
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
           <h4 className="text-white font-medium text-large">Contribute to the planet</h4>
         </CardHeader>
@@ -28,7 +28,7 @@ export default function App() {
         />
       </Card>
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
           <h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
         </CardHeader>
@@ -72,7 +72,7 @@ export default function App() {
           src="https://heroui.com/images/card-example-5.jpeg"
         />
         <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
-          <div className="flex flex-grow gap-2 items-center">
+          <div className="flex grow gap-2 items-center">
             <Image
               alt="Breathing app icon"
               className="rounded-full w-10 h-11 bg-black"
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 ed6a28b8f2..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-none 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 649a98c1ee..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-none 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/chip/custom-styles.raw.jsx b/apps/docs/content/components/chip/custom-styles.raw.jsx
index 6fcc1c6b51..7a2b0c8aaa 100644
--- a/apps/docs/content/components/chip/custom-styles.raw.jsx
+++ b/apps/docs/content/components/chip/custom-styles.raw.jsx
@@ -4,8 +4,8 @@ export default function App() {
   return (
     <Chip
       classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
-        content: "drop-shadow shadow-black text-white",
+        base: "bg-linear-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        content: "drop-shadow-xs shadow-black text-white",
       }}
       variant="shadow"
     >
diff --git a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
index 1505d36ff6..3a4ada9abd 100644
--- a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
+++ b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
@@ -2,7 +2,7 @@ import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@heroui/react"
 
 export default function App() {
   return (
-    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
+    <Card className="w-[240px] h-[240px] border-none bg-linear-to-br from-violet-500 to-fuchsia-500">
       <CardBody className="justify-center items-center pb-0">
         <CircularProgress
           classNames={{
diff --git a/apps/docs/content/components/date-input/start-end-content.raw.jsx b/apps/docs/content/components/date-input/start-end-content.raw.jsx
index 1e53d76239..4e4f7bfb1d 100644
--- a/apps/docs/content/components/date-input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/date-input/start-end-content.raw.jsx
@@ -37,13 +37,13 @@ export default function App() {
           labelPlacement="outside"
           placeholderValue={new CalendarDate(1995, 11, 6)}
           startContent={
-            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
         />
         <DateInput
           defaultValue={parseDate("2024-04-04")}
           endContent={
-            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           label="Date Input"
           labelPlacement="outside"
diff --git a/apps/docs/content/components/drawer/backdrop.raw.jsx b/apps/docs/content/components/drawer/backdrop.raw.jsx
index aad654693b..59ecbf688b 100644
--- a/apps/docs/content/components/drawer/backdrop.raw.jsx
+++ b/apps/docs/content/components/drawer/backdrop.raw.jsx
@@ -89,7 +89,7 @@ export default function App() {
               <DrawerBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -97,7 +97,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"
diff --git a/apps/docs/content/components/drawer/custom-styles.raw.jsx b/apps/docs/content/components/drawer/custom-styles.raw.jsx
index 6492c649e9..62234218b9 100644
--- a/apps/docs/content/components/drawer/custom-styles.raw.jsx
+++ b/apps/docs/content/components/drawer/custom-styles.raw.jsx
@@ -38,7 +38,7 @@ export default function App() {
         hideCloseButton
         backdrop="blur"
         classNames={{
-          base: "data-[placement=right]:sm:m-2 data-[placement=left]:sm:m-2  rounded-medium",
+          base: "sm:data-[placement=right]:m-2 sm:data-[placement=left]:m-2  rounded-medium",
         }}
         isOpen={isOpen}
         onOpenChange={onOpenChange}
@@ -293,28 +293,28 @@ export default function App() {
                         >
                           <Tooltip content="Alex">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Alex"
                               src="https://i.pravatar.cc/150?u=a04258114e29026708c"
                             />
                           </Tooltip>
                           <Tooltip content="Joe">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Joe"
                               src="https://i.pravatar.cc/150?u=a04258114e290267084"
                             />
                           </Tooltip>
                           <Tooltip content="John">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="John"
                               src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
                             />
                           </Tooltip>
                           <Tooltip content="Jane">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Jane"
                               src="https://i.pravatar.cc/150?u=a04258114e29026702d"
                             />
diff --git a/apps/docs/content/components/drawer/form.raw.jsx b/apps/docs/content/components/drawer/form.raw.jsx
index b87a8fd4aa..e245a56e0d 100644
--- a/apps/docs/content/components/drawer/form.raw.jsx
+++ b/apps/docs/content/components/drawer/form.raw.jsx
@@ -71,7 +71,7 @@ export default function App() {
               <DrawerBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -79,7 +79,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"
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 9b08bf460c..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-none 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/dropdown/custom-popover-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
index 06144a0a3f..c049fd191c 100644
--- a/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
+++ b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown
@@ -127,7 +127,7 @@ export default function App() {
       classNames={{
         base: "before:bg-default-200", // change arrow background
         content:
-          "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
+          "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
       }}
     >
       <DropdownTrigger>
diff --git a/apps/docs/content/components/dropdown/description.raw.jsx b/apps/docs/content/components/dropdown/description.raw.jsx
index 9a13b338a7..eda93c79f6 100644
--- a/apps/docs/content/components/dropdown/description.raw.jsx
+++ b/apps/docs/content/components/dropdown/description.raw.jsx
@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>
diff --git a/apps/docs/content/components/dropdown/icons.raw.jsx b/apps/docs/content/components/dropdown/icons.raw.jsx
index b263e7f3a5..744e83bef8 100644
--- a/apps/docs/content/components/dropdown/icons.raw.jsx
+++ b/apps/docs/content/components/dropdown/icons.raw.jsx
@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>
diff --git a/apps/docs/content/components/dropdown/sections.raw.jsx b/apps/docs/content/components/dropdown/sections.raw.jsx
index fcddfbbd16..750d9e786b 100644
--- a/apps/docs/content/components/dropdown/sections.raw.jsx
+++ b/apps/docs/content/components/dropdown/sections.raw.jsx
@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>
diff --git a/apps/docs/content/components/input/custom-impl.raw.jsx b/apps/docs/content/components/input/custom-impl.raw.jsx
index 5d02c3d5b7..103b361519 100644
--- a/apps/docs/content/components/input/custom-impl.raw.jsx
+++ b/apps/docs/content/components/input/custom-impl.raw.jsx
@@ -65,10 +65,10 @@ const styles = {
     "backdrop-blur-xl",
     "backdrop-saturate-200",
     "hover:bg-default-200/70",
-    "focus-within:!bg-default-200/50",
+    "focus-within:bg-default-200/50!",
     "dark:hover:bg-default/70",
-    "dark:focus-within:!bg-default/60",
-    "!cursor-text",
+    "dark:focus-within:bg-default/60!",
+    "cursor-text!",
   ],
 };
 
@@ -100,7 +100,7 @@ const MyInput = forwardRef((props, ref) => {
     type: "search",
     placeholder: "Type to search...",
     startContent: (
-      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
     ),
     // custom styles
     classNames: {
@@ -133,7 +133,7 @@ const MyInput = forwardRef((props, ref) => {
   }, [startContent, end, getInputProps, getInnerWrapperProps]);
 
   return (
-    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
       <Component {...getBaseProps()}>
         {shouldLabelBeOutside ? labelContent : null}
         <div
diff --git a/apps/docs/content/components/input/custom-styles.raw.jsx b/apps/docs/content/components/input/custom-styles.raw.jsx
index 4d98f908e7..1c37d1d9fc 100644
--- a/apps/docs/content/components/input/custom-styles.raw.jsx
+++ b/apps/docs/content/components/input/custom-styles.raw.jsx
@@ -32,7 +32,7 @@ export const SearchIcon = (props) => {
 
 export default function App() {
   return (
-    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
       <Input
         isClearable
         classNames={{
@@ -44,7 +44,7 @@ export default function App() {
           ],
           innerWrapper: "bg-transparent",
           inputWrapper: [
-            "shadow-xl",
+            "shadow-sm",
             "bg-default-200/50",
             "dark:bg-default/60",
             "backdrop-blur-xl",
@@ -53,14 +53,14 @@ export default function App() {
             "dark:hover:bg-default/70",
             "group-data-[focus=true]:bg-default-200/50",
             "dark:group-data-[focus=true]:bg-default/60",
-            "!cursor-text",
+            "cursor-text!",
           ],
         }}
         label="Search"
         placeholder="Type to search..."
         radius="lg"
         startContent={
-          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
         }
       />
     </div>
diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx
index b758fbee6a..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-none"
+          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 1f1fcb7ebe..0eeb06b97b 100644
--- a/apps/docs/content/components/input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/input/start-end-content.raw.jsx
@@ -29,7 +29,7 @@ export default function App() {
           labelPlacement="outside"
           placeholder="you@example.com"
           startContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           type="email"
         />
@@ -59,7 +59,7 @@ export default function App() {
       <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
         <Input
           endContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           label="Email"
           labelPlacement="outside"
@@ -100,7 +100,7 @@ export default function App() {
           labelPlacement="outside"
           placeholder="heroui"
           startContent={
-            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
           }
         />
         <Input
@@ -110,7 +110,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-none 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/listbox/description.raw.jsx b/apps/docs/content/components/listbox/description.raw.jsx
index 9fc6d204e4..7d5d6dbd6e 100644
--- a/apps/docs/content/components/listbox/description.raw.jsx
+++ b/apps/docs/content/components/listbox/description.raw.jsx
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>
diff --git a/apps/docs/content/components/listbox/icons.raw.jsx b/apps/docs/content/components/listbox/icons.raw.jsx
index 1345b70657..e6e4b2958c 100644
--- a/apps/docs/content/components/listbox/icons.raw.jsx
+++ b/apps/docs/content/components/listbox/icons.raw.jsx
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>
diff --git a/apps/docs/content/components/listbox/sections.raw.jsx b/apps/docs/content/components/listbox/sections.raw.jsx
index 654e18bc85..0173d218ce 100644
--- a/apps/docs/content/components/listbox/sections.raw.jsx
+++ b/apps/docs/content/components/listbox/sections.raw.jsx
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>
diff --git a/apps/docs/content/components/listbox/top-content.raw.jsx b/apps/docs/content/components/listbox/top-content.raw.jsx
index 09e2f43e6a..5d58af8f97 100644
--- a/apps/docs/content/components/listbox/top-content.raw.jsx
+++ b/apps/docs/content/components/listbox/top-content.raw.jsx
@@ -250,7 +250,7 @@ export default function App() {
         {(item) => (
           <ListboxItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>
diff --git a/apps/docs/content/components/listbox/top-content.raw.tsx b/apps/docs/content/components/listbox/top-content.raw.tsx
index 0a0a6b5673..a13a60af60 100644
--- a/apps/docs/content/components/listbox/top-content.raw.tsx
+++ b/apps/docs/content/components/listbox/top-content.raw.tsx
@@ -253,7 +253,7 @@ export default function App() {
         {(item) => (
           <ListboxItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>
diff --git a/apps/docs/content/components/modal/custom-backdrop.raw.jsx b/apps/docs/content/components/modal/custom-backdrop.raw.jsx
index 92d02f0755..61a955a370 100644
--- a/apps/docs/content/components/modal/custom-backdrop.raw.jsx
+++ b/apps/docs/content/components/modal/custom-backdrop.raw.jsx
@@ -17,7 +17,7 @@ export default function App() {
       <Modal
         backdrop="opaque"
         classNames={{
-          backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
+          backdrop: "bg-linear-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
         }}
         isOpen={isOpen}
         onOpenChange={onOpenChange}
diff --git a/apps/docs/content/components/modal/form.raw.jsx b/apps/docs/content/components/modal/form.raw.jsx
index 7582ab6848..6c72ec8e82 100644
--- a/apps/docs/content/components/modal/form.raw.jsx
+++ b/apps/docs/content/components/modal/form.raw.jsx
@@ -71,7 +71,7 @@ export default function App() {
               <ModalBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -79,7 +79,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"
diff --git a/apps/docs/content/components/pagination/custom-items.raw.jsx b/apps/docs/content/components/pagination/custom-items.raw.jsx
index 84c7320b92..48f443c7aa 100644
--- a/apps/docs/content/components/pagination/custom-items.raw.jsx
+++ b/apps/docs/content/components/pagination/custom-items.raw.jsx
@@ -64,7 +64,7 @@ export default function App() {
         ref={ref}
         className={cn(
           className,
-          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+          isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
         )}
         onClick={() => setPage(value)}
       >
diff --git a/apps/docs/content/components/pagination/custom-items.raw.tsx b/apps/docs/content/components/pagination/custom-items.raw.tsx
index 0a77d64c74..6df9244de5 100644
--- a/apps/docs/content/components/pagination/custom-items.raw.tsx
+++ b/apps/docs/content/components/pagination/custom-items.raw.tsx
@@ -76,7 +76,7 @@ export default function App() {
         ref={ref}
         className={cn(
           className,
-          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+          isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
         )}
         onClick={() => setPage(value)}
       >
diff --git a/apps/docs/content/components/pagination/custom-styles.raw.jsx b/apps/docs/content/components/pagination/custom-styles.raw.jsx
index 4cce2ec95d..d2d25375da 100644
--- a/apps/docs/content/components/pagination/custom-styles.raw.jsx
+++ b/apps/docs/content/components/pagination/custom-styles.raw.jsx
@@ -4,10 +4,10 @@ export default function App() {
   return (
     <Pagination
       classNames={{
-        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
+        wrapper: "gap-0 overflow-visible h-8 rounded-sm border border-divider",
         item: "w-8 h-8 text-small rounded-none bg-transparent",
         cursor:
-          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
+          "bg-linear-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
       }}
       total={10}
     />
diff --git a/apps/docs/content/components/popover/custom-styles.raw.jsx b/apps/docs/content/components/popover/custom-styles.raw.jsx
index b3ecb818be..26f747a2e3 100644
--- a/apps/docs/content/components/popover/custom-styles.raw.jsx
+++ b/apps/docs/content/components/popover/custom-styles.raw.jsx
@@ -12,7 +12,7 @@ export default function App() {
         ],
         content: [
           "py-3 px-4 border border-default-200",
-          "bg-gradient-to-br from-white to-default-300",
+          "bg-linear-to-br from-white to-default-300",
           "dark:from-default-100 dark:to-default-50",
         ],
       }}
diff --git a/apps/docs/content/components/progress/custom-styles.raw.jsx b/apps/docs/content/components/progress/custom-styles.raw.jsx
index 0e7e25b79e..c50ab06dfa 100644
--- a/apps/docs/content/components/progress/custom-styles.raw.jsx
+++ b/apps/docs/content/components/progress/custom-styles.raw.jsx
@@ -6,7 +6,7 @@ export default function App() {
       classNames={{
         base: "max-w-md",
         track: "drop-shadow-md border border-default",
-        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
+        indicator: "bg-linear-to-r from-pink-500 to-yellow-500",
         label: "tracking-wider font-medium text-default-600",
         value: "text-foreground/60",
       }}
diff --git a/apps/docs/content/components/select/custom-items.raw.jsx b/apps/docs/content/components/select/custom-items.raw.jsx
index 9ba90f0b58..03155e0f4d 100644
--- a/apps/docs/content/components/select/custom-items.raw.jsx
+++ b/apps/docs/content/components/select/custom-items.raw.jsx
@@ -215,7 +215,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/select/custom-render-value.raw.jsx b/apps/docs/content/components/select/custom-render-value.raw.jsx
index 2a8eb20d1f..a9beaf62eb 100644
--- a/apps/docs/content/components/select/custom-render-value.raw.jsx
+++ b/apps/docs/content/components/select/custom-render-value.raw.jsx
@@ -217,12 +217,7 @@ export default function App() {
       renderValue={(items) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
+            <Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
             <div className="flex flex-col">
               <span>{item.data.name}</span>
               <span className="text-default-500 text-tiny">({item.data.email})</span>
@@ -234,7 +229,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx
index 2975588b96..a7cceb31d5 100644
--- a/apps/docs/content/components/select/custom-render-value.raw.tsx
+++ b/apps/docs/content/components/select/custom-render-value.raw.tsx
@@ -229,12 +229,7 @@ export default function App() {
       renderValue={(items: SelectedItems<User>) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data?.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data?.avatar}
-            />
+            <Avatar alt={item.data?.name} className="shrink-0" size="sm" src={item.data?.avatar} />
             <div className="flex flex-col">
               <span>{item.data?.name}</span>
               <span className="text-default-500 text-tiny">({item.data?.email})</span>
@@ -246,7 +241,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/select/custom-styles.raw.jsx b/apps/docs/content/components/select/custom-styles.raw.jsx
index a2c626ef44..aae4163e5f 100644
--- a/apps/docs/content/components/select/custom-styles.raw.jsx
+++ b/apps/docs/content/components/select/custom-styles.raw.jsx
@@ -238,12 +238,7 @@ export default function App() {
       renderValue={(items) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
+            <Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
             <div className="flex flex-col">
               <span>{item.data.name}</span>
               <span className="text-default-500 text-tiny">({item.data.email})</span>
@@ -256,7 +251,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/select/multiple-chips.raw.jsx b/apps/docs/content/components/select/multiple-chips.raw.jsx
index 4a0872fe5b..59d6142421 100644
--- a/apps/docs/content/components/select/multiple-chips.raw.jsx
+++ b/apps/docs/content/components/select/multiple-chips.raw.jsx
@@ -230,7 +230,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/select/multiple-chips.raw.tsx b/apps/docs/content/components/select/multiple-chips.raw.tsx
index 42db7120a1..978c696f07 100644
--- a/apps/docs/content/components/select/multiple-chips.raw.tsx
+++ b/apps/docs/content/components/select/multiple-chips.raw.tsx
@@ -242,7 +242,7 @@ export default function App() {
       {(user) => (
         <SelectItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>
diff --git a/apps/docs/content/components/slider/custom-styles.raw.jsx b/apps/docs/content/components/slider/custom-styles.raw.jsx
index 41976279b9..50cafffff8 100644
--- a/apps/docs/content/components/slider/custom-styles.raw.jsx
+++ b/apps/docs/content/components/slider/custom-styles.raw.jsx
@@ -5,13 +5,13 @@ export default function App() {
     <Slider
       classNames={{
         base: "max-w-md",
-        filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
+        filler: "bg-linear-to-r from-primary-500 to-secondary-400",
         labelWrapper: "mb-2",
         label: "font-medium text-default-700 text-medium",
         value: "font-medium text-default-500 text-small",
         thumb: [
           "transition-size",
-          "bg-gradient-to-r from-secondary-400 to-primary-500",
+          "bg-linear-to-r from-secondary-400 to-primary-500",
           "data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
           "data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6",
         ],
@@ -33,11 +33,11 @@ export default function App() {
         classNames: {
           base: [
             // arrow color
-            "before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
+            "before:bg-linear-to-r before:from-secondary-400 before:to-primary-500",
           ],
           content: [
             "py-2 shadow-xl",
-            "text-white bg-gradient-to-r from-secondary-400 to-primary-500",
+            "text-white bg-linear-to-r from-secondary-400 to-primary-500",
           ],
         },
       }}
diff --git a/apps/docs/content/components/slider/render-label.raw.jsx b/apps/docs/content/components/slider/render-label.raw.jsx
index 78bd20054c..466e6756f5 100644
--- a/apps/docs/content/components/slider/render-label.raw.jsx
+++ b/apps/docs/content/components/slider/render-label.raw.jsx
@@ -42,7 +42,7 @@ export default function App() {
     <Slider
       classNames={{
         base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+        filler: "bg-linear-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
       }}
       defaultValue={[100, 300]}
       formatOptions={{style: "currency", currency: "USD"}}
@@ -69,7 +69,7 @@ export default function App() {
         >
           <span
             className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              "transition-transform bg-linear-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
               index === 0
                 ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
                 : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
diff --git a/apps/docs/content/components/slider/render-range-thumb.raw.jsx b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
index 237c227ed2..ff181d0d15 100644
--- a/apps/docs/content/components/slider/render-range-thumb.raw.jsx
+++ b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
@@ -5,7 +5,7 @@ export default function App() {
     <Slider
       classNames={{
         base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+        filler: "bg-linear-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
       }}
       defaultValue={[100, 300]}
       formatOptions={{style: "currency", currency: "USD"}}
@@ -18,7 +18,7 @@ export default function App() {
         >
           <span
             className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              "transition-transform bg-linear-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
               index === 0
                 ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
                 : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
diff --git a/apps/docs/content/components/slider/render-thumb.raw.jsx b/apps/docs/content/components/slider/render-thumb.raw.jsx
index b203b78bb4..b07bcdc9e2 100644
--- a/apps/docs/content/components/slider/render-thumb.raw.jsx
+++ b/apps/docs/content/components/slider/render-thumb.raw.jsx
@@ -6,7 +6,7 @@ export default function App() {
       classNames={{
         base: "max-w-md gap-3",
         track: "border-s-secondary-100",
-        filler: "bg-gradient-to-r from-secondary-100 to-secondary-500",
+        filler: "bg-linear-to-r from-secondary-100 to-secondary-500",
       }}
       defaultValue={60}
       label="Select brightness"
@@ -15,7 +15,7 @@ export default function App() {
           {...props}
           className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
         >
-          <span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
+          <span className="transition-transform bg-linear-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
         </div>
       )}
       size="sm"
diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx
index 2bb76842f1..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-none 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 5f063c9769..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-none 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/switch/custom-styles.raw.jsx b/apps/docs/content/components/switch/custom-styles.raw.jsx
index f69834de41..4852abe450 100644
--- a/apps/docs/content/components/switch/custom-styles.raw.jsx
+++ b/apps/docs/content/components/switch/custom-styles.raw.jsx
@@ -17,7 +17,7 @@ export default function App() {
           "group-data-[selected=true]:ms-6",
           // pressed
           "group-data-[pressed=true]:w-7",
-          "group-data-[selected]:group-data-[pressed]:ms-4",
+          "group-data-pressed:group-data-selected:ms-4",
         ),
       }}
     >
diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx
index a0cbaf764a..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-none text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -606,13 +606,13 @@ export default function App() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]/tr:first:before:rounded-none",
-        "group-data-[first=true]/tr:last:before:rounded-none",
+        "first:group-data-[first=true]/tr:before:rounded-none",
+        "last:group-data-[first=true]/tr:before:rounded-none",
         // middle
         "group-data-[middle=true]/tr:before:rounded-none",
         // last
-        "group-data-[last=true]/tr:first:before:rounded-none",
-        "group-data-[last=true]/tr:last:before:rounded-none",
+        "first:group-data-[last=true]/tr:before:rounded-none",
+        "last:group-data-[last=true]/tr:before:rounded-none",
       ],
     }),
     [],
diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx
index cab1671052..1a8dad3eed 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-none text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -618,13 +618,13 @@ export default function App() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]/tr:first:before:rounded-none",
-        "group-data-[first=true]/tr:last:before:rounded-none",
+        "first:group-data-[first=true]/tr:before:rounded-none",
+        "last:group-data-[first=true]/tr:before:rounded-none",
         // middle
         "group-data-[middle=true]/tr:before:rounded-none",
         // last
-        "group-data-[last=true]/tr:first:before:rounded-none",
-        "group-data-[last=true]/tr:last:before:rounded-none",
+        "first:group-data-[last=true]/tr:before:rounded-none",
+        "last:group-data-[last=true]/tr:before:rounded-none",
       ],
     }),
     [],
diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx
index 97f5b1bedd..6b6fe9c898 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-none 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 36dde48795..b7117282f6 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-none 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/time-input/end-content.raw.jsx b/apps/docs/content/components/time-input/end-content.raw.jsx
index ffa611d5f7..67126f2c6b 100644
--- a/apps/docs/content/components/time-input/end-content.raw.jsx
+++ b/apps/docs/content/components/time-input/end-content.raw.jsx
@@ -26,7 +26,7 @@ export default function App() {
     <TimeInput
       defaultValue={new Time(11, 45)}
       endContent={
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
       }
       label="Event Time"
       labelPlacement="outside"
diff --git a/apps/docs/content/components/time-input/start-content.raw.jsx b/apps/docs/content/components/time-input/start-content.raw.jsx
index df559daba9..b17083ed18 100644
--- a/apps/docs/content/components/time-input/start-content.raw.jsx
+++ b/apps/docs/content/components/time-input/start-content.raw.jsx
@@ -28,7 +28,7 @@ export default function App() {
       label="Event Time"
       labelPlacement="outside"
       startContent={
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
       }
     />
   );
diff --git a/apps/docs/content/components/tooltip/custom-styles.raw.jsx b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
index e8cb21555a..f0f61abf4c 100644
--- a/apps/docs/content/components/tooltip/custom-styles.raw.jsx
+++ b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
@@ -9,7 +9,7 @@ export default function App() {
           // arrow color
           "before:bg-neutral-400 dark:before:bg-white",
         ],
-        content: ["py-2 px-4 shadow-xl", "text-black bg-gradient-to-br from-white to-neutral-400"],
+        content: ["py-2 px-4 shadow-xl", "text-black bg-linear-to-br from-white to-neutral-400"],
       }}
       content="I am a tooltip"
       placement="right"
diff --git a/apps/docs/content/customization/create-theme/custom-theme.ts b/apps/docs/content/customization/create-theme/custom-theme.ts
index 93993a4c9a..ac25fef824 100644
--- a/apps/docs/content/customization/create-theme/custom-theme.ts
+++ b/apps/docs/content/customization/create-theme/custom-theme.ts
@@ -18,7 +18,7 @@ export default function App() {
       <Button color="primary" variant="flat" className="rounded-[6px] bg-[#DD62ED]/20 text-[#DD62ED] data-[focus-visible=true]:outline-[#F182F6]">
         Flat
       </Button>  
-      <Button color="primary" variant="ghost" className="rounded-[6px] border-[#DD62ED] text-[#DD62ED] data-[hover=true]:!bg-[#DD62ED] data-[hover=true]:!text-[#FFFFFF] data-[focus-visible=true]:outline-[#F182F6]">
+      <Button color="primary" variant="ghost" className="rounded-[6px] border-[#DD62ED] text-[#DD62ED] data-[hover=true]:bg-[#DD62ED]! data-[hover=true]:text-[#FFFFFF]! data-[focus-visible=true]:outline-[#F182F6]">
         Ghost
       </Button>  
       <Button color="primary" variant="shadow" className="rounded-[6px] shadow-[#DD62ED]/40 bg-[#DD62ED] text-[#FFFFFF] data-[focus-visible=true]:outline-[#F182F6]">
diff --git a/apps/docs/content/customization/custom-variants/slots-component.ts b/apps/docs/content/customization/custom-variants/slots-component.ts
index 20909a633e..5ed62f803a 100644
--- a/apps/docs/content/customization/custom-variants/slots-component.ts
+++ b/apps/docs/content/customization/custom-variants/slots-component.ts
@@ -42,7 +42,7 @@ const MyInput = extendVariants(Input, {
         inputWrapper: [
           "bg-zinc-100",
           "border",
-          "shadow",
+          "shadow-xs",
           "transition-colors",
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
@@ -77,7 +77,7 @@ const MyInput = extendVariants(Input, {
     },
     radius: {
       xs: {
-        inputWrapper: "rounded",
+        inputWrapper: "rounded-sm",
       },
       sm: {
         inputWrapper: "rounded-[4px]",
diff --git a/apps/docs/content/customization/customize-theme/custom-colors.ts b/apps/docs/content/customization/customize-theme/custom-colors.ts
index 68a58c2ade..e01be1a31d 100644
--- a/apps/docs/content/customization/customize-theme/custom-colors.ts
+++ b/apps/docs/content/customization/customize-theme/custom-colors.ts
@@ -6,7 +6,7 @@ export default function App() {
       <Button className="rounded-[4px] bg-[#BEF264] text-[#000000] data-[focus-visible=true]:outline-[#BEF264]">
         Solid
       </Button>
-      <Button variant="ghost" className="rounded-[4px] border-[1px] border-[#BEF264] hover:!bg-[#BEF264] hover:!text-[#000000] data-[focus-visible=true]:outline-[#BEF264]">
+      <Button variant="ghost" className="rounded-[4px] border-[1px] border-[#BEF264] hover:bg-[#BEF264]! hover:text-[#000000]! data-[focus-visible=true]:outline-[#BEF264]">
         Ghost
       </Button>
     </div>  
diff --git a/apps/docs/content/customization/override-styles/button-example.ts b/apps/docs/content/customization/override-styles/button-example.ts
index b294bee21b..cdc695ec97 100644
--- a/apps/docs/content/customization/override-styles/button-example.ts
+++ b/apps/docs/content/customization/override-styles/button-example.ts
@@ -4,7 +4,7 @@ export default function App() {
   return (
     <Button
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
     >
       Press me
diff --git a/apps/docs/content/customization/override-styles/slots-example.ts b/apps/docs/content/customization/override-styles/slots-example.ts
index 31790f5c1d..4aeb4b2403 100644
--- a/apps/docs/content/customization/override-styles/slots-example.ts
+++ b/apps/docs/content/customization/override-styles/slots-example.ts
@@ -2,7 +2,7 @@ const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@
 
 export default function App() {
   return (
-    <Card className="w-[240px] h-[240px] bg-gradient-to-br from-violet-500 to-fuchsia-500">
+    <Card className="w-[240px] h-[240px] bg-linear-to-br from-violet-500 to-fuchsia-500">
       <CardBody className="justify-center items-center py-0">
         <CircularProgress
           classNames={{
diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
index 9564ef1702..c1291d698b 100644
--- a/apps/docs/content/docs/components/card.mdx
+++ b/apps/docs/content/docs/components/card.mdx
@@ -75,7 +75,7 @@ You can use other HeroUI components inside the card to compose a more complex ca
 
 You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element.
 
-> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible.
+> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-linear-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible.
 
 <CodeDemo isGradientBox title="Blurred Card" files={cardContent.blurred} />
 
diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
index 74994beead..98bd763661 100644
--- a/apps/docs/content/docs/customization/custom-variants.mdx
+++ b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -112,7 +112,7 @@ const MyInput = extendVariants(Input, {
         inputWrapper: [ // <- Input wrapper slot
           "bg-zinc-100",
           "border",
-          "shadow",
+          "shadow-sm",
           "transition-colors",
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
@@ -149,7 +149,7 @@ const MyInput = extendVariants(Input, {
     },
     radius: {
       xs: {
-        inputWrapper: "rounded",
+        inputWrapper: "rounded-sm",
       },
       sm: {
         inputWrapper: "rounded-[4px]",
diff --git a/apps/docs/content/docs/customization/override-styles.mdx b/apps/docs/content/docs/customization/override-styles.mdx
index 5776289b98..5847e0934c 100644
--- a/apps/docs/content/docs/customization/override-styles.mdx
+++ b/apps/docs/content/docs/customization/override-styles.mdx
@@ -25,7 +25,7 @@ export default function App() {
   return (
     <Button
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-sm bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
     >
       Press me
@@ -71,7 +71,7 @@ import {CircularProgress, Card, CardBody} from "@heroui/react";
 
 export default function App() {
   return (
-    <Card className="w-[240px] h-[240px] bg-gradient-to-br from-violet-500 to-fuchsia-500">
+    <Card className="w-[240px] h-[240px] bg-linear-to-br from-violet-500 to-fuchsia-500">
       <CardBody className="justify-center items-center py-0">
         <CircularProgress
           classNames={{
diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx
index 51f2f929e6..923b4e40bf 100644
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@@ -209,7 +209,7 @@ const CustomButton = () => {
     <Button
       ref={buttonRef}
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-sm bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
       onPress={handleConfetti}
     >
@@ -236,7 +236,7 @@ import {
   DeleteDocumentBulkIcon,
 } from "@heroui/shared-icons";
 
-const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
 export const Example = () => {
   return (
@@ -287,7 +287,7 @@ export const Example = () => {
             shortcut="⌘⇧D"
             startContent={
               <DeleteDocumentBulkIcon
-                className={clsx(iconClasses, "!text-danger")}
+                className={clsx(iconClasses, "text-danger!")}
               />
             }
           >
@@ -349,7 +349,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               </div>
               <Button
                 isIconOnly
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -381,7 +381,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
             <div className="flex w-full items-center justify-center">
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -389,7 +389,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -397,7 +397,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               </Button>
               <Button
                 isIconOnly
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -405,7 +405,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -413,7 +413,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
index d78bb0322b..231f9d6938 100644
--- a/apps/docs/hooks/use-stackblitz.ts
+++ b/apps/docs/hooks/use-stackblitz.ts
@@ -11,10 +11,11 @@ export interface UseSandpackProps {
 
 const viteConfig = `import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 });
 `;
 
@@ -80,9 +81,10 @@ export function useStackblitz(props: UseSandpackProps) {
   "devDependencies": {
     "@vitejs/plugin-react": "4.3.4",
     "vite": "6.0.6",
-    "autoprefixer": "10.4.20",
-    "postcss": "8.4.49",
-    "tailwindcss": "3.4.17"
+    "postcss": "8.5.1",
+    "tailwindcss": "^4.0.6",
+    "@tailwindcss/postcss": "4.0.0",
+    "@tailwindcss/vite": "4.0.0"
   },
   "main": "/index.jsx"
 }`;
diff --git a/apps/docs/package.json b/apps/docs/package.json
index d2768ff747..69e5a1f7af 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -100,7 +100,7 @@
     "sharp": "^0.32.1",
     "shelljs": "^0.8.4",
     "swr": "2.2.5",
-    "tailwind-variants": "^0.3.0",
+    "tailwind-variants": "1.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "usehooks-ts": "3.1.0",
@@ -128,7 +128,6 @@
     "@types/shelljs": "^0.8.9",
     "@types/uuid": "^8.3.1",
     "algoliasearch": "^4.10.3",
-    "autoprefixer": "10.4.20",
     "dotenv": "^16.0.1",
     "esbuild-plugin-raw": "0.1.8",
     "eslint-config-next": "15.0.3",
@@ -136,9 +135,10 @@
     "mdx-bundler": "10.0.3",
     "next-sitemap": "4.2.3",
     "node-fetch": "^3.2.10",
-    "postcss": "8.4.49",
+    "postcss": "8.5.1",
     "prettier": "^2.7.1",
-    "tailwindcss": "3.4.14",
+    "tailwindcss": "^4.0.6",
+    "@tailwindcss/postcss": "4.0.0",
     "tsx": "^3.8.2",
     "typescript": "^5.7.3",
     "uuid": "^8.3.2"
diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.js
index 12a703d900..483f378543 100644
--- a/apps/docs/postcss.config.js
+++ b/apps/docs/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/apps/docs/styles/ads.css b/apps/docs/styles/ads.css
index bbc3d132a8..1f98f70859 100644
--- a/apps/docs/styles/ads.css
+++ b/apps/docs/styles/ads.css
@@ -28,7 +28,7 @@
   transition: color 0.25s ease;
 }
 #carbonads a:hover {
-  @apply !text-default-500;
+  @apply text-default-500!;
 }
 #carbonads span {
   width: 100%;
@@ -56,7 +56,7 @@
   margin: 0px;
 }
 #carbonads .carbon-text {
-  @apply !text-default-500;
+  @apply text-default-500!;
   display: block;
   font-size: 1rem;
   width: 100%;
@@ -64,7 +64,7 @@
   padding-right: 8px;
 }
 #carbonads .carbon-poweredby {
-  @apply text-default-400 dark:!text-default-300;
+  @apply text-default-400 dark:text-default-300!;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -80,7 +80,7 @@
   transition: all 0.25 ease;
 }
 
-@media only screen and (max-width:600px) {
+@media only screen and (max-width: 600px) {
   #carbonads .carbon-text {
     font-size: 0.9rem;
   }
@@ -124,13 +124,13 @@
 .ea-container .ea-type-image .ea-callout a,
 .ea-container .ea-type-image .ea-callout a .ea-headline,
 .ea-container .ea-type-image .ea-callout a .ea-cta {
-  @apply text-default-400 dark:!text-default-300;
+  @apply text-default-400 dark:text-default-300!;
   font-weight: 600 !important;
   font-size: 9px !important;
 }
 
 [data-ea-publisher].loaded .ea-content a strong {
-  @apply !text-default-500;
+  @apply text-default-500!;
 }
 
 .ea-container .ea-type-image .ea-content a {
@@ -149,7 +149,7 @@
 }
 
 .ea-container .ea-type-image .ea-text a {
-  @apply !text-default-300;
+  @apply text-default-300!;
   width: 100%;
   max-width: 100%;
   display: block;
@@ -158,7 +158,7 @@
 }
 
 .ea-container .ea-type-image .ea-text .ea-body {
-  @apply !text-default-500;
+  @apply text-default-500!;
 }
 
 .ea-container .ea-type-image img {
@@ -174,4 +174,4 @@
   .ea-container .ea-type-image .ea-text a {
     font-size: 0.9rem;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 89eeae8944..7e31aafaf7 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -1,50 +1,45 @@
-@import 'prism.css';
-@import 'nprogress.css';
-@import 'ads.css';
+@import './prism.css';
+@import './nprogress.css';
+@import './ads.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-html {
-  font-size: 16px;
-  padding: 0px !important;
-  overflow-x: hidden;
-  scroll-padding-top: 64px;
-}
+@config '../tailwind.config.js';
 
-body {
-  min-height: 100vh;
-}
-/* Experimental */
-/* body::after { 
-  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
-  radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
-  radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
-  linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
-  linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
-background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
-background-repeat: no-repeat;
-background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
-content: "";
-display: block;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-opacity: 0.17;
-position: fixed;
-z-index: 0;
-} */
-
-/* 
-@media screen and (max-width: 640px) {
-  #app-container {
-    height: 100vh;
-    overflow-x: hidden;
+@plugin '@tailwindcss/typography';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  /* 
+    Default button style missing pointer cursor property  
+    Issue: https://github.com/tailwindlabs/tailwindcss/issues/15773
+  */
+  button, [role="button"] {
+    cursor: pointer;
+  }
+
+  /*
+    Make sure disabled buttons don't get the pointer cursor.
+  */
+  :disabled {
+    cursor: default;
   }
 }
- */
 
 @layer base {
   :root {
@@ -84,19 +79,56 @@ z-index: 0;
   }
 }
 
+@utility step {
+  counter-increment: step;
 
-@layer utilities {
-  .step {
-    counter-increment: step;
-  }
-
-  .step:before {
+  &:before {
     @apply absolute w-7 h-7 border-1 border-default-200 bg-default-100 rounded-full font-semibold text-center text-base inline-flex items-center justify-center -indent-px;
     @apply ml-[-41px];
     content: counter(step);
   }
 }
 
+html {
+  font-size: 16px;
+  padding: 0px !important;
+  overflow-x: hidden;
+  scroll-padding-top: 64px;
+}
+
+body {
+  min-height: 100vh;
+}
+/* Experimental */
+/* body::after { 
+  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
+  radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
+  radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
+  linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
+  linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
+  background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
+  background-repeat: no-repeat;
+  background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
+  content: "";
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.17;
+  position: fixed;
+  z-index: 0;
+  } */
+
+  /* 
+  @media screen and (max-width: 640px) {
+    #app-container {
+      height: 100vh;
+      overflow-x: hidden;
+    }
+  }
+ */
+
 pre details[open]>summary>span:first-child::before {
   transform: rotate(90deg);
 }
diff --git a/apps/docs/styles/nprogress.css b/apps/docs/styles/nprogress.css
index 8dd031560f..b202e4fb0a 100644
--- a/apps/docs/styles/nprogress.css
+++ b/apps/docs/styles/nprogress.css
@@ -3,7 +3,7 @@
 }
 
 #nprogress .bar {
-  @apply bg-secondary fixed z-[9999999] top-0 left-0 w-full h-0.5;
+  @apply bg-secondary fixed z-9999999 top-0 left-0 w-full h-0.5;
 }
 
 #nprogress .peg {
diff --git a/apps/docs/styles/sandpack.css b/apps/docs/styles/sandpack.css
index 7c523c2bbe..44ccdf246c 100644
--- a/apps/docs/styles/sandpack.css
+++ b/apps/docs/styles/sandpack.css
@@ -55,8 +55,9 @@
 }
 
 .sp-tab-button {
-  @apply block !font-sans bg-transparent appearance-none;
+  @apply block bg-transparent appearance-none;
 
+  font-family: var(--font-sans) !important;
   font-size: inherit;
   padding: 0 var(--sp-space-2);
   color: var(--sp-colors-fg-default) !important;
@@ -83,5 +84,5 @@
 }
 
 .sp-highlight {
-  @apply relative z-10 before:content-[''] before:w-full before:h-full before:absolute before:z-[-1] before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background before:border-l-2 border-l-white/80 dark:before:border-l-white/50;
+  @apply relative z-10 before:content-[''] before:w-full before:h-full before:absolute before:z-[-1] before:left-[0px] before:bg-gradient-to-r before:from-[var(--white/10)] before:to-[var(--code-background)] before:border-l-2 border-l-[var(--white/80)] dark:before:border-l-[var(--white/50)];
 }
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index dcf7e783eb..207946cf89 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -97,33 +97,33 @@ module.exports = {
               fontSize: "1.125em",
             },
             "h2 a": {
-              fontSize: `${theme("fontSize.2xl")[0]} !important`,
-              fontWeight: theme("fontWeight.semibold"),
-              ...theme("fontSize.2xl")[1],
+              fontSize: 'var(--text-2xl) !important',
+              fontWeight: 'var(--font-semibold)',
+              lineHeight: 'var(--text-2xl--line-height);',
             },
             "h3 a": {
               fontSize: "1.25rem !important",
-              fontWeight: theme("fontWeight.bold"),
+              fontWeight: 'var(--font-bold)',
             },
             "h2 small, h3 small, h4 small": {
-              fontFamily: theme("fontFamily.mono").join(", "),
-              color: theme("colors.slate.500"),
+              fontFamily: 'var(--font-mono); ',
+              color: 'var(--color-slate-500); ',
               fontWeight: 500,
             },
             "h2 small": {
-              fontSize: theme("fontSize.lg")[0],
-              ...theme("fontSize.lg")[1],
+              fontSize: 'var(--text-lg);',
+              lineHeight: 'var(--text-lg--line-height););',
             },
             "h3 small": {
-              fontSize: theme("fontSize.base")[0],
-              ...theme("fontSize.base")[1],
+              fontSize: 'var(--text-base); ',
+              lineHeight: 'var(--text-base--line-height);',
             },
             "h4 small": {
-              fontSize: theme("fontSize.sm")[0],
-              ...theme("fontSize.sm")[1],
+              fontSize: 'var(--text-sm); ',
+              lineHeight: 'var(--text-sm--line-height);',
             },
             "h4 a": {
-              fontWeight: theme("fontWeight.bold"),
+              fontWeight: 'var(--font-bold);',
             },
             "h2, h3, h4": {
               "scroll-margin-top": "var(--scroll-mt)",
@@ -135,7 +135,7 @@ module.exports = {
             "ul > li": {
               marginTop: "0.1em",
               marginBottom: "0.1em",
-              fontWeight: theme("fontWeight.normal"),
+              fontWeight: 'var(--font-normal);',
             },
             "ul > li > *:last-child": {
               marginTop: 0,
@@ -146,7 +146,7 @@ module.exports = {
               marginBottom: "0",
             },
             a: {
-              fontWeight: theme("fontWeight.normal"),
+              fontWeight: 'var(--font-normal);',
             },
             "a code": {
               color: "inherit",
@@ -154,7 +154,7 @@ module.exports = {
             },
             strong: {
               color: "hsl(var(--heroui-foreground))",
-              fontWeight: theme("fontWeight.bold"),
+              fontWeight: 'var(--font-bold);',
             },
             "a strong": {
               color: "inherit",
@@ -167,21 +167,21 @@ module.exports = {
               margin: "0 1px",
             },
             code: {
-              fontWeight: theme("fontWeight.medium"),
+              fontWeight: 'var(--font-medium);',
               fontVariantLigatures: "none",
             },
             pre: {
               display: "flex",
-              fontSize: theme("fontSize.sm")[0],
-              backgroundColor: "transparent",
-              fontWeight: theme("fontWeight.medium"),
+              fontSize: 'var(--text-sm);',
+              backgroundColor: 'transparent',
+              fontWeight: 'var(--font-medium);',
               padding: 0,
               margin: 0,
             },
             p: {
               marginTop: `${12 / 14}em`,
               marginBottom: `${12 / 14}em`,
-              fontWeight: theme("fontWeight.normal"),
+              fontWeight: 'var(--font-normal);',
             },
             "pre code": {
               flex: "none",
@@ -189,15 +189,15 @@ module.exports = {
             },
             table: {
               marginTop: "0px",
-              fontSize: theme("fontSize.sm")[0],
-              lineHeight: theme("fontSize.sm")[1].lineHeight,
+              fontSize: 'var(--text-sm);',
+              lineHeight: 'var(--text-sm--line-height);',
             },
             thead: {
               border: "none",
             },
             "thead th": {
               paddingTop: 0,
-              fontWeight: theme("fontWeight.semibold"),
+              fontWeight: 'var(--font-semibold);',
             },
             "tbody tr": {
               border: "none",
@@ -213,7 +213,7 @@ module.exports = {
               marginTop: `${12 / 14}em`,
             },
             blockquote: {
-              fontWeight: theme("fontWeight.normal"),
+              fontWeight: 'var(--font-normal);',
               fontStyle: "font-normal",
             },
             "code::before": {
@@ -258,20 +258,20 @@ module.exports = {
             "--tw-prose-td-borders": "hsl(var(--heroui-default-200))",
             "--tw-prose-invert-body": "hsl(var(--heroui-default-300))",
             "--tw-prose-invert-headings": commonColors.white,
-            "--tw-prose-invert-lead": theme("twColors.neutral[400]"),
+            "--tw-prose-invert-lead": 'var(--color-neutral-400);',
             "--tw-prose-invert-links": commonColors.white,
             "--tw-prose-invert-bold": commonColors.white,
-            "--tw-prose-invert-counters": theme("twColors.neutral[400]"),
-            "--tw-prose-invert-bullets": theme("twColors.neutral[600]"),
-            "--tw-prose-invert-hr": theme("twColors.neutral[700]"),
-            "--tw-prose-invert-quotes": theme("twColors.neutral[100]"),
-            "--tw-prose-invert-quote-borders": theme("twColors.neutral[700]"),
-            "--tw-prose-invert-captions": theme("twColors.neutral[400]"),
+            "--tw-prose-invert-counters": 'var(--color-neutral-400);',
+            "--tw-prose-invert-bullets": 'var(--color-neutral-600);',
+            "--tw-prose-invert-hr": 'var(--color-neutral-700);',
+            "--tw-prose-invert-quotes": 'var(--color-neutral-100);',
+            "--tw-prose-invert-quote-borders": 'var(--color-neutral-700);',
+            "--tw-prose-invert-captions": 'var(--color-neutral-400);',
             "--tw-prose-invert-code": commonColors.white,
             "--tw-prose-invert-pre-code": "hsl(var(--heroui-default-300))",
             "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-            "--tw-prose-invert-th-borders": theme("twColors.neutral[600]"),
-            "--tw-prose-invert-td-borders": theme("twColors.neutral[700]"),
+            "--tw-prose-invert-th-borders": 'var(--color-neutral-600);',
+            "--tw-prose-invert-td-borders": 'var(--color-neutral-700);',
           },
         },
       }),
@@ -401,7 +401,6 @@ module.exports = {
         },
       },
     }),
-    require("@tailwindcss/typography"),
     plugin(function ({matchUtilities, theme}) {
       matchUtilities(
         {
@@ -411,7 +410,7 @@ module.exports = {
             )}")`,
           }),
         },
-        {values: flattenColorPalette(theme("backgroundColor")), type: "color"},
+        // {values: flattenColorPalette(theme("backgroundColor")), type: "color"},
       );
     }),
   ],
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 8d690c6d6a..b68ecc5645 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -151,7 +151,7 @@ const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
           ...classNames,
           base: cn(
             [
-              "bg-default-50 dark:bg-background shadow-sm",
+              "bg-default-50 dark:bg-background shadow-xs",
               "border-1 border-default-200 dark:border-default-100",
               "relative before:content-[''] before:absolute before:z-10",
               "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
index e67c2a6e2f..8bef242363 100644
--- a/packages/components/autocomplete/stories/autocomplete.stories.tsx
+++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -583,7 +583,7 @@ const CustomItemsTemplate = ({color, variant, ...args}: AutocompleteProps<User>)
     {(item) => (
       <AutocompleteItem key={item.id} textValue={item.name}>
         <div className="flex gap-2 items-center">
-          <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+          <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
           <div className="flex flex-col">
             <span className="text-small">{item.name}</span>
             <span className="text-tiny text-default-400">{item.email}</span>
@@ -724,7 +724,7 @@ const CustomStylesTemplate = ({color, variant, ...args}: AutocompleteProps<User>
       {(item) => (
         <AutocompleteItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -785,7 +785,7 @@ const CustomStylesWithCustomItemsTemplate = ({color, ...args}: AutocompleteProps
         <AutocompleteItem key={item.id} textValue={item.name}>
           <div className="flex justify-between items-center">
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.team}</span>
diff --git a/packages/components/date-input/stories/date-input.stories.tsx b/packages/components/date-input/stories/date-input.stories.tsx
index f4a15412a5..0340ba7748 100644
--- a/packages/components/date-input/stories/date-input.stories.tsx
+++ b/packages/components/date-input/stories/date-input.stories.tsx
@@ -237,7 +237,7 @@ export const StartContent = {
     ...defaultProps,
     labelPlacement: "outside",
     startContent: (
-      <CalendarBoldIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+      <CalendarBoldIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
     ),
   },
 };
@@ -249,7 +249,7 @@ export const EndContent = {
     ...defaultProps,
     labelPlacement: "outside",
     endContent: (
-      <CalendarBoldIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+      <CalendarBoldIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
     ),
   },
 };
diff --git a/packages/components/date-input/stories/time-input.stories.tsx b/packages/components/date-input/stories/time-input.stories.tsx
index 77c6e57104..b1f82e3302 100644
--- a/packages/components/date-input/stories/time-input.stories.tsx
+++ b/packages/components/date-input/stories/time-input.stories.tsx
@@ -232,7 +232,7 @@ export const StartContent = {
     ...defaultProps,
     labelPlacement: "outside",
     startContent: (
-      <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
     ),
   },
 };
@@ -244,7 +244,7 @@ export const EndContent = {
     ...defaultProps,
     labelPlacement: "outside",
     endContent: (
-      <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
     ),
   },
 };
diff --git a/packages/components/drawer/stories/drawer.stories.tsx b/packages/components/drawer/stories/drawer.stories.tsx
index 9b73a143a6..a107d590bb 100644
--- a/packages/components/drawer/stories/drawer.stories.tsx
+++ b/packages/components/drawer/stories/drawer.stories.tsx
@@ -82,7 +82,7 @@ const content = (
           <Input
             autoFocus
             endContent={
-              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
             }
             label="Email"
             placeholder="Enter your email"
@@ -90,7 +90,7 @@ const content = (
           />
           <Input
             endContent={
-              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
             }
             label="Password"
             placeholder="Enter your password"
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
index 017aa55f34..0271e7bd5d 100644
--- a/packages/components/dropdown/stories/dropdown.stories.tsx
+++ b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -368,7 +368,7 @@ const WithStartContentTemplate = ({
   disableAnimation,
   ...args
 }: DropdownProps & DropdownMenuProps) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Dropdown {...args} disableAnimation={disableAnimation}>
@@ -414,7 +414,7 @@ const WithStartContentTemplate = ({
 };
 
 const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown {...args} disableAnimation={disableAnimation}>
@@ -447,7 +447,7 @@ const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) =>
 };
 
 const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Dropdown {...args} disableAnimation={disableAnimation}>
@@ -497,7 +497,7 @@ const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) =>
 };
 
 const WithSectionsTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Dropdown {...args} disableAnimation={disableAnimation}>
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 22dd53fbbd..dc33c9d7b9 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -208,7 +208,7 @@ const StartContentTemplate = (args) => (
       {...args}
       // placeholder="you@example.com"
       startContent={
-        <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+        <MailFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
       }
     />
     <Input
@@ -241,7 +241,7 @@ const EndContentTemplate = (args) => (
     <Input
       {...args}
       endContent={
-        <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+        <MailFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
       }
       placeholder="you@example.com"
     />
@@ -281,7 +281,7 @@ const StartAndEndContentTemplate = (args) => (
       }
       placeholder="heroui"
       startContent={
-        <MailFilledIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+        <MailFilledIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
       }
     />
     <Input
@@ -292,7 +292,7 @@ const StartAndEndContentTemplate = (args) => (
             Currency
           </label>
           <select
-            className="outline-none 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"
           >
@@ -358,7 +358,7 @@ const CustomWithClassNamesTemplate = (args) => (
         inputWrapper: [
           "bg-slate-100",
           "border",
-          "shadow",
+          "shadow-sm",
           "hover:bg-slate-200",
           "focus-within:!bg-slate-100",
           "dark:bg-slate-900",
@@ -387,9 +387,7 @@ const CustomWithClassNamesTemplate = (args) => (
       }
       labelPlacement="outside"
       placeholder="Quick search..."
-      startContent={
-        <SearchIcon className="text-xl text-slate-400 pointer-events-none flex-shrink-0" />
-      }
+      startContent={<SearchIcon className="text-xl text-slate-400 pointer-events-none shrink-0" />}
     />
   </div>
 );
@@ -775,7 +773,7 @@ export const CustomWithHooks = {
     type: "search",
     placeholder: "Type to search...",
     startContent: (
-      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
     ),
   },
 };
diff --git a/packages/components/listbox/stories/listbox.stories.tsx b/packages/components/listbox/stories/listbox.stories.tsx
index c399302382..67ad5fae82 100644
--- a/packages/components/listbox/stories/listbox.stories.tsx
+++ b/packages/components/listbox/stories/listbox.stories.tsx
@@ -271,7 +271,7 @@ const MultipleSelectionTemplate = ({color, variant, ...args}: ListboxProps) => {
 };
 
 const WithStartContentTemplate = ({color, variant, disableAnimation, ...args}: ListboxProps) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Listbox
@@ -304,7 +304,7 @@ const WithStartContentTemplate = ({color, variant, disableAnimation, ...args}: L
 };
 
 const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Listbox
@@ -378,7 +378,7 @@ const WithTopContentTemplate = ({color, ...args}) => {
       {(item) => (
         <ListboxItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -432,7 +432,7 @@ const WithBottomContentTemplate = ({color, ...args}) => {
       {(item) => (
         <ListboxItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -445,7 +445,7 @@ const WithBottomContentTemplate = ({color, ...args}) => {
 };
 
 const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Listbox
@@ -491,7 +491,7 @@ const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) =>
 };
 
 const WithSectionsTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Listbox
diff --git a/packages/components/menu/stories/menu.stories.tsx b/packages/components/menu/stories/menu.stories.tsx
index 74db69580a..817f67f9ec 100644
--- a/packages/components/menu/stories/menu.stories.tsx
+++ b/packages/components/menu/stories/menu.stories.tsx
@@ -139,7 +139,7 @@ const WithShortcutTemplate = ({color, variant, ...args}) => (
 );
 
 const WithStartContentTemplate = ({color, variant, disableAnimation, ...args}: MenuProps) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Menu
@@ -181,7 +181,7 @@ const WithStartContentTemplate = ({color, variant, disableAnimation, ...args}: M
 };
 
 const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Menu
@@ -214,7 +214,7 @@ const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) =>
 };
 
 const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Menu
@@ -264,7 +264,7 @@ const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) =>
 };
 
 const WithSectionsTemplate = ({color, variant, disableAnimation, ...args}) => {
-  const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
+  const iconClasses = "text-2xl text-secondary pointer-events-none shrink-0";
 
   return (
     <Menu
diff --git a/packages/components/modal/stories/modal.stories.tsx b/packages/components/modal/stories/modal.stories.tsx
index fda5033fe2..e5b0868067 100644
--- a/packages/components/modal/stories/modal.stories.tsx
+++ b/packages/components/modal/stories/modal.stories.tsx
@@ -94,7 +94,7 @@ const content = (
           <Input
             autoFocus
             endContent={
-              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
             }
             label="Email"
             placeholder="Enter your email"
@@ -102,7 +102,7 @@ const content = (
           />
           <Input
             endContent={
-              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
             }
             label="Password"
             placeholder="Enter your password"
diff --git a/packages/components/navbar/stories/navbar.stories.tsx b/packages/components/navbar/stories/navbar.stories.tsx
index 604bf508b3..a2ecc9ae7e 100644
--- a/packages/components/navbar/stories/navbar.stories.tsx
+++ b/packages/components/navbar/stories/navbar.stories.tsx
@@ -514,7 +514,7 @@ const WithSearchInputTemplate = (args: NavbarProps) => {
             }}
             placeholder="Search..."
             size="sm"
-            startContent={<SearchIcon className="text-base pointer-events-none flex-shrink-0" />}
+            startContent={<SearchIcon className="text-base pointer-events-none shrink-0" />}
             onClear={() => {
               // eslint-disable-next-line no-console
               console.log("clear");
diff --git a/packages/components/pagination/stories/pagination.stories.tsx b/packages/components/pagination/stories/pagination.stories.tsx
index 7522778896..8ca94a426b 100644
--- a/packages/components/pagination/stories/pagination.stories.tsx
+++ b/packages/components/pagination/stories/pagination.stories.tsx
@@ -205,7 +205,7 @@ export const CustomWithClassNames = {
     ...defaultProps,
     showShadow: true,
     classNames: {
-      base: "gap-0 rounded border-2 border-default",
+      base: "gap-0 rounded-sm border-2 border-default",
       item: "w-8 h-8 text-sm rounded-none bg-transparent",
       cursor:
         "bg-gradient-to-b shadow-lg shadow-default from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 822177a6be..ae3fe5a558 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -533,7 +533,7 @@ const CustomItemsTemplate = ({color, variant, ...args}: SelectProps<User>) => (
       {(item) => (
         <SelectItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -554,7 +554,7 @@ const CustomItemsTemplate = ({color, variant, ...args}: SelectProps<User>) => (
       {(item) => (
         <SelectItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -685,7 +685,7 @@ const CustomStylesTemplate = ({color, variant, ...args}: SelectProps<User>) => {
       {(item) => (
         <SelectItem key={item.id} textValue={item.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+            <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{item.name}</span>
               <span className="text-tiny text-default-400">{item.email}</span>
@@ -1294,12 +1294,7 @@ export const CustomRenderValue = {
     renderValue: (items: SelectedItems<User>) => {
       return items.map((item) => (
         <div key={item.key} className="flex items-center gap-2">
-          <Avatar
-            alt={item.data?.name}
-            className="flex-shrink-0"
-            size="sm"
-            src={item.data?.avatar}
-          />
+          <Avatar alt={item.data?.name} className="shrink-0" size="sm" src={item.data?.avatar} />
           <div className="flex flex-col">
             <span>{item.data?.name}</span>
             <span className="text-default-500 text-tiny">({item.data?.email})</span>
@@ -1319,12 +1314,7 @@ export const CustomStyles = {
     renderValue: (items: SelectedItems<User>) => {
       return items.map((item) => (
         <div key={item.key} className="flex items-center gap-2">
-          <Avatar
-            alt={item.data?.name}
-            className="flex-shrink-0"
-            size="sm"
-            src={item.data?.avatar}
-          />
+          <Avatar alt={item.data?.name} className="shrink-0" size="sm" src={item.data?.avatar} />
           <div className="flex flex-col">
             <span>{item.data?.name}</span>
             <span className="text-default-500 text-tiny">({item.data?.email})</span>
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index feff5fbdc2..1ed6681937 100644
--- a/packages/components/slider/stories/slider.stories.tsx
+++ b/packages/components/slider/stories/slider.stories.tsx
@@ -164,7 +164,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-none 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/core/system-rsc/__tests__/extend-variants.test.tsx b/packages/core/system-rsc/__tests__/extend-variants.test.tsx
index d2baf7fdc5..54ae6a7cb2 100644
--- a/packages/core/system-rsc/__tests__/extend-variants.test.tsx
+++ b/packages/core/system-rsc/__tests__/extend-variants.test.tsx
@@ -43,7 +43,7 @@ const createExtendSlotsComponent = () =>
           base: "shadow-xs",
         },
         sm: {
-          base: "shadow-sm",
+          base: "shadow-xs",
         },
         xl: {
           base: "shadow-xl",
@@ -232,23 +232,23 @@ describe("extendVariants function - with slots", () => {
 
   test("should override the slots styles", () => {
     const Card2 = createExtendSlotsComponent();
-    const {getByTestId} = render(<Card2 classNames={{base: "shadow-sm"}}>Card Content</Card2>);
+    const {getByTestId} = render(<Card2 classNames={{base: "shadow-xs"}}>Card Content</Card2>);
 
     const baseEl = getByTestId("base");
 
-    expect(baseEl).toHaveClass("shadow-sm");
+    expect(baseEl).toHaveClass("shadow-xs");
   });
 
   test("should override all slots styles", () => {
     const Card2 = createExtendSlotsComponent();
     const {getByTestId} = render(
-      <Card2 classNames={{base: "shadow-sm", header: "rounded-none"}}>Card Content</Card2>,
+      <Card2 classNames={{base: "shadow-xs", header: "rounded-none"}}>Card Content</Card2>,
     );
 
     const baseEl = getByTestId("base");
     const headerEl = getByTestId("header");
 
-    expect(baseEl).toHaveClass("shadow-sm");
+    expect(baseEl).toHaveClass("shadow-xs");
     expect(headerEl).toHaveClass("rounded-none");
   });
 });
diff --git a/packages/core/system-rsc/package.json b/packages/core/system-rsc/package.json
index d073788fdb..c0ca8859a9 100644
--- a/packages/core/system-rsc/package.json
+++ b/packages/core/system-rsc/package.json
@@ -42,7 +42,7 @@
     "@heroui/react-utils": "workspace:*",
     "@heroui/shared-utils": "workspace:*",
     "react": "18.3.0",
-    "tailwind-variants": "^0.3.0",
+    "tailwind-variants": "1.0.0",
     "clean-package": "2.2.0"
   },
   "dependencies": {
diff --git a/packages/core/system-rsc/test-utils/slots-component.tsx b/packages/core/system-rsc/test-utils/slots-component.tsx
index fb0f4ef9cc..aa4d78da60 100644
--- a/packages/core/system-rsc/test-utils/slots-component.tsx
+++ b/packages/core/system-rsc/test-utils/slots-component.tsx
@@ -17,7 +17,7 @@ const card = tv({
       "relative",
       "overflow-hidden",
       "h-auto",
-      "outline-none",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index 379eb73669..2204a0c757 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -51,17 +51,17 @@
     "deepmerge": "4.3.1",
     "flat": "^5.0.2",
     "clsx": "^1.2.1",
-    "tailwind-variants": "0.3.0",
-    "tailwind-merge": "2.5.4",
+    "tailwind-variants": "1.0.0",
+    "tailwind-merge": "3.0.2",
     "@heroui/shared-utils": "workspace:*"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.4.0"
+    "tailwindcss": ">=4.0.0"
   },
   "devDependencies": {
     "@types/color": "^4.2.0",
     "@types/flat": "^5.0.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.6",
     "clean-package": "2.2.0"
   },
   "tsup": {
diff --git a/packages/core/theme/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts
index cf5e3b7ce5..90fd55921e 100644
--- a/packages/core/theme/src/components/accordion.ts
+++ b/packages/core/theme/src/components/accordion.ts
@@ -59,11 +59,11 @@ const accordionItem = tv({
     base: "",
     heading: "",
     trigger: [
-      "flex py-4 w-full h-full gap-3 outline-none items-center tap-highlight-transparent",
+      "flex py-4 w-full h-full gap-3 outline-hidden items-center tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
-    startContent: "flex-shrink-0",
+    startContent: "shrink-0",
     indicator: "text-default-400",
     titleWrapper: "flex-1 flex flex-col text-start",
     title: "text-foreground text-medium",
diff --git a/packages/core/theme/src/components/breadcrumbs.ts b/packages/core/theme/src/components/breadcrumbs.ts
index d9b078b7be..9ab035e06c 100644
--- a/packages/core/theme/src/components/breadcrumbs.ts
+++ b/packages/core/theme/src/components/breadcrumbs.ts
@@ -17,7 +17,8 @@ const breadcrumbItem = tv({
       "flex gap-1 items-center",
       "cursor-pointer",
       "whitespace-nowrap",
-      "outline-none",
+      "line-clamp-1",
+      "outline-hidden",
       "tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
@@ -210,7 +211,7 @@ const breadcrumbs = tv({
         list: "bg-default-100",
       },
       bordered: {
-        list: "border-medium border-default-200 shadow-sm",
+        list: "border-medium border-default-200 shadow-xs",
       },
       light: {},
     },
diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
index 659d3bcdf1..69362f07d3 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-none",
+    "outline-hidden",
     "select-none",
     "whitespace-nowrap",
     "min-w-max",
@@ -38,6 +38,7 @@ const button = tv({
     "overflow-hidden",
     "tap-highlight-transparent",
     "data-[pressed=true]:scale-[0.97]",
+    "cursor-pointer",
     // focus ring
     ...dataFocusVisibleClasses,
   ],
diff --git a/packages/core/theme/src/components/card.ts b/packages/core/theme/src/components/card.ts
index 04b86032a1..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-none",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
index 847f640662..3fe1534459 100644
--- a/packages/core/theme/src/components/checkbox.ts
+++ b/packages/core/theme/src/components/checkbox.ts
@@ -27,7 +27,7 @@ const checkbox = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      "flex-shrink-0",
+      "shrink-0",
       "overflow-hidden",
       // before
       "before:content-['']",
@@ -80,9 +80,9 @@ const checkbox = tv({
       sm: {
         wrapper: [
           "w-4 h-4 me-2",
-          "rounded-[calc(theme(borderRadius.medium)*0.5)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.5)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.5)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.5)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.5)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.5)]",
         ],
         label: "text-small",
         icon: "w-3 h-2",
@@ -90,9 +90,9 @@ const checkbox = tv({
       md: {
         wrapper: [
           "w-5 h-5 me-2",
-          "rounded-[calc(theme(borderRadius.medium)*0.6)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.6)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.6)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.6)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.6)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.6)]",
         ],
         label: "text-medium",
         icon: "w-4 h-3",
@@ -100,9 +100,9 @@ const checkbox = tv({
       lg: {
         wrapper: [
           "w-6 h-6 me-2",
-          "rounded-[calc(theme(borderRadius.medium)*0.7)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.7)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.7)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.7)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.7)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.7)]",
         ],
         label: "text-large",
         icon: "w-5 h-4",
@@ -114,23 +114,23 @@ const checkbox = tv({
       },
       sm: {
         wrapper: [
-          "rounded-[calc(theme(borderRadius.medium)*0.5)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.5)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.5)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.5)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.5)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.5)]",
         ],
       },
       md: {
         wrapper: [
-          "rounded-[calc(theme(borderRadius.medium)*0.6)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.6)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.6)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.6)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.6)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.6)]",
         ],
       },
       lg: {
         wrapper: [
-          "rounded-[calc(theme(borderRadius.medium)*0.7)]",
-          "before:rounded-[calc(theme(borderRadius.medium)*0.7)]",
-          "after:rounded-[calc(theme(borderRadius.medium)*0.7)]",
+          "rounded-[calc(var(--heroui-radius-medium)*0.7)]",
+          "before:rounded-[calc(var(--heroui-radius-medium)*0.7)]",
+          "after:rounded-[calc(var(--heroui-radius-medium)*0.7)]",
         ],
       },
       full: {
diff --git a/packages/core/theme/src/components/chip.ts b/packages/core/theme/src/components/chip.ts
index d3af69e407..5a104de4c4 100644
--- a/packages/core/theme/src/components/chip.ts
+++ b/packages/core/theme/src/components/chip.ts
@@ -34,11 +34,11 @@ const chip = tv({
     ],
     content: "flex-1 text-inherit font-normal",
     dot: ["w-2", "h-2", "ml-1", "rounded-full"],
-    avatar: "flex-shrink-0",
+    avatar: "shrink-0",
     closeButton: [
       "z-10",
       "appearance-none",
-      "outline-none",
+      "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 3f43bbc1ab..e87477a312 100644
--- a/packages/core/theme/src/components/date-input.ts
+++ b/packages/core/theme/src/components/date-input.ts
@@ -19,7 +19,7 @@ const dateInput = tv({
     ],
     inputWrapper: [
       "relative px-3 gap-3 w-full inline-flex flex-row items-center",
-      "cursor-text tap-highlight-transparent shadow-sm",
+      "cursor-text tap-highlight-transparent shadow-xs",
     ],
     input: "flex h-full gap-x-0.5 w-full font-normal",
     innerWrapper: [
@@ -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-none focus:shadow-sm 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
@@ -165,12 +165,12 @@ const dateInput = tv({
     },
     labelPlacement: {
       outside: {
-        base: "flex flex-col data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+8px)] gap-y-1.5",
+        base: "flex flex-col data-[has-helper=true]:pb-[calc(var(--heroui-font-size-tiny)_+8px)] gap-y-1.5",
         label: "w-full text-foreground",
         helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
       },
       "outside-left": {
-        base: "flex-row items-center data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+_8px)] gap-x-2 flex-nowrap",
+        base: "flex-row items-center data-[has-helper=true]:pb-[calc(var(--heroui-font-size-tiny)_+_8px)] gap-x-2 flex-nowrap",
         label: "relative text-foreground",
         inputWrapper: "relative flex-1",
         helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
diff --git a/packages/core/theme/src/components/date-picker.ts b/packages/core/theme/src/components/date-picker.ts
index 7f8ce52dd8..11d0ce3ced 100644
--- a/packages/core/theme/src/components/date-picker.ts
+++ b/packages/core/theme/src/components/date-picker.ts
@@ -11,7 +11,7 @@ const datePicker = tv({
   slots: {
     base: "group w-full",
     selectorButton: "-mx-2 text-inherit",
-    selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
+    selectorIcon: "text-lg text-inherit pointer-events-none shrink-0",
     popoverContent: "p-0 w-full",
     calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
     calendarContent: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
diff --git a/packages/core/theme/src/components/dropdown.ts b/packages/core/theme/src/components/dropdown.ts
index 77945ef744..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-none",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       "data-[pressed=true]:opacity-70",
@@ -69,11 +69,11 @@ const dropdownItem = tv({
     wrapper: "w-full flex flex-col items-start justify-center",
     title: "flex-1 text-small font-normal truncate",
     description: ["w-full", "text-tiny", "text-foreground-500", "group-hover:text-current"],
-    selectedIcon: ["text-inherit", "w-3", "h-3", "flex-shrink-0"],
+    selectedIcon: ["text-inherit", "w-3", "h-3", "shrink-0"],
     shortcut: [
       "px-1",
       "py-0.5",
-      "rounded",
+      "rounded-sm",
       "font-sans",
       "text-foreground-500",
       "text-tiny",
diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts
index 520d764fed..3a2175ee10 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-none",
+      "outline-hidden",
       "bg-transparent",
       "text-transparent",
     ],
@@ -26,7 +26,7 @@ const inputOtp = tv({
       "border-default-200",
       "data-[active=true]:border-default-400",
       "data-[active=true]:scale-110",
-      "shadow-sm",
+      "shadow-xs",
       "hover:bg-danger",
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 17f5f1fec7..fbb5b8bd46 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -29,7 +29,7 @@ const input = tv({
       "z-10",
       "pointer-events-none",
       "origin-top-left",
-      "flex-shrink-0",
+      "shrink-0",
       // Using RTL here as Tailwind CSS doesn't support `start` and `end` logical properties for transforms yet.
       "rtl:origin-top-right",
       "subpixel-antialiased",
@@ -39,10 +39,10 @@ const input = tv({
     ],
     mainWrapper: "h-full",
     inputWrapper:
-      "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
+      "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-none placeholder:text-foreground-500 focus-visible:outline-none",
+      "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",
       "file:cursor-pointer file:bg-transparent file:border-0",
@@ -57,7 +57,7 @@ const input = tv({
       "start-auto",
       "pointer-events-none",
       "appearance-none",
-      "outline-none",
+      "outline-hidden",
       "select-none",
       "opacity-0",
       "hover:!opacity-100",
@@ -240,7 +240,7 @@ const input = tv({
           "!duration-200",
           "!ease-out",
           "motion-reduce:transition-none",
-          "transition-[transform,color,left,opacity]",
+          "transition-[transform,color,left,opacity,translate,scale]",
         ],
         clearButton: [
           "scale-90",
@@ -667,7 +667,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px)]",
         ],
       },
     },
@@ -677,7 +677,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px)]",
         ],
       },
     },
@@ -688,7 +688,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px)]",
         ],
       },
     },
@@ -700,7 +700,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -711,7 +711,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -723,7 +723,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -735,7 +735,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_5px)]",
         ],
       },
     },
@@ -746,7 +746,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_3.5px)]",
         ],
       },
     },
@@ -758,7 +758,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_4px)]",
         ],
       },
     },
@@ -771,9 +771,9 @@ const input = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-tiny)/2_+_16px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_8px)]",
       },
     },
     {
@@ -785,9 +785,9 @@ const input = tv({
           "start-3",
           "end-auto",
           "text-small",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_20px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_10px)]",
       },
     },
     {
@@ -799,9 +799,9 @@ const input = tv({
           "start-3",
           "end-auto",
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_24px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_12px)]",
       },
     },
     // outside-left & size & hasHelper
diff --git a/packages/core/theme/src/components/link.ts b/packages/core/theme/src/components/link.ts
index 69f16a5f27..9f5550c07c 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-none 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 dedb9bfb22..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-none",
+    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-none",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       // focus ring
@@ -73,11 +73,11 @@ const menuItem = tv({
     wrapper: "w-full flex flex-col items-start justify-center",
     title: "flex-1 text-small font-normal",
     description: ["w-full", "text-tiny", "text-foreground-500", "group-hover:text-current"],
-    selectedIcon: ["text-inherit", "w-3", "h-3", "flex-shrink-0"],
+    selectedIcon: ["text-inherit", "w-3", "h-3", "shrink-0"],
     shortcut: [
       "px-1",
       "py-0.5",
-      "rounded",
+      "rounded-sm",
       "font-sans",
       "text-foreground-500",
       "text-tiny",
diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
index 455bbd5a44..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-none",
+      "outline-hidden",
       "mx-1",
       "my-1",
       "sm:mx-6",
@@ -56,7 +56,7 @@ const modal = tv({
     closeButton: [
       "absolute",
       "appearance-none",
-      "outline-none",
+      "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 e1ef852de2..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-none",
+      "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 ceabb19356..c46050ec0b 100644
--- a/packages/core/theme/src/components/number-input.ts
+++ b/packages/core/theme/src/components/number-input.ts
@@ -262,7 +262,7 @@ const numberInput = tv({
           "!duration-200",
           "!ease-out",
           "motion-reduce:transition-none",
-          "transition-[transform,color,left,opacity]",
+          "transition-[transform,color,left,opacity,translate,scale]",
         ],
         clearButton: [
           "scale-90",
@@ -656,7 +656,7 @@ const numberInput = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px)]",
         ],
       },
     },
@@ -665,7 +665,7 @@ const numberInput = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px)]",
         ],
       },
     },
@@ -675,7 +675,7 @@ const numberInput = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px)]",
         ],
       },
     },
@@ -718,7 +718,7 @@ const numberInput = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -729,7 +729,7 @@ const numberInput = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -740,7 +740,7 @@ const numberInput = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -751,7 +751,7 @@ const numberInput = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_5px)]",
         ],
       },
     },
@@ -761,7 +761,7 @@ const numberInput = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_3.5px)]",
         ],
       },
     },
@@ -772,7 +772,7 @@ const numberInput = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_4px)]",
         ],
       },
     },
@@ -784,9 +784,9 @@ const numberInput = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-tiny)/2_+_16px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_8px)]",
         stepperButton: "before:h-4",
       },
     },
@@ -798,10 +798,9 @@ const numberInput = tv({
           "start-3",
           "end-auto",
           "text-small",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_20px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
-        stepperButton: "before:h-4",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_10px)]",
       },
     },
     {
@@ -812,9 +811,9 @@ const numberInput = tv({
           "start-3",
           "end-auto",
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_24px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_12px)]",
         stepperButton: "min-4 w-4 h-4 before:h-6",
       },
     },
diff --git a/packages/core/theme/src/components/pagination.ts b/packages/core/theme/src/components/pagination.ts
index 3d05fbe2cb..575c47fb32 100644
--- a/packages/core/theme/src/components/pagination.ts
+++ b/packages/core/theme/src/components/pagination.ts
@@ -109,7 +109,7 @@ const pagination = tv({
     },
     isCompact: {
       true: {
-        wrapper: "gap-0 shadow-sm",
+        wrapper: "gap-0 shadow-xs",
         item: [
           "shadow-none",
           "first-of-type:rounded-e-none",
@@ -344,7 +344,7 @@ const pagination = tv({
         "flex-wrap",
         "truncate",
         "box-border",
-        "outline-none",
+        "outline-hidden",
         "items-center",
         "justify-center",
         "text-default-foreground",
@@ -358,7 +358,7 @@ const pagination = tv({
     {
       slots: ["item", "prev", "next"],
       variant: ["flat", "bordered", "faded"],
-      class: ["shadow-sm"],
+      class: ["shadow-xs"],
     },
     {
       slots: ["item", "prev", "next"],
diff --git a/packages/core/theme/src/components/popover.ts b/packages/core/theme/src/components/popover.ts
index 663b6a9ad0..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-none",
+      "outline-hidden",
       "box-border",
     ],
     trigger: ["z-10"],
diff --git a/packages/core/theme/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
index 40a826e1e2..95aa805ca5 100644
--- a/packages/core/theme/src/components/radio.ts
+++ b/packages/core/theme/src/components/radio.ts
@@ -33,7 +33,7 @@ const radio = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      "flex-shrink-0",
+      "shrink-0",
       "overflow-hidden",
       "border-solid",
       "border-medium",
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 34927f6230..359d91486e 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -21,9 +21,9 @@ const select = tv({
     ],
     mainWrapper: "w-full flex flex-col",
     trigger:
-      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none 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",
+      "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",
     spinner: "absolute end-3",
     value: ["text-foreground-500", "font-normal", "w-full", "text-start"],
@@ -203,7 +203,7 @@ const select = tv({
           "rtl:origin-top-right",
           "!duration-200",
           "!ease-out",
-          "transition-[transform,color,left,opacity]",
+          "transition-[transform,color,left,opacity,translate,scale]",
           "motion-reduce:transition-none",
         ],
         selectorIcon: "transition-transform duration-150 ease motion-reduce:transition-none",
@@ -584,7 +584,9 @@ const select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px)]",
+        ],
         innerWrapper: "group-data-[has-label=true]:pt-4",
       },
     },
@@ -594,7 +596,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px)]",
         ],
         innerWrapper: "group-data-[has-label=true]:pt-4",
       },
@@ -606,7 +608,7 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px)]",
         ],
         innerWrapper: "group-data-[has-label=true]:pt-5",
       },
@@ -619,7 +621,7 @@ const select = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -630,7 +632,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_6px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -642,7 +644,7 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_8px_-_var(--heroui-border-width-medium))]",
         ],
       },
     },
@@ -653,7 +655,9 @@ const select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"],
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-tiny)/2_-_5px)]",
+        ],
       },
     },
     {
@@ -663,7 +667,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_3.5px)]",
         ],
       },
     },
@@ -675,7 +679,7 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--heroui-font-size-small)/2_-_4px)]",
         ],
       },
     },
@@ -688,9 +692,9 @@ const select = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-tiny)/2_+_16px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_8px)]",
       },
     },
     {
@@ -701,9 +705,9 @@ const select = tv({
         label: [
           "start-3",
           "text-small",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_20px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_10px)]",
       },
     },
     {
@@ -714,9 +718,9 @@ const select = tv({
         label: [
           "start-3",
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--heroui-font-size-small)/2_+_24px)]",
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
+        base: "data-[has-label=true]:mt-[calc(var(--heroui-font-size-small)_+_12px)]",
       },
     },
     // outside-left & size & hasHelper
diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts
index 3811564678..5f62dd854e 100644
--- a/packages/core/theme/src/components/slider.ts
+++ b/packages/core/theme/src/components/slider.ts
@@ -95,15 +95,15 @@ const slider = tv({
       },
       sm: {
         thumb:
-          "rounded-[calc(theme(borderRadius.small)/2)] after:rounded-[calc(theme(borderRadius.small)/3)]",
+          "rounded-[calc(var(--heroui-radius-small)/2)] after:rounded-[calc(var(--heroui-radius-small)/3)]",
       },
       md: {
         thumb:
-          "rounded-[calc(theme(borderRadius.medium)/2)] after:rounded-[calc(theme(borderRadius.medium)/3)]",
+          "rounded-[calc(var(--heroui-radius-medium)/2)] after:rounded-[calc(var(--heroui-radius-medium)/3)]",
       },
       lg: {
         thumb:
-          "rounded-[calc(theme(borderRadius.large)/1.5)] after:rounded-[calc(theme(borderRadius.large)/2)]",
+          "rounded-[calc(var(--heroui-radius-large)/1.5)] after:rounded-[calc(var(--heroui-radius-large)/2)]",
       },
       full: {
         thumb: "rounded-full after:rounded-full",
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 8aa34e835d..e7a5b50184 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: "",
-    tr: ["group/tr", "outline-none", ...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-none",
+      "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-none",
+      "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 2cddfac8d5..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-none",
+      "outline-hidden",
       "cursor-pointer",
       "transition-opacity",
       "tap-highlight-transparent",
@@ -67,7 +67,7 @@ const tabs = tv({
     panel: [
       "py-3",
       "px-1",
-      "outline-none",
+      "outline-hidden",
       "data-[inert=true]:hidden",
       // focus ring
       ...dataFocusVisibleClasses,
@@ -88,7 +88,7 @@ const tabs = tv({
         cursor: "h-[2px] w-[80%] bottom-0 shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
       },
       bordered: {
-        tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-sm",
+        tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-xs",
         cursor: "inset-0",
       },
     },
diff --git a/packages/core/theme/src/components/toggle.ts b/packages/core/theme/src/components/toggle.ts
index 2787728200..b0f0b0c67f 100644
--- a/packages/core/theme/src/components/toggle.ts
+++ b/packages/core/theme/src/components/toggle.ts
@@ -37,7 +37,7 @@ const toggle = tv({
       "inline-flex",
       "items-center",
       "justify-start",
-      "flex-shrink-0",
+      "shrink-0",
       "overflow-hidden",
       "bg-default-200",
       "rounded-full",
diff --git a/packages/core/theme/src/components/user.ts b/packages/core/theme/src/components/user.ts
index a7af9815c3..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-none",
+      "inline-flex items-center justify-center gap-2 rounded-small outline-hidden",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/plugin.ts b/packages/core/theme/src/plugin.ts
index ddb37f553c..609295d335 100644
--- a/packages/core/theme/src/plugin.ts
+++ b/packages/core/theme/src/plugin.ts
@@ -4,6 +4,7 @@
  */
 
 import Color from "color";
+// @ts-ignore
 import plugin from "tailwindcss/plugin.js";
 import deepMerge from "deepmerge";
 import {omit, kebabCase, mapKeys} from "@heroui/shared-utils";
@@ -31,10 +32,7 @@ const resolveConfig = (
   const resolved: {
     variants: {name: string; definition: string[]}[];
     utilities: Record<string, Record<string, any>>;
-    colors: Record<
-      string,
-      ({opacityValue, opacityVariable}: {opacityValue: string; opacityVariable: string}) => string
-    >;
+    colors: Record<string, string>;
   } = {
     variants: [],
     utilities: {},
@@ -42,12 +40,12 @@ const resolveConfig = (
   };
 
   for (const [themeName, {extend, layout, colors}] of Object.entries(themes)) {
-    let cssSelector = `.${themeName},[data-theme="${themeName}"]`;
+    let cssSelector = `.${themeName}`;
     const scheme = themeName === "light" || themeName === "dark" ? themeName : extend;
 
     // if the theme is the default theme, add the selector to the root element
     if (themeName === defaultTheme) {
-      cssSelector = `:root,${cssSelector}`;
+      cssSelector = `${cssSelector}`;
     }
 
     resolved.utilities[cssSelector] = scheme
@@ -81,30 +79,13 @@ const resolveConfig = (
 
         const [h, s, l, defaultAlphaValue] = parsedColor;
         const herouiColorVariable = `--${prefix}-${colorName}`;
-        const herouiOpacityVariable = `--${prefix}-${colorName}-opacity`;
 
         // set the css variable in "@layer utilities"
         resolved.utilities[cssSelector]![herouiColorVariable] = `${h} ${s}% ${l}%`;
-        // if an alpha value was provided in the color definition, store it in a css variable
-        if (typeof defaultAlphaValue === "number") {
-          resolved.utilities[cssSelector]![herouiOpacityVariable] = defaultAlphaValue.toFixed(2);
-        }
         // set the dynamic color in tailwind config theme.colors
-        resolved.colors[colorName] = ({opacityVariable, opacityValue}) => {
-          // if the opacity is set  with a slash (e.g. bg-primary/90), use the provided value
-          if (!isNaN(+opacityValue)) {
-            return `hsl(var(${herouiColorVariable}) / ${opacityValue})`;
-          }
-          // if no opacityValue was provided (=it is not parsable to a number)
-          // the herouiOpacityVariable (opacity defined in the color definition rgb(0, 0, 0, 0.5)) should have the priority
-          // over the tw class based opacity(e.g. "bg-opacity-90")
-          // This is how tailwind behaves as for v3.2.4
-          if (opacityVariable) {
-            return `hsl(var(${herouiColorVariable}) / var(${herouiOpacityVariable}, var(${opacityVariable})))`;
-          }
-
-          return `hsl(var(${herouiColorVariable}) / var(${herouiOpacityVariable}, 1))`;
-        };
+        resolved.colors[colorName] = `hsl(var(${herouiColorVariable}) / ${
+          defaultAlphaValue ?? "<alpha-value>"
+        })`;
       } catch (error: any) {
         // eslint-disable-next-line no-console
         console.log("error", error?.message);
@@ -186,12 +167,6 @@ const corePlugin = (
           width: {
             divider: `var(--${prefix}-divider-weight)`,
           },
-          fontSize: {
-            tiny: [`var(--${prefix}-font-size-tiny)`, `var(--${prefix}-line-height-tiny)`],
-            small: [`var(--${prefix}-font-size-small)`, `var(--${prefix}-line-height-small)`],
-            medium: [`var(--${prefix}-font-size-medium)`, `var(--${prefix}-line-height-medium)`],
-            large: [`var(--${prefix}-font-size-large)`, `var(--${prefix}-line-height-large)`],
-          },
           borderRadius: {
             small: `var(--${prefix}-radius-small)`,
             medium: `var(--${prefix}-radius-medium)`,
diff --git a/packages/core/theme/src/utilities/index.ts b/packages/core/theme/src/utilities/index.ts
index 7248844bc2..3213431356 100644
--- a/packages/core/theme/src/utilities/index.ts
+++ b/packages/core/theme/src/utilities/index.ts
@@ -1,11 +1,13 @@
 import transition from "./transition";
 import custom from "./custom";
 import scrollbarHide from "./scrollbar-hide";
+import text from "./text";
 import animation from "./animation";
 
 export const utilities = {
   ...custom,
   ...transition,
   ...scrollbarHide,
+  ...text,
   ...animation,
 };
diff --git a/packages/core/theme/src/utilities/text.ts b/packages/core/theme/src/utilities/text.ts
new file mode 100644
index 0000000000..90983dc5f0
--- /dev/null
+++ b/packages/core/theme/src/utilities/text.ts
@@ -0,0 +1,21 @@
+export default {
+  /**
+   * Text utilities
+   */
+  ".text-tiny": {
+    "font-size": "var(--heroui-font-size-tiny)",
+    "line-height": "var(--heroui-line-height-tiny)",
+  },
+  ".text-small": {
+    "font-size": "var(--heroui-font-size-small)",
+    "line-height": "var(--heroui-line-height-small)",
+  },
+  ".text-medium": {
+    "font-size": "var(--heroui-font-size-medium)",
+    "line-height": "var(--heroui-line-height-medium)",
+  },
+  ".text-large": {
+    "font-size": "var(--heroui-font-size-large)",
+    "line-height": "var(--heroui-line-height-large)",
+  },
+};
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 68e5188284..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-none",
+  "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-none",
+  "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-none",
+  "outline-hidden",
   "ring-2",
   "ring-focus",
   "ring-offset-2",
@@ -60,12 +60,14 @@ export const absoluteFullClasses = ["absolute", "inset-0"];
  * It includes classes for different variants like default, primary, secondary, etc.
  */
 export const collapseAdjacentVariantBorders = {
-  default: ["[&+.border-medium.border-default]:ms-[calc(theme(borderWidth.medium)*-1)]"],
-  primary: ["[&+.border-medium.border-primary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
-  secondary: ["[&+.border-medium.border-secondary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
-  success: ["[&+.border-medium.border-success]:ms-[calc(theme(borderWidth.medium)*-1)]"],
-  warning: ["[&+.border-medium.border-warning]:ms-[calc(theme(borderWidth.medium)*-1)]"],
-  danger: ["[&+.border-medium.border-danger]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  default: ["[&+.border-medium.border-default]:ms-[calc(var(--heroui-border-width-medium)*-1)]"],
+  primary: ["[&+.border-medium.border-primary]:ms-[calc(var(--heroui-border-width-medium)*-1)]"],
+  secondary: [
+    "[&+.border-medium.border-secondary]:ms-[calc(var(--heroui-border-width-medium)*-1)]",
+  ],
+  success: ["[&+.border-medium.border-success]:ms-[calc(var(--heroui-border-width-medium)*-1)]"],
+  warning: ["[&+.border-medium.border-warning]:ms-[calc(var(--heroui-border-width-medium)*-1)]"],
+  danger: ["[&+.border-medium.border-danger]:ms-[calc(var(--heroui-border-width-medium)*-1)]"],
 };
 
 export const hiddenInputClasses = [
diff --git a/packages/storybook/.storybook/style.css b/packages/storybook/.storybook/style.css
index 4858ee29d3..fbbc99be09 100644
--- a/packages/storybook/.storybook/style.css
+++ b/packages/storybook/.storybook/style.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../tailwind.config.js";
 
 h1 {
   @apply text-4xl font-bold !text-foreground;
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 25f388a1bc..54227fa1a9 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -54,8 +54,10 @@
     "remark-gfm": "^4.0.0",
     "storybook": "^8.5.0",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^3.3.5",
-    "vite": "^5.4.11"
+    "tailwindcss": "^4.0.6",
+    "vite": "^5.4.11",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
   },
   "tsup": {
     "clean": true,
diff --git a/packages/storybook/postcss.config.js b/packages/storybook/postcss.config.js
index 2aa7205d4b..c2ddf74822 100644
--- a/packages/storybook/postcss.config.js
+++ b/packages/storybook/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/packages/storybook/vite.config.ts b/packages/storybook/vite.config.ts
index d496766f1e..f5753a322f 100644
--- a/packages/storybook/vite.config.ts
+++ b/packages/storybook/vite.config.ts
@@ -1,8 +1,9 @@
 import {defineConfig} from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   optimizeDeps: {
     include: ["@storybook/theming", "@mdx-js/react"],
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1446ad645b..667ddd26fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -216,7 +216,7 @@ importers:
         version: 1.1.8
       parcel:
         specifier: ^2.3.1
-        version: 2.13.3(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)
+        version: 2.13.3(@swc/helpers@0.5.15)(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)
       plop:
         specifier: 3.1.1
         version: 3.1.1
@@ -240,7 +240,7 @@ importers:
         version: 0.8.5
       tsup:
         specifier: 8.3.5
-        version: 8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
       tsx:
         specifier: ^4.19.2
         version: 4.19.2
@@ -518,8 +518,8 @@ importers:
         specifier: 2.2.5
         version: 2.2.5(react@18.3.0)
       tailwind-variants:
-        specifier: ^0.3.0
-        version: 0.3.0(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)))
+        specifier: 1.0.0
+        version: 1.0.0(tailwindcss@4.0.6)
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -554,9 +554,12 @@ importers:
       '@react-types/shared':
         specifier: 3.28.0
         version: 3.28.0(react@18.3.0)
+      '@tailwindcss/postcss':
+        specifier: 4.0.0
+        version: 4.0.0
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.16(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)))
+        version: 0.5.16(tailwindcss@4.0.6)
       '@types/canvas-confetti':
         specifier: ^1.4.2
         version: 1.9.0
@@ -596,9 +599,6 @@ importers:
       algoliasearch:
         specifier: ^4.10.3
         version: 4.24.0
-      autoprefixer:
-        specifier: 10.4.20
-        version: 10.4.20(postcss@8.4.49)
       dotenv:
         specifier: ^16.0.1
         version: 16.4.7
@@ -621,14 +621,14 @@ importers:
         specifier: ^3.2.10
         version: 3.3.2
       postcss:
-        specifier: 8.4.49
-        version: 8.4.49
+        specifier: 8.5.1
+        version: 8.5.1
       prettier:
         specifier: ^2.7.1
         version: 2.8.8
       tailwindcss:
-        specifier: 3.4.14
-        version: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
+        specifier: ^4.0.6
+        version: 4.0.6
       tsx:
         specifier: ^3.8.2
         version: 3.14.0
@@ -3514,8 +3514,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       tailwind-variants:
-        specifier: ^0.3.0
-        version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
+        specifier: 1.0.0
+        version: 1.0.0(tailwindcss@4.0.6)
 
   packages/core/theme:
     dependencies:
@@ -3538,11 +3538,11 @@ importers:
         specifier: ^5.0.2
         version: 5.0.2
       tailwind-merge:
-        specifier: 2.5.4
-        version: 2.5.4
+        specifier: 3.0.2
+        version: 3.0.2
       tailwind-variants:
-        specifier: 0.3.0
-        version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
+        specifier: 1.0.0
+        version: 1.0.0(tailwindcss@4.0.6)
     devDependencies:
       '@types/color':
         specifier: ^4.2.0
@@ -3554,8 +3554,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       tailwindcss:
-        specifier: ^3.4.16
-        version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
+        specifier: ^4.0.6
+        version: 4.0.6
 
   packages/hooks/use-aria-accordion:
     dependencies:
@@ -4010,7 +4010,7 @@ importers:
     devDependencies:
       '@storybook/addon-a11y':
         specifier: ^8.5.0
-        version: 8.5.0(storybook@8.5.0(prettier@3.4.2))(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0))
+        version: 8.5.0(storybook@8.5.0(prettier@3.4.2))(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0))
       '@storybook/addon-actions':
         specifier: ^8.5.0
         version: 8.5.0(storybook@8.5.0(prettier@3.4.2))
@@ -4037,16 +4037,22 @@ importers:
         version: 8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)
       '@storybook/react-vite':
         specifier: ^8.5.0
-        version: 8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(rollup@4.30.1)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))
+        version: 8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(rollup@4.30.1)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       '@storybook/theming':
         specifier: ^8.5.0
         version: 8.5.0(storybook@8.5.0(prettier@3.4.2))
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.0.0
+      '@tailwindcss/vite':
+        specifier: ^4.0.0
+        version: 4.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       '@vitejs/plugin-react':
         specifier: ^4.3.3
-        version: 4.3.4(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))
+        version: 4.3.4(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       autoprefixer:
         specifier: ^10.4.13
-        version: 10.4.20(postcss@8.4.49)
+        version: 10.4.20(postcss@8.5.1)
       remark-gfm:
         specifier: ^4.0.0
         version: 4.0.0
@@ -4057,11 +4063,11 @@ importers:
         specifier: ^4.0.2
         version: 4.0.2(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@3.4.2))
       tailwindcss:
-        specifier: ^3.3.5
-        version: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
+        specifier: ^4.0.6
+        version: 4.0.6
       vite:
         specifier: ^5.4.11
-        version: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+        version: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
 
   packages/utilities/aria-utils:
     dependencies:
@@ -7986,11 +7992,92 @@ packages:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
+  '@tailwindcss/node@4.0.1':
+    resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.1':
+    resolution: {integrity: sha512-eP/rI9WaAElpeiiHDqGtDqga9iDsOClXxIqdHayHsw93F24F03b60CwgGhrGF9Io/EuWIpz3TMRhPVOLhoXivw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.1':
+    resolution: {integrity: sha512-jZVUo0kNd1IjxdCYwg4dwegDNsq7PoUx4LM814RmgY3gfJ63Y6GlpJXHOpd5FLv1igpeZox5LzRk2oz8MQoJwQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.1':
+    resolution: {integrity: sha512-E31wHiIf4LB0aKRohrS4U6XfFSACCL9ifUFfPQ16FhcBIL4wU5rcBidvWvT9TQFGPkpE69n5dyXUcqiMrnF/Ig==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.1':
+    resolution: {integrity: sha512-8/3ZKLMYqgAsBzTeczOKWtT4geF02g9S7cntY5gvqQZ4E0ImX724cHcZJi9k6fkE6aLbvwxxHxaShFvRxblwKQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+    resolution: {integrity: sha512-EYjbh225klQfWzy6LeIAfdjHCK+p71yLV/GjdPNW47Bfkkq05fTzIhHhCgshUvNp78EIA33iQU+ktWpW06NgHw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+    resolution: {integrity: sha512-PrX2SwIqWNP5cYeSyQfrhbk4ffOM338T6CrEwIAGvLPoUZiklt19yknlsBme6bReSw7TSAMy+8KFdLLi5fcWNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+    resolution: {integrity: sha512-iuoFGhKDojtfloi5uj6MIk4kxEOGcsAk/kPbZItF9Dp7TnzVhxo2U/718tXhxGrg6jSL3ST3cQHIjA6yw3OeXw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+    resolution: {integrity: sha512-pNUrGQYyE8RK+N9yvkPmHnlKDfFbni9A3lsi37u4RoA/6Yn+zWVoegvAQMZu3w+jqnpb2A/bYJ+LumcclUZ3yg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+    resolution: {integrity: sha512-xSGWaDcT6SJ75su9zWXj8GYb2jM/przXwZGH96RTS7HGDIoI1tvgpls88YajG5Sx7hXaqAWCufjw5L/dlu+lzg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+    resolution: {integrity: sha512-BUNL2isUZ2yWnbplPddggJpZxsqGHPZ1RJAYpu63W4znUnKCzI4m/jiy0WpyYqqOKL9jDM5q0QdsQ9mc3aw5YQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+    resolution: {integrity: sha512-ZtcVu+XXOddGsPlvO5nh2fnbKmwly2C07ZB1lcYCf/b8qIWF04QY9o6vy6/+6ioLRfbp3E7H/ipFio38DZX4oQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.1':
+    resolution: {integrity: sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.0':
+    resolution: {integrity: sha512-lI2bPk4TvwavHdehjr5WiC6HnZ59hacM6ySEo4RM/H7tsjWd8JpqiNW9ThH7rO/yKtrn4mGBoXshpvn8clXjPg==}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tailwindcss/vite@4.0.1':
+    resolution: {integrity: sha512-ZkwMBA7uR+nyrafIZI8ce3PduE0dDVFVmxmInCUPTN17Jgy6RfEPXzqtL5fz658eDDxKa5xZ+gmiTt+5AMD0pw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@tanstack/react-virtual@3.11.3':
     resolution: {integrity: sha512-vCU+OTylXN3hdC8RKg68tPlBPjjxtzon7Ys46MgrSLE+JhSjSTPvoQifV6DQJeJmA8Q3KT6CphJbejupx85vFw==}
     peerDependencies:
@@ -8729,9 +8816,6 @@ packages:
   arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -9106,10 +9190,6 @@ packages:
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase-keys@6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
     engines: {node: '>=8'}
@@ -9806,9 +9886,6 @@ packages:
     resolution: {integrity: sha512-3omnDTYrGigU0i4cJjvaKwD52B8aoqyX/NEIkukFFkogBemsIbhSa1O414fpTp5nuszJG6lvQ5vBvDVNCbSsaQ==}
     engines: {node: '>=0.8.0'}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -10849,10 +10926,6 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
@@ -11804,8 +11877,8 @@ packages:
       node-notifier:
         optional: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   jju@1.4.0:
@@ -11981,64 +12054,128 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.28.2:
     resolution: {integrity: sha512-R7sFrXlgKjvoEG8umpVt/yutjxOL0z8KWf0bfPT3cYMOW4470xu5qSHpFdIOpRWwl3FKNMUdbKtMUjYt0h2j4g==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-freebsd-x64@1.28.2:
     resolution: {integrity: sha512-l2qrCT+x7crAY+lMIxtgvV10R8VurzHAoUZJaVFSlHrN8kRLTvEg9ObojIDIexqWJQvJcVVV3vfzsEynpiuvgA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-linux-arm-gnueabihf@1.28.2:
     resolution: {integrity: sha512-DKMzpICBEKnL53X14rF7hFDu8KKALUJtcKdFUCW5YOlGSiwRSgVoRjM97wUm/E0NMPkzrTi/rxfvt7ruNK8meg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.28.2:
     resolution: {integrity: sha512-nhfjYkfymWZSxdtTNMWyhFk2ImUm0X7NAgJWFwnsYPOfmtWQEapzG/DXZTfEfMjSzERNUNJoQjPAbdqgB+sjiw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.28.2:
     resolution: {integrity: sha512-1SPG1ZTNnphWvAv8RVOymlZ8BDtAg69Hbo7n4QxARvkFVCJAt0cgjAw1Fox0WEhf4PwnyoOBaVH0Z5YNgzt4dA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.28.2:
     resolution: {integrity: sha512-ZhQy0FcO//INWUdo/iEdbefntTdpPVQ0XJwwtdbBuMQe+uxqZoytm9M+iqR9O5noWFaxK+nbS2iR/I80Q2Ofpg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.28.2:
     resolution: {integrity: sha512-alb/j1NMrgQmSFyzTbN1/pvMPM+gdDw7YBuQ5VSgcFDypN3Ah0BzC2dTZbzwzaMdUVDszX6zH5MzjfVN1oGuww==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-win32-arm64-msvc@1.28.2:
     resolution: {integrity: sha512-WnwcjcBeAt0jGdjlgbT9ANf30pF0C/QMb1XnLnH272DQU8QXh+kmpi24R55wmWBwaTtNAETZ+m35ohyeMiNt+g==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.28.2:
     resolution: {integrity: sha512-3piBifyT3avz22o6mDKywQC/OisH2yDK+caHWkiMsF82i3m5wDBadyCjlCQ5VNgzYkxrWZgiaxHDdd5uxsi0/A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss@1.28.2:
     resolution: {integrity: sha512-ePLRrbt3fgjXI5VFZOLbvkLD5ZRuxGKm+wJ3ujCqBtL3NanDHPo/5zicR5uEKAPiIjBYF99BM4K4okvMznjkVA==}
     engines: {node: '>= 12.0.0'}
 
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -12941,10 +13078,6 @@ packages:
     resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
     engines: {node: '>= 6'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.3:
     resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
@@ -13275,10 +13408,6 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
@@ -13319,30 +13448,6 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -13361,20 +13466,10 @@ packages:
       yaml:
         optional: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -13382,8 +13477,8 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.49:
-    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+  postcss@8.5.1:
+    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   posthog-js@1.197.0:
@@ -13702,9 +13797,6 @@ packages:
     resolution: {integrity: sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-package-json-fast@3.0.2:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -14627,24 +14719,23 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
-  tailwind-merge@2.5.4:
-    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
 
-  tailwind-variants@0.3.0:
-    resolution: {integrity: sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==}
+  tailwind-variants@1.0.0:
+    resolution: {integrity: sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}
     peerDependencies:
       tailwindcss: '*'
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.0:
+    resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.1:
+    resolution: {integrity: sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==}
+
+  tailwindcss@4.0.6:
+    resolution: {integrity: sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw==}
 
   tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
@@ -17883,11 +17974,11 @@ snapshots:
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.4.2(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.4.2(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.7.3)
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
     optionalDependencies:
       typescript: 5.7.3
 
@@ -18339,14 +18430,14 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/config-default@2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)':
+  '@parcel/config-default@2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)':
     dependencies:
       '@parcel/bundler-default': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/compressor-raw': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/core': 2.13.3(@swc/helpers@0.5.15)
       '@parcel/namer-default': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/optimizer-css': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
-      '@parcel/optimizer-htmlnano': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)
+      '@parcel/optimizer-htmlnano': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)
       '@parcel/optimizer-image': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/optimizer-svgo': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/optimizer-swc': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)
@@ -18480,12 +18571,12 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-htmlnano@2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)':
+  '@parcel/optimizer-htmlnano@2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)':
     dependencies:
       '@parcel/diagnostic': 2.13.3
       '@parcel/plugin': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))
       '@parcel/utils': 2.13.3
-      htmlnano: 2.1.1(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)
+      htmlnano: 2.1.1(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)
       nullthrows: 1.1.1
       posthtml: 0.16.6
     transitivePeerDependencies:
@@ -20143,13 +20234,13 @@ snapshots:
 
   '@stitches/core@1.2.8': {}
 
-  '@storybook/addon-a11y@8.5.0(storybook@8.5.0(prettier@3.4.2))(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@storybook/addon-a11y@8.5.0(storybook@8.5.0(prettier@3.4.2))(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@storybook/addon-highlight': 8.5.0(storybook@8.5.0(prettier@3.4.2))
       '@storybook/test': 8.5.0(storybook@8.5.0(prettier@3.4.2))
       axe-core: 4.10.2
       storybook: 8.5.0(prettier@3.4.2)
-      vitest-axe: 0.1.0(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0))
+      vitest-axe: 0.1.0(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0))
     transitivePeerDependencies:
       - vitest
 
@@ -20250,13 +20341,13 @@ snapshots:
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
 
-  '@storybook/builder-vite@8.5.0(storybook@8.5.0(prettier@3.4.2))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@storybook/builder-vite@8.5.0(storybook@8.5.0(prettier@3.4.2))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@storybook/csf-plugin': 8.5.0(storybook@8.5.0(prettier@3.4.2))
       browser-assert: 1.2.1
       storybook: 8.5.0(prettier@3.4.2)
       ts-dedent: 2.2.0
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
 
   '@storybook/cli@8.5.0(@babel/preset-env@7.26.0(@babel/core@7.26.0))(prettier@3.4.2)':
     dependencies:
@@ -20413,11 +20504,11 @@ snapshots:
       react-dom: 18.3.0(react@18.3.0)
       storybook: 8.5.0(prettier@3.4.2)
 
-  '@storybook/react-vite@8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(rollup@4.30.1)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@storybook/react-vite@8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(rollup@4.30.1)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.4.2(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.4.2(typescript@5.7.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       '@rollup/pluginutils': 5.1.4(rollup@4.30.1)
-      '@storybook/builder-vite': 8.5.0(storybook@8.5.0(prettier@3.4.2))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))
+      '@storybook/builder-vite': 8.5.0(storybook@8.5.0(prettier@3.4.2))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       '@storybook/react': 8.5.0(@storybook/test@8.5.0(storybook@8.5.0(prettier@3.4.2)))(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@3.4.2))(typescript@5.7.3)
       find-up: 5.0.0
       magic-string: 0.30.17
@@ -20427,7 +20518,7 @@ snapshots:
       resolve: 1.22.10
       storybook: 8.5.0(prettier@3.4.2)
       tsconfig-paths: 4.2.0
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
     optionalDependencies:
       '@storybook/test': 8.5.0(storybook@8.5.0(prettier@3.4.2))
     transitivePeerDependencies:
@@ -20556,13 +20647,83 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)))':
+  '@tailwindcss/node@4.0.1':
+    dependencies:
+      enhanced-resolve: 5.18.0
+      jiti: 2.4.2
+      tailwindcss: 4.0.1
+
+  '@tailwindcss/oxide-android-arm64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.1
+      '@tailwindcss/oxide-darwin-arm64': 4.0.1
+      '@tailwindcss/oxide-darwin-x64': 4.0.1
+      '@tailwindcss/oxide-freebsd-x64': 4.0.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.1
+
+  '@tailwindcss/postcss@4.0.0':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.1
+      '@tailwindcss/oxide': 4.0.1
+      lightningcss: 1.29.1
+      postcss: 8.5.1
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.6)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
+      tailwindcss: 4.0.6
+
+  '@tailwindcss/vite@4.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
+    dependencies:
+      '@tailwindcss/node': 4.0.1
+      '@tailwindcss/oxide': 4.0.1
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.1
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
 
   '@tanstack/react-virtual@3.11.3(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
@@ -21060,14 +21221,14 @@ snapshots:
       next: 14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       react: 18.3.0
 
-  '@vitejs/plugin-react@4.3.4(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@vitejs/plugin-react@4.3.4(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -21085,13 +21246,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))':
+  '@vitest/mocker@3.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@vitest/spy': 3.0.1
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -21393,8 +21554,6 @@ snapshots:
 
   arg@4.1.3: {}
 
-  arg@5.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -21521,14 +21680,14 @@ snapshots:
     dependencies:
       gulp-header: 1.8.12
 
-  autoprefixer@10.4.20(postcss@8.4.49):
+  autoprefixer@10.4.20(postcss@8.5.1):
     dependencies:
       browserslist: 4.24.3
       caniuse-lite: 1.0.30001690
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.4.49
+      postcss: 8.5.1
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -21896,8 +22055,6 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.8.1
 
-  camelcase-css@2.0.1: {}
-
   camelcase-keys@6.2.2:
     dependencies:
       camelcase: 5.3.1
@@ -22571,8 +22728,6 @@ snapshots:
 
   diacritics-map@0.1.0: {}
 
-  didyoumean@1.2.2: {}
-
   diff-sequences@29.6.3: {}
 
   diff@4.0.2: {}
@@ -23954,10 +24109,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob-to-regexp@0.4.1: {}
 
   glob@10.4.5:
@@ -24331,13 +24482,13 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  htmlnano@2.1.1(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3):
+  htmlnano@2.1.1(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.7.3)
       posthtml: 0.16.6
       timsort: 0.3.0
     optionalDependencies:
-      postcss: 8.4.49
+      postcss: 8.5.1
       terser: 5.37.0
     transitivePeerDependencies:
       - typescript
@@ -25193,7 +25344,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jiti@1.21.7: {}
+  jiti@2.4.2: {}
 
   jju@1.4.0: {}
 
@@ -25393,33 +25544,63 @@ snapshots:
   lightningcss-darwin-arm64@1.28.2:
     optional: true
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
   lightningcss-darwin-x64@1.28.2:
     optional: true
 
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
   lightningcss-freebsd-x64@1.28.2:
     optional: true
 
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.28.2:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.28.2:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.28.2:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.28.2:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
   lightningcss-linux-x64-musl@1.28.2:
     optional: true
 
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.28.2:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.28.2:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
   lightningcss@1.28.2:
     dependencies:
       detect-libc: 1.0.3
@@ -25435,6 +25616,21 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.28.2
       lightningcss-win32-x64-msvc: 1.28.2
 
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.3: {}
@@ -26785,8 +26981,6 @@ snapshots:
 
   object-hash@2.2.0: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.3: {}
 
   object-keys@1.1.1: {}
@@ -27020,9 +27214,9 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
-  parcel@2.13.3(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3):
+  parcel@2.13.3(@swc/helpers@0.5.15)(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3):
     dependencies:
-      '@parcel/config-default': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.37.0)(typescript@5.7.3)
+      '@parcel/config-default': 2.13.3(@parcel/core@2.13.3(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.5.1)(terser@5.37.0)(typescript@5.7.3)
       '@parcel/core': 2.13.3(@swc/helpers@0.5.15)
       '@parcel/diagnostic': 2.13.3
       '@parcel/events': 2.13.3
@@ -27177,8 +27371,6 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pify@2.3.0: {}
-
   pify@3.0.0: {}
 
   pify@4.0.1: {}
@@ -27218,66 +27410,20 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.4.49):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.49
-
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.7.0
-    optionalDependencies:
-      postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
-
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.7.0
-    optionalDependencies:
-      postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)
-
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.3
-      yaml: 2.7.0
     optionalDependencies:
-      postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
-
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.7.0):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 1.21.7
-      postcss: 8.4.49
+      jiti: 2.4.2
+      postcss: 8.5.1
       tsx: 4.19.2
       yaml: 2.7.0
 
-  postcss-nested@6.2.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-      postcss-selector-parser: 6.1.2
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -27286,7 +27432,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.4.49:
+  postcss@8.5.1:
     dependencies:
       nanoid: 3.3.8
       picocolors: 1.1.1
@@ -27666,10 +27812,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-package-json-fast@3.0.2:
     dependencies:
       json-parse-even-better-errors: 3.0.2
@@ -28843,98 +28985,18 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwind-merge@2.5.4: {}
+  tailwind-merge@3.0.2: {}
 
-  tailwind-variants@0.3.0(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))):
+  tailwind-variants@1.0.0(tailwindcss@4.0.6):
     dependencies:
-      tailwind-merge: 2.5.4
-      tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
+      tailwind-merge: 3.0.2
+      tailwindcss: 4.0.6
 
-  tailwind-variants@0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))):
-    dependencies:
-      tailwind-merge: 2.5.4
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
-
-  tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.0: {}
 
-  tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.1: {}
 
-  tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.6: {}
 
   tapable@1.1.3: {}
 
@@ -29165,48 +29227,6 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.10.6(@swc/helpers@0.5.15)
 
-  ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.2.5
-      acorn: 8.14.0
-      acorn-walk: 8.3.4
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.7.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optionalDependencies:
-      '@swc/core': 1.10.6(@swc/helpers@0.5.15)
-    optional: true
-
-  ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.5.1
-      acorn: 8.14.0
-      acorn-walk: 8.3.4
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.7.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optionalDependencies:
-      '@swc/core': 1.10.6(@swc/helpers@0.5.15)
-    optional: true
-
   ts-pattern@5.6.0: {}
 
   tsconfig-paths@3.15.0:
@@ -29226,7 +29246,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
+  tsup@8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
@@ -29236,7 +29256,7 @@ snapshots:
       esbuild: 0.24.2
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.7.0)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0)
       resolve-from: 5.0.0
       rollup: 4.30.1
       source-map: 0.8.0-beta.0
@@ -29246,7 +29266,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.10.6(@swc/helpers@0.5.15)
-      postcss: 8.4.49
+      postcss: 8.5.1
       typescript: 5.7.3
     transitivePeerDependencies:
       - jiti
@@ -29660,13 +29680,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@3.0.1(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0):
+  vite-node@3.0.1(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.1
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -29678,18 +29698,18 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0):
+  vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.49
+      postcss: 8.5.1
       rollup: 4.30.1
     optionalDependencies:
       '@types/node': 20.5.1
       fsevents: 2.3.3
-      lightningcss: 1.28.2
+      lightningcss: 1.29.1
       terser: 5.37.0
 
-  vitest-axe@0.1.0(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0)):
+  vitest-axe@0.1.0(vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0)):
     dependencies:
       aria-query: 5.3.2
       axe-core: 4.10.2
@@ -29697,12 +29717,12 @@ snapshots:
       dom-accessibility-api: 0.5.16
       lodash-es: 4.17.21
       redent: 3.0.0
-      vitest: 3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0)
+      vitest: 3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0)
 
-  vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.28.2)(terser@5.37.0):
+  vitest@3.0.1(@types/node@20.5.1)(jsdom@20.0.3)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       '@vitest/expect': 3.0.1
-      '@vitest/mocker': 3.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0))
+      '@vitest/mocker': 3.0.1(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0))
       '@vitest/pretty-format': 3.0.1
       '@vitest/runner': 3.0.1
       '@vitest/snapshot': 3.0.1
@@ -29718,8 +29738,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
-      vite-node: 3.0.1(@types/node@20.5.1)(lightningcss@1.28.2)(terser@5.37.0)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
+      vite-node: 3.0.1(@types/node@20.5.1)(lightningcss@1.29.1)(terser@5.37.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.5.1