@sarunyu/system-one 1.0.0 → 1.0.3

package/dist/index.cjs

@@ -7,7 +7,6 @@ const tailwindMerge = require("tailwind-merge");
 const react = require("@phosphor-icons/react");
 const reactDayPicker = require("react-day-picker");
 const Popover = require("@radix-ui/react-popover");
-const lucideReact = require("lucide-react");
 const vaul = require("vaul");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -31,54 +30,69 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 const labelIconSizeClass = {
-  xs: "size-[13px]",
-  sm: "size-[15px]",
-  md: "size-[15px]",
-  lg: "size-[16px]",
-  xl: "size-[16px]"
+  xs: "h-4 w-4",
+  // 16px
+  sm: "h-4.5 w-4.5",
+  // ~18px
+  md: "h-4.5 w-4.5",
+  lg: "h-5 w-5",
+  // 20px
+  xl: "h-5 w-5"
 };
 const gapClass = {
-  xs: "gap-[4px]",
-  sm: "gap-[4px]",
-  md: "gap-[4px]",
-  lg: "gap-[4px]",
-  xl: "gap-[4px]"
+  xs: "gap-0.5",
+  // 2px
+  sm: "gap-0.5",
+  md: "gap-0.5",
+  lg: "gap-1",
+  // 4px
+  xl: "gap-1"
 };
 const textSizeClass = {
-  xs: "text-[12px] leading-[18px]",
-  sm: "text-[14px] leading-[20px]",
-  md: "text-[14px] leading-[20px]",
-  lg: "text-[14px] leading-[20px]",
-  xl: "text-[14px] leading-[20px]"
+  xs: "text-xs leading-4",
+  sm: "text-sm leading-5",
+  md: "text-sm leading-5",
+  lg: "text-sm leading-5",
+  xl: "text-sm leading-5"
 };
 const roundedLabelClass = {
-  xs: "rounded-[4px]",
-  sm: "rounded-[6px]",
-  md: "rounded-[6px]",
-  lg: "rounded-[8px]",
-  xl: "rounded-[8px]"
+  xs: "rounded",
+  sm: "rounded-md",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-lg"
 };
 function getPaddingClasses(size, hasLeft, hasRight) {
   const pyMap = {
-    xs: "py-[4px]",
-    sm: "py-[4px]",
-    md: "py-[6px]",
-    lg: "py-[8px]",
-    xl: "py-[10px]"
+    xs: "py-1",
+    // 4px
+    sm: "py-1",
+    // 4px
+    md: "py-1.5",
+    // 6px
+    lg: "py-2",
+    // 8px
+    xl: "py-2.5"
+    // 10px
   };
   const pxMap = {
-    xs: { l: "pl-[6px]", r: "pr-[6px]" },
-    sm: { l: "pl-[8px]", r: "pr-[8px]" },
-    md: { l: "pl-[10px]", r: "pr-[10px]" },
-    lg: { l: "pl-[14px]", r: "pr-[14px]" },
-    xl: { l: "pl-[16px]", r: "pr-[16px]" }
+    xs: { l: "pl-1.5", r: "pr-1.5" },
+    // 6px
+    sm: { l: "pl-2", r: "pr-2" },
+    // 8px
+    md: { l: "pl-2.5", r: "pr-2.5" },
+    // 10px
+    lg: { l: "pl-3.5", r: "pr-3.5" },
+    // 14px
+    xl: { l: "pl-4", r: "pr-4" }
+    // 16px
   };
   const reducedMap = {
-    xs: { l: "pl-[6px]", r: "pr-[6px]" },
-    sm: { l: "pl-[6px]", r: "pr-[6px]" },
-    md: { l: "pl-[8px]", r: "pr-[8px]" },
-    lg: { l: "pl-[10px]", r: "pr-[10px]" },
-    xl: { l: "pl-[12px]", r: "pr-[12px]" }
+    xs: { l: "pl-1.5", r: "pr-1.5" },
+    sm: { l: "pl-1.5", r: "pr-1.5" },
+    md: { l: "pl-2", r: "pr-2" },
+    lg: { l: "pl-2.5", r: "pr-2.5" },
+    xl: { l: "pl-3", r: "pr-3" }
   };
   return [
     hasLeft ? reducedMap[size].l : pxMap[size].l,
@@ -87,11 +101,11 @@ function getPaddingClasses(size, hasLeft, hasRight) {
   ];
 }
 const iconSizeSpec = {
-  "icon-xs": { btn: "size-[26px]", icon: 16, rounded: "rounded-[4px]" },
-  "icon-sm": { btn: "size-[28px]", icon: 18, rounded: "rounded-[6px]" },
-  "icon-md": { btn: "size-[32px]", icon: 18, rounded: "rounded-[6px]" },
-  "icon-lg": { btn: "size-[36px]", icon: 20, rounded: "rounded-[8px]" },
-  "icon-xl": { btn: "size-[40px]", icon: 20, rounded: "rounded-[8px]" }
+  "icon-xs": { btn: "h-6 w-6", icon: 16, rounded: "rounded" },
+  "icon-sm": { btn: "h-7 w-7", icon: 18, rounded: "rounded-md" },
+  "icon-md": { btn: "h-8 w-8", icon: 18, rounded: "rounded-md" },
+  "icon-lg": { btn: "h-9 w-9", icon: 20, rounded: "rounded-lg" },
+  "icon-xl": { btn: "h-10 w-10", icon: 20, rounded: "rounded-lg" }
 };
 function getVariantClasses(variant, isDisabled) {
   if (isDisabled) {
@@ -100,14 +114,14 @@ function getVariantClasses(variant, isDisabled) {
     return "bg-disabled-bg text-disabled cursor-not-allowed";
   }
   if (variant === "outline")
-    return "bg-white text-primary-action border border-border hover:bg-hover-bg active:bg-disabled-bg";
+    return "bg-background text-primary-action border border-border hover:bg-hover-bg active:bg-disabled-bg";
   if (variant === "plain")
     return "bg-transparent text-primary-action hover:bg-hover-bg active:bg-disabled-bg";
   if (variant === "outline-black")
-    return "bg-white text-foreground border border-border hover:bg-hover-bg";
+    return "bg-background text-foreground border border-border hover:bg-hover-bg";
   if (variant === "plain-black")
     return "bg-transparent text-foreground hover:bg-hover-bg";
-  return "bg-primary-action text-white hover:bg-primary-action-hover active:bg-primary-action-active";
+  return "bg-primary-action text-on-primary-action hover:bg-primary-action-hover active:bg-primary-action-active";
 }
 const Button = React.forwardRef(function Button2({
   size = "md",
@@ -143,7 +157,7 @@ const Button = React.forwardRef(function Button2({
   } : onPointerLeave;
   const variantClasses = getVariantClasses(variant, isDisabled);
   const cursorClass = isDisabled ? "cursor-not-allowed" : "cursor-pointer";
-  const baseClasses = "inline-flex items-center justify-center font-semibold whitespace-nowrap transition-colors duration-150 select-none";
+  const baseClasses = "inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors duration-150 select-none";
   if (isIconOnly) {
     const spec = iconSizeSpec[size];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -277,8 +291,8 @@ const Card = React.forwardRef(function Card2({
   className
 }, ref) {
   const widthClass = variant === "desktop" ? "w-[308px]" : variant === "tablet" ? "w-[224px]" : "w-[163px]";
-  const padding = variant === "desktop" ? "p-[16px]" : variant === "tablet" ? "p-[12px]" : "p-[10px]";
-  const titleGap = variant === "desktop" ? "gap-[6px]" : "gap-[4px]";
+  const padding = variant === "desktop" ? "p-4" : variant === "tablet" ? "p-3" : "p-2.5";
+  const titleGap = variant === "desktop" ? "gap-1.5" : "gap-1";
   const bannerClass = variant === "desktop" ? "h-[173px]" : "aspect-video w-full";
   const tag = tagConfig[tagStatus];
   const bannerSrc = image ?? imgBanner;
@@ -288,7 +302,7 @@ const Card = React.forwardRef(function Card2({
       ref,
       className: cn(
         "flex min-h-[120px] flex-col items-start overflow-clip rounded-[8px]",
-        "shadow-[0px_0px_2px_0px_rgba(102,102,102,0.16),0px_4px_8px_0px_rgba(102,102,102,0.12)]",
+        "shadow-card",
         widthClass,
         className
       ),
@@ -322,49 +336,49 @@ const Card = React.forwardRef(function Card2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full shrink-0 bg-white", padding), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-[4px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full shrink-0 bg-card", padding), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
                 className: cn(
-                  "line-clamp-2 w-full overflow-hidden text-ellipsis text-[14px] leading-[20px] text-foreground"
+                  "line-clamp-2 w-full overflow-hidden text-ellipsis text-sm leading-5 text-foreground"
                 ),
                 children: title
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-[4px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[16px] text-accent-orange", children: date })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-xs leading-4 text-accent-orange", children: date })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] w-px shrink-0 bg-border" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
+                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
                   ),
                   children: time
                 }
               )
             ] }),
-            showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+            showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
+                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
                   ),
                   children: location
                 }
               )
             ] }),
-            showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+            showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(AudienceIcon, {}),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-subtle-text", children: "ผู้เข้าร่วม" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-primary-action", children: count })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-subtle-text", children: "ผู้เข้าร่วม" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-primary-action", children: count })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -581,7 +595,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setYearRangeStart((s) => s - 12),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
       }
     );
     rightNav = /* @__PURE__ */ jsxRuntime.jsx(
@@ -590,7 +604,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setYearRangeStart((s) => s + 12),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
       }
     );
   } else if (view === "months") {
@@ -600,7 +614,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setPickerYear((y) => y - 1),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
       }
     );
     rightNav = /* @__PURE__ */ jsxRuntime.jsx(
@@ -609,7 +623,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setPickerYear((y) => y + 1),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
       }
     );
   } else if (isDrawerRange) {
@@ -620,7 +634,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: handlePrevYear,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDoubleLeft, { size: 16, className: "text-primary-action" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -629,7 +643,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: () => previousMonth && goToMonth(previousMonth),
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
         }
       )
     ] });
@@ -640,7 +654,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: () => nextMonth && goToMonth(nextMonth),
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -649,7 +663,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: handleNextYear,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDoubleRight, { size: 16, className: "text-primary-action" })
         }
       )
     ] });
@@ -663,7 +677,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: handlePrevYear,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronsLeft,
+              react.CaretDoubleLeft,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -677,7 +691,7 @@ function CustomCaption({
             type: "button",
             className: NAV_BTN_CLASS,
             onClick: () => previousMonth && goToMonth(previousMonth),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
           }
         )
       ] });
@@ -691,7 +705,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: () => nextMonth && goToMonth(nextMonth),
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronRight,
+              react.CaretRight,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -706,7 +720,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: handleNextYear,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronsRight,
+              react.CaretDoubleRight,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -720,7 +734,7 @@ function CustomCaption({
   const now = /* @__PURE__ */ new Date();
   const gridBtnClass = (active, isToday, isItemDisabled = false) => cn(
     "py-[10px] text-[13px] rounded-[6px] border-0 outline-none transition-colors",
-    isItemDisabled ? "bg-disabled-bg text-disabled cursor-not-allowed" : active ? "bg-primary-action text-white cursor-pointer" : isToday ? "bg-primary-action-muted text-primary-action cursor-pointer" : "bg-transparent text-foreground hover:bg-disabled-bg cursor-pointer"
+    isItemDisabled ? "bg-disabled-bg text-disabled cursor-not-allowed" : active ? "bg-primary-action text-on-primary-action cursor-pointer" : isToday ? "bg-primary-action-muted text-primary-action cursor-pointer" : "bg-transparent text-foreground hover:bg-disabled-bg cursor-pointer"
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 mb-2", children: [
@@ -739,7 +753,7 @@ function CustomCaption({
     view === "months" && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
+        className: "absolute left-0 right-0 z-10 bg-background grid grid-cols-3 gap-1 p-2 content-center",
         style: { top: "42px", bottom: "0" },
         children: THAI_MONTHS_SHORT.map((name, i) => {
           const isCurrent = pickerYear === displayMonth.getFullYear() && i === displayMonth.getMonth();
@@ -763,7 +777,7 @@ function CustomCaption({
     view === "years" && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
+        className: "absolute left-0 right-0 z-10 bg-background grid grid-cols-3 gap-1 p-2 content-center",
         style: { top: "42px", bottom: "0" },
         children: Array.from({ length: 12 }, (_, i) => {
           const year = yearRangeStart + i;
@@ -828,9 +842,9 @@ const DAY_PICKER_CLASSES = {
     "hover:bg-disabled-bg transition-colors duration-100",
     "outline-none aria-selected:opacity-100 p-0"
   ),
-  day_range_start: "day-range-start !bg-primary-action !text-white !rounded-l-[6px] !rounded-r-none",
-  day_range_end: "day-range-end !bg-primary-action !text-white !rounded-r-[6px] !rounded-l-none",
-  day_selected: "!bg-primary-action text-white hover:!bg-primary-action focus:!bg-primary-action rounded-[6px]",
+  day_range_start: "day-range-start !bg-primary-action !text-on-primary-action !rounded-l-[6px] !rounded-r-none",
+  day_range_end: "day-range-end !bg-primary-action !text-on-primary-action !rounded-r-[6px] !rounded-l-none",
+  day_selected: "!bg-primary-action text-on-primary-action hover:!bg-primary-action focus:!bg-primary-action rounded-[6px]",
   day_today: "[&:not([aria-selected=true])]:!bg-primary-action-light [&:not([aria-selected=true])]:text-foreground rounded-[6px]",
   day_outside: "day-outside text-disabled opacity-50 aria-selected:bg-transparent aria-selected:opacity-30",
   day_disabled: "text-disabled opacity-50 cursor-not-allowed",
@@ -1131,7 +1145,7 @@ const DateInput = React.forwardRef(
     const isError = state === "error";
     const isFocus = state === "focus";
     const isFilled = mode === "single" ? Boolean(currentDate) : Boolean(currentRange == null ? void 0 : currentRange.from);
-    const bgClass = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
     const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -1195,30 +1209,37 @@ const DateInput = React.forwardRef(
         const valueRow = mode === "single" && currentDate ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: "leading-[20px] not-italic relative shrink-0 text-[16px] w-full",
+            className: "leading-[20px] not-italic relative text-[16px] w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
             style: { color: valueColor },
             children: formatThaiDate(currentDate)
           }
-        ) : mode === "range" && (currentRange == null ? void 0 : currentRange.from) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center relative shrink-0 w-full", children: [
+        ) : mode === "range" && (currentRange == null ? void 0 : currentRange.from) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center relative w-full min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
-              className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
+              className: "leading-[20px] not-italic relative text-[16px] min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
               style: { color: valueColor },
               children: formatThaiDate(currentRange.from)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Minus, { size: 20, weight: "bold", color: minusColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Minus,
+            {
+              size: 20,
+              color: minusColor,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
-              className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
+              className: "leading-[20px] not-italic relative text-[16px] min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
               style: { color: valueColor },
               children: currentRange.to ? formatThaiDate(currentRange.to) : "..."
             }
           )
         ] }) : null;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 flex-col items-center justify-center min-h-px min-w-px relative", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 flex-col items-center justify-center min-h-px min-w-0 overflow-hidden relative w-full", children: [
           floatingLabel,
           valueRow
         ] });
@@ -1278,13 +1299,13 @@ const DateInput = React.forwardRef(
       )
     ] });
     const triggerBaseClasses = cn(
-      "relative flex gap-[8px] items-center rounded-[8px]",
+      "relative flex gap-2 items-center rounded-lg min-w-0",
       bgClass,
-      "px-[14px]",
-      isFilled ? "py-[6px]" : "py-[12px]",
+      "px-3.5",
+      isFilled ? "py-1.5" : "py-3",
       "w-full"
     );
-    const belowMessage = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    const belowMessage = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: "flex-1 min-w-0",
@@ -1369,7 +1390,10 @@ const DateInput = React.forwardRef(
       {
         type: "button",
         disabled: isDisabled,
-        className: cn(triggerBaseClasses, "text-left cursor-pointer disabled:cursor-default"),
+        className: cn(
+          triggerBaseClasses,
+          "text-left cursor-pointer disabled:cursor-default"
+        ),
         children: triggerInner
       }
     );
@@ -1410,9 +1434,9 @@ const DateInput = React.forwardRef(
                   {
                     align: "start",
                     sideOffset: 4,
-                    className: "z-50 rounded-[8px] bg-white p-3 outline-none",
+                    className: "z-50 rounded-[8px] bg-popover p-3 outline-none text-popover-foreground",
                     style: {
-                      boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
+                      boxShadow: "var(--elevation-popover)",
                       border: "1px solid var(--border)"
                     },
                     onOpenAutoFocus: (e) => e.preventDefault(),
@@ -1432,12 +1456,6 @@ const DateInput = React.forwardRef(
   }
 );
 DateInput.displayName = "DateInput";
-function ChevronDownIcon$1({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function ChevronUpIcon$1({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
 const Dropdown = React.forwardRef(
   ({
     placeholder = "Text label",
@@ -1465,7 +1483,7 @@ const Dropdown = React.forwardRef(
     const state = forceState ?? (open ? "focus" : "default");
     const isError = state === "error";
     const isFocus = state === "focus";
-    const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const filledColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
     const caretClassName = isDisabled ? "text-disabled" : "text-muted-foreground";
@@ -1526,17 +1544,17 @@ const Dropdown = React.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: cn("flex flex-col gap-[4px] w-full", className),
+        className: cn("flex flex-col gap-1 w-full", className),
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-[20px] not-italic relative shrink-0 text-foreground text-[14px] font-bold whitespace-nowrap", children: label }) }) }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-5 not-italic relative shrink-0 text-foreground text-sm font-bold whitespace-nowrap", children: label }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               onClick: handleToggle,
               className: cn(
-                "relative flex gap-[8px] items-center rounded-[8px] px-[14px]",
+                "relative flex gap-2 items-center rounded-lg px-3.5",
                 bg,
-                hasExternalLabel ? "h-[38px]" : isFilled && !open ? "py-[6px]" : "p-[14px]",
+                hasExternalLabel ? "h-[38px]" : isFilled && !open ? "py-1.5" : "p-3.5",
                 !isDisabled && !forceState && "cursor-pointer"
               ),
               children: [
@@ -1561,7 +1579,7 @@ const Dropdown = React.forwardRef(
                         onChange: (e) => setSearch(e.target.value),
                         onKeyDown: handleInputKeyDown,
                         placeholder: isFilled ? selectedLabel : placeholder + (required ? " *" : ""),
-                        className: "flex-1 min-w-0 min-h-[1px] text-[14px] leading-[20px] not-italic bg-transparent outline-none border-none p-0 m-0 placeholder:text-disabled",
+                        className: "flex-1 min-w-0 min-h-[1px] text-sm leading-5 not-italic bg-transparent outline-none border-none p-0 m-0 placeholder:text-disabled",
                         style: {
                           color: filledColor,
                           caretColor: "var(--caret-color)"
@@ -1612,7 +1630,7 @@ const Dropdown = React.forwardRef(
                         onChange: (e) => setSearch(e.target.value),
                         onKeyDown: handleInputKeyDown,
                         placeholder: placeholder + (required ? " *" : ""),
-                        className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic bg-transparent outline-none border-none p-0 m-0 placeholder:text-muted-foreground",
+                        className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic bg-transparent outline-none border-none p-0 m-0 placeholder:text-muted-foreground",
                         style: {
                           color: "var(--foreground)",
                           caretColor: "var(--caret-color)"
@@ -1628,7 +1646,7 @@ const Dropdown = React.forwardRef(
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "p",
                       {
-                        className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] overflow-hidden text-ellipsis whitespace-nowrap",
+                        className: "flex-1 min-w-0 min-h-[1px] leading-5 not-italic text-sm overflow-hidden text-ellipsis whitespace-nowrap",
                         style: { color: filledColor },
                         children: [
                           selectedLabel,
@@ -1642,7 +1660,7 @@ const Dropdown = React.forwardRef(
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "p",
                         {
-                          className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
+                          className: "shrink-0 w-full leading-4 not-italic text-xs",
                           style: { color: labelColor },
                           children: [
                             placeholder,
@@ -1653,7 +1671,7 @@ const Dropdown = React.forwardRef(
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "p",
                         {
-                          className: "w-full leading-[20px] not-italic text-[14px] min-w-0 min-h-[1px]",
+                          className: "w-full leading-5 not-italic text-sm min-w-0 min-h-[1px]",
                           style: { color: filledColor },
                           children: selectedLabel
                         }
@@ -1666,7 +1684,7 @@ const Dropdown = React.forwardRef(
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "p",
                       {
-                        className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
+                        className: "leading-5 not-italic text-base whitespace-nowrap",
                         style: { color: labelColor },
                         children: placeholder
                       }
@@ -1674,7 +1692,7 @@ const Dropdown = React.forwardRef(
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "p",
                       {
-                        className: "leading-[16px] not-italic text-[12px] w-[7px]",
+                        className: "leading-4 not-italic text-xs w-[7px]",
                         style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
                         children: "*"
                       }
@@ -1682,13 +1700,13 @@ const Dropdown = React.forwardRef(
                   ] }) : /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap",
+                      className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic overflow-hidden text-ellipsis whitespace-nowrap",
                       style: { color: labelColor },
                       children: placeholder
                     }
                   )
                 ),
-                isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon$1, { className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon$1, { className: cn("shrink-0", caretClassName) })
+                isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
               ]
             }
           ),
@@ -1696,11 +1714,11 @@ const Dropdown = React.forwardRef(
             "div",
             {
               className: cn(
-                "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
+                "relative bg-popover rounded-lg overflow-clip p-2 z-20 flex flex-col items-start text-popover-foreground",
                 filteredOptions.length > 10 && "overflow-y-auto"
               ),
               style: {
-                boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
+                boxShadow: "var(--elevation-popover)",
                 ...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
               },
               children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1709,13 +1727,13 @@ const Dropdown = React.forwardRef(
                   onClick: () => handleSelect(opt.value),
                   className: cn(
                     "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
-                    opt.value === currentValue ? "bg-primary-action-light" : "bg-white hover:bg-disabled-bg"
+                    opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
                       className: cn(
-                        "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
+                        "flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
                         opt.value === currentValue ? "text-primary-action" : "text-foreground"
                       ),
                       children: opt.label
@@ -1723,7 +1741,7 @@ const Dropdown = React.forwardRef(
                   ) }) })
                 },
                 opt.value
-              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
             }
           ),
           showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
@@ -1735,34 +1753,6 @@ const Dropdown = React.forwardRef(
 Dropdown.displayName = "Dropdown";
 const TAG_GAP = 4;
 const MAX_COMPONENT_WIDTH = 343;
-function ChevronDownIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function ChevronUpIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function XIcon({ color = "var(--muted-foreground)" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      className: "shrink-0",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M9 3L3 9M3 3L9 9",
-          stroke: color,
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 function RemovableTag({
   label,
   disabled,
@@ -1796,8 +1786,16 @@ function RemovableTag({
               e.stopPropagation();
               onRemove();
             },
-            className: "absolute right-[4px] top-1/2 -translate-y-1/2 flex items-center justify-center rounded-[2px] p-[1px] cursor-pointer opacity-0 group-hover:opacity-100 transition-all duration-150 bg-[#e5e7eb]",
-            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { color: iconColor })
+            className: "absolute right-[4px] top-1/2 -translate-y-1/2 flex items-center justify-center rounded-[2px] p-[1px] cursor-pointer opacity-0 group-hover:opacity-100 transition-all duration-150 bg-surface-clear-hover",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.X,
+              {
+                size: 12,
+                weight: "bold",
+                color: iconColor,
+                className: "shrink-0"
+              }
+            )
           }
         )
       ]
@@ -1830,7 +1828,7 @@ function OverflowBadge({
   count,
   disabled
 }) {
-  const bg = disabled ? "bg-[#fafafa]" : "bg-selected-bg";
+  const bg = disabled ? "bg-surface-chip-disabled" : "bg-selected-bg";
   const textColor = disabled ? "var(--disabled)" : "var(--primary-action)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1853,28 +1851,6 @@ function OverflowBadge({
     }
   );
 }
-function CheckIcon$1(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "10",
-      height: "8",
-      viewBox: "0 0 10 8",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M1 4L3.5 6.5L9 1",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 function useChipLayout(selectedOptions, measureRef, containerRef) {
   const [layout, setLayout] = React.useState({
     visibleCount: selectedOptions.length,
@@ -1963,7 +1939,7 @@ const DropdownMultiple = React.forwardRef(
     const state = forceState ?? (open ? "focus" : "default");
     const isError = state === "error";
     const isFocus = state === "focus";
-    const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const caretColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const borderInset = isFocus || isError ? "-1px" : "0px";
@@ -2045,7 +2021,7 @@ const DropdownMultiple = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
-          className: "shrink-0 leading-[16px] not-italic text-[12px]",
+          className: "shrink-0 leading-4 not-italic text-xs",
           style: { color: labelColor },
           children: placeholder
         }
@@ -2063,7 +2039,7 @@ const DropdownMultiple = React.forwardRef(
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
-        className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
+        className: "shrink-0 w-full leading-4 not-italic text-xs",
         style: { color: labelColor },
         children: placeholder
       }
@@ -2072,7 +2048,7 @@ const DropdownMultiple = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
-          className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
+          className: "leading-5 not-italic text-base whitespace-nowrap",
           style: { color: labelColor },
           children: placeholder
         }
@@ -2080,7 +2056,7 @@ const DropdownMultiple = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
-          className: "leading-[16px] not-italic text-[12px] w-[7px]",
+          className: "leading-4 not-italic text-xs w-[7px]",
           style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
           children: "*"
         }
@@ -2088,7 +2064,7 @@ const DropdownMultiple = React.forwardRef(
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
-        className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap py-[7px]",
+        className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic overflow-hidden text-ellipsis whitespace-nowrap py-[7px]",
         style: { color: labelColor },
         children: placeholder
       }
@@ -2098,7 +2074,7 @@ const DropdownMultiple = React.forwardRef(
       {
         ref: measureRef,
         "aria-hidden": true,
-        className: "absolute flex gap-[4px] items-center pointer-events-none",
+        className: "absolute flex gap-1 items-center pointer-events-none",
         style: {
           visibility: "hidden",
           top: 0,
@@ -2241,8 +2217,8 @@ const DropdownMultiple = React.forwardRef(
               className: cn(
                 "relative flex gap-[8px] items-center rounded-[8px]",
                 bg,
-                "px-[14px]",
-                hasExternalLabel ? "h-[40px]" : "py-[4px] min-h-[48px]",
+                "px-3.5",
+                hasExternalLabel ? "h-10" : "py-1 min-h-12",
                 !isDisabled && !isStatic && "cursor-pointer"
               ),
               children: [
@@ -2272,16 +2248,16 @@ const DropdownMultiple = React.forwardRef(
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22 }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22 }) })
               ]
             }
           ),
           open && !isStatic && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
+              className: "relative bg-popover rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start text-popover-foreground",
               style: {
-                boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)"
+                boxShadow: "var(--elevation-popover)"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -2304,7 +2280,7 @@ const DropdownMultiple = React.forwardRef(
                         },
                         className: cn(
                           "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
-                          isSelected ? "bg-primary-action-light" : "bg-white hover:bg-disabled-bg"
+                          isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
                         ),
                         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2324,14 +2300,21 @@ const DropdownMultiple = React.forwardRef(
                                 "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
                                 "bg-transparent"
                               ),
-                              children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { className: "text-primary-action" })
+                              children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Check,
+                                {
+                                  size: 12,
+                                  weight: "bold",
+                                  className: "text-primary-action"
+                                }
+                              )
                             }
                           )
                         ] }) })
                       },
                       opt.value
                     );
-                  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+                  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
                 }
               )
             }
@@ -2368,6 +2351,7 @@ const Input = React.forwardRef(function Input2({
   onFocus: onFocusProp,
   onBlur: onBlurProp,
   disabled: _disabledProp,
+  maxLength: maxLengthProp,
   ...inputRest
 }, ref) {
   const [focused, setFocused] = React.useState(false);
@@ -2379,7 +2363,7 @@ const Input = React.forwardRef(function Input2({
   const isError = state === "error";
   const isFocus = state === "focus";
   const isFilled = currentValue.length > 0;
-  const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+  const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
   const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
   const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
   const unitColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -2387,14 +2371,19 @@ const Input = React.forwardRef(function Input2({
   const borderRad = isFocus || isError ? "9px" : "8px";
   const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
   const hasRight = Boolean(rightIcon) || Boolean(unit);
-  const padding = isFilled ? "px-[14px] py-[6px]" : hasRight ? "px-[14px] py-[12px]" : "p-[14px]";
+  const padding = isFilled ? "px-[14px] py-[6px]" : hasRight ? "px-[14px] py-[14px]" : "p-[14px]";
   const charCount = currentValue.length;
   const showBelow = isError || Boolean(helperText) || showCount;
   const leftText = isError ? errorMessage : helperText ?? "";
   const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
   const handleChange = (e) => {
-    if (!controlled) setInternalValue(e.target.value);
-    onChange == null ? void 0 : onChange(e.target.value);
+    if (isDisabled) return;
+    let next = e.target.value;
+    if (showCount && maxCount >= 0 && next.length > maxCount) {
+      next = next.slice(0, maxCount);
+    }
+    if (!controlled) setInternalValue(next);
+    onChange == null ? void 0 : onChange(next);
   };
   const handleFocus = (e) => {
     onFocusProp == null ? void 0 : onFocusProp(e);
@@ -2408,12 +2397,12 @@ const Input = React.forwardRef(function Input2({
   const inputCaretStyle = {
     caretColor: "var(--caret-color)"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-[4px] w-full", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1 w-full", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "relative rounded-[8px]",
+          "relative rounded-lg",
           padding,
           bg,
           containerFlex
@@ -2444,14 +2433,15 @@ const Input = React.forwardRef(function Input2({
                   {
                     className: cn(
                       "shrink-0 w-full not-italic",
-                      isFilled ? "leading-[16px] text-[12px]" : "text-[16px] leading-[20px] pointer-events-none"
+                      isFilled ? "leading-4 text-xs" : "text-base leading-5 pointer-events-none"
                     ),
                     style: { color: floatLabel },
                     children: [
                       placeholder,
-                      required && !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
+                      required && /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
                         {
+                          className: "text-xs leading-4",
                           style: {
                             color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
                           },
@@ -2461,7 +2451,7 @@ const Input = React.forwardRef(function Input2({
                     ]
                   }
                 ),
-                !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
                     ...inputRest,
@@ -2471,10 +2461,14 @@ const Input = React.forwardRef(function Input2({
                     onFocus: handleFocus,
                     onBlur: handleBlur,
                     disabled: isDisabled,
+                    maxLength: showCount ? maxCount : maxLengthProp,
                     "aria-label": placeholder,
                     className: cn(
                       "w-full bg-transparent outline-none border-none min-w-0",
-                      isFilled ? "leading-[20px] not-italic text-[14px] p-0 m-0" : "absolute inset-0 h-full cursor-text text-[16px]"
+                      isFilled ? "leading-5 not-italic text-sm p-0 m-0" : cn(
+                        "absolute inset-0 h-full text-base",
+                        isDisabled ? "cursor-not-allowed" : "cursor-text"
+                      )
                     ),
                     style: isFilled ? { ...inputStyleProp, color: filledValue, ...inputCaretStyle } : {
                       ...inputStyleProp,
@@ -2502,7 +2496,7 @@ const Input = React.forwardRef(function Input2({
             "p",
             {
               className: cn(
-                "shrink-0 whitespace-nowrap text-[16px]",
+                "shrink-0 whitespace-nowrap text-[16px] leading-[20px]",
                 !isFilled && "relative"
               ),
               style: {
@@ -2516,7 +2510,7 @@ const Input = React.forwardRef(function Input2({
         ]
       }
     ),
-    showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]", children: [
+    showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
       leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
       showCount && /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
@@ -2534,28 +2528,6 @@ const Input = React.forwardRef(function Input2({
   ] });
 });
 Input.displayName = "Input";
-function CheckIcon(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "11",
-      viewBox: "0 0 16 11",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M1 5.5L5.5 10L15 1",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 const OptionList = React.forwardRef(
   function OptionList2({
     options,
@@ -2584,17 +2556,17 @@ const OptionList = React.forwardRef(
       {
         ref,
         className: cn(
-          "flex flex-col items-start overflow-clip rounded-[8px] bg-white px-[8px] py-[8px]",
+          "flex flex-col items-start overflow-clip rounded-lg bg-popover px-2 py-2 text-popover-foreground",
           className
         ),
         style: {
-          boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
+          boxShadow: "var(--elevation-popover)",
           ...isScrollable ? { maxHeight, overflowY: "auto" } : {}
         },
         children: options.length > 0 ? options.map((opt) => {
           const selected = isSelected(opt.value);
           const disabled = opt.disabled === true;
-          const rowBg = disabled ? "bg-disabled-bg" : selected ? "bg-selected-bg" : "bg-white hover:bg-selected-bg";
+          const rowBg = disabled ? "bg-disabled-bg" : selected ? "bg-selected-bg" : "bg-popover hover:bg-selected-bg";
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -2604,11 +2576,11 @@ const OptionList = React.forwardRef(
                 rowBg,
                 disabled ? "cursor-default" : "cursor-pointer"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px] p-[14px]", children: [
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 p-3.5", children: [
                 opt.icon && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    className: "flex size-[20px] shrink-0 items-center justify-center overflow-clip",
+                    className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-clip",
                     style: {
                       color: disabled ? "var(--disabled)" : "var(--muted-foreground)"
                     },
@@ -2618,19 +2590,26 @@ const OptionList = React.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
-                    className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-[14px] leading-[20px] text-ellipsis whitespace-nowrap not-italic",
+                    className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap not-italic",
                     style: {
                       color: disabled ? "var(--disabled)" : "var(--foreground)"
                     },
                     children: opt.label
                   }
                 ),
-                selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-[20px] shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-primary-action" }) })
+                selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Check,
+                  {
+                    size: 16,
+                    weight: "bold",
+                    className: "text-primary-action"
+                  }
+                ) })
               ] })
             },
             opt.value
           );
-        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center p-[14px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-h-[1px] min-w-0 flex-1 text-[14px] leading-[20px] not-italic text-disabled", children: emptyText }) }) })
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center p-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-h-[1px] min-w-0 flex-1 text-sm leading-5 not-italic text-disabled", children: emptyText }) }) })
       }
     );
   }
@@ -2652,8 +2631,8 @@ const SearchInput = React.forwardRef(
     const currentValue = controlled ? value : internalValue;
     const isFilled = currentValue.length > 0;
     const iconSize = size === "lg" ? 24 : 22;
-    const minHeight = size === "sm" ? "min-h-[32px]" : "";
-    const padding = size === "sm" ? "px-[14px] py-[8px]" : "px-[14px] py-[12px]";
+    const minHeight = size === "sm" ? "h-[38px]" : "";
+    const padding = size === "sm" ? "px-3.5 py-2" : "px-3.5 py-3";
     const borderInset = focused ? "-1px" : "0px";
     const borderRad = focused ? "9px" : "8px";
     const borderColor = focused ? "var(--primary-action)" : "var(--border)";
@@ -2673,7 +2652,7 @@ const SearchInput = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative flex cursor-text items-center gap-[8px] rounded-[8px] bg-white",
+          "relative flex cursor-text items-center gap-2 rounded-lg bg-background",
           padding,
           minHeight,
           className
@@ -2699,7 +2678,7 @@ const SearchInput = React.forwardRef(
             react.MagnifyingGlass,
             {
               size: iconSize,
-              color: "var(--muted-foreground)",
+              color: focused ? "var(--subtle-text)" : "var(--muted-foreground)",
               weight: "regular"
             }
           ) }),
@@ -2707,7 +2686,7 @@ const SearchInput = React.forwardRef(
             !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: "pointer-events-none absolute inset-0 flex items-center text-[16px] leading-[20px] not-italic",
+                className: "pointer-events-none absolute inset-0 flex items-center text-base leading-5 not-italic",
                 style: { color: "var(--muted-foreground)" },
                 children: placeholder
               }
@@ -2722,7 +2701,7 @@ const SearchInput = React.forwardRef(
                 onChange: (e) => handleChange(e.target.value),
                 onFocus: () => setFocused(true),
                 onBlur: () => setFocused(false),
-                className: "m-0 w-full border-none bg-transparent p-0 text-[16px] leading-[20px] outline-none",
+                className: "m-0 w-full border-none bg-transparent p-0 text-base leading-5 outline-none",
                 style: {
                   color: isFilled ? "var(--foreground)" : "transparent",
                   caretColor: "var(--caret-color)"
@@ -2756,33 +2735,50 @@ const SearchInput = React.forwardRef(
 SearchInput.displayName = "SearchInput";
 const sizeClasses = {
   lg: {
-    pad: "px-[12px] py-[10px]",
-    text: "text-[14px]",
-    leading: "leading-[20px]",
-    font: "font-bold"
+    pad: "px-3 py-2.5",
+    text: "text-sm",
+    leading: "leading-5",
+    font: "font-bold",
+    gap: "gap-1.5",
+    iconSize: "h-5 w-5",
+    badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
   },
   md: {
-    pad: "px-[10px] py-[8px]",
-    text: "text-[14px]",
-    leading: "leading-[20px]",
-    font: "font-bold"
+    pad: "px-2.5 py-2",
+    text: "text-sm",
+    leading: "leading-5",
+    font: "font-bold",
+    gap: "gap-1.5",
+    iconSize: "h-[18px] w-[18px]",
+    badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
   },
   sm: {
-    pad: "px-[8px] py-[6px]",
-    text: "text-[12px]",
-    leading: "leading-[16px]",
-    font: "font-semibold"
+    pad: "px-2 py-1.5",
+    text: "text-xs",
+    leading: "leading-4",
+    font: "font-semibold",
+    gap: "gap-1",
+    iconSize: "h-4 w-4",
+    badgeClass: "min-h-[14px] px-1 text-[length:var(--text-xxs)] leading-[var(--leading-3)]"
   }
 };
+function DefaultTabIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", className) });
+}
 const Tab = React.forwardRef(function Tab2({
   title = "Tab",
   size = "md",
   active = false,
   disabled = false,
   onClick,
-  className
+  className,
+  icon,
+  notification
 }, ref) {
   const s = sizeClasses[size];
+  const hasIcon = Boolean(icon);
+  const hasNotification = notification !== void 0 && notification !== null;
+  const renderedIcon = icon === true ? /* @__PURE__ */ jsxRuntime.jsx(DefaultTabIcon, { className: s.iconSize }) : icon;
   const textColor = disabled ? "text-disabled" : active ? "text-primary-action" : "text-muted-foreground";
   const borderColor = active && !disabled ? "border-primary-action" : "border-border";
   const cursor = disabled ? "cursor-not-allowed" : "cursor-pointer";
@@ -2796,8 +2792,9 @@ const Tab = React.forwardRef(function Tab2({
       "aria-disabled": disabled,
       onClick: !disabled ? onClick : void 0,
       className: cn(
-        "relative flex min-w-[80px] select-none items-center justify-center bg-white transition-colors duration-150",
+        "relative flex min-w-[80px] select-none items-center justify-center bg-background transition-colors duration-150",
         s.pad,
+        (hasIcon || hasNotification) && s.gap,
         cursor,
         hoverBg,
         className
@@ -2813,11 +2810,24 @@ const Tab = React.forwardRef(function Tab2({
             )
           }
         ),
+        hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "relative shrink-0",
+              s.iconSize,
+              disabled ? "text-disabled" : active ? "text-primary-action" : "text-muted-foreground"
+            ),
+            children: renderedIcon
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: cn(
               "relative overflow-hidden text-ellipsis whitespace-nowrap text-center",
+              hasIcon && hasNotification && "flex-1 min-w-px",
               s.text,
               s.leading,
               s.font,
@@ -2825,6 +2835,16 @@ const Tab = React.forwardRef(function Tab2({
             ),
             children: title
           }
+        ),
+        hasNotification && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "relative flex shrink-0 items-center justify-center rounded-[60px] bg-visual-red-default text-center font-normal text-on-visual-red",
+              s.badgeClass
+            ),
+            children: notification
+          }
         )
       ]
     }
@@ -2840,6 +2860,8 @@ const TabGroup = React.forwardRef(
         size,
         active: item.id === activeId,
         disabled: item.disabled,
+        icon: item.icon,
+        notification: item.notification,
         onClick: () => onChange == null ? void 0 : onChange(item.id)
       },
       item.id
@@ -2847,6 +2869,112 @@ const TabGroup = React.forwardRef(
   }
 );
 TabGroup.displayName = "TabGroup";
+const sizeStyles = {
+  large: {
+    container: "px-2 py-1",
+    text: "text-xs leading-4",
+    closeIcon: "h-4 w-4",
+    closeButton: "h-4 w-4"
+  },
+  small: {
+    container: "px-1 py-0.5",
+    text: "text-xxs leading-3",
+    closeIcon: "h-3.5 w-3.5",
+    closeButton: "h-3.5 w-3.5"
+  }
+};
+const variantStyles = {
+  blue: {
+    bg: "bg-[var(--fill-blue-50)]",
+    text: "text-[var(--fill-blue-700)]"
+  },
+  green: {
+    bg: "bg-[var(--fill-green-100)]",
+    text: "text-[var(--fill-green-600)]"
+  },
+  yellow: {
+    bg: "bg-[var(--fill-yellow-100)]",
+    text: "text-[var(--fill-yellow-600)]"
+  },
+  red: {
+    bg: "bg-[var(--fill-red-100)]",
+    text: "text-[var(--fill-red-600)]"
+  },
+  gray: {
+    bg: "bg-[var(--fill-gray-100)]",
+    text: "text-subtle-text"
+  },
+  lime: {
+    bg: "bg-[var(--fill-lime-100)]",
+    text: "text-[var(--fill-lime-600)]"
+  }
+};
+function CircleIcon({ disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Circle,
+    {
+      "aria-hidden": "true",
+      weight: "regular",
+      className: "h-3.5 w-3.5 shrink-0",
+      color: disabled ? "var(--disabled)" : "var(--subtle-text)"
+    }
+  );
+}
+function CloseIcon({ disabled, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.X,
+    {
+      "aria-hidden": "true",
+      weight: "regular",
+      className: cn("shrink-0", className),
+      color: disabled ? "var(--disabled)" : "var(--subtle-text)"
+    }
+  );
+}
+const Tag = React.forwardRef(function Tag2({
+  text = "Tag",
+  size = "large",
+  state = "default",
+  variant = "gray",
+  icon = false,
+  close = false,
+  className
+}, ref) {
+  const isDisabled = state === "disabled";
+  const s = sizeStyles[size];
+  const v = variantStyles[variant];
+  const bgClass = state === "disabled" ? "bg-disabled-bg" : state === "hover" ? "bg-hover-bg" : v.bg;
+  const textClass = isDisabled ? "text-disabled" : v.text;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center rounded-[4px]",
+        (icon || close) && "gap-[2px]",
+        s.container,
+        bgClass,
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { disabled: isDisabled }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("whitespace-nowrap font-normal", s.text, textClass), children: text }),
+        close && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center justify-center rounded-[2px] transition-colors",
+              s.closeButton,
+              !isDisabled && "cursor-pointer hover:bg-black/10"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { disabled: isDisabled, className: s.closeIcon })
+          }
+        )
+      ]
+    }
+  );
+});
+Tag.displayName = "Tag";
 const TextArea = React.forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -2889,13 +3017,13 @@ const TextArea = React.forwardRef(
       if (!controlled) setInternalValue(newValue);
       onChange == null ? void 0 : onChange(newValue);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-[4px]", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "relative h-[116px] rounded-[8px]",
-            isDisabled ? "bg-disabled-bg" : "bg-white"
+            "relative h-[116px] rounded-lg",
+            isDisabled ? "bg-disabled-bg" : "bg-background"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2906,13 +3034,27 @@ const TextArea = React.forwardRef(
                 style: { inset: borderInset, borderRadius: borderRad, borderColor }
               }
             ),
-            isFilled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-start p-[14px] pb-[6px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+            isFilled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col px-3.5 pt-3.5 pb-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
                 "p",
                 {
-                  className: "w-full shrink-0 text-[12px] leading-[16px] not-italic",
+                  className: "w-full shrink-0 text-xs leading-4 not-italic",
                   style: { color: floatLabel },
-                  children: placeholder
+                  children: [
+                    placeholder,
+                    required && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+                        },
+                        children: [
+                          " ",
+                          "*"
+                        ]
+                      }
+                    )
+                  ]
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -2935,7 +3077,7 @@ const TextArea = React.forwardRef(
                   rows,
                   "aria-label": placeholder,
                   className: cn(
-                    "m-0 min-w-0 flex-1 resize-none border-none bg-transparent p-0 text-[14px] leading-[20px] not-italic outline-none"
+                    "m-0 min-h-0 min-w-0 w-full flex-1 resize-none border-none bg-transparent p-0 text-sm leading-5 not-italic outline-none"
                   ),
                   style: {
                     ...textareaProps.style,
@@ -2944,11 +3086,11 @@ const TextArea = React.forwardRef(
                   }
                 }
               )
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full items-start p-[14px]", children: [
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full items-start p-3.5", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "p",
                 {
-                  className: "pointer-events-none relative h-full min-h-[1px] min-w-0 flex-1 text-[16px] leading-[20px] not-italic",
+                  className: "pointer-events-none relative h-full min-h-[1px] min-w-0 flex-1 text-base leading-5 not-italic",
                   style: { color: floatLabel },
                   children: [
                     placeholder,
@@ -2985,7 +3127,7 @@ const TextArea = React.forwardRef(
                   },
                   rows,
                   className: cn(
-                    "absolute inset-0 h-full w-full cursor-text resize-none border-none bg-transparent text-[16px] outline-none"
+                    "absolute inset-0 h-full w-full cursor-text resize-none border-none bg-transparent text-base outline-none"
                   ),
                   style: {
                     ...textareaProps.style,
@@ -3000,27 +3142,21 @@ const TextArea = React.forwardRef(
           ]
         }
       ),
-      showBelow && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]",
-          children: [
-            leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
-            showCount && /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "shrink-0 whitespace-nowrap text-right",
-                style: { color: countColor },
-                children: [
-                  charCount,
-                  "/",
-                  maxCount
-                ]
-              }
-            )
-          ]
-        }
-      )
+      showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
+        leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+        showCount && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "shrink-0 whitespace-nowrap text-right",
+            style: { color: countColor },
+            children: [
+              charCount,
+              "/",
+              maxCount
+            ]
+          }
+        )
+      ] })
     ] });
   }
 );
@@ -3200,7 +3336,7 @@ function RangeSlotPicker({
                     className: "leading-[22px] relative shrink-0 text-[14px] text-center whitespace-nowrap",
                     style: {
                       fontVariationSettings: "'wdth' 100",
-                      color: isSelected ? "#ffffff" : "var(--foreground)"
+                      color: isSelected ? "var(--on-primary-action)" : "var(--foreground)"
                     },
                     children: slot.label
                   }
@@ -3344,7 +3480,7 @@ const TimeInput = React.forwardRef(
     const isError = state === "error";
     const isFocus = state === "focus";
     const isFilled = mode === "single" ? Boolean(currentValue) : true;
-    const bgClass = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
     const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -3425,8 +3561,7 @@ const TimeInput = React.forwardRef(
             react.Minus,
             {
               size: 20,
-              color: minusColor,
-              weight: "bold"
+              color: minusColor
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3473,9 +3608,9 @@ const TimeInput = React.forwardRef(
       );
     };
     const isTriggerFilled = isFilled && (mode === "range" || currentValue);
-    const triggerPadding = isTriggerFilled ? "py-[6px]" : "py-[12px]";
+    const triggerPadding = isTriggerFilled ? "py-1.5" : "py-3";
     const triggerBase = cn(
-      "relative flex gap-[8px] items-center rounded-[8px] px-[14px] w-full",
+      "relative flex gap-2 items-center rounded-lg px-3.5 w-full",
       bgClass,
       triggerPadding
     );
@@ -3511,7 +3646,7 @@ const TimeInput = React.forwardRef(
         }
       )
     ] });
-    const belowMsg = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    const belowMsg = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: "flex-1 min-w-0",
@@ -3633,10 +3768,10 @@ const TimeInput = React.forwardRef(
                   {
                     align: "start",
                     sideOffset: 4,
-                    className: "z-50 rounded-[8px] bg-white p-3 outline-none max-w-[340px]",
+                    className: "z-50 rounded-[8px] bg-popover p-3 outline-none max-w-[340px] text-popover-foreground",
                     style: {
-                      boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
-                      border: "1px solid rgba(0,0,0,0.08)",
+                      boxShadow: "var(--elevation-popover)",
+                      border: "1px solid var(--border)",
                       minWidth: mode === "single" ? 327 : void 0
                     },
                     onOpenAutoFocus: (e) => e.preventDefault(),
@@ -3666,6 +3801,7 @@ exports.OptionList = OptionList;
 exports.SearchInput = SearchInput;
 exports.Tab = Tab;
 exports.TabGroup = TabGroup;
+exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
 exports.cn = cn;