@nextui-org/theme 2.2.10 → 2.3.0-beta.0

package/dist/index.js

@@ -30,6 +30,7 @@ __export(src_exports, {
   absoluteFullClasses: () => absoluteFullClasses,
   accordion: () => accordion,
   accordionItem: () => accordionItem,
+  alert: () => alert,
   autocomplete: () => autocomplete,
   avatar: () => avatar,
   avatarGroup: () => avatarGroup,
@@ -58,6 +59,7 @@ __export(src_exports, {
   dateRangePicker: () => dateRangePicker,
   defaultLayout: () => defaultLayout,
   divider: () => divider,
+  drawer: () => drawer,
   drip: () => drip,
   dropdown: () => dropdown,
   dropdownItem: () => dropdownItem,
@@ -119,7 +121,14 @@ var twMergeConfig = {
   classGroups: {
     shadow: [{ shadow: COMMON_UNITS }],
     "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-    "bg-image": ["bg-stripe-gradient"]
+    "bg-image": [
+      "bg-stripe-gradient-default",
+      "bg-stripe-gradient-primary",
+      "bg-stripe-gradient-secondary",
+      "bg-stripe-gradient-success",
+      "bg-stripe-gradient-warning",
+      "bg-stripe-gradient-danger"
+    ]
   }
 };
 
@@ -223,11 +232,11 @@ var bordered = {
 };
 var flat = {
   default: "bg-default/40 text-default-700",
-  primary: "bg-primary/20 text-primary-700",
-  secondary: "bg-secondary/20 text-secondary-700",
-  success: "bg-success/20 text-success-800 dark:text-success",
-  warning: "bg-warning/20 text-warning-800 dark:text-warning",
-  danger: "bg-danger/20 text-danger-800 dark:text-danger-500",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
   foreground: "bg-foreground/10 text-foreground"
 };
 var faded = {
@@ -270,7 +279,7 @@ var colorVariants = {
 // src/utils/cn.ts
 var import_clsx = __toESM(require("clsx"));
 var import_tailwind_merge = require("tailwind-merge");
-var twMerge = (0, import_tailwind_merge.extendTailwindMerge)(twMergeConfig);
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({ extend: twMergeConfig });
 function cn(...inputs) {
   return twMerge((0, import_clsx.default)(inputs));
 }
@@ -1008,7 +1017,10 @@ var button = tv({
     {
       variant: "ghost",
       color: "danger",
-      class: [colorVariants.ghost.danger, "data-[hover=true]:!bg-danger !text-danger-foreground"]
+      class: [
+        colorVariants.ghost.danger,
+        "data-[hover=true]:!bg-danger data-[hover=true]:!text-danger-foreground"
+      ]
     },
     {
       isInGroup: true,
@@ -2583,7 +2595,7 @@ var badge = tv({
 // src/components/checkbox.ts
 var checkbox = tv({
   slots: {
-    base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2604,12 +2616,12 @@ var checkbox = tv({
       "after:scale-50",
       "after:opacity-0",
       "after:origin-center",
-      "group-data-[selected=true]/checkbox:after:scale-100",
-      "group-data-[selected=true]/checkbox:after:opacity-100",
-      "group-data-[hover=true]/checkbox:before:bg-default-100",
+      "group-data-[selected=true]:after:scale-100",
+      "group-data-[selected=true]:after:opacity-100",
+      "group-data-[hover=true]:before:bg-default-100",
       ...groupDataFocusVisibleClasses
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
     label: "relative text-foreground select-none"
   },
   variants: {
@@ -2636,7 +2648,7 @@ var checkbox = tv({
     size: {
       sm: {
         wrapper: [
-          "w-4 h-4 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "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)]"
@@ -2646,7 +2658,7 @@ var checkbox = tv({
       },
       md: {
         wrapper: [
-          "w-5 h-5 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "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)]"
@@ -2656,7 +2668,7 @@ var checkbox = tv({
       },
       lg: {
         wrapper: [
-          "w-6 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "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)]"
@@ -2705,8 +2717,8 @@ var checkbox = tv({
           "before:bg-foreground",
           "before:w-0",
           "before:h-0.5",
-          "group-data-[selected=true]/checkbox:opacity-60",
-          "group-data-[selected=true]/checkbox:before:w-full"
+          "group-data-[selected=true]:opacity-60",
+          "group-data-[selected=true]:before:w-full"
         ]
       }
     },
@@ -2730,7 +2742,7 @@ var checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]/checkbox:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",
@@ -2784,7 +2796,7 @@ var checkboxGroup = tv({
 // src/components/radio.ts
 var radio = tv({
   slots: {
-    base: "group/radio relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2797,7 +2809,7 @@ var radio = tv({
       "box-border",
       "border-default",
       "rounded-full",
-      "group-data-[hover-unselected=true]/radio:bg-default-100",
+      "group-data-[hover-unselected=true]:bg-default-100",
       ...groupDataFocusVisibleClasses
     ],
     labelWrapper: "flex flex-col ml-1",
@@ -2809,8 +2821,8 @@ var radio = tv({
       "scale-0",
       "origin-center",
       "rounded-full",
-      "group-data-[selected=true]/radio:opacity-100",
-      "group-data-[selected=true]/radio:scale-100"
+      "group-data-[selected=true]:opacity-100",
+      "group-data-[selected=true]:scale-100"
     ],
     label: "relative text-foreground select-none",
     description: "relative text-foreground-400"
@@ -2819,27 +2831,27 @@ var radio = tv({
     color: {
       default: {
         control: "bg-default-500 text-default-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-default-500"
+        wrapper: "group-data-[selected=true]:border-default-500"
       },
       primary: {
         control: "bg-primary text-primary-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-primary"
+        wrapper: "group-data-[selected=true]:border-primary"
       },
       secondary: {
         control: "bg-secondary text-secondary-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-secondary"
+        wrapper: "group-data-[selected=true]:border-secondary"
       },
       success: {
         control: "bg-success text-success-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-success"
+        wrapper: "group-data-[selected=true]:border-success"
       },
       warning: {
         control: "bg-warning text-warning-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-warning"
+        wrapper: "group-data-[selected=true]:border-warning"
       },
       danger: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-danger"
+        wrapper: "group-data-[selected=true]:border-danger"
       }
     },
     size: {
@@ -2853,14 +2865,14 @@ var radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-medium",
         description: "text-small"
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-large",
         description: "text-medium"
       }
@@ -2873,7 +2885,7 @@ var radio = tv({
     isInvalid: {
       true: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "border-danger group-data-[selected=true]/radio:border-danger",
+        wrapper: "border-danger group-data-[selected=true]:border-danger",
         label: "text-danger",
         description: "text-danger-300"
       }
@@ -2882,7 +2894,7 @@ var radio = tv({
       true: {},
       false: {
         wrapper: [
-          "group-data-[pressed=true]/radio:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform-colors",
           "motion-reduce:transition-none"
         ],
@@ -3331,7 +3343,7 @@ var pagination = tv({
 // src/components/toggle.ts
 var toggle = tv({
   slots: {
-    base: "group/toggle relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
     wrapper: [
       "px-1",
       "relative",
@@ -3354,76 +3366,76 @@ var toggle = tv({
       "rounded-full",
       "origin-right"
     ],
-    startContent: "z-0 absolute left-1.5 rtl:right-1.5 rtl:left-[unset] text-current",
-    endContent: "z-0 absolute right-1.5 rtl:left-1.5 rtl:right-[unset] text-default-600",
+    startContent: "z-0 absolute start-1.5 text-current",
+    endContent: "z-0 absolute end-1.5 text-default-600",
     thumbIcon: "text-black",
-    label: "relative text-foreground select-none"
+    label: "relative text-foreground select-none ms-2"
   },
   variants: {
     color: {
       default: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-default-400",
-          "group-data-[selected=true]/toggle:text-default-foreground"
+          "group-data-[selected=true]:bg-default-400",
+          "group-data-[selected=true]:text-default-foreground"
         ]
       },
       primary: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-primary",
-          "group-data-[selected=true]/toggle:text-primary-foreground"
+          "group-data-[selected=true]:bg-primary",
+          "group-data-[selected=true]:text-primary-foreground"
         ]
       },
       secondary: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-secondary",
-          "group-data-[selected=true]/toggle:text-secondary-foreground"
+          "group-data-[selected=true]:bg-secondary",
+          "group-data-[selected=true]:text-secondary-foreground"
         ]
       },
       success: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-success",
-          "group-data-[selected=true]/toggle:text-success-foreground"
+          "group-data-[selected=true]:bg-success",
+          "group-data-[selected=true]:text-success-foreground"
         ]
       },
       warning: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-warning",
-          "group-data-[selected=true]/toggle:text-warning-foreground"
+          "group-data-[selected=true]:bg-warning",
+          "group-data-[selected=true]:text-warning-foreground"
         ]
       },
       danger: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-danger",
+          "group-data-[selected=true]:bg-danger",
           "data-[selected=true]:text-danger-foreground"
         ]
       }
     },
     size: {
       sm: {
-        wrapper: "w-10 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-10 h-6",
         thumb: [
           "w-4 h-4 text-tiny",
-          "group-data-[selected=true]/toggle:ml-4 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-4"
+          "group-data-[selected=true]:ms-4"
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
         label: "text-small"
       },
       md: {
-        wrapper: "w-12 h-7 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-12 h-7",
         thumb: [
           "w-5 h-5 text-small",
-          "group-data-[selected=true]/toggle:ml-5 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-5"
+          "group-data-[selected=true]:ms-5"
         ],
         endContent: "text-small",
         startContent: "text-small",
         label: "text-medium"
       },
       lg: {
-        wrapper: "w-14 h-8 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-14 h-8",
         thumb: [
           "w-6 h-6 text-medium",
-          "group-data-[selected=true]/toggle:ml-6 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-6"
+          "group-data-[selected=true]:ms-6"
         ],
         endContent: "text-medium",
         startContent: "text-medium",
@@ -3447,14 +3459,14 @@ var toggle = tv({
           "opacity-0",
           "scale-50",
           "transition-transform-opacity",
-          "group-data-[selected=true]/toggle:scale-100",
-          "group-data-[selected=true]/toggle:opacity-100"
+          "group-data-[selected=true]:scale-100",
+          "group-data-[selected=true]:opacity-100"
         ],
         endContent: [
           "opacity-100",
           "transition-transform-opacity",
-          "group-data-[selected=true]/toggle:translate-x-3",
-          "group-data-[selected=true]/toggle:opacity-0"
+          "group-data-[selected=true]:translate-x-3",
+          "group-data-[selected=true]:opacity-0"
         ]
       }
     }
@@ -3469,30 +3481,21 @@ var toggle = tv({
       disableAnimation: false,
       size: "sm",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-5",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-3"
-        ]
+        thumb: ["group-data-[pressed=true]:w-5", "group-data-[selected]:group-data-[pressed]:ml-3"]
       }
     },
     {
       disableAnimation: false,
       size: "md",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-6",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-4"
-        ]
+        thumb: ["group-data-[pressed=true]:w-6", "group-data-[selected]:group-data-[pressed]:ml-4"]
       }
     },
     {
       disableAnimation: false,
       size: "lg",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-5"
-        ]
+        thumb: ["group-data-[pressed=true]:w-7", "group-data-[selected]:group-data-[pressed]:ml-5"]
       }
     }
   ]
@@ -3657,7 +3660,7 @@ var progress = tv(
       },
       isStriped: {
         true: {
-          indicator: "bg-stripe-gradient bg-[length:1.25rem_1.25rem]"
+          indicator: "bg-stripe-gradient-default bg-stripe-size"
         }
       },
       isIndeterminate: {
@@ -3692,6 +3695,41 @@ var progress = tv(
         class: {
           indicator: "!transition-none motion-reduce:transition-none"
         }
+      },
+      {
+        color: "primary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-primary bg-stripe-size"
+        }
+      },
+      {
+        color: "secondary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-secondary bg-stripe-size"
+        }
+      },
+      {
+        color: "success",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-success bg-stripe-size"
+        }
+      },
+      {
+        color: "warning",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-warning bg-stripe-size"
+        }
+      },
+      {
+        color: "danger",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-danger bg-stripe-size"
+        }
       }
     ]
   },
@@ -3785,7 +3823,7 @@ var circularProgress = tv({
 // src/components/input.ts
 var input = tv({
   slots: {
-    base: "group/input flex flex-col data-[hidden=true]:hidden",
+    base: "group flex flex-col data-[hidden=true]:hidden",
     label: [
       "absolute",
       "z-10",
@@ -3825,7 +3863,7 @@ var input = tv({
       "rounded-full",
       ...dataFocusVisibleClasses
     ],
-    helperWrapper: "hidden group-data-[has-helper=true]/input:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -3835,7 +3873,7 @@ var input = tv({
         inputWrapper: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]/input:bg-default-100"
+          "group-data-[focus=true]:bg-default-100"
         ]
       },
       faded: {
@@ -3845,14 +3883,14 @@ var input = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400"
         ],
-        value: "group-data-[has-value=true]/input:text-default-foreground"
+        value: "group-data-[has-value=true]:text-default-foreground"
       },
       bordered: {
         inputWrapper: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]/input:border-default-foreground"
+          "group-data-[focus=true]:border-default-foreground"
         ]
       },
       underlined: {
@@ -3876,10 +3914,10 @@ var input = tv({
           "after:-translate-x-1/2",
           "after:-bottom-[2px]",
           "after:h-[2px]",
-          "group-data-[focus=true]/input:after:w-full"
+          "group-data-[focus=true]:after:w-full"
         ],
         innerWrapper: "pb-1",
-        label: "group-data-[filled-within=true]/input:text-foreground"
+        label: "group-data-[filled-within=true]:text-foreground"
       }
     },
     color: {
@@ -3938,17 +3976,18 @@ var input = tv({
       inside: {
         label: "text-tiny cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0",
-        innerWrapper: "group-data-[has-label=true]/input:items-end"
+        innerWrapper: "group-data-[has-label=true]:items-end"
       }
     },
     fullWidth: {
       true: {
         base: "w-full"
-      }
+      },
+      false: {}
     },
     isClearable: {
       true: {
-        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
+        input: "peer pe-6 input-search-cancel-button-none",
         clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block"
       }
     },
@@ -3967,14 +4006,14 @@ var input = tv({
     },
     isRequired: {
       true: {
-        label: "after:content-['*'] after:text-danger after:ml-0.5 rtl:after:ml-[unset] rtl:after:mr-0.5"
+        label: "after:content-['*'] after:text-danger after:ms-0.5"
       }
     },
     isMultiline: {
       true: {
         label: "relative",
         inputWrapper: "!h-auto",
-        innerWrapper: "items-start group-data-[has-label=true]/input:items-start",
+        innerWrapper: "items-start group-data-[has-label=true]:items-start",
         input: "resize-none data-[hide-scroll=true]:scrollbar-hide"
       }
     },
@@ -4011,7 +4050,7 @@ var input = tv({
       variant: "flat",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]/input:text-default-foreground"
+        input: "group-data-[has-value=true]:text-default-foreground"
       }
     },
     {
@@ -4022,7 +4061,7 @@ var input = tv({
           "bg-primary-50",
           "data-[hover=true]:bg-primary-100",
           "text-primary",
-          "group-data-[focus=true]/input:bg-primary-50",
+          "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary"
         ],
         input: "placeholder:text-primary",
@@ -4037,7 +4076,7 @@ var input = tv({
           "bg-secondary-50",
           "text-secondary",
           "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]/input:bg-secondary-50",
+          "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary"
         ],
         input: "placeholder:text-secondary",
@@ -4055,7 +4094,7 @@ var input = tv({
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
           "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]/input:bg-success-50"
+          "group-data-[focus=true]:bg-success-50"
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
         label: "text-success-600 dark:text-success"
@@ -4072,7 +4111,7 @@ var input = tv({
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
           "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]/input:bg-warning-50"
+          "group-data-[focus=true]:bg-warning-50"
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
         label: "text-warning-600 dark:text-warning"
@@ -4089,7 +4128,7 @@ var input = tv({
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]/input:bg-danger-50"
+          "group-data-[focus=true]:bg-danger-50"
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",
         label: "text-danger dark:text-danger-500"
@@ -4139,7 +4178,7 @@ var input = tv({
       variant: "underlined",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]/input:text-foreground"
+        input: "group-data-[has-value=true]:text-foreground"
       }
     },
     {
@@ -4186,7 +4225,7 @@ var input = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-primary",
+        inputWrapper: "group-data-[focus=true]:border-primary",
         label: "text-primary"
       }
     },
@@ -4194,7 +4233,7 @@ var input = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-secondary",
+        inputWrapper: "group-data-[focus=true]:border-secondary",
         label: "text-secondary"
       }
     },
@@ -4202,7 +4241,7 @@ var input = tv({
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-success",
+        inputWrapper: "group-data-[focus=true]:border-success",
         label: "text-success"
       }
     },
@@ -4210,7 +4249,7 @@ var input = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-warning",
+        inputWrapper: "group-data-[focus=true]:border-warning",
         label: "text-warning"
       }
     },
@@ -4218,7 +4257,7 @@ var input = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-danger",
+        inputWrapper: "group-data-[focus=true]:border-danger",
         label: "text-danger"
       }
     },
@@ -4226,14 +4265,14 @@ var input = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]/input:text-default-600"
+        label: "group-data-[filled-within=true]:text-default-600"
       }
     },
     {
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]/input:text-foreground"
+        label: "group-data-[filled-within=true]:text-foreground"
       }
     },
     {
@@ -4286,7 +4325,7 @@ var input = tv({
         inputWrapper: [
           "!bg-danger-50",
           "data-[hover=true]:!bg-danger-100",
-          "group-data-[focus=true]/input:!bg-danger-50"
+          "group-data-[focus=true]:!bg-danger-50"
         ]
       }
     },
@@ -4294,7 +4333,7 @@ var input = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        inputWrapper: "!border-danger group-data-[focus=true]/input:!border-danger"
+        inputWrapper: "!border-danger group-data-[focus=true]:!border-danger"
       }
     },
     {
@@ -4337,7 +4376,7 @@ var input = tv({
     {
       labelPlacement: ["inside", "outside"],
       class: {
-        label: ["group-data-[filled-within=true]/input:pointer-events-auto"]
+        label: ["group-data-[filled-within=true]:pointer-events-auto"]
       }
     },
     {
@@ -4350,14 +4389,14 @@ var input = tv({
           "z-20",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled-within=true]/input:start-0"
+          "group-data-[filled-within=true]:start-0"
         ]
       }
     },
     {
       labelPlacement: ["inside"],
       class: {
-        label: ["group-data-[filled-within=true]/input:scale-85"]
+        label: ["group-data-[filled-within=true]:scale-85"]
       }
     },
     {
@@ -4394,7 +4433,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
         ]
       }
     },
@@ -4404,7 +4443,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ]
       }
     },
@@ -4415,7 +4454,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ]
       }
     },
@@ -4426,7 +4465,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4437,7 +4476,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4449,7 +4488,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4460,7 +4499,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
         ]
       }
     },
@@ -4471,7 +4510,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
         ]
       }
     },
@@ -4483,7 +4522,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
         ]
       }
     },
@@ -4495,7 +4534,7 @@ var input = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
@@ -4509,7 +4548,7 @@ var input = tv({
           "start-3",
           "end-auto",
           "text-small",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
@@ -4523,7 +4562,7 @@ var input = tv({
           "start-3",
           "end-auto",
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
@@ -4532,21 +4571,21 @@ var input = tv({
       labelPlacement: "outside-left",
       size: "sm",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-2"
+        label: "group-data-[has-helper=true]:pt-2"
       }
     },
     {
       labelPlacement: "outside-left",
       size: "md",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-3"
+        label: "group-data-[has-helper=true]:pt-3"
       }
     },
     {
       labelPlacement: "outside-left",
       size: "lg",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-4"
+        label: "group-data-[has-helper=true]:pt-4"
       }
     },
     {
@@ -5116,9 +5155,7 @@ var modal = tv({
       "outline-none",
       "select-none",
       "top-1",
-      "right-1",
-      "rtl:left-1",
-      "rtl:right-[unset]",
+      "end-1",
       "p-2",
       "text-foreground-500",
       "rounded-full",
@@ -5469,9 +5506,9 @@ var table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "",
-    tr: ["group", "outline-none", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-none", ...dataFocusVisibleClasses],
     th: [
-      "group",
+      "group/th",
       "px-3",
       "h-10",
       "text-start",
@@ -5506,8 +5543,8 @@ var table = tv({
       "before:inset-0",
       "before:opacity-0",
       "data-[selected=true]:before:opacity-100",
-      "group-data-[disabled=true]:text-foreground-300",
-      "group-data-[disabled=true]:cursor-not-allowed"
+      "group-data-[disabled=true]/tr:text-foreground-300",
+      "group-data-[disabled=true]/tr:cursor-not-allowed"
     ],
     tfoot: "",
     sortIcon: [
@@ -5518,7 +5555,7 @@ var table = tv({
       "inline-block",
       "transition-transform-opacity",
       "data-[visible=true]:opacity-100",
-      "group-data-[hover=true]:opacity-100",
+      "group-data-[hover=true]/th:opacity-100",
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-foreground-400 align-middle text-center h-40",
@@ -5589,9 +5626,9 @@ var table = tv({
     isStriped: {
       true: {
         td: [
-          "group-data-[odd=true]:before:bg-default-100",
-          "group-data-[odd=true]:before:opacity-100",
-          "group-data-[odd=true]:before:-z-10"
+          "group-data-[odd=true]/tr:before:bg-default-100",
+          "group-data-[odd=true]/tr:before:opacity-100",
+          "group-data-[odd=true]/tr:before:-z-10"
         ]
       }
     },
@@ -5610,19 +5647,19 @@ var table = tv({
       true: {
         tr: "cursor-default",
         td: [
-          "group-aria-[selected=false]:group-data-[hover=true]:before:bg-default-100",
-          "group-aria-[selected=false]:group-data-[hover=true]:before:opacity-70"
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100",
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70"
         ]
       }
     },
     isMultiSelectable: {
       true: {
         td: [
-          "group-data-[first=true]:first:before:rounded-ts-lg",
-          "group-data-[first=true]:last:before:rounded-te-lg",
-          "group-data-[middle=true]:before:rounded-none",
-          "group-data-[last=true]:first:before:rounded-bs-lg",
-          "group-data-[last=true]:last:before:rounded-be-lg"
+          "group-data-[first=true]/tr:first:before:rounded-ts-lg",
+          "group-data-[first=true]/tr:last:before:rounded-te-lg",
+          "group-data-[middle=true]/tr:before:rounded-none",
+          "group-data-[last=true]/tr:first:before:rounded-bs-lg",
+          "group-data-[last=true]/tr:last:before:rounded-be-lg"
         ]
       },
       false: {
@@ -5667,42 +5704,42 @@ var table = tv({
       isStriped: true,
       color: "default",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-default/60"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60"
       }
     },
     {
       isStriped: true,
       color: "primary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-primary/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20"
       }
     },
     {
       isStriped: true,
       color: "secondary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-secondary/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20"
       }
     },
     {
       isStriped: true,
       color: "success",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-success/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20"
       }
     },
     {
       isStriped: true,
       color: "warning",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-warning/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20"
       }
     },
     {
       isStriped: true,
       color: "danger",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-danger/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20"
       }
     }
   ]
@@ -6198,7 +6235,7 @@ var skeleton = tv({
 // src/components/select.ts
 var select = tv({
   slots: {
-    base: ["group/select inline-flex flex-col relative w-full"],
+    base: ["group inline-flex flex-col relative"],
     label: [
       "block",
       "absolute",
@@ -6215,7 +6252,7 @@ var select = tv({
     innerWrapper: "inline-flex h-full 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-left", "rtl:text-right"],
+    value: ["text-foreground-500", "font-normal", "w-full", "text-start"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -6229,7 +6266,7 @@ var select = tv({
         trigger: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]/select:bg-default-100"
+          "group-data-[focus=true]:bg-default-100"
         ]
       },
       faded: {
@@ -6240,7 +6277,7 @@ var select = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400"
         ],
-        value: "group-data-[has-value=true]/select:text-default-foreground"
+        value: "group-data-[has-value=true]:text-default-foreground"
       },
       bordered: {
         trigger: [
@@ -6277,7 +6314,7 @@ var select = tv({
           "data-[open=true]:after:w-full",
           "data-[focus=true]:after:w-full"
         ],
-        value: "group-data-[has-value=true]/select:text-default-foreground"
+        value: "group-data-[has-value=true]:text-default-foreground"
       }
     },
     color: {
@@ -6336,6 +6373,9 @@ var select = tv({
     fullWidth: {
       true: {
         base: "w-full"
+      },
+      false: {
+        base: "min-w-40"
       }
     },
     isDisabled: {
@@ -6408,7 +6448,7 @@ var select = tv({
       variant: "flat",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]/select:text-default-foreground",
+        value: "group-data-[has-value=true]:text-default-foreground",
         trigger: ["bg-default-100", "data-[hover=true]:bg-default-50"]
       }
     },
@@ -6420,7 +6460,7 @@ var select = tv({
           "bg-primary-100",
           "text-primary",
           "data-[hover=true]:bg-primary-50",
-          "group-data-[focus=true]/select:bg-primary-50"
+          "group-data-[focus=true]:bg-primary-50"
         ],
         value: "text-primary",
         label: "text-primary"
@@ -6434,7 +6474,7 @@ var select = tv({
           "bg-secondary-100",
           "text-secondary",
           "data-[hover=true]:bg-secondary-50",
-          "group-data-[focus=true]/select:bg-secondary-50"
+          "group-data-[focus=true]:bg-secondary-50"
         ],
         value: "text-secondary",
         label: "text-secondary"
@@ -6449,7 +6489,7 @@ var select = tv({
           "text-success-600",
           "dark:text-success",
           "data-[hover=true]:bg-success-50",
-          "group-data-[focus=true]/select:bg-success-50"
+          "group-data-[focus=true]:bg-success-50"
         ],
         value: "text-success-600 dark:text-success",
         label: "text-success-600 dark:text-success"
@@ -6464,7 +6504,7 @@ var select = tv({
           "text-warning-600",
           "dark:text-warning",
           "data-[hover=true]:bg-warning-50",
-          "group-data-[focus=true]/select:bg-warning-50"
+          "group-data-[focus=true]:bg-warning-50"
         ],
         value: "text-warning-600 dark:text-warning",
         label: "text-warning-600 dark:text-warning"
@@ -6479,7 +6519,7 @@ var select = tv({
           "text-danger",
           "dark:text-danger-500",
           "data-[hover=true]:bg-danger-50",
-          "group-data-[focus=true]/select:bg-danger-50"
+          "group-data-[focus=true]:bg-danger-50"
         ],
         value: "text-danger dark:text-danger-500",
         label: "text-danger dark:text-danger-500"
@@ -6529,7 +6569,7 @@ var select = tv({
       variant: "underlined",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]/select:text-foreground"
+        value: "group-data-[has-value=true]:text-foreground"
       }
     },
     {
@@ -6616,14 +6656,14 @@ var select = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]/select:text-default-600"
+        label: "group-data-[filled=true]:text-default-600"
       }
     },
     {
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]/select:text-foreground"
+        label: "group-data-[filled=true]:text-foreground"
       }
     },
     {
@@ -6676,7 +6716,7 @@ var select = tv({
         trigger: [
           "bg-danger-50",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]/select:bg-danger-50"
+          "group-data-[focus=true]:bg-danger-50"
         ]
       }
     },
@@ -6684,7 +6724,7 @@ var select = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        trigger: "!border-danger group-data-[focus=true]/select:border-danger"
+        trigger: "!border-danger group-data-[focus=true]:border-danger"
       }
     },
     {
@@ -6721,19 +6761,13 @@ var select = tv({
       isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "pb-0",
-          "z-20",
-          "top-1/2",
-          "-translate-y-1/2",
-          "group-data-[filled=true]/select:start-0"
-        ]
+        label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"]
       }
     },
     {
       labelPlacement: ["inside"],
       class: {
-        label: "group-data-[filled=true]/select:scale-85"
+        label: "group-data-[filled=true]:scale-85"
       }
     },
     {
@@ -6748,10 +6782,8 @@ var select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
-        ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-4"
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
+        innerWrapper: "group-data-[has-label=true]:pt-4"
       }
     },
     {
@@ -6760,9 +6792,9 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-4"
+        innerWrapper: "group-data-[has-label=true]:pt-4"
       }
     },
     {
@@ -6772,9 +6804,9 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-5"
+        innerWrapper: "group-data-[has-label=true]:pt-5"
       }
     },
     {
@@ -6784,7 +6816,7 @@ var select = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6795,7 +6827,7 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6807,7 +6839,7 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6817,9 +6849,7 @@ var select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
-        ]
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"]
       }
     },
     {
@@ -6829,7 +6859,7 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
         ]
       }
     },
@@ -6841,7 +6871,7 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
         ]
       }
     },
@@ -6853,7 +6883,7 @@ var select = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
@@ -6866,7 +6896,7 @@ var select = tv({
         label: [
           "start-3",
           "text-small",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
@@ -6879,7 +6909,7 @@ var select = tv({
         label: [
           "start-3",
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
@@ -7784,7 +7814,7 @@ var breadcrumbItem = tv({
       "tap-highlight-transparent",
       ...dataFocusVisibleClasses
     ],
-    separator: "text-default-400 px-1"
+    separator: "text-default-400 px-1 rtl:rotate-180"
   },
   variants: {
     color: {
@@ -8005,7 +8035,7 @@ var breadcrumbs = tv({
 // src/components/autocomplete.ts
 var autocomplete = tv({
   slots: {
-    base: "group/autocomplete inline-flex flex-column w-full",
+    base: "group inline-flex flex-column w-full",
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -8017,14 +8047,14 @@ var autocomplete = tv({
       "opacity-0",
       "pointer-events-none",
       "text-default-500",
-      "group-data-[invalid=true]/autocomplete:text-danger",
+      "group-data-[invalid=true]:text-danger",
       "data-[visible=true]:opacity-100",
       "data-[visible=true]:pointer-events-auto",
       "data-[visible=true]:cursor-pointer",
       "sm:data-[visible=true]:opacity-0",
       "sm:data-[visible=true]:pointer-events-none",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto"
+      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto"
     ],
     selectorButton: "text-medium"
   },
@@ -8449,11 +8479,11 @@ var calendar = tv({
 // src/components/date-input.ts
 var dateInput = tv({
   slots: {
-    base: "group/dateinput flex flex-col",
+    base: "group flex flex-col",
     label: [
       "block subpixel-antialiased text-small text-default-600",
-      "group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
-      "group-data-[invalid=true]/dateinput:text-danger"
+      "group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
+      "group-data-[invalid=true]:text-danger"
     ],
     inputWrapper: [
       "relative px-3 gap-3 w-full inline-flex flex-row items-center",
@@ -8462,10 +8492,10 @@ var dateInput = tv({
     input: "flex h-full gap-x-0.5 w-full font-normal",
     innerWrapper: [
       "flex items-center text-default-400 w-full gap-x-2 h-6",
-      "group-data-[invalid=true]/dateinput:text-danger"
+      "group-data-[invalid=true]:text-danger"
     ],
     segment: [
-      "group/dateinput first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
+      "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",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
@@ -8473,7 +8503,7 @@ var dateInput = tv({
       "data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
       "data-[invalid=true]:data-[editable=true]:focus:text-danger"
     ],
-    helperWrapper: "hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -8484,9 +8514,9 @@ var dateInput = tv({
           "bg-default-100",
           "hover:bg-default-200",
           "focus-within:hover:bg-default-100",
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50"
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50"
         ]
       },
       faded: {
@@ -8495,9 +8525,9 @@ var dateInput = tv({
           "border-medium",
           "border-default-200",
           "hover:border-default-400",
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50"
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50"
         ]
       },
       bordered: {
@@ -8507,9 +8537,9 @@ var dateInput = tv({
           "hover:border-default-400",
           "focus-within:border-default-foreground",
           "focus-within:hover:border-default-foreground",
-          "group-data-[invalid=true]/dateinput:border-danger",
-          "group-data-[invalid=true]/dateinput:hover:border-danger",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:border-danger"
+          "group-data-[invalid=true]:border-danger",
+          "group-data-[invalid=true]:hover:border-danger",
+          "group-data-[invalid=true]:focus-within:hover:border-danger"
         ]
       },
       underlined: {
@@ -8534,7 +8564,7 @@ var dateInput = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "focus-within:after:w-full",
-          "group-data-[invalid=true]/dateinput:after:bg-danger"
+          "group-data-[invalid=true]:after:bg-danger"
         ]
       }
     },
@@ -8595,13 +8625,13 @@ var dateInput = tv({
       outside: {
         base: "flex flex-col data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+8px)] gap-y-1.5",
         label: "w-full text-foreground",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0"
+        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",
         label: "relative text-foreground",
         inputWrapper: "relative flex-1",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0"
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0"
       },
       inside: {
         label: "w-full text-tiny cursor-text",
@@ -8831,8 +8861,8 @@ var dateInput = tv({
 // src/components/date-picker.ts
 var datePicker = tv({
   slots: {
-    base: "group/datepicker w-full",
-    selectorButton: "-mr-2 text-inherit",
+    base: "group w-full",
+    selectorButton: "-mx-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
     calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
@@ -8844,13 +8874,274 @@ var datePicker = tv({
 var dateRangePicker = tv({
   extend: datePicker,
   slots: {
-    calendar: "group/daterangepicker",
+    calendar: "group",
     bottomContent: "flex flex-col gap-y-2",
-    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
+    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
     separator: "-mx-1 text-inherit"
   }
 });
 
+// src/components/alert.ts
+var alert = tv({
+  slots: {
+    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
+    mainWrapper: [
+      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
+    ],
+    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
+    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    closeButton: "relative text-inherit",
+    alertIcon: "fill-current w-6"
+  },
+  variants: {
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    variant: {
+      solid: {},
+      flat: {},
+      bordered: {
+        base: "border-medium bg-transparent"
+      }
+    },
+    radius: {
+      none: {
+        base: "rounded-none"
+      },
+      sm: {
+        base: "rounded-small"
+      },
+      md: {
+        base: "rounded-medium"
+      },
+      lg: {
+        base: "rounded-large"
+      },
+      full: {
+        base: "rounded-full"
+      }
+    },
+    hasDescription: {
+      true: {
+        alertIcon: "mt-0.5"
+      },
+      false: {
+        base: "items-center",
+        mainWrapper: "justify-center"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "flat",
+    radius: "md"
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        base: colorVariants.solid.default,
+        closeButton: "data-[hover]:bg-default-100",
+        alertIcon: "text-default-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: colorVariants.solid.primary
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: colorVariants.solid.secondary
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: colorVariants.solid.success
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: colorVariants.solid.warning
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: colorVariants.solid.danger
+      }
+    },
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        base: [colorVariants.flat.default, "text-default-foreground"],
+        description: "text-default-600",
+        closeButton: "text-default-400"
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        base: colorVariants.flat.primary,
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        base: colorVariants.flat.secondary,
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        base: colorVariants.flat.success,
+        closeButton: "text-success-400 data-[hover]:bg-success-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        base: colorVariants.flat.warning,
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+      }
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        base: colorVariants.flat.danger,
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        base: [colorVariants.bordered.default],
+        description: "text-default-600",
+        closeButton: "text-default-400"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: [colorVariants.bordered.primary],
+        closeButton: "data-[hover]:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: [colorVariants.bordered.secondary],
+        closeButton: "data-[hover]:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: [colorVariants.bordered.success],
+        closeButton: "data-[hover]:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: [colorVariants.bordered.warning],
+        closeButton: "data-[hover]:bg-warning-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: [colorVariants.bordered.danger],
+        closeButton: "data-[hover]:bg-danger-50"
+      }
+    }
+  ]
+});
+
+// src/components/drawer.ts
+var drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]"
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]"
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]"
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]"
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]"
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]"
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]"
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]"
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]"
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none"
+      }
+    },
+    placement: {
+      top: {
+        base: "inset-x-0 top-0 max-w-[none] rounded-t-none"
+      },
+      right: {
+        base: "inset-y-0 right-0 max-h-[none] rounded-r-none"
+      },
+      bottom: {
+        base: "inset-x-0 bottom-0 max-w-[none] rounded-b-none"
+      },
+      left: {
+        base: "inset-y-0 left-0 max-h-[none] rounded-l-none"
+      }
+    }
+  }
+});
+
 // src/colors/blue.ts
 var blue = {
   50: "#e6f1fe",
@@ -9167,12 +9458,8 @@ var colors = {
 // src/plugin.ts
 var import_color = __toESM(require("color"));
 var import_plugin = __toESM(require("tailwindcss/plugin.js"));
-var import_lodash = __toESM(require("lodash.get"));
-var import_lodash2 = __toESM(require("lodash.omit"));
-var import_lodash3 = __toESM(require("lodash.foreach"));
-var import_lodash4 = __toESM(require("lodash.mapkeys"));
-var import_lodash5 = __toESM(require("lodash.kebabcase"));
 var import_deepmerge = __toESM(require("deepmerge"));
+var import_shared_utils = require("@nextui-org/shared-utils");
 
 // src/animations/index.ts
 var animations = {
@@ -9316,6 +9603,11 @@ var custom_default = {
   },
   ".tap-highlight-transparent": {
     "-webkit-tap-highlight-color": "transparent"
+  },
+  ".input-search-cancel-button-none": {
+    "&::-webkit-search-cancel-button": {
+      "-webkit-appearance": "none"
+    }
   }
 };
 
@@ -9410,7 +9702,7 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
       "color-scheme": scheme
     } : {};
     const flatColors = flattenThemeObject(colors2);
-    const flatLayout = layout ? (0, import_lodash4.default)(layout, (value, key) => (0, import_lodash5.default)(key)) : {};
+    const flatLayout = layout ? (0, import_shared_utils.mapKeys)(layout, (_, key) => (0, import_shared_utils.kebabCase)(key)) : {};
     resolved.variants.push({
       name: themeName,
       definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
@@ -9460,6 +9752,7 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
 };
 var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
   const resolved = resolveConfig(themes, defaultTheme, prefix);
+  const createStripeGradient = (stripeColor, backgroundColor) => `linear-gradient(45deg,  hsl(var(--${prefix}-${stripeColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})))`;
   return (0, import_plugin.default)(
     ({ addBase, addUtilities, addVariant }) => {
       addBase({
@@ -9518,8 +9811,16 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
             medium: `var(--${prefix}-box-shadow-medium)`,
             large: `var(--${prefix}-box-shadow-large)`
           },
+          backgroundSize: {
+            "stripe-size": "1.25rem 1.25rem"
+          },
           backgroundImage: {
-            "stripe-gradient": "linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)"
+            "stripe-gradient-default": createStripeGradient("default-200", "default-400"),
+            "stripe-gradient-primary": createStripeGradient("primary-200", "primary"),
+            "stripe-gradient-secondary": createStripeGradient("secondary-200", "secondary"),
+            "stripe-gradient-success": createStripeGradient("success-200", "success"),
+            "stripe-gradient-warning": createStripeGradient("warning-200", "warning"),
+            "stripe-gradient-danger": createStripeGradient("danger-200", "danger")
           },
           transitionDuration: {
             0: "0ms",
@@ -9537,6 +9838,7 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
   );
 };
 var nextui = (config = {}) => {
+  var _a, _b, _c, _d;
   const {
     themes: themeObject = {},
     defaultTheme = "light",
@@ -9545,8 +9847,8 @@ var nextui = (config = {}) => {
     prefix: defaultPrefix = DEFAULT_PREFIX,
     addCommonColors = false
   } = config;
-  const userLightColors = (0, import_lodash.default)(themeObject, "light.colors", {});
-  const userDarkColors = (0, import_lodash.default)(themeObject, "dark.colors", {});
+  const userLightColors = ((_a = themeObject == null ? void 0 : themeObject.light) == null ? void 0 : _a.colors) || {};
+  const userDarkColors = ((_b = themeObject == null ? void 0 : themeObject.dark) == null ? void 0 : _b.colors) || {};
   const defaultLayoutObj = userLayout && typeof userLayout === "object" ? (0, import_deepmerge.default)(defaultLayout, userLayout) : defaultLayout;
   const baseLayouts = {
     light: {
@@ -9558,8 +9860,8 @@ var nextui = (config = {}) => {
       ...darkLayout
     }
   };
-  let otherThemes = (0, import_lodash2.default)(themeObject, ["light", "dark"]) || {};
-  (0, import_lodash3.default)(otherThemes, ({ extend, colors: colors2, layout }, themeName) => {
+  let otherThemes = (0, import_shared_utils.omit)(themeObject, ["light", "dark"]) || {};
+  Object.entries(otherThemes).forEach(([themeName, { extend, colors: colors2, layout }]) => {
     const baseTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme;
     if (colors2 && typeof colors2 === "object") {
       otherThemes[themeName].colors = (0, import_deepmerge.default)(semanticColors[baseTheme], colors2);
@@ -9572,11 +9874,11 @@ var nextui = (config = {}) => {
     }
   });
   const light2 = {
-    layout: (0, import_deepmerge.default)(baseLayouts.light, (0, import_lodash.default)(themeObject, "light.layout", {})),
+    layout: (0, import_deepmerge.default)(baseLayouts.light, ((_c = themeObject == null ? void 0 : themeObject.light) == null ? void 0 : _c.layout) || {}),
     colors: (0, import_deepmerge.default)(semanticColors.light, userLightColors)
   };
   const dark = {
-    layout: (0, import_deepmerge.default)(baseLayouts.dark, (0, import_lodash.default)(themeObject, "dark.layout", {})),
+    layout: (0, import_deepmerge.default)(baseLayouts.dark, ((_d = themeObject == null ? void 0 : themeObject.dark) == null ? void 0 : _d.layout) || {}),
     colors: (0, import_deepmerge.default)(semanticColors.dark, userDarkColors)
   };
   const themes = {
@@ -9592,6 +9894,7 @@ var nextui = (config = {}) => {
   absoluteFullClasses,
   accordion,
   accordionItem,
+  alert,
   autocomplete,
   avatar,
   avatarGroup,
@@ -9620,6 +9923,7 @@ var nextui = (config = {}) => {
   dateRangePicker,
   defaultLayout,
   divider,
+  drawer,
   drip,
   dropdown,
   dropdownItem,