@sarunyu/system-one 1.0.2 → 1.0.3

package/dist/index.js

@@ -3,63 +3,77 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useLayoutEffect } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Lock, CalendarBlank, MapPin, Users, Minus, MagnifyingGlass, X, Clock } from "@phosphor-icons/react";
+import { Lock, CalendarBlank, MapPin, Users, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, Check, X, MagnifyingGlass, Circle, Clock } from "@phosphor-icons/react";
 import { DayPicker, useNavigation } from "react-day-picker";
 import * as Popover from "@radix-ui/react-popover";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { Drawer as Drawer$1 } from "vaul";
 function cn(...inputs) {
   return twMerge(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,
@@ -68,11 +82,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) {
@@ -81,14 +95,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 = forwardRef(function Button2({
   size = "md",
@@ -124,7 +138,7 @@ const Button = 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__ */ jsx(
@@ -258,8 +272,8 @@ const Card = 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;
@@ -269,7 +283,7 @@ const Card = 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
       ),
@@ -303,49 +317,49 @@ const Card = forwardRef(function Card2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("w-full shrink-0 bg-white", padding), children: /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-[4px]", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("w-full shrink-0 bg-card", padding), children: /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
             /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex w-full items-center gap-[8px]", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-[4px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-1", children: [
                 /* @__PURE__ */ jsx(CalendarIcon, {}),
-                /* @__PURE__ */ jsx("p", { className: "whitespace-nowrap text-[12px] leading-[16px] text-accent-orange", children: date })
+                /* @__PURE__ */ jsx("p", { className: "whitespace-nowrap text-xs leading-4 text-accent-orange", children: date })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "h-[14px] w-px shrink-0 bg-border" }),
               /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+            showLocation && /* @__PURE__ */ jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
               /* @__PURE__ */ jsx(LocationIcon, {}),
               /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+            showAudience && /* @__PURE__ */ jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
               /* @__PURE__ */ jsx(AudienceIcon, {}),
-              /* @__PURE__ */ jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-subtle-text", children: "ผู้เข้าร่วม" }),
-              /* @__PURE__ */ jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-primary-action", children: count })
+              /* @__PURE__ */ jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-subtle-text", children: "ผู้เข้าร่วม" }),
+              /* @__PURE__ */ jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-primary-action", children: count })
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsx(
@@ -562,7 +576,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setYearRangeStart((s) => s - 12),
-        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsx(CaretLeft, { size: 16, className: "text-primary-action" })
       }
     );
     rightNav = /* @__PURE__ */ jsx(
@@ -571,7 +585,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setYearRangeStart((s) => s + 12),
-        children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsx(CaretRight, { size: 16, className: "text-primary-action" })
       }
     );
   } else if (view === "months") {
@@ -581,7 +595,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setPickerYear((y) => y - 1),
-        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsx(CaretLeft, { size: 16, className: "text-primary-action" })
       }
     );
     rightNav = /* @__PURE__ */ jsx(
@@ -590,7 +604,7 @@ function CustomCaption({
         type: "button",
         className: NAV_BTN_CLASS,
         onClick: () => setPickerYear((y) => y + 1),
-        children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-primary-action" })
+        children: /* @__PURE__ */ jsx(CaretRight, { size: 16, className: "text-primary-action" })
       }
     );
   } else if (isDrawerRange) {
@@ -601,7 +615,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: handlePrevYear,
-          children: /* @__PURE__ */ jsx(ChevronsLeft, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsx(CaretDoubleLeft, { size: 16, className: "text-primary-action" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -610,7 +624,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: () => previousMonth && goToMonth(previousMonth),
-          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsx(CaretLeft, { size: 16, className: "text-primary-action" })
         }
       )
     ] });
@@ -621,7 +635,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: () => nextMonth && goToMonth(nextMonth),
-          children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsx(CaretRight, { size: 16, className: "text-primary-action" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -630,7 +644,7 @@ function CustomCaption({
           type: "button",
           className: NAV_BTN_CLASS,
           onClick: handleNextYear,
-          children: /* @__PURE__ */ jsx(ChevronsRight, { size: 16, className: "text-primary-action" })
+          children: /* @__PURE__ */ jsx(CaretDoubleRight, { size: 16, className: "text-primary-action" })
         }
       )
     ] });
@@ -644,7 +658,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: handlePrevYear,
             children: /* @__PURE__ */ jsx(
-              ChevronsLeft,
+              CaretDoubleLeft,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -658,7 +672,7 @@ function CustomCaption({
             type: "button",
             className: NAV_BTN_CLASS,
             onClick: () => previousMonth && goToMonth(previousMonth),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, className: "text-primary-action" })
+            children: /* @__PURE__ */ jsx(CaretLeft, { size: 16, className: "text-primary-action" })
           }
         )
       ] });
@@ -672,7 +686,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: () => nextMonth && goToMonth(nextMonth),
             children: /* @__PURE__ */ jsx(
-              ChevronRight,
+              CaretRight,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -687,7 +701,7 @@ function CustomCaption({
             className: NAV_BTN_CLASS,
             onClick: handleNextYear,
             children: /* @__PURE__ */ jsx(
-              ChevronsRight,
+              CaretDoubleRight,
               {
                 size: 16,
                 className: "text-primary-action"
@@ -701,7 +715,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 mb-2", children: [
@@ -720,7 +734,7 @@ function CustomCaption({
     view === "months" && /* @__PURE__ */ 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();
@@ -744,7 +758,7 @@ function CustomCaption({
     view === "years" && /* @__PURE__ */ 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;
@@ -809,9 +823,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",
@@ -1112,7 +1126,7 @@ const DateInput = 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)";
@@ -1176,30 +1190,37 @@ const DateInput = forwardRef(
         const valueRow = mode === "single" && currentDate ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex gap-[8px] items-center relative shrink-0 w-full", children: [
+        ) : mode === "range" && (currentRange == null ? void 0 : currentRange.from) ? /* @__PURE__ */ jsxs("div", { className: "flex gap-[8px] items-center relative w-full min-w-0", children: [
           /* @__PURE__ */ 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__ */ jsx(Minus, { size: 20, weight: "bold", color: minusColor }),
+          /* @__PURE__ */ jsx(
+            Minus,
+            {
+              size: 20,
+              color: minusColor,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "content-stretch flex flex-1 flex-col items-center justify-center min-h-px min-w-px relative", children: [
+        return /* @__PURE__ */ 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
         ] });
@@ -1259,13 +1280,13 @@ const DateInput = 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__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx(
+    const belowMessage = showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsx(
       "span",
       {
         className: "flex-1 min-w-0",
@@ -1350,7 +1371,10 @@ const DateInput = 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
       }
     );
@@ -1391,9 +1415,9 @@ const DateInput = 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(),
@@ -1413,12 +1437,6 @@ const DateInput = forwardRef(
   }
 );
 DateInput.displayName = "DateInput";
-function ChevronDownIcon$1({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function ChevronUpIcon$1({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
 const Dropdown = forwardRef(
   ({
     placeholder = "Text label",
@@ -1446,7 +1464,7 @@ const Dropdown = 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";
@@ -1507,17 +1525,17 @@ const Dropdown = 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__ */ jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] w-full", children: /* @__PURE__ */ jsx("p", { className: "leading-[20px] not-italic relative shrink-0 text-foreground text-[14px] font-bold whitespace-nowrap", children: label }) }) }),
+          label && /* @__PURE__ */ jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-start px-1 w-full", children: /* @__PURE__ */ jsx("p", { className: "leading-5 not-italic relative shrink-0 text-foreground text-sm font-bold whitespace-nowrap", children: label }) }) }),
           /* @__PURE__ */ 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: [
@@ -1542,7 +1560,7 @@ const Dropdown = 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)"
@@ -1593,7 +1611,7 @@ const Dropdown = 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)"
@@ -1609,7 +1627,7 @@ const Dropdown = forwardRef(
                     /* @__PURE__ */ 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,
@@ -1623,7 +1641,7 @@ const Dropdown = forwardRef(
                       /* @__PURE__ */ 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,
@@ -1634,7 +1652,7 @@ const Dropdown = forwardRef(
                       /* @__PURE__ */ 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
                         }
@@ -1647,7 +1665,7 @@ const Dropdown = forwardRef(
                     /* @__PURE__ */ 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
                       }
@@ -1655,7 +1673,7 @@ const Dropdown = forwardRef(
                     /* @__PURE__ */ 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: "*"
                       }
@@ -1663,13 +1681,13 @@ const Dropdown = forwardRef(
                   ] }) : /* @__PURE__ */ 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__ */ jsx(ChevronUpIcon$1, { className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(ChevronDownIcon$1, { className: cn("shrink-0", caretClassName) })
+                isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
               ]
             }
           ),
@@ -1677,11 +1695,11 @@ const Dropdown = 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__ */ jsx(
@@ -1690,13 +1708,13 @@ const Dropdown = 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__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ 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
@@ -1704,7 +1722,7 @@ const Dropdown = forwardRef(
                   ) }) })
                 },
                 opt.value
-              )) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+              )) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
@@ -1716,34 +1734,6 @@ const Dropdown = forwardRef(
 Dropdown.displayName = "Dropdown";
 const TAG_GAP = 4;
 const MAX_COMPONENT_WIDTH = 343;
-function ChevronDownIcon({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function ChevronUpIcon({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function XIcon({ color = "var(--muted-foreground)" }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      className: "shrink-0",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M9 3L3 9M3 3L9 9",
-          stroke: color,
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 function RemovableTag({
   label,
   disabled,
@@ -1777,8 +1767,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__ */ 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__ */ jsx(
+              X,
+              {
+                size: 12,
+                weight: "bold",
+                color: iconColor,
+                className: "shrink-0"
+              }
+            )
           }
         )
       ]
@@ -1811,7 +1809,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__ */ jsx(
     "div",
@@ -1834,28 +1832,6 @@ function OverflowBadge({
     }
   );
 }
-function CheckIcon$1(props) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "10",
-      height: "8",
-      viewBox: "0 0 10 8",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ 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] = useState({
     visibleCount: selectedOptions.length,
@@ -1944,7 +1920,7 @@ const DropdownMultiple = 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";
@@ -2026,7 +2002,7 @@ const DropdownMultiple = forwardRef(
       /* @__PURE__ */ 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
         }
@@ -2044,7 +2020,7 @@ const DropdownMultiple = forwardRef(
     ] }) : /* @__PURE__ */ 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
       }
@@ -2053,7 +2029,7 @@ const DropdownMultiple = forwardRef(
       /* @__PURE__ */ 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
         }
@@ -2061,7 +2037,7 @@ const DropdownMultiple = forwardRef(
       /* @__PURE__ */ 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: "*"
         }
@@ -2069,7 +2045,7 @@ const DropdownMultiple = forwardRef(
     ] }) : /* @__PURE__ */ 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
       }
@@ -2079,7 +2055,7 @@ const DropdownMultiple = 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,
@@ -2222,8 +2198,8 @@ const DropdownMultiple = 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: [
@@ -2253,16 +2229,16 @@ const DropdownMultiple = forwardRef(
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+                /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) })
               ]
             }
           ),
           open && !isStatic && options.length > 0 && /* @__PURE__ */ 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__ */ jsx(
                 "div",
@@ -2285,7 +2261,7 @@ const DropdownMultiple = 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__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
                           /* @__PURE__ */ jsx(
@@ -2305,14 +2281,21 @@ const DropdownMultiple = forwardRef(
                                 "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
                                 "bg-transparent"
                               ),
-                              children: isSelected && /* @__PURE__ */ jsx(CheckIcon$1, { className: "text-primary-action" })
+                              children: isSelected && /* @__PURE__ */ jsx(
+                                Check,
+                                {
+                                  size: 12,
+                                  weight: "bold",
+                                  className: "text-primary-action"
+                                }
+                              )
                             }
                           )
                         ] }) })
                       },
                       opt.value
                     );
-                  }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+                  }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
                 }
               )
             }
@@ -2349,6 +2332,7 @@ const Input = forwardRef(function Input2({
   onFocus: onFocusProp,
   onBlur: onBlurProp,
   disabled: _disabledProp,
+  maxLength: maxLengthProp,
   ...inputRest
 }, ref) {
   const [focused, setFocused] = useState(false);
@@ -2360,7 +2344,7 @@ const Input = 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)";
@@ -2368,14 +2352,19 @@ const Input = 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);
@@ -2389,12 +2378,12 @@ const Input = forwardRef(function Input2({
   const inputCaretStyle = {
     caretColor: "var(--caret-color)"
   };
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-[4px] w-full", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1 w-full", className), children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "relative rounded-[8px]",
+          "relative rounded-lg",
           padding,
           bg,
           containerFlex
@@ -2425,14 +2414,15 @@ const Input = 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__ */ jsx(
+                      required && /* @__PURE__ */ jsx(
                         "span",
                         {
+                          className: "text-xs leading-4",
                           style: {
                             color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
                           },
@@ -2442,7 +2432,7 @@ const Input = forwardRef(function Input2({
                     ]
                   }
                 ),
-                !isDisabled && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   "input",
                   {
                     ...inputRest,
@@ -2452,10 +2442,14 @@ const Input = 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,
@@ -2483,7 +2477,7 @@ const Input = forwardRef(function Input2({
             "p",
             {
               className: cn(
-                "shrink-0 whitespace-nowrap text-[16px]",
+                "shrink-0 whitespace-nowrap text-[16px] leading-[20px]",
                 !isFilled && "relative"
               ),
               style: {
@@ -2497,7 +2491,7 @@ const Input = forwardRef(function Input2({
         ]
       }
     ),
-    showBelow && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]", children: [
+    showBelow && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
       leftText ? /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
       showCount && /* @__PURE__ */ jsxs(
         "span",
@@ -2515,28 +2509,6 @@ const Input = forwardRef(function Input2({
   ] });
 });
 Input.displayName = "Input";
-function CheckIcon(props) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "11",
-      viewBox: "0 0 16 11",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M1 5.5L5.5 10L15 1",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 const OptionList = forwardRef(
   function OptionList2({
     options,
@@ -2565,17 +2537,17 @@ const OptionList = 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__ */ jsx(
             "div",
             {
@@ -2585,11 +2557,11 @@ const OptionList = forwardRef(
                 rowBg,
                 disabled ? "cursor-default" : "cursor-pointer"
               ),
-              children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-[8px] p-[14px]", children: [
+              children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 p-3.5", children: [
                 opt.icon && /* @__PURE__ */ 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)"
                     },
@@ -2599,19 +2571,26 @@ const OptionList = forwardRef(
                 /* @__PURE__ */ 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__ */ jsx("span", { className: "flex size-[20px] shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary-action" }) })
+                selected && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    size: 16,
+                    weight: "bold",
+                    className: "text-primary-action"
+                  }
+                ) })
               ] })
             },
             opt.value
           );
-        }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center p-[14px]", children: /* @__PURE__ */ jsx("p", { className: "min-h-[1px] min-w-0 flex-1 text-[14px] leading-[20px] not-italic text-disabled", children: emptyText }) }) })
+        }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center p-3.5", children: /* @__PURE__ */ jsx("p", { className: "min-h-[1px] min-w-0 flex-1 text-sm leading-5 not-italic text-disabled", children: emptyText }) }) })
       }
     );
   }
@@ -2633,8 +2612,8 @@ const SearchInput = 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)";
@@ -2654,7 +2633,7 @@ const SearchInput = 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
@@ -2680,7 +2659,7 @@ const SearchInput = forwardRef(
             MagnifyingGlass,
             {
               size: iconSize,
-              color: "var(--muted-foreground)",
+              color: focused ? "var(--subtle-text)" : "var(--muted-foreground)",
               weight: "regular"
             }
           ) }),
@@ -2688,7 +2667,7 @@ const SearchInput = forwardRef(
             !isFilled && /* @__PURE__ */ 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
               }
@@ -2703,7 +2682,7 @@ const SearchInput = 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)"
@@ -2737,33 +2716,50 @@ const SearchInput = 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__ */ jsx(Circle, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", className) });
+}
 const Tab = 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__ */ 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";
@@ -2777,8 +2773,9 @@ const Tab = 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
@@ -2794,11 +2791,24 @@ const Tab = forwardRef(function Tab2({
             )
           }
         ),
+        hasIcon && /* @__PURE__ */ 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__ */ 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,
@@ -2806,6 +2816,16 @@ const Tab = forwardRef(function Tab2({
             ),
             children: title
           }
+        ),
+        hasNotification && /* @__PURE__ */ 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
+          }
         )
       ]
     }
@@ -2821,6 +2841,8 @@ const TabGroup = 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
@@ -2828,6 +2850,112 @@ const TabGroup = 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__ */ jsx(
+    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__ */ jsx(
+    X,
+    {
+      "aria-hidden": "true",
+      weight: "regular",
+      className: cn("shrink-0", className),
+      color: disabled ? "var(--disabled)" : "var(--subtle-text)"
+    }
+  );
+}
+const Tag = 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__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center rounded-[4px]",
+        (icon || close) && "gap-[2px]",
+        s.container,
+        bgClass,
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx(CircleIcon, { disabled: isDisabled }),
+        /* @__PURE__ */ jsx("span", { className: cn("whitespace-nowrap font-normal", s.text, textClass), children: text }),
+        close && /* @__PURE__ */ 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__ */ jsx(CloseIcon, { disabled: isDisabled, className: s.closeIcon })
+          }
+        )
+      ]
+    }
+  );
+});
+Tag.displayName = "Tag";
 const TextArea = forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -2870,13 +2998,13 @@ const TextArea = forwardRef(
       if (!controlled) setInternalValue(newValue);
       onChange == null ? void 0 : onChange(newValue);
     };
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col gap-[4px]", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col gap-1", className), children: [
       /* @__PURE__ */ 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__ */ jsx(
@@ -2887,13 +3015,27 @@ const TextArea = forwardRef(
                 style: { inset: borderInset, borderRadius: borderRad, borderColor }
               }
             ),
-            isFilled ? /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-start p-[14px] pb-[6px]", children: [
-              /* @__PURE__ */ jsx(
+            isFilled ? /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col px-3.5 pt-3.5 pb-1.5", children: [
+              /* @__PURE__ */ 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__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+                        },
+                        children: [
+                          " ",
+                          "*"
+                        ]
+                      }
+                    )
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -2916,7 +3058,7 @@ const TextArea = 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,
@@ -2925,11 +3067,11 @@ const TextArea = forwardRef(
                   }
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex size-full items-start p-[14px]", children: [
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex size-full items-start p-3.5", children: [
               /* @__PURE__ */ 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,
@@ -2966,7 +3108,7 @@ const TextArea = 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,
@@ -2981,27 +3123,21 @@ const TextArea = forwardRef(
           ]
         }
       ),
-      showBelow && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]",
-          children: [
-            leftText ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
-            showCount && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "shrink-0 whitespace-nowrap text-right",
-                style: { color: countColor },
-                children: [
-                  charCount,
-                  "/",
-                  maxCount
-                ]
-              }
-            )
-          ]
-        }
-      )
+      showBelow && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
+        leftText ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        showCount && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "shrink-0 whitespace-nowrap text-right",
+            style: { color: countColor },
+            children: [
+              charCount,
+              "/",
+              maxCount
+            ]
+          }
+        )
+      ] })
     ] });
   }
 );
@@ -3181,7 +3317,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
                   }
@@ -3325,7 +3461,7 @@ const TimeInput = 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)";
@@ -3406,8 +3542,7 @@ const TimeInput = forwardRef(
             Minus,
             {
               size: 20,
-              color: minusColor,
-              weight: "bold"
+              color: minusColor
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3454,9 +3589,9 @@ const TimeInput = 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
     );
@@ -3492,7 +3627,7 @@ const TimeInput = forwardRef(
         }
       )
     ] });
-    const belowMsg = showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx(
+    const belowMsg = showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsx(
       "span",
       {
         className: "flex-1 min-w-0",
@@ -3614,10 +3749,10 @@ const TimeInput = 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(),
@@ -3648,6 +3783,7 @@ export {
   SearchInput,
   Tab,
   TabGroup,
+  Tag,
   TextArea,
   TimeInput,
   cn