@page-speed/forms 0.7.3 → 0.7.5

package/dist/{chunk-4K6J2DOK.cjs → chunk-K7ZHLPLX.cjs}

@@ -1,12 +1,13 @@
 'use strict';
 
-var chunkWQ4HD5UD_cjs = require('./chunk-WQ4HD5UD.cjs');
+var chunkIGI4JJKE_cjs = require('./chunk-IGI4JJKE.cjs');
 var React19 = require('react');
 var radixUi = require('radix-ui');
 var cmdk = require('cmdk');
 var reactDirection = require('@radix-ui/react-direction');
 var reactSlot = require('@radix-ui/react-slot');
 var reactDayPicker = require('react-day-picker');
+var icon = require('@page-speed/icon');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -33,9 +34,9 @@ function Textarea({ className, ...props }) {
     "textarea",
     {
       "data-slot": "textarea",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - uses CSS variables only
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input",
+        "flex field-sizing-content min-h-32 w-full rounded-md border border-input",
         "bg-transparent px-3 py-2 text-base shadow-xs",
         "transition-[color,box-shadow] outline-none md:text-sm",
         // Focus state - uses ring-ring CSS variable
@@ -86,9 +87,9 @@ function TextArea({
       placeholder,
       disabled,
       required,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Valid value indicator - ring-2 when has value and no error
-        !error && hasValue && "ring-2 ring-ring",
+        !error && hasValue && "ring-2 ring-primary",
         // Error state - handled by Textarea component via aria-invalid
         className
       ),
@@ -113,7 +114,7 @@ function Checkbox({
     radixUi.Checkbox.Root,
     {
       "data-slot": "checkbox",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - uses CSS variables
         "peer size-4 shrink-0 rounded-[4px] border border-input bg-transparent shadow-xs",
         "transition-shadow outline-none",
@@ -126,6 +127,7 @@ function Checkbox({
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         // Disabled state
         "disabled:cursor-not-allowed disabled:opacity-50",
+        " mt-1",
         className
       ),
       ...props
@@ -218,14 +220,14 @@ function Checkbox2({
     return /* @__PURE__ */ React19__namespace.createElement("div", { className }, checkbox);
   }
   return /* @__PURE__ */ React19__namespace.createElement("div", { className: "space-y-0", "data-invalid": error || void 0 }, /* @__PURE__ */ React19__namespace.createElement(
-    chunkWQ4HD5UD_cjs.FieldLabel,
+    chunkIGI4JJKE_cjs.FieldLabel,
     {
       htmlFor: checkboxId,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
-        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
-        showChoiceCard && value && "ring-2 ring-ring",
-        showChoiceCard && error && "border-destructive",
+        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-primary",
+        showChoiceCard && value && "ring-2 ring-primary",
+        showChoiceCard && error && "ring-2 ring-destructive",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         className
       )
@@ -233,14 +235,14 @@ function Checkbox2({
     /* @__PURE__ */ React19__namespace.createElement(
       "div",
       {
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "flex w-full gap-3",
           showChoiceCard ? "items-start" : "items-center"
         )
       },
       checkbox,
       /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex-1 space-y-1" }, /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React19__namespace.createElement(
-        chunkWQ4HD5UD_cjs.FieldDescription,
+        chunkIGI4JJKE_cjs.FieldDescription,
         {
           id: `${checkboxId}-description`,
           className: "leading-snug"
@@ -309,14 +311,14 @@ function CheckboxGroup({
   };
   const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
   const containerClass = React19__namespace.useMemo(() => {
-    return chunkWQ4HD5UD_cjs.cn(
+    return chunkIGI4JJKE_cjs.cn(
       "w-full grid grid-cols-1 border-0 m-0 p-0 min-w-0",
-      (layout === "grid" || layout === "inline") && "md:grid-cols-2",
-      layout === "grid" && "gap-3",
-      layout === "inline" && "gap-0",
+      layout === "grid" && "grid grid-cols-1 md:grid-cols-2 ",
+      layout === "inline" && "flex flex-wrap",
+      useChoiceCard ? "gap-x-6 space-y-4" : "gap-0",
       className
     );
-  }, [layout, className]);
+  }, [layout, className, useChoiceCard]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ React19__namespace.createElement(
@@ -330,7 +332,7 @@ function CheckboxGroup({
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
     /* @__PURE__ */ React19__namespace.createElement(
-      chunkWQ4HD5UD_cjs.LabelGroup,
+      chunkIGI4JJKE_cjs.LabelGroup,
       {
         labelHtmlFor: name,
         required,
@@ -377,9 +379,9 @@ function CheckboxGroup({
       );
     }),
     (minSelections || maxSelections) && /* @__PURE__ */ React19__namespace.createElement(
-      chunkWQ4HD5UD_cjs.FieldDescription,
+      chunkIGI4JJKE_cjs.FieldDescription,
       {
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "p-2 rounded-lg border font-semibold mt-2 leading-snug",
           minSelections && countableValue < minSelections ? "border-destructive bg-destructive/80 text-destructive-foreground" : "border-border bg-card text-card-foreground"
         ),
@@ -399,7 +401,7 @@ function RadioGroup({
     radixUi.RadioGroup.Root,
     {
       "data-slot": "radio-group",
-      className: chunkWQ4HD5UD_cjs.cn("grid gap-3", className),
+      className: chunkIGI4JJKE_cjs.cn("grid gap-3", className),
       ...props
     }
   );
@@ -412,7 +414,7 @@ function RadioGroupItem({
     radixUi.RadioGroup.Item,
     {
       "data-slot": "radio-group-item",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - uses CSS variables
         "aspect-square size-4 shrink-0 rounded-full border border-input bg-transparent shadow-xs",
         "text-primary transition-[color,box-shadow] outline-none",
@@ -470,7 +472,17 @@ function Radio({
     return options.some((option) => option.description);
   }, [options]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
-  return /* @__PURE__ */ React19__namespace.createElement("div", { className: chunkWQ4HD5UD_cjs.cn("w-full", className), "data-invalid": error || void 0 }, (label || description) && /* @__PURE__ */ React19__namespace.createElement("div", { className: "mb-3 space-y-1" }, label && /* @__PURE__ */ React19__namespace.createElement("div", { className: "text-base font-medium leading-none" }, label), description && /* @__PURE__ */ React19__namespace.createElement(chunkWQ4HD5UD_cjs.FieldDescription, { id: groupDescriptionId, className: "leading-snug" }, description)), /* @__PURE__ */ React19__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement("div", { className: chunkIGI4JJKE_cjs.cn("w-full", className), "data-invalid": error || void 0 }, /* @__PURE__ */ React19__namespace.createElement(
+    chunkIGI4JJKE_cjs.LabelGroup,
+    {
+      labelHtmlFor: name,
+      required,
+      variant: "legend",
+      secondaryId: groupDescriptionId,
+      secondary: description,
+      primary: label
+    }
+  ), /* @__PURE__ */ React19__namespace.createElement(
     RadioGroup,
     {
       name,
@@ -479,9 +491,10 @@ function Radio({
       onBlur: handleBlur,
       disabled,
       required,
-      className: chunkWQ4HD5UD_cjs.cn(
-        layout === "grid" && "grid grid-cols-1 md:grid-cols-2 gap-3",
-        layout === "inline" && "flex flex-wrap gap-0"
+      className: chunkIGI4JJKE_cjs.cn(
+        layout === "grid" && "grid grid-cols-1 md:grid-cols-2 ",
+        layout === "inline" && "flex flex-wrap",
+        useChoiceCard ? "gap-x-6 space-y-4" : "gap-0"
       ),
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": groupDescriptionId || props["aria-describedby"],
@@ -493,14 +506,17 @@ function Radio({
       const radioId = `${name}-${option.value}`;
       const hasDescription = !!option.description;
       return /* @__PURE__ */ React19__namespace.createElement(
-        chunkWQ4HD5UD_cjs.FieldLabel,
+        chunkIGI4JJKE_cjs.FieldLabel,
         {
           key: option.value,
           htmlFor: radioId,
-          className: chunkWQ4HD5UD_cjs.cn(
-            "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
-            useChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
-            useChoiceCard && isSelected && "ring-2 ring-ring",
+          className: chunkIGI4JJKE_cjs.cn(
+            "flex gap-3 duration-200",
+            "select-auto font-normal leading-normal",
+            useChoiceCard && "hover:ring-2 hover:ring-primary",
+            useChoiceCard && "border rounded-lg p-3",
+            !useChoiceCard && "p-1",
+            useChoiceCard && isSelected && "ring-2 ring-primary",
             useChoiceCard && error && "border-destructive",
             isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
           )
@@ -508,7 +524,7 @@ function Radio({
         /* @__PURE__ */ React19__namespace.createElement(
           "div",
           {
-            className: chunkWQ4HD5UD_cjs.cn(
+            className: chunkIGI4JJKE_cjs.cn(
               "flex w-full gap-3",
               useChoiceCard ? "items-start" : "items-center"
             )
@@ -524,7 +540,7 @@ function Radio({
             }
           ),
           /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex-1 space-y-1" }, /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-sm font-medium leading-none" }, option.label), option.description && /* @__PURE__ */ React19__namespace.createElement(
-            chunkWQ4HD5UD_cjs.FieldDescription,
+            chunkIGI4JJKE_cjs.FieldDescription,
             {
               id: `${radioId}-description`,
               className: "leading-snug"
@@ -547,7 +563,7 @@ function Switch({
     {
       "data-slot": "switch",
       "data-size": size,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - uses CSS variables
         "peer group/switch inline-flex shrink-0 items-center rounded-full",
         "border border-transparent shadow-xs transition-all outline-none",
@@ -568,7 +584,7 @@ function Switch({
       radixUi.Switch.Thumb,
       {
         "data-slot": "switch-thumb",
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           // Thumb appearance - inherits from parent theme
           "bg-background pointer-events-none block rounded-full ring-0 transition-transform",
           // Size variants
@@ -619,21 +635,21 @@ function Switch2({
     }
   );
   if (!label) {
-    return /* @__PURE__ */ React19__namespace.createElement(chunkWQ4HD5UD_cjs.Field, { className }, switchElement);
+    return /* @__PURE__ */ React19__namespace.createElement(chunkIGI4JJKE_cjs.Field, { className }, switchElement);
   }
-  return /* @__PURE__ */ React19__namespace.createElement(chunkWQ4HD5UD_cjs.Field, { className: "gap-0", invalid: Boolean(error) }, /* @__PURE__ */ React19__namespace.createElement(
-    chunkWQ4HD5UD_cjs.FieldLabel,
+  return /* @__PURE__ */ React19__namespace.createElement(chunkIGI4JJKE_cjs.Field, { className: "gap-0", invalid: Boolean(error) }, /* @__PURE__ */ React19__namespace.createElement(
+    chunkIGI4JJKE_cjs.FieldLabel,
     {
       htmlFor: switchId,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex items-center gap-3 cursor-pointer select-auto font-normal leading-normal",
         disabled && "opacity-50 cursor-not-allowed",
         className
       )
     },
     switchElement,
-    /* @__PURE__ */ React19__namespace.createElement(chunkWQ4HD5UD_cjs.Field, { className: "gap-1" }, /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React19__namespace.createElement(
-      chunkWQ4HD5UD_cjs.FieldDescription,
+    /* @__PURE__ */ React19__namespace.createElement(chunkIGI4JJKE_cjs.Field, { className: "gap-1" }, /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React19__namespace.createElement(
+      chunkIGI4JJKE_cjs.FieldDescription,
       {
         id: `${switchId}-description`,
         className: "leading-snug"
@@ -656,7 +672,14 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ React19__namespace.createElement(radixUi.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ React19__namespace.createElement(
+    radixUi.Select.Value,
+    {
+      className: "font-normal",
+      "data-slot": "select-value",
+      ...props
+    }
+  );
 }
 function SelectTrigger({
   className,
@@ -669,7 +692,7 @@ function SelectTrigger({
     {
       "data-slot": "select-trigger",
       "data-size": size,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - uses CSS variables
         "flex w-full items-center justify-between gap-2 rounded-md border border-input",
         "bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
@@ -720,7 +743,7 @@ function SelectContent({
     radixUi.Select.Content,
     {
       "data-slot": "select-content",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -733,7 +756,7 @@ function SelectContent({
     /* @__PURE__ */ React19__namespace.createElement(
       radixUi.Select.Viewport,
       {
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "p-1",
           position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
         )
@@ -751,7 +774,7 @@ function SelectLabel({
     radixUi.Select.Label,
     {
       "data-slot": "select-label",
-      className: chunkWQ4HD5UD_cjs.cn("px-2 py-1.5 text-xs opacity-70", className),
+      className: chunkIGI4JJKE_cjs.cn("px-2 py-1.5 text-xs opacity-70", className),
       ...props
     }
   );
@@ -765,7 +788,7 @@ function SelectItem({
     radixUi.Select.Item,
     {
       "data-slot": "select-item",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure - inherits text color
         "relative flex w-full cursor-default items-center gap-2 rounded-sm",
         "py-1.5 pr-8 pl-2 text-sm outline-hidden select-none",
@@ -812,7 +835,7 @@ function SelectScrollUpButton({
     radixUi.Select.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex cursor-default items-center justify-center py-1",
         className
       ),
@@ -841,7 +864,7 @@ function SelectScrollDownButton({
     radixUi.Select.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex cursor-default items-center justify-center py-1",
         className
       ),
@@ -935,9 +958,9 @@ function Select2({
     /* @__PURE__ */ React19__namespace.createElement(
       SelectTrigger,
       {
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           // Valid value indicator - ring-2 when has value and no error
-          !error && hasValue && "ring-2 ring-ring",
+          !error && hasValue && "ring-2 ring-primary",
           // Error state - handled by SelectTrigger via aria-invalid
           className
         ),
@@ -994,7 +1017,7 @@ var DialogOverlay = React19__namespace.forwardRef(({ className, ...props }, ref)
     {
       ref,
       "data-slot": "dialog-overlay",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       ),
@@ -1009,7 +1032,7 @@ var DialogContent = React19__namespace.forwardRef(({ className, children, showCl
     {
       ref,
       "data-slot": "dialog-content",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
         className
       ),
@@ -1046,7 +1069,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: chunkWQ4HD5UD_cjs.cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: chunkIGI4JJKE_cjs.cn("flex flex-col gap-2 text-center sm:text-left", className),
       ...props
     }
   );
@@ -1059,7 +1082,7 @@ function DialogTitle({
     radixUi.Dialog.Title,
     {
       "data-slot": "dialog-title",
-      className: chunkWQ4HD5UD_cjs.cn("text-lg leading-none font-semibold", className),
+      className: chunkIGI4JJKE_cjs.cn("text-lg leading-none font-semibold", className),
       ...props
     }
   );
@@ -1074,7 +1097,7 @@ function Command({
     cmdk.Command,
     {
       "data-slot": "command",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
         className
       ),
@@ -1110,7 +1133,7 @@ function CommandInput({
       cmdk.Command.Input,
       {
         "data-slot": "command-input",
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
@@ -1127,7 +1150,7 @@ function CommandList({
     cmdk.Command.List,
     {
       "data-slot": "command-list",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       ),
@@ -1155,7 +1178,7 @@ function CommandGroup({
     cmdk.Command.Group,
     {
       "data-slot": "command-group",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:opacity-70",
         className
       ),
@@ -1185,7 +1208,7 @@ function PopoverContent({
       "data-slot": "popover-content",
       align,
       sideOffset,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
         className
       ),
@@ -1371,7 +1394,9 @@ function MultiSelect({
             (option) => option === currentOption
           );
           const nextEnabledIndex = currentEnabledIndex === -1 ? 0 : (currentEnabledIndex + 1) % enabledOptions.length;
-          setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextEnabledIndex]));
+          setFocusedIndex(
+            filteredOptions.indexOf(enabledOptions[nextEnabledIndex])
+          );
           break;
         }
         case "ArrowUp": {
@@ -1445,7 +1470,7 @@ function MultiSelect({
       value
     ]
   );
-  const combinedClassName = chunkWQ4HD5UD_cjs.cn("relative w-full", className);
+  const combinedClassName = chunkIGI4JJKE_cjs.cn("relative w-full", className);
   return /* @__PURE__ */ React19__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19__namespace.createElement(
     "select",
     {
@@ -1466,12 +1491,12 @@ function MultiSelect({
     "div",
     {
       ref: triggerRef,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
         "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        !error && hasValue && "ring-2 ring-ring",
+        !error && hasValue && "ring-2 ring-primary",
         disabled && "cursor-not-allowed opacity-50 pointer-events-none",
-        error && "border-destructive ring-1 ring-destructive"
+        error && "ring-2 ring-destructive"
       ),
       onKeyDown: handleKeyDown,
       onBlur: handleTriggerBlur,
@@ -1535,7 +1560,7 @@ function MultiSelect({
         CommandInput,
         {
           id: searchInputId,
-          className: chunkWQ4HD5UD_cjs.cn(chunkWQ4HD5UD_cjs.INPUT_AUTOFILL_RESET_CLASSES),
+          className: chunkIGI4JJKE_cjs.cn(chunkIGI4JJKE_cjs.INPUT_AUTOFILL_RESET_CLASSES),
           placeholder: "Search...",
           value: searchQuery,
           onValueChange: (nextValue) => {
@@ -1564,7 +1589,7 @@ function MultiSelect({
         },
         "Clear All"
       )),
-      isMaxReached && /* @__PURE__ */ React19__namespace.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      isMaxReached && /* @__PURE__ */ React19__namespace.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " reached"),
       /* @__PURE__ */ React19__namespace.createElement(CommandList, { role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React19__namespace.createElement(CommandEmpty, null, "No options found"), optionGroups.length > 0 ? optionGroups.map((group, groupIndex) => {
         const groupOptions = group.options.filter(
           (option) => filteredOptions.includes(option)
@@ -1596,7 +1621,7 @@ function MultiSelect({
                     handleToggleOption(option.value);
                   }
                 },
-                className: chunkWQ4HD5UD_cjs.cn(
+                className: chunkIGI4JJKE_cjs.cn(
                   "relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent",
                   isFocused && "bg-accent",
                   isSelected && "bg-accent font-medium",
@@ -1627,7 +1652,7 @@ function MultiSelect({
                 handleToggleOption(option.value);
               }
             },
-            className: chunkWQ4HD5UD_cjs.cn(
+            className: chunkIGI4JJKE_cjs.cn(
               "relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent",
               isFocused && "bg-accent",
               isSelected && "bg-accent font-medium",
@@ -1681,7 +1706,7 @@ function BaseFileIcon({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className: chunkWQ4HD5UD_cjs.cn("size-5", className),
+      className: chunkIGI4JJKE_cjs.cn("size-5", className),
       "aria-hidden": "true"
     },
     children
@@ -2165,7 +2190,7 @@ function FileUpload(props) {
       "data-slot": "file-upload",
       dir,
       ...rootProps,
-      className: chunkWQ4HD5UD_cjs.cn("relative flex flex-col gap-2", className)
+      className: chunkIGI4JJKE_cjs.cn("relative flex flex-col gap-2", className)
     },
     children,
     /* @__PURE__ */ React19__namespace.createElement(
@@ -2337,8 +2362,14 @@ function FileUploadDropzone(props) {
       dir: context.dir,
       tabIndex: context.disabled ? -1 : 0,
       ...dropzoneProps,
-      className: chunkWQ4HD5UD_cjs.cn(
-        "relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-6 outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 data-disabled:pointer-events-none data-disabled:opacity-50 data-dragging:border-ring data-dragging:bg-accent/50 data-invalid:border-destructive data-invalid:ring-destructive/20",
+      className: chunkIGI4JJKE_cjs.cn(
+        "relative flex select-none flex-col items-center",
+        "justify-center gap-2 rounded-lg border border-dashed p-6",
+        "outline-none transition-colors hover:ring-2 hover:ring-primary",
+        "focus-visible:ring-2 focus-visible:ring-primary",
+        "data-disabled:pointer-events-none data-disabled:opacity-50 ",
+        "data-dragging:ring-2 data-dragging:ring-primary",
+        "data-invalid:ring-2 data-invalid:ring-destructive",
         className
       ),
       onClick,
@@ -2375,7 +2406,7 @@ function FileUploadList(props) {
       "data-state": shouldRender ? "active" : "inactive",
       dir: context.dir,
       ...listProps,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out",
         orientation === "horizontal" && "flex-row overflow-x-auto p-1.5",
         className
@@ -2431,7 +2462,7 @@ function FileUploadItem(props) {
       "data-slot": "file-upload-item",
       dir: context.dir,
       ...itemProps,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "relative flex items-center gap-2.5 rounded-md border p-3",
         className
       )
@@ -2478,7 +2509,7 @@ function FileUploadItemPreview(props) {
       "aria-labelledby": itemContext.nameId,
       "data-slot": "file-upload-preview",
       ...previewProps,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10",
         className
       )
@@ -2505,13 +2536,13 @@ function FileUploadItemMetadata(props) {
       "data-slot": "file-upload-metadata",
       dir: context.dir,
       ...metadataProps,
-      className: chunkWQ4HD5UD_cjs.cn("flex min-w-0 flex-1 flex-col", className)
+      className: chunkIGI4JJKE_cjs.cn("flex min-w-0 flex-1 flex-col", className)
     },
     children ?? /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, null, /* @__PURE__ */ React19__namespace.createElement(
       "span",
       {
         id: itemContext.nameId,
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "truncate font-medium text-sm",
           size === "sm" && "font-normal text-[13px] leading-snug"
         )
@@ -2521,7 +2552,7 @@ function FileUploadItemMetadata(props) {
       "span",
       {
         id: itemContext.sizeId,
-        className: chunkWQ4HD5UD_cjs.cn(
+        className: chunkIGI4JJKE_cjs.cn(
           "truncate text-xs opacity-70",
           size === "sm" && "text-[11px] leading-snug"
         )
@@ -2573,7 +2604,7 @@ function FileInput({
   value = [],
   onChange,
   onBlur,
-  placeholder = "Choose file...",
+  placeholder,
   disabled = false,
   required = false,
   error = false,
@@ -2851,7 +2882,26 @@ function FileInput({
       }
     };
   }, [imageToCrop]);
-  const fileCountLabel = normalizedValue.length > 0 ? `${normalizedValue.length} file(s) selected` : placeholder;
+  const dynamicPlaceholder = React19__namespace.useMemo(() => {
+    if (placeholder) {
+      return placeholder;
+    }
+    return `Drag & drop file${multiple ? "s" : ""} here`;
+  }, [multiple, placeholder]);
+  const metadataElement = React19__namespace.useMemo(() => {
+    const metaList = [];
+    if (accept) {
+      metaList.push(`File type: ${accept}`);
+    }
+    if (maxSize) {
+      metaList.push(`Max file size: ${formatFileSize(maxSize)}`);
+    }
+    if (metaList.length > 0) {
+      return /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex text-center items-center justify-center gap-1 opacity-75 text-xs" }, metaList.map((str) => /* @__PURE__ */ React19__namespace.createElement("span", { key: str, className: "relative" }, str)));
+    } else {
+      return null;
+    }
+  }, [accept, maxSize]);
   return /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, null, /* @__PURE__ */ React19__namespace.createElement(
     FileUpload,
     {
@@ -2868,7 +2918,7 @@ function FileInput({
       required: required && normalizedValue.length === 0,
       invalid: Boolean(error || props["aria-invalid"]),
       label: "File upload",
-      className: chunkWQ4HD5UD_cjs.cn(className),
+      className: chunkIGI4JJKE_cjs.cn(className),
       inputProps: {
         ...props,
         onBlur: handleBlur,
@@ -2882,33 +2932,33 @@ function FileInput({
       FileUploadDropzone,
       {
         role: "button",
-        "aria-label": placeholder,
-        className: chunkWQ4HD5UD_cjs.cn(
-          "flex min-h-32 w-full cursor-pointer items-center justify-center border-input bg-transparent p-6 transition-colors",
-          "hover:bg-accent/50",
-          "data-[dragging]:bg-accent/50",
+        "aria-label": dynamicPlaceholder,
+        className: chunkIGI4JJKE_cjs.cn(
+          "flex min-h-32 w-full cursor-pointer",
+          "items-center justify-center border-input",
+          "bg-transparent p-6 transition-colors",
+          "data-[dragging]:ring-2 hover:ring-2",
           disabled && "cursor-not-allowed opacity-50",
           error && "border-destructive"
         )
       },
-      /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex flex-col items-center gap-1 text-center" }, /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex items-center justify-center rounded-full border p-2.5" }, /* @__PURE__ */ React19__namespace.createElement(
+      /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex items-center justify-center rounded-full border p-2.5" }, /* @__PURE__ */ React19__namespace.createElement(
         "svg",
         {
-          width: "24",
-          height: "24",
+          width: "18",
+          height: "18",
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "text-muted-foreground",
           "aria-hidden": "true"
         },
         /* @__PURE__ */ React19__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
         /* @__PURE__ */ React19__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
         /* @__PURE__ */ React19__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-      )), /* @__PURE__ */ React19__namespace.createElement("p", { className: "text-sm font-medium" }, fileCountLabel), accept && /* @__PURE__ */ React19__namespace.createElement("p", { className: "text-muted-foreground text-xs" }, "Accepted: ", accept), /* @__PURE__ */ React19__namespace.createElement("p", { className: "text-muted-foreground text-xs" }, "Max size: ", formatFileSize(maxSize)))
+      )), /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-center" }, /* @__PURE__ */ React19__namespace.createElement("p", { className: "text-sm font-medium" }, dynamicPlaceholder), metadataElement))
     ),
     /* @__PURE__ */ React19__namespace.createElement(FileUploadList, { className: "mt-4" }, normalizedValue.map((file, index) => {
       const progressValue = uploadProgress[file.name];
@@ -2918,9 +2968,12 @@ function FileInput({
         {
           key: `${file.name}-${index}`,
           value: file,
-          className: "flex items-center gap-3 border-border bg-card text-card-foreground hover:bg-accent/50 transition-colors"
+          className: chunkIGI4JJKE_cjs.cn(
+            "flex items-center gap-3",
+            "border-border bg-card text-card-foreground"
+          )
         },
-        showPreview ? /* @__PURE__ */ React19__namespace.createElement(FileUploadItemPreview, { className: "h-12 w-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
+        showPreview ? /* @__PURE__ */ React19__namespace.createElement(FileUploadItemPreview, { className: "size-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
         /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React19__namespace.createElement(FileUploadItemMetadata, { className: "min-w-0" }), hasProgress && progressValue < 100 ? /* @__PURE__ */ React19__namespace.createElement("div", { className: "mt-1 flex items-center gap-2" }, /* @__PURE__ */ React19__namespace.createElement(
           "div",
           {
@@ -2938,9 +2991,9 @@ function FileInput({
               style: { width: `${progressValue}%` }
             }
           )
-        ), /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-xs" }, progressValue, "%")) : null),
+        ), /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-xs" }, progressValue, "%")) : /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-xs" }, formatFileSize(file.size))),
         enableCropping && file.type.startsWith("image/") ? /* @__PURE__ */ React19__namespace.createElement(
-          chunkWQ4HD5UD_cjs.Button,
+          chunkIGI4JJKE_cjs.Button,
           {
             type: "button",
             variant: "ghost",
@@ -2950,7 +3003,7 @@ function FileInput({
               handleCrop(file);
             },
             disabled,
-            className: "h-8 w-8 p-0",
+            className: "size-8 p-0",
             "aria-label": `Crop ${file.name}`
           },
           /* @__PURE__ */ React19__namespace.createElement(
@@ -2971,13 +3024,13 @@ function FileInput({
           )
         ) : null,
         /* @__PURE__ */ React19__namespace.createElement(FileUploadItemDelete, { asChild: true }, /* @__PURE__ */ React19__namespace.createElement(
-          chunkWQ4HD5UD_cjs.Button,
+          chunkIGI4JJKE_cjs.Button,
           {
             type: "button",
-            variant: "ghost",
-            size: "icon",
+            variant: "outline",
+            size: "icon-sm",
             disabled,
-            className: "h-8 w-8 p-0",
+            className: "size-8 p-0",
             "aria-label": `Remove ${file.name}`
           },
           /* @__PURE__ */ React19__namespace.createElement(
@@ -3017,7 +3070,7 @@ function FileInput({
         "aria-describedby": void 0
       },
       /* @__PURE__ */ React19__namespace.createElement(DialogHeader, { className: "flex-row items-center justify-between border-b border-border px-4 py-3" }, /* @__PURE__ */ React19__namespace.createElement(DialogTitle, null, "Crop Image"), /* @__PURE__ */ React19__namespace.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React19__namespace.createElement(
-        chunkWQ4HD5UD_cjs.Button,
+        chunkIGI4JJKE_cjs.Button,
         {
           type: "button",
           variant: "ghost",
@@ -3045,7 +3098,7 @@ function FileInput({
       /* @__PURE__ */ React19__namespace.createElement("div", { className: "p-4" }, /* @__PURE__ */ React19__namespace.createElement(
         "div",
         {
-          className: "relative h-96 w-full overflow-hidden rounded-md bg-accent/40",
+          className: "relative h-96 w-full overflow-hidden rounded-md",
           onMouseDown: (event) => {
             event.preventDefault();
             const startX = event.clientX - crop.x;
@@ -3129,19 +3182,19 @@ function FileInput({
           step: "0.1",
           value: zoom,
           onChange: (event) => onZoomChange(parseFloat(event.target.value)),
-          className: "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-accent/60",
+          className: "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-primary",
           "aria-label": "Zoom level"
         }
       ))),
       /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex items-center justify-end gap-2 border-t border-border p-4" }, /* @__PURE__ */ React19__namespace.createElement(
-        chunkWQ4HD5UD_cjs.Button,
+        chunkIGI4JJKE_cjs.Button,
         {
           type: "button",
           variant: "outline",
           onClick: handleCropCancel
         },
         "Cancel"
-      ), /* @__PURE__ */ React19__namespace.createElement(chunkWQ4HD5UD_cjs.Button, { type: "button", onClick: handleCropSave }, "Save"))
+      ), /* @__PURE__ */ React19__namespace.createElement(chunkIGI4JJKE_cjs.Button, { type: "button", onClick: handleCropSave }, "Save"))
     ) : null
   ));
 }
@@ -3161,7 +3214,7 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
@@ -3173,86 +3226,86 @@ function Calendar({
         ...formatters
       },
       classNames: {
-        root: chunkWQ4HD5UD_cjs.cn("w-fit", defaultClassNames.root),
-        months: chunkWQ4HD5UD_cjs.cn(
+        root: chunkIGI4JJKE_cjs.cn("w-fit", defaultClassNames.root),
+        months: chunkIGI4JJKE_cjs.cn(
           "flex gap-4 flex-col md:flex-row relative",
           defaultClassNames.months
         ),
-        month: chunkWQ4HD5UD_cjs.cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: chunkWQ4HD5UD_cjs.cn(
+        month: chunkIGI4JJKE_cjs.cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: chunkIGI4JJKE_cjs.cn(
           "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
           defaultClassNames.nav
         ),
-        button_previous: chunkWQ4HD5UD_cjs.cn(
-          chunkWQ4HD5UD_cjs.buttonVariants({ variant: buttonVariant }),
+        button_previous: chunkIGI4JJKE_cjs.cn(
+          chunkIGI4JJKE_cjs.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_previous
         ),
-        button_next: chunkWQ4HD5UD_cjs.cn(
-          chunkWQ4HD5UD_cjs.buttonVariants({ variant: buttonVariant }),
+        button_next: chunkIGI4JJKE_cjs.cn(
+          chunkIGI4JJKE_cjs.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_next
         ),
-        month_caption: chunkWQ4HD5UD_cjs.cn(
+        month_caption: chunkIGI4JJKE_cjs.cn(
           "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
           defaultClassNames.month_caption
         ),
-        dropdowns: chunkWQ4HD5UD_cjs.cn(
+        dropdowns: chunkIGI4JJKE_cjs.cn(
           "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns
         ),
-        dropdown_root: chunkWQ4HD5UD_cjs.cn(
+        dropdown_root: chunkIGI4JJKE_cjs.cn(
           "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
           defaultClassNames.dropdown_root
         ),
-        dropdown: chunkWQ4HD5UD_cjs.cn(
+        dropdown: chunkIGI4JJKE_cjs.cn(
           "absolute bg-popover inset-0 opacity-0",
           defaultClassNames.dropdown
         ),
-        caption_label: chunkWQ4HD5UD_cjs.cn(
+        caption_label: chunkIGI4JJKE_cjs.cn(
           "select-none font-medium",
           captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:opacity-70 [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
-        weekdays: chunkWQ4HD5UD_cjs.cn("flex", defaultClassNames.weekdays),
-        weekday: chunkWQ4HD5UD_cjs.cn(
+        weekdays: chunkIGI4JJKE_cjs.cn("flex", defaultClassNames.weekdays),
+        weekday: chunkIGI4JJKE_cjs.cn(
           "opacity-70 rounded-md flex-1 font-normal text-[0.8rem] select-none",
           defaultClassNames.weekday
         ),
-        week: chunkWQ4HD5UD_cjs.cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: chunkWQ4HD5UD_cjs.cn(
+        week: chunkIGI4JJKE_cjs.cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: chunkIGI4JJKE_cjs.cn(
           "select-none w-(--cell-size)",
           defaultClassNames.week_number_header
         ),
-        week_number: chunkWQ4HD5UD_cjs.cn(
+        week_number: chunkIGI4JJKE_cjs.cn(
           "text-[0.8rem] select-none opacity-70",
           defaultClassNames.week_number
         ),
-        day: chunkWQ4HD5UD_cjs.cn(
+        day: chunkIGI4JJKE_cjs.cn(
           "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
           props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
           defaultClassNames.day
         ),
-        range_start: chunkWQ4HD5UD_cjs.cn(
+        range_start: chunkIGI4JJKE_cjs.cn(
           "rounded-l-md bg-accent",
           defaultClassNames.range_start
         ),
-        range_middle: chunkWQ4HD5UD_cjs.cn("rounded-none", defaultClassNames.range_middle),
-        range_end: chunkWQ4HD5UD_cjs.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: chunkWQ4HD5UD_cjs.cn(
+        range_middle: chunkIGI4JJKE_cjs.cn("rounded-none", defaultClassNames.range_middle),
+        range_end: chunkIGI4JJKE_cjs.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: chunkIGI4JJKE_cjs.cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
-        outside: chunkWQ4HD5UD_cjs.cn(
+        outside: chunkIGI4JJKE_cjs.cn(
           "opacity-50",
           defaultClassNames.outside
         ),
-        disabled: chunkWQ4HD5UD_cjs.cn(
+        disabled: chunkIGI4JJKE_cjs.cn(
           "opacity-50",
           defaultClassNames.disabled
         ),
-        hidden: chunkWQ4HD5UD_cjs.cn("invisible", defaultClassNames.hidden),
+        hidden: chunkIGI4JJKE_cjs.cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
       components: {
@@ -3262,7 +3315,7 @@ function Calendar({
             {
               "data-slot": "calendar",
               ref: rootRef,
-              className: chunkWQ4HD5UD_cjs.cn(className2),
+              className: chunkIGI4JJKE_cjs.cn(className2),
               ...props2
             }
           );
@@ -3272,7 +3325,7 @@ function Calendar({
             return /* @__PURE__ */ React19__namespace.createElement(
               "svg",
               {
-                className: chunkWQ4HD5UD_cjs.cn("size-4", className2),
+                className: chunkIGI4JJKE_cjs.cn("size-4", className2),
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
@@ -3288,7 +3341,7 @@ function Calendar({
             return /* @__PURE__ */ React19__namespace.createElement(
               "svg",
               {
-                className: chunkWQ4HD5UD_cjs.cn("size-4", className2),
+                className: chunkIGI4JJKE_cjs.cn("size-4", className2),
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
@@ -3303,7 +3356,7 @@ function Calendar({
           return /* @__PURE__ */ React19__namespace.createElement(
             "svg",
             {
-              className: chunkWQ4HD5UD_cjs.cn("size-4", className2),
+              className: chunkIGI4JJKE_cjs.cn("size-4", className2),
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -3337,7 +3390,7 @@ function CalendarDayButton({
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ React19__namespace.createElement(
-    chunkWQ4HD5UD_cjs.Button,
+    chunkIGI4JJKE_cjs.Button,
     {
       ref,
       variant: "ghost",
@@ -3347,7 +3400,7 @@ function CalendarDayButton({
       "data-range-start": modifiers.range_start,
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         // Core structure
         "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal",
         // Selected states - uses CSS variables
@@ -3371,8 +3424,6 @@ function CalendarDayButton({
     }
   );
 }
-
-// src/inputs/DatePicker.tsx
 function formatDate(date, format) {
   if (!date) return "";
   const d = new Date(date);
@@ -3392,7 +3443,7 @@ function DatePickerDayButton({
     "button",
     {
       type: "button",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
         "hover:bg-accent",
         modifiers.selected && "bg-primary text-primary-foreground font-semibold",
@@ -3414,7 +3465,7 @@ function DatePicker({
   required = false,
   error = false,
   className = "",
-  placeholder = "Select date...",
+  placeholder = "Select date",
   format = "MM/dd/yyyy",
   minDate,
   maxDate,
@@ -3502,7 +3553,7 @@ function DatePicker({
   }, [hasInteracted]);
   const hasValue = Boolean(value);
   const displayValue = formatDate(value, format);
-  const combinedClassName = chunkWQ4HD5UD_cjs.cn("relative", className);
+  const combinedClassName = chunkIGI4JJKE_cjs.cn("relative", className);
   return /* @__PURE__ */ React19__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19__namespace.createElement(
     "input",
     {
@@ -3513,23 +3564,20 @@ function DatePicker({
   ), /* @__PURE__ */ React19__namespace.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React19__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19__namespace.createElement(
     "span",
     {
-      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      className: chunkIGI4JJKE_cjs.cn(
+        "absolute left-3 top-1/2 -translate-y-1/2",
+        "pointer-events-none flex items-center justify-center",
+        "pointer-events-none"
+      ),
       "aria-hidden": "true"
     },
     /* @__PURE__ */ React19__namespace.createElement(
-      "svg",
+      icon.Icon,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "18",
-        height: "18",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2"
-      },
-      /* @__PURE__ */ React19__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+        name: "material-symbols/edit-calendar-outline",
+        apiKey: icon.DEFAULT_ICON_API_BASE_URL,
+        size: 18
+      }
     )
   ), /* @__PURE__ */ React19__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React19__namespace.createElement(
     "input",
@@ -3537,15 +3585,19 @@ function DatePicker({
       ref: inputRef,
       id: props.id,
       type: "text",
-      className: chunkWQ4HD5UD_cjs.cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        chunkWQ4HD5UD_cjs.INPUT_AUTOFILL_RESET_CLASSES,
+      className: chunkIGI4JJKE_cjs.cn(
+        "flex h-9 w-full rounded-md border",
+        "border-input bg-transparent py-1 text-base",
+        "shadow-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1",
+        "focus-visible:ring-ring",
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50 md:text-sm",
+        chunkIGI4JJKE_cjs.INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && value ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: displayValue,
       onClick: handleInputClick,
@@ -3682,7 +3734,7 @@ function TimePicker({
   };
   const hasValue = Boolean(value);
   const stepInSeconds = Math.max(1, minuteStep * 60);
-  return /* @__PURE__ */ React19__namespace.createElement("div", { className: chunkWQ4HD5UD_cjs.cn("relative", className) }, /* @__PURE__ */ React19__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React19__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement("div", { className: chunkIGI4JJKE_cjs.cn("relative", className) }, /* @__PURE__ */ React19__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React19__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
@@ -3705,17 +3757,17 @@ function TimePicker({
       /* @__PURE__ */ React19__namespace.createElement("path", { d: "M12 6v6l4 2" })
     )
   ), /* @__PURE__ */ React19__namespace.createElement(
-    chunkWQ4HD5UD_cjs.Input,
+    chunkIGI4JJKE_cjs.Input,
     {
       ref: inputRef,
       type: "time",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
-        chunkWQ4HD5UD_cjs.INPUT_AUTOFILL_RESET_CLASSES,
+        chunkIGI4JJKE_cjs.INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && value ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: nativeValue,
       onChange: handleChange,
@@ -3730,7 +3782,7 @@ function TimePicker({
       ...props
     }
   ), clearable && value && !disabled && /* @__PURE__ */ React19__namespace.createElement(
-    chunkWQ4HD5UD_cjs.Button,
+    chunkIGI4JJKE_cjs.Button,
     {
       type: "button",
       variant: "ghost",
@@ -3768,7 +3820,11 @@ function formatDate2(date, format) {
   return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
 }
 function toDayTimestamp(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  ).getTime();
 }
 function isSameDay(date, target) {
   if (!target) return false;
@@ -3930,7 +3986,7 @@ function DateRangePicker({
         {
           type: "button",
           ...rest,
-          className: chunkWQ4HD5UD_cjs.cn(
+          className: chunkIGI4JJKE_cjs.cn(
             "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
             "hover:bg-accent",
             isRangeEndpoint && "bg-primary text-primary-foreground font-semibold",
@@ -3968,7 +4024,7 @@ function DateRangePicker({
     to: rangeEnd ?? void 0
   } : void 0;
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
-  const combinedClassName = chunkWQ4HD5UD_cjs.cn("relative", className);
+  const combinedClassName = chunkIGI4JJKE_cjs.cn("relative", className);
   return /* @__PURE__ */ React19__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19__namespace.createElement(
     "input",
     {
@@ -4010,15 +4066,15 @@ function DateRangePicker({
       ref: inputRef,
       id: props.id,
       type: "text",
-      className: chunkWQ4HD5UD_cjs.cn(
+      className: chunkIGI4JJKE_cjs.cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        chunkWQ4HD5UD_cjs.INPUT_AUTOFILL_RESET_CLASSES,
+        chunkIGI4JJKE_cjs.INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: displayValue,
       onClick: handleInputClick,
@@ -4090,5 +4146,5 @@ exports.Select = Select2;
 exports.Switch = Switch2;
 exports.TextArea = TextArea;
 exports.TimePicker = TimePicker;
-//# sourceMappingURL=chunk-4K6J2DOK.cjs.map
-//# sourceMappingURL=chunk-4K6J2DOK.cjs.map
+//# sourceMappingURL=chunk-K7ZHLPLX.cjs.map
+//# sourceMappingURL=chunk-K7ZHLPLX.cjs.map