@sarunyu/system-one 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/index.cjs +427 -290
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +428 -291
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/components/chip.d.ts +13 -0
  6. package/dist/src/components/chip.d.ts.map +1 -0
  7. package/dist/src/components/date-input.d.ts.map +1 -1
  8. package/dist/src/components/dropdown-multiple.d.ts.map +1 -1
  9. package/dist/src/components/dropdown.d.ts.map +1 -1
  10. package/dist/src/components/input.d.ts.map +1 -1
  11. package/dist/src/components/option-list.d.ts.map +1 -1
  12. package/dist/src/components/search-input.d.ts.map +1 -1
  13. package/dist/src/components/tab.d.ts +5 -0
  14. package/dist/src/components/tab.d.ts.map +1 -1
  15. package/dist/src/components/tag.d.ts +21 -0
  16. package/dist/src/components/tag.d.ts.map +1 -0
  17. package/dist/src/components/textarea.d.ts.map +1 -1
  18. package/dist/src/components/time-input.d.ts.map +1 -1
  19. package/dist/src/index.d.ts +2 -0
  20. package/dist/src/index.d.ts.map +1 -1
  21. package/dist/style.css +1 -1
  22. package/package.json +6 -4
package/dist/index.cjs CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  "use strict";
2
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
4
  const jsxRuntime = require("react/jsx-runtime");
@@ -7,7 +8,6 @@ const tailwindMerge = require("tailwind-merge");
7
8
  const react = require("@phosphor-icons/react");
8
9
  const reactDayPicker = require("react-day-picker");
9
10
  const Popover = require("@radix-ui/react-popover");
10
- const lucideReact = require("lucide-react");
11
11
  const vaul = require("vaul");
12
12
  function _interopNamespaceDefault(e) {
13
13
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -31,54 +31,69 @@ function cn(...inputs) {
31
31
  return tailwindMerge.twMerge(clsx.clsx(inputs));
32
32
  }
33
33
  const labelIconSizeClass = {
34
- xs: "size-[13px]",
35
- sm: "size-[15px]",
36
- md: "size-[15px]",
37
- lg: "size-[16px]",
38
- xl: "size-[16px]"
34
+ xs: "h-4 w-4",
35
+ // 16px
36
+ sm: "h-4.5 w-4.5",
37
+ // ~18px
38
+ md: "h-4.5 w-4.5",
39
+ lg: "h-5 w-5",
40
+ // 20px
41
+ xl: "h-5 w-5"
39
42
  };
40
43
  const gapClass = {
41
- xs: "gap-[4px]",
42
- sm: "gap-[4px]",
43
- md: "gap-[4px]",
44
- lg: "gap-[4px]",
45
- xl: "gap-[4px]"
44
+ xs: "gap-0.5",
45
+ // 2px
46
+ sm: "gap-0.5",
47
+ md: "gap-0.5",
48
+ lg: "gap-1",
49
+ // 4px
50
+ xl: "gap-1"
46
51
  };
47
52
  const textSizeClass = {
48
- xs: "text-[12px] leading-[18px]",
49
- sm: "text-[14px] leading-[20px]",
50
- md: "text-[14px] leading-[20px]",
51
- lg: "text-[14px] leading-[20px]",
52
- xl: "text-[14px] leading-[20px]"
53
+ xs: "text-xs leading-4",
54
+ sm: "text-sm leading-5",
55
+ md: "text-sm leading-5",
56
+ lg: "text-sm leading-5",
57
+ xl: "text-sm leading-5"
53
58
  };
54
59
  const roundedLabelClass = {
55
- xs: "rounded-[4px]",
56
- sm: "rounded-[6px]",
57
- md: "rounded-[6px]",
58
- lg: "rounded-[8px]",
59
- xl: "rounded-[8px]"
60
+ xs: "rounded",
61
+ sm: "rounded-md",
62
+ md: "rounded-md",
63
+ lg: "rounded-lg",
64
+ xl: "rounded-lg"
60
65
  };
61
66
  function getPaddingClasses(size, hasLeft, hasRight) {
62
67
  const pyMap = {
63
- xs: "py-[4px]",
64
- sm: "py-[4px]",
65
- md: "py-[6px]",
66
- lg: "py-[8px]",
67
- xl: "py-[10px]"
68
+ xs: "py-1",
69
+ // 4px
70
+ sm: "py-1",
71
+ // 4px
72
+ md: "py-1.5",
73
+ // 6px
74
+ lg: "py-2",
75
+ // 8px
76
+ xl: "py-2.5"
77
+ // 10px
68
78
  };
69
79
  const pxMap = {
70
- xs: { l: "pl-[6px]", r: "pr-[6px]" },
71
- sm: { l: "pl-[8px]", r: "pr-[8px]" },
72
- md: { l: "pl-[10px]", r: "pr-[10px]" },
73
- lg: { l: "pl-[14px]", r: "pr-[14px]" },
74
- xl: { l: "pl-[16px]", r: "pr-[16px]" }
80
+ xs: { l: "pl-1.5", r: "pr-1.5" },
81
+ // 6px
82
+ sm: { l: "pl-2", r: "pr-2" },
83
+ // 8px
84
+ md: { l: "pl-2.5", r: "pr-2.5" },
85
+ // 10px
86
+ lg: { l: "pl-3.5", r: "pr-3.5" },
87
+ // 14px
88
+ xl: { l: "pl-4", r: "pr-4" }
89
+ // 16px
75
90
  };
76
91
  const reducedMap = {
77
- xs: { l: "pl-[6px]", r: "pr-[6px]" },
78
- sm: { l: "pl-[6px]", r: "pr-[6px]" },
79
- md: { l: "pl-[8px]", r: "pr-[8px]" },
80
- lg: { l: "pl-[10px]", r: "pr-[10px]" },
81
- xl: { l: "pl-[12px]", r: "pr-[12px]" }
92
+ xs: { l: "pl-1.5", r: "pr-1.5" },
93
+ sm: { l: "pl-1.5", r: "pr-1.5" },
94
+ md: { l: "pl-2", r: "pr-2" },
95
+ lg: { l: "pl-2.5", r: "pr-2.5" },
96
+ xl: { l: "pl-3", r: "pr-3" }
82
97
  };
83
98
  return [
84
99
  hasLeft ? reducedMap[size].l : pxMap[size].l,
@@ -87,11 +102,11 @@ function getPaddingClasses(size, hasLeft, hasRight) {
87
102
  ];
88
103
  }
89
104
  const iconSizeSpec = {
90
- "icon-xs": { btn: "size-[26px]", icon: 16, rounded: "rounded-[4px]" },
91
- "icon-sm": { btn: "size-[28px]", icon: 18, rounded: "rounded-[6px]" },
92
- "icon-md": { btn: "size-[32px]", icon: 18, rounded: "rounded-[6px]" },
93
- "icon-lg": { btn: "size-[36px]", icon: 20, rounded: "rounded-[8px]" },
94
- "icon-xl": { btn: "size-[40px]", icon: 20, rounded: "rounded-[8px]" }
105
+ "icon-xs": { btn: "h-6 w-6", icon: 16, rounded: "rounded" },
106
+ "icon-sm": { btn: "h-7 w-7", icon: 18, rounded: "rounded-md" },
107
+ "icon-md": { btn: "h-8 w-8", icon: 18, rounded: "rounded-md" },
108
+ "icon-lg": { btn: "h-9 w-9", icon: 20, rounded: "rounded-lg" },
109
+ "icon-xl": { btn: "h-10 w-10", icon: 20, rounded: "rounded-lg" }
95
110
  };
96
111
  function getVariantClasses(variant, isDisabled) {
97
112
  if (isDisabled) {
@@ -100,14 +115,14 @@ function getVariantClasses(variant, isDisabled) {
100
115
  return "bg-disabled-bg text-disabled cursor-not-allowed";
101
116
  }
102
117
  if (variant === "outline")
103
- return "bg-white text-primary-action border border-border hover:bg-hover-bg active:bg-disabled-bg";
118
+ return "bg-background text-primary-action border border-border hover:bg-hover-bg active:bg-disabled-bg";
104
119
  if (variant === "plain")
105
120
  return "bg-transparent text-primary-action hover:bg-hover-bg active:bg-disabled-bg";
106
121
  if (variant === "outline-black")
107
- return "bg-white text-foreground border border-border hover:bg-hover-bg";
122
+ return "bg-background text-foreground border border-border hover:bg-hover-bg";
108
123
  if (variant === "plain-black")
109
124
  return "bg-transparent text-foreground hover:bg-hover-bg";
110
- return "bg-primary-action text-white hover:bg-primary-action-hover active:bg-primary-action-active";
125
+ return "bg-primary-action text-on-primary-action hover:bg-primary-action-hover active:bg-primary-action-active";
111
126
  }
112
127
  const Button = React.forwardRef(function Button2({
113
128
  size = "md",
@@ -143,7 +158,7 @@ const Button = React.forwardRef(function Button2({
143
158
  } : onPointerLeave;
144
159
  const variantClasses = getVariantClasses(variant, isDisabled);
145
160
  const cursorClass = isDisabled ? "cursor-not-allowed" : "cursor-pointer";
146
- const baseClasses = "inline-flex items-center justify-center font-semibold whitespace-nowrap transition-colors duration-150 select-none";
161
+ const baseClasses = "inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors duration-150 select-none";
147
162
  if (isIconOnly) {
148
163
  const spec = iconSizeSpec[size];
149
164
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -277,8 +292,8 @@ const Card = React.forwardRef(function Card2({
277
292
  className
278
293
  }, ref) {
279
294
  const widthClass = variant === "desktop" ? "w-[308px]" : variant === "tablet" ? "w-[224px]" : "w-[163px]";
280
- const padding = variant === "desktop" ? "p-[16px]" : variant === "tablet" ? "p-[12px]" : "p-[10px]";
281
- const titleGap = variant === "desktop" ? "gap-[6px]" : "gap-[4px]";
295
+ const padding = variant === "desktop" ? "p-4" : variant === "tablet" ? "p-3" : "p-2.5";
296
+ const titleGap = variant === "desktop" ? "gap-1.5" : "gap-1";
282
297
  const bannerClass = variant === "desktop" ? "h-[173px]" : "aspect-video w-full";
283
298
  const tag = tagConfig[tagStatus];
284
299
  const bannerSrc = image ?? imgBanner;
@@ -288,7 +303,7 @@ const Card = React.forwardRef(function Card2({
288
303
  ref,
289
304
  className: cn(
290
305
  "flex min-h-[120px] flex-col items-start overflow-clip rounded-[8px]",
291
- "shadow-[0px_0px_2px_0px_rgba(102,102,102,0.16),0px_4px_8px_0px_rgba(102,102,102,0.12)]",
306
+ "shadow-card",
292
307
  widthClass,
293
308
  className
294
309
  ),
@@ -322,49 +337,49 @@ const Card = React.forwardRef(function Card2({
322
337
  }
323
338
  )
324
339
  ] }),
325
- /* @__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: [
326
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-[4px]", children: [
340
+ /* @__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: [
341
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
327
342
  /* @__PURE__ */ jsxRuntime.jsx(
328
343
  "p",
329
344
  {
330
345
  className: cn(
331
- "line-clamp-2 w-full overflow-hidden text-ellipsis text-[14px] leading-[20px] text-foreground"
346
+ "line-clamp-2 w-full overflow-hidden text-ellipsis text-sm leading-5 text-foreground"
332
347
  ),
333
348
  children: title
334
349
  }
335
350
  ),
336
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px]", children: [
337
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-[4px]", children: [
351
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
352
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-1", children: [
338
353
  /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
339
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[16px] text-accent-orange", children: date })
354
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-xs leading-4 text-accent-orange", children: date })
340
355
  ] }),
341
356
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] w-px shrink-0 bg-border" }),
342
357
  /* @__PURE__ */ jsxRuntime.jsx(
343
358
  "p",
344
359
  {
345
360
  className: cn(
346
- "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
361
+ "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
347
362
  ),
348
363
  children: time
349
364
  }
350
365
  )
351
366
  ] }),
352
- showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
367
+ showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
353
368
  /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
354
369
  /* @__PURE__ */ jsxRuntime.jsx(
355
370
  "p",
356
371
  {
357
372
  className: cn(
358
- "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
373
+ "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
359
374
  ),
360
375
  children: location
361
376
  }
362
377
  )
363
378
  ] }),
364
- showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
379
+ showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
365
380
  /* @__PURE__ */ jsxRuntime.jsx(AudienceIcon, {}),
366
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-subtle-text", children: "ผู้เข้าร่วม" }),
367
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-primary-action", children: count })
381
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-subtle-text", children: "ผู้เข้าร่วม" }),
382
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-primary-action", children: count })
368
383
  ] })
369
384
  ] }),
370
385
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -581,7 +596,7 @@ function CustomCaption({
581
596
  type: "button",
582
597
  className: NAV_BTN_CLASS,
583
598
  onClick: () => setYearRangeStart((s) => s - 12),
584
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
599
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
585
600
  }
586
601
  );
587
602
  rightNav = /* @__PURE__ */ jsxRuntime.jsx(
@@ -590,7 +605,7 @@ function CustomCaption({
590
605
  type: "button",
591
606
  className: NAV_BTN_CLASS,
592
607
  onClick: () => setYearRangeStart((s) => s + 12),
593
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
608
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
594
609
  }
595
610
  );
596
611
  } else if (view === "months") {
@@ -600,7 +615,7 @@ function CustomCaption({
600
615
  type: "button",
601
616
  className: NAV_BTN_CLASS,
602
617
  onClick: () => setPickerYear((y) => y - 1),
603
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
618
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
604
619
  }
605
620
  );
606
621
  rightNav = /* @__PURE__ */ jsxRuntime.jsx(
@@ -609,7 +624,7 @@ function CustomCaption({
609
624
  type: "button",
610
625
  className: NAV_BTN_CLASS,
611
626
  onClick: () => setPickerYear((y) => y + 1),
612
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
627
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
613
628
  }
614
629
  );
615
630
  } else if (isDrawerRange) {
@@ -620,7 +635,7 @@ function CustomCaption({
620
635
  type: "button",
621
636
  className: NAV_BTN_CLASS,
622
637
  onClick: handlePrevYear,
623
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { size: 16, className: "text-primary-action" })
638
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDoubleLeft, { size: 16, className: "text-primary-action" })
624
639
  }
625
640
  ),
626
641
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -629,7 +644,7 @@ function CustomCaption({
629
644
  type: "button",
630
645
  className: NAV_BTN_CLASS,
631
646
  onClick: () => previousMonth && goToMonth(previousMonth),
632
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
647
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
633
648
  }
634
649
  )
635
650
  ] });
@@ -640,7 +655,7 @@ function CustomCaption({
640
655
  type: "button",
641
656
  className: NAV_BTN_CLASS,
642
657
  onClick: () => nextMonth && goToMonth(nextMonth),
643
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
658
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, className: "text-primary-action" })
644
659
  }
645
660
  ),
646
661
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -649,7 +664,7 @@ function CustomCaption({
649
664
  type: "button",
650
665
  className: NAV_BTN_CLASS,
651
666
  onClick: handleNextYear,
652
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { size: 16, className: "text-primary-action" })
667
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDoubleRight, { size: 16, className: "text-primary-action" })
653
668
  }
654
669
  )
655
670
  ] });
@@ -663,7 +678,7 @@ function CustomCaption({
663
678
  className: NAV_BTN_CLASS,
664
679
  onClick: handlePrevYear,
665
680
  children: /* @__PURE__ */ jsxRuntime.jsx(
666
- lucideReact.ChevronsLeft,
681
+ react.CaretDoubleLeft,
667
682
  {
668
683
  size: 16,
669
684
  className: "text-primary-action"
@@ -677,7 +692,7 @@ function CustomCaption({
677
692
  type: "button",
678
693
  className: NAV_BTN_CLASS,
679
694
  onClick: () => previousMonth && goToMonth(previousMonth),
680
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
695
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, className: "text-primary-action" })
681
696
  }
682
697
  )
683
698
  ] });
@@ -691,7 +706,7 @@ function CustomCaption({
691
706
  className: NAV_BTN_CLASS,
692
707
  onClick: () => nextMonth && goToMonth(nextMonth),
693
708
  children: /* @__PURE__ */ jsxRuntime.jsx(
694
- lucideReact.ChevronRight,
709
+ react.CaretRight,
695
710
  {
696
711
  size: 16,
697
712
  className: "text-primary-action"
@@ -706,7 +721,7 @@ function CustomCaption({
706
721
  className: NAV_BTN_CLASS,
707
722
  onClick: handleNextYear,
708
723
  children: /* @__PURE__ */ jsxRuntime.jsx(
709
- lucideReact.ChevronsRight,
724
+ react.CaretDoubleRight,
710
725
  {
711
726
  size: 16,
712
727
  className: "text-primary-action"
@@ -720,7 +735,7 @@ function CustomCaption({
720
735
  const now = /* @__PURE__ */ new Date();
721
736
  const gridBtnClass = (active, isToday, isItemDisabled = false) => cn(
722
737
  "py-[10px] text-[13px] rounded-[6px] border-0 outline-none transition-colors",
723
- 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"
738
+ 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"
724
739
  );
725
740
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
726
741
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 mb-2", children: [
@@ -739,7 +754,7 @@ function CustomCaption({
739
754
  view === "months" && /* @__PURE__ */ jsxRuntime.jsx(
740
755
  "div",
741
756
  {
742
- className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
757
+ className: "absolute left-0 right-0 z-10 bg-background grid grid-cols-3 gap-1 p-2 content-center",
743
758
  style: { top: "42px", bottom: "0" },
744
759
  children: THAI_MONTHS_SHORT.map((name, i) => {
745
760
  const isCurrent = pickerYear === displayMonth.getFullYear() && i === displayMonth.getMonth();
@@ -763,7 +778,7 @@ function CustomCaption({
763
778
  view === "years" && /* @__PURE__ */ jsxRuntime.jsx(
764
779
  "div",
765
780
  {
766
- className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
781
+ className: "absolute left-0 right-0 z-10 bg-background grid grid-cols-3 gap-1 p-2 content-center",
767
782
  style: { top: "42px", bottom: "0" },
768
783
  children: Array.from({ length: 12 }, (_, i) => {
769
784
  const year = yearRangeStart + i;
@@ -828,9 +843,9 @@ const DAY_PICKER_CLASSES = {
828
843
  "hover:bg-disabled-bg transition-colors duration-100",
829
844
  "outline-none aria-selected:opacity-100 p-0"
830
845
  ),
831
- day_range_start: "day-range-start !bg-primary-action !text-white !rounded-l-[6px] !rounded-r-none",
832
- day_range_end: "day-range-end !bg-primary-action !text-white !rounded-r-[6px] !rounded-l-none",
833
- day_selected: "!bg-primary-action text-white hover:!bg-primary-action focus:!bg-primary-action rounded-[6px]",
846
+ day_range_start: "day-range-start !bg-primary-action !text-on-primary-action !rounded-l-[6px] !rounded-r-none",
847
+ day_range_end: "day-range-end !bg-primary-action !text-on-primary-action !rounded-r-[6px] !rounded-l-none",
848
+ day_selected: "!bg-primary-action text-on-primary-action hover:!bg-primary-action focus:!bg-primary-action rounded-[6px]",
834
849
  day_today: "[&:not([aria-selected=true])]:!bg-primary-action-light [&:not([aria-selected=true])]:text-foreground rounded-[6px]",
835
850
  day_outside: "day-outside text-disabled opacity-50 aria-selected:bg-transparent aria-selected:opacity-30",
836
851
  day_disabled: "text-disabled opacity-50 cursor-not-allowed",
@@ -1131,7 +1146,7 @@ const DateInput = React.forwardRef(
1131
1146
  const isError = state === "error";
1132
1147
  const isFocus = state === "focus";
1133
1148
  const isFilled = mode === "single" ? Boolean(currentDate) : Boolean(currentRange == null ? void 0 : currentRange.from);
1134
- const bgClass = isDisabled ? "bg-disabled-bg" : "bg-white";
1149
+ const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
1135
1150
  const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
1136
1151
  const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
1137
1152
  const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -1195,30 +1210,37 @@ const DateInput = React.forwardRef(
1195
1210
  const valueRow = mode === "single" && currentDate ? /* @__PURE__ */ jsxRuntime.jsx(
1196
1211
  "p",
1197
1212
  {
1198
- className: "leading-[20px] not-italic relative shrink-0 text-[16px] w-full",
1213
+ className: "leading-[20px] not-italic relative text-[16px] w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
1199
1214
  style: { color: valueColor },
1200
1215
  children: formatThaiDate(currentDate)
1201
1216
  }
1202
- ) : mode === "range" && (currentRange == null ? void 0 : currentRange.from) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center relative shrink-0 w-full", children: [
1217
+ ) : 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: [
1203
1218
  /* @__PURE__ */ jsxRuntime.jsx(
1204
1219
  "p",
1205
1220
  {
1206
- className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
1221
+ className: "leading-[20px] not-italic relative text-[16px] min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
1207
1222
  style: { color: valueColor },
1208
1223
  children: formatThaiDate(currentRange.from)
1209
1224
  }
1210
1225
  ),
1211
- /* @__PURE__ */ jsxRuntime.jsx(react.Minus, { size: 20, weight: "bold", color: minusColor }),
1226
+ /* @__PURE__ */ jsxRuntime.jsx(
1227
+ react.Minus,
1228
+ {
1229
+ size: 20,
1230
+ color: minusColor,
1231
+ className: "shrink-0"
1232
+ }
1233
+ ),
1212
1234
  /* @__PURE__ */ jsxRuntime.jsx(
1213
1235
  "p",
1214
1236
  {
1215
- className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
1237
+ className: "leading-[20px] not-italic relative text-[16px] min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
1216
1238
  style: { color: valueColor },
1217
1239
  children: currentRange.to ? formatThaiDate(currentRange.to) : "..."
1218
1240
  }
1219
1241
  )
1220
1242
  ] }) : null;
1221
- 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: [
1243
+ 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: [
1222
1244
  floatingLabel,
1223
1245
  valueRow
1224
1246
  ] });
@@ -1278,13 +1300,13 @@ const DateInput = React.forwardRef(
1278
1300
  )
1279
1301
  ] });
1280
1302
  const triggerBaseClasses = cn(
1281
- "relative flex gap-[8px] items-center rounded-[8px]",
1303
+ "relative flex gap-2 items-center rounded-lg min-w-0",
1282
1304
  bgClass,
1283
- "px-[14px]",
1284
- isFilled ? "py-[6px]" : "py-[12px]",
1305
+ "px-3.5",
1306
+ isFilled ? "py-1.5" : "py-3",
1285
1307
  "w-full"
1286
1308
  );
1287
- const belowMessage = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
1309
+ const belowMessage = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsxRuntime.jsx(
1288
1310
  "span",
1289
1311
  {
1290
1312
  className: "flex-1 min-w-0",
@@ -1369,7 +1391,10 @@ const DateInput = React.forwardRef(
1369
1391
  {
1370
1392
  type: "button",
1371
1393
  disabled: isDisabled,
1372
- className: cn(triggerBaseClasses, "text-left cursor-pointer disabled:cursor-default"),
1394
+ className: cn(
1395
+ triggerBaseClasses,
1396
+ "text-left cursor-pointer disabled:cursor-default"
1397
+ ),
1373
1398
  children: triggerInner
1374
1399
  }
1375
1400
  );
@@ -1410,9 +1435,9 @@ const DateInput = React.forwardRef(
1410
1435
  {
1411
1436
  align: "start",
1412
1437
  sideOffset: 4,
1413
- className: "z-50 rounded-[8px] bg-white p-3 outline-none",
1438
+ className: "z-50 rounded-[8px] bg-popover p-3 outline-none text-popover-foreground",
1414
1439
  style: {
1415
- boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
1440
+ boxShadow: "var(--elevation-popover)",
1416
1441
  border: "1px solid var(--border)"
1417
1442
  },
1418
1443
  onOpenAutoFocus: (e) => e.preventDefault(),
@@ -1432,12 +1457,6 @@ const DateInput = React.forwardRef(
1432
1457
  }
1433
1458
  );
1434
1459
  DateInput.displayName = "DateInput";
1435
- function ChevronDownIcon$1({ className }) {
1436
- 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" }) });
1437
- }
1438
- function ChevronUpIcon$1({ className }) {
1439
- 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" }) });
1440
- }
1441
1460
  const Dropdown = React.forwardRef(
1442
1461
  ({
1443
1462
  placeholder = "Text label",
@@ -1465,7 +1484,7 @@ const Dropdown = React.forwardRef(
1465
1484
  const state = forceState ?? (open ? "focus" : "default");
1466
1485
  const isError = state === "error";
1467
1486
  const isFocus = state === "focus";
1468
- const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
1487
+ const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
1469
1488
  const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
1470
1489
  const filledColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
1471
1490
  const caretClassName = isDisabled ? "text-disabled" : "text-muted-foreground";
@@ -1526,17 +1545,17 @@ const Dropdown = React.forwardRef(
1526
1545
  if (typeof ref === "function") ref(node);
1527
1546
  else if (ref) ref.current = node;
1528
1547
  },
1529
- className: cn("flex flex-col gap-[4px] w-full", className),
1548
+ className: cn("flex flex-col gap-1 w-full", className),
1530
1549
  children: [
1531
- 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 }) }) }),
1550
+ 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 }) }) }),
1532
1551
  /* @__PURE__ */ jsxRuntime.jsxs(
1533
1552
  "div",
1534
1553
  {
1535
1554
  onClick: handleToggle,
1536
1555
  className: cn(
1537
- "relative flex gap-[8px] items-center rounded-[8px] px-[14px]",
1556
+ "relative flex gap-2 items-center rounded-lg px-3.5",
1538
1557
  bg,
1539
- hasExternalLabel ? "h-[38px]" : isFilled && !open ? "py-[6px]" : "p-[14px]",
1558
+ hasExternalLabel ? "h-[38px]" : isFilled && !open ? "py-1.5" : "p-3.5",
1540
1559
  !isDisabled && !forceState && "cursor-pointer"
1541
1560
  ),
1542
1561
  children: [
@@ -1561,7 +1580,7 @@ const Dropdown = React.forwardRef(
1561
1580
  onChange: (e) => setSearch(e.target.value),
1562
1581
  onKeyDown: handleInputKeyDown,
1563
1582
  placeholder: isFilled ? selectedLabel : placeholder + (required ? " *" : ""),
1564
- 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",
1583
+ 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",
1565
1584
  style: {
1566
1585
  color: filledColor,
1567
1586
  caretColor: "var(--caret-color)"
@@ -1612,7 +1631,7 @@ const Dropdown = React.forwardRef(
1612
1631
  onChange: (e) => setSearch(e.target.value),
1613
1632
  onKeyDown: handleInputKeyDown,
1614
1633
  placeholder: placeholder + (required ? " *" : ""),
1615
- 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",
1634
+ 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",
1616
1635
  style: {
1617
1636
  color: "var(--foreground)",
1618
1637
  caretColor: "var(--caret-color)"
@@ -1628,7 +1647,7 @@ const Dropdown = React.forwardRef(
1628
1647
  /* @__PURE__ */ jsxRuntime.jsxs(
1629
1648
  "p",
1630
1649
  {
1631
- className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] overflow-hidden text-ellipsis whitespace-nowrap",
1650
+ className: "flex-1 min-w-0 min-h-[1px] leading-5 not-italic text-sm overflow-hidden text-ellipsis whitespace-nowrap",
1632
1651
  style: { color: filledColor },
1633
1652
  children: [
1634
1653
  selectedLabel,
@@ -1642,7 +1661,7 @@ const Dropdown = React.forwardRef(
1642
1661
  /* @__PURE__ */ jsxRuntime.jsxs(
1643
1662
  "p",
1644
1663
  {
1645
- className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
1664
+ className: "shrink-0 w-full leading-4 not-italic text-xs",
1646
1665
  style: { color: labelColor },
1647
1666
  children: [
1648
1667
  placeholder,
@@ -1653,7 +1672,7 @@ const Dropdown = React.forwardRef(
1653
1672
  /* @__PURE__ */ jsxRuntime.jsx(
1654
1673
  "p",
1655
1674
  {
1656
- className: "w-full leading-[20px] not-italic text-[14px] min-w-0 min-h-[1px]",
1675
+ className: "w-full leading-5 not-italic text-sm min-w-0 min-h-[1px]",
1657
1676
  style: { color: filledColor },
1658
1677
  children: selectedLabel
1659
1678
  }
@@ -1666,7 +1685,7 @@ const Dropdown = React.forwardRef(
1666
1685
  /* @__PURE__ */ jsxRuntime.jsx(
1667
1686
  "p",
1668
1687
  {
1669
- className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
1688
+ className: "leading-5 not-italic text-base whitespace-nowrap",
1670
1689
  style: { color: labelColor },
1671
1690
  children: placeholder
1672
1691
  }
@@ -1674,7 +1693,7 @@ const Dropdown = React.forwardRef(
1674
1693
  /* @__PURE__ */ jsxRuntime.jsx(
1675
1694
  "p",
1676
1695
  {
1677
- className: "leading-[16px] not-italic text-[12px] w-[7px]",
1696
+ className: "leading-4 not-italic text-xs w-[7px]",
1678
1697
  style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
1679
1698
  children: "*"
1680
1699
  }
@@ -1682,13 +1701,13 @@ const Dropdown = React.forwardRef(
1682
1701
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
1683
1702
  "p",
1684
1703
  {
1685
- className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap",
1704
+ className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic overflow-hidden text-ellipsis whitespace-nowrap",
1686
1705
  style: { color: labelColor },
1687
1706
  children: placeholder
1688
1707
  }
1689
1708
  )
1690
1709
  ),
1691
- isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon$1, { className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon$1, { className: cn("shrink-0", caretClassName) })
1710
+ 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) })
1692
1711
  ]
1693
1712
  }
1694
1713
  ),
@@ -1696,11 +1715,11 @@ const Dropdown = React.forwardRef(
1696
1715
  "div",
1697
1716
  {
1698
1717
  className: cn(
1699
- "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
1718
+ "relative bg-popover rounded-lg overflow-clip p-2 z-20 flex flex-col items-start text-popover-foreground",
1700
1719
  filteredOptions.length > 10 && "overflow-y-auto"
1701
1720
  ),
1702
1721
  style: {
1703
- boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
1722
+ boxShadow: "var(--elevation-popover)",
1704
1723
  ...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
1705
1724
  },
1706
1725
  children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1709,13 +1728,13 @@ const Dropdown = React.forwardRef(
1709
1728
  onClick: () => handleSelect(opt.value),
1710
1729
  className: cn(
1711
1730
  "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
1712
- opt.value === currentValue ? "bg-primary-action-light" : "bg-white hover:bg-disabled-bg"
1731
+ opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
1713
1732
  ),
1714
- 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(
1733
+ 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(
1715
1734
  "p",
1716
1735
  {
1717
1736
  className: cn(
1718
- "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
1737
+ "flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
1719
1738
  opt.value === currentValue ? "text-primary-action" : "text-foreground"
1720
1739
  ),
1721
1740
  children: opt.label
@@ -1723,7 +1742,7 @@ const Dropdown = React.forwardRef(
1723
1742
  ) }) })
1724
1743
  },
1725
1744
  opt.value
1726
- )) : /* @__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" }) }) }) })
1745
+ )) : /* @__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" }) }) }) })
1727
1746
  }
1728
1747
  ),
1729
1748
  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 +1754,6 @@ const Dropdown = React.forwardRef(
1735
1754
  Dropdown.displayName = "Dropdown";
1736
1755
  const TAG_GAP = 4;
1737
1756
  const MAX_COMPONENT_WIDTH = 343;
1738
- function ChevronDownIcon({ className }) {
1739
- 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" }) });
1740
- }
1741
- function ChevronUpIcon({ className }) {
1742
- 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" }) });
1743
- }
1744
- function XIcon({ color = "var(--muted-foreground)" }) {
1745
- return /* @__PURE__ */ jsxRuntime.jsx(
1746
- "svg",
1747
- {
1748
- width: "12",
1749
- height: "12",
1750
- viewBox: "0 0 12 12",
1751
- fill: "none",
1752
- className: "shrink-0",
1753
- children: /* @__PURE__ */ jsxRuntime.jsx(
1754
- "path",
1755
- {
1756
- d: "M9 3L3 9M3 3L9 9",
1757
- stroke: color,
1758
- strokeWidth: "1.5",
1759
- strokeLinecap: "round",
1760
- strokeLinejoin: "round"
1761
- }
1762
- )
1763
- }
1764
- );
1765
- }
1766
1757
  function RemovableTag({
1767
1758
  label,
1768
1759
  disabled,
@@ -1796,8 +1787,16 @@ function RemovableTag({
1796
1787
  e.stopPropagation();
1797
1788
  onRemove();
1798
1789
  },
1799
- 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]",
1800
- children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { color: iconColor })
1790
+ 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",
1791
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1792
+ react.X,
1793
+ {
1794
+ size: 12,
1795
+ weight: "bold",
1796
+ color: iconColor,
1797
+ className: "shrink-0"
1798
+ }
1799
+ )
1801
1800
  }
1802
1801
  )
1803
1802
  ]
@@ -1830,7 +1829,7 @@ function OverflowBadge({
1830
1829
  count,
1831
1830
  disabled
1832
1831
  }) {
1833
- const bg = disabled ? "bg-[#fafafa]" : "bg-selected-bg";
1832
+ const bg = disabled ? "bg-surface-chip-disabled" : "bg-selected-bg";
1834
1833
  const textColor = disabled ? "var(--disabled)" : "var(--primary-action)";
1835
1834
  return /* @__PURE__ */ jsxRuntime.jsx(
1836
1835
  "div",
@@ -1853,28 +1852,6 @@ function OverflowBadge({
1853
1852
  }
1854
1853
  );
1855
1854
  }
1856
- function CheckIcon$1(props) {
1857
- return /* @__PURE__ */ jsxRuntime.jsx(
1858
- "svg",
1859
- {
1860
- width: "10",
1861
- height: "8",
1862
- viewBox: "0 0 10 8",
1863
- fill: "none",
1864
- ...props,
1865
- children: /* @__PURE__ */ jsxRuntime.jsx(
1866
- "path",
1867
- {
1868
- d: "M1 4L3.5 6.5L9 1",
1869
- stroke: "currentColor",
1870
- strokeWidth: "1.5",
1871
- strokeLinecap: "round",
1872
- strokeLinejoin: "round"
1873
- }
1874
- )
1875
- }
1876
- );
1877
- }
1878
1855
  function useChipLayout(selectedOptions, measureRef, containerRef) {
1879
1856
  const [layout, setLayout] = React.useState({
1880
1857
  visibleCount: selectedOptions.length,
@@ -1963,7 +1940,7 @@ const DropdownMultiple = React.forwardRef(
1963
1940
  const state = forceState ?? (open ? "focus" : "default");
1964
1941
  const isError = state === "error";
1965
1942
  const isFocus = state === "focus";
1966
- const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
1943
+ const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
1967
1944
  const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
1968
1945
  const caretColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
1969
1946
  const borderInset = isFocus || isError ? "-1px" : "0px";
@@ -2045,7 +2022,7 @@ const DropdownMultiple = React.forwardRef(
2045
2022
  /* @__PURE__ */ jsxRuntime.jsx(
2046
2023
  "p",
2047
2024
  {
2048
- className: "shrink-0 leading-[16px] not-italic text-[12px]",
2025
+ className: "shrink-0 leading-4 not-italic text-xs",
2049
2026
  style: { color: labelColor },
2050
2027
  children: placeholder
2051
2028
  }
@@ -2063,7 +2040,7 @@ const DropdownMultiple = React.forwardRef(
2063
2040
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
2064
2041
  "p",
2065
2042
  {
2066
- className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
2043
+ className: "shrink-0 w-full leading-4 not-italic text-xs",
2067
2044
  style: { color: labelColor },
2068
2045
  children: placeholder
2069
2046
  }
@@ -2072,7 +2049,7 @@ const DropdownMultiple = React.forwardRef(
2072
2049
  /* @__PURE__ */ jsxRuntime.jsx(
2073
2050
  "p",
2074
2051
  {
2075
- className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
2052
+ className: "leading-5 not-italic text-base whitespace-nowrap",
2076
2053
  style: { color: labelColor },
2077
2054
  children: placeholder
2078
2055
  }
@@ -2080,7 +2057,7 @@ const DropdownMultiple = React.forwardRef(
2080
2057
  /* @__PURE__ */ jsxRuntime.jsx(
2081
2058
  "p",
2082
2059
  {
2083
- className: "leading-[16px] not-italic text-[12px] w-[7px]",
2060
+ className: "leading-4 not-italic text-xs w-[7px]",
2084
2061
  style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
2085
2062
  children: "*"
2086
2063
  }
@@ -2088,7 +2065,7 @@ const DropdownMultiple = React.forwardRef(
2088
2065
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
2089
2066
  "p",
2090
2067
  {
2091
- className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap py-[7px]",
2068
+ className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic overflow-hidden text-ellipsis whitespace-nowrap py-[7px]",
2092
2069
  style: { color: labelColor },
2093
2070
  children: placeholder
2094
2071
  }
@@ -2098,7 +2075,7 @@ const DropdownMultiple = React.forwardRef(
2098
2075
  {
2099
2076
  ref: measureRef,
2100
2077
  "aria-hidden": true,
2101
- className: "absolute flex gap-[4px] items-center pointer-events-none",
2078
+ className: "absolute flex gap-1 items-center pointer-events-none",
2102
2079
  style: {
2103
2080
  visibility: "hidden",
2104
2081
  top: 0,
@@ -2241,8 +2218,8 @@ const DropdownMultiple = React.forwardRef(
2241
2218
  className: cn(
2242
2219
  "relative flex gap-[8px] items-center rounded-[8px]",
2243
2220
  bg,
2244
- "px-[14px]",
2245
- hasExternalLabel ? "h-[40px]" : "py-[4px] min-h-[48px]",
2221
+ "px-3.5",
2222
+ hasExternalLabel ? "h-10" : "py-1 min-h-12",
2246
2223
  !isDisabled && !isStatic && "cursor-pointer"
2247
2224
  ),
2248
2225
  children: [
@@ -2272,16 +2249,16 @@ const DropdownMultiple = React.forwardRef(
2272
2249
  )
2273
2250
  }
2274
2251
  ),
2275
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
2252
+ /* @__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 }) })
2276
2253
  ]
2277
2254
  }
2278
2255
  ),
2279
2256
  open && !isStatic && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
2280
2257
  "div",
2281
2258
  {
2282
- className: "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
2259
+ className: "relative bg-popover rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start text-popover-foreground",
2283
2260
  style: {
2284
- boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)"
2261
+ boxShadow: "var(--elevation-popover)"
2285
2262
  },
2286
2263
  children: /* @__PURE__ */ jsxRuntime.jsx(
2287
2264
  "div",
@@ -2304,7 +2281,7 @@ const DropdownMultiple = React.forwardRef(
2304
2281
  },
2305
2282
  className: cn(
2306
2283
  "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
2307
- isSelected ? "bg-primary-action-light" : "bg-white hover:bg-disabled-bg"
2284
+ isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
2308
2285
  ),
2309
2286
  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: [
2310
2287
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2324,14 +2301,21 @@ const DropdownMultiple = React.forwardRef(
2324
2301
  "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
2325
2302
  "bg-transparent"
2326
2303
  ),
2327
- children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { className: "text-primary-action" })
2304
+ children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
2305
+ react.Check,
2306
+ {
2307
+ size: 12,
2308
+ weight: "bold",
2309
+ className: "text-primary-action"
2310
+ }
2311
+ )
2328
2312
  }
2329
2313
  )
2330
2314
  ] }) })
2331
2315
  },
2332
2316
  opt.value
2333
2317
  );
2334
- }) : /* @__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" }) }) }) })
2318
+ }) : /* @__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" }) }) }) })
2335
2319
  }
2336
2320
  )
2337
2321
  }
@@ -2368,6 +2352,7 @@ const Input = React.forwardRef(function Input2({
2368
2352
  onFocus: onFocusProp,
2369
2353
  onBlur: onBlurProp,
2370
2354
  disabled: _disabledProp,
2355
+ maxLength: maxLengthProp,
2371
2356
  ...inputRest
2372
2357
  }, ref) {
2373
2358
  const [focused, setFocused] = React.useState(false);
@@ -2379,7 +2364,7 @@ const Input = React.forwardRef(function Input2({
2379
2364
  const isError = state === "error";
2380
2365
  const isFocus = state === "focus";
2381
2366
  const isFilled = currentValue.length > 0;
2382
- const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
2367
+ const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
2383
2368
  const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
2384
2369
  const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
2385
2370
  const unitColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -2387,14 +2372,19 @@ const Input = React.forwardRef(function Input2({
2387
2372
  const borderRad = isFocus || isError ? "9px" : "8px";
2388
2373
  const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
2389
2374
  const hasRight = Boolean(rightIcon) || Boolean(unit);
2390
- const padding = isFilled ? "px-[14px] py-[6px]" : hasRight ? "px-[14px] py-[12px]" : "p-[14px]";
2375
+ const padding = isFilled ? "px-[14px] py-[6px]" : hasRight ? "px-[14px] py-[14px]" : "p-[14px]";
2391
2376
  const charCount = currentValue.length;
2392
2377
  const showBelow = isError || Boolean(helperText) || showCount;
2393
2378
  const leftText = isError ? errorMessage : helperText ?? "";
2394
2379
  const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
2395
2380
  const handleChange = (e) => {
2396
- if (!controlled) setInternalValue(e.target.value);
2397
- onChange == null ? void 0 : onChange(e.target.value);
2381
+ if (isDisabled) return;
2382
+ let next = e.target.value;
2383
+ if (showCount && maxCount >= 0 && next.length > maxCount) {
2384
+ next = next.slice(0, maxCount);
2385
+ }
2386
+ if (!controlled) setInternalValue(next);
2387
+ onChange == null ? void 0 : onChange(next);
2398
2388
  };
2399
2389
  const handleFocus = (e) => {
2400
2390
  onFocusProp == null ? void 0 : onFocusProp(e);
@@ -2408,12 +2398,12 @@ const Input = React.forwardRef(function Input2({
2408
2398
  const inputCaretStyle = {
2409
2399
  caretColor: "var(--caret-color)"
2410
2400
  };
2411
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-[4px] w-full", className), children: [
2401
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1 w-full", className), children: [
2412
2402
  /* @__PURE__ */ jsxRuntime.jsxs(
2413
2403
  "div",
2414
2404
  {
2415
2405
  className: cn(
2416
- "relative rounded-[8px]",
2406
+ "relative rounded-lg",
2417
2407
  padding,
2418
2408
  bg,
2419
2409
  containerFlex
@@ -2444,14 +2434,15 @@ const Input = React.forwardRef(function Input2({
2444
2434
  {
2445
2435
  className: cn(
2446
2436
  "shrink-0 w-full not-italic",
2447
- isFilled ? "leading-[16px] text-[12px]" : "text-[16px] leading-[20px] pointer-events-none"
2437
+ isFilled ? "leading-4 text-xs" : "text-base leading-5 pointer-events-none"
2448
2438
  ),
2449
2439
  style: { color: floatLabel },
2450
2440
  children: [
2451
2441
  placeholder,
2452
- required && !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
2442
+ required && /* @__PURE__ */ jsxRuntime.jsx(
2453
2443
  "span",
2454
2444
  {
2445
+ className: "text-xs leading-4",
2455
2446
  style: {
2456
2447
  color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
2457
2448
  },
@@ -2461,7 +2452,7 @@ const Input = React.forwardRef(function Input2({
2461
2452
  ]
2462
2453
  }
2463
2454
  ),
2464
- !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
2455
+ /* @__PURE__ */ jsxRuntime.jsx(
2465
2456
  "input",
2466
2457
  {
2467
2458
  ...inputRest,
@@ -2471,10 +2462,14 @@ const Input = React.forwardRef(function Input2({
2471
2462
  onFocus: handleFocus,
2472
2463
  onBlur: handleBlur,
2473
2464
  disabled: isDisabled,
2465
+ maxLength: showCount ? maxCount : maxLengthProp,
2474
2466
  "aria-label": placeholder,
2475
2467
  className: cn(
2476
2468
  "w-full bg-transparent outline-none border-none min-w-0",
2477
- isFilled ? "leading-[20px] not-italic text-[14px] p-0 m-0" : "absolute inset-0 h-full cursor-text text-[16px]"
2469
+ isFilled ? "leading-5 not-italic text-sm p-0 m-0" : cn(
2470
+ "absolute inset-0 h-full text-base",
2471
+ isDisabled ? "cursor-not-allowed" : "cursor-text"
2472
+ )
2478
2473
  ),
2479
2474
  style: isFilled ? { ...inputStyleProp, color: filledValue, ...inputCaretStyle } : {
2480
2475
  ...inputStyleProp,
@@ -2502,7 +2497,7 @@ const Input = React.forwardRef(function Input2({
2502
2497
  "p",
2503
2498
  {
2504
2499
  className: cn(
2505
- "shrink-0 whitespace-nowrap text-[16px]",
2500
+ "shrink-0 whitespace-nowrap text-[16px] leading-[20px]",
2506
2501
  !isFilled && "relative"
2507
2502
  ),
2508
2503
  style: {
@@ -2516,7 +2511,7 @@ const Input = React.forwardRef(function Input2({
2516
2511
  ]
2517
2512
  }
2518
2513
  ),
2519
- showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]", children: [
2514
+ showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
2520
2515
  leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
2521
2516
  showCount && /* @__PURE__ */ jsxRuntime.jsxs(
2522
2517
  "span",
@@ -2534,28 +2529,6 @@ const Input = React.forwardRef(function Input2({
2534
2529
  ] });
2535
2530
  });
2536
2531
  Input.displayName = "Input";
2537
- function CheckIcon(props) {
2538
- return /* @__PURE__ */ jsxRuntime.jsx(
2539
- "svg",
2540
- {
2541
- width: "16",
2542
- height: "11",
2543
- viewBox: "0 0 16 11",
2544
- fill: "none",
2545
- ...props,
2546
- children: /* @__PURE__ */ jsxRuntime.jsx(
2547
- "path",
2548
- {
2549
- d: "M1 5.5L5.5 10L15 1",
2550
- stroke: "currentColor",
2551
- strokeWidth: "1.5",
2552
- strokeLinecap: "round",
2553
- strokeLinejoin: "round"
2554
- }
2555
- )
2556
- }
2557
- );
2558
- }
2559
2532
  const OptionList = React.forwardRef(
2560
2533
  function OptionList2({
2561
2534
  options,
@@ -2584,17 +2557,17 @@ const OptionList = React.forwardRef(
2584
2557
  {
2585
2558
  ref,
2586
2559
  className: cn(
2587
- "flex flex-col items-start overflow-clip rounded-[8px] bg-white px-[8px] py-[8px]",
2560
+ "flex flex-col items-start overflow-clip rounded-lg bg-popover px-2 py-2 text-popover-foreground",
2588
2561
  className
2589
2562
  ),
2590
2563
  style: {
2591
- boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
2564
+ boxShadow: "var(--elevation-popover)",
2592
2565
  ...isScrollable ? { maxHeight, overflowY: "auto" } : {}
2593
2566
  },
2594
2567
  children: options.length > 0 ? options.map((opt) => {
2595
2568
  const selected = isSelected(opt.value);
2596
2569
  const disabled = opt.disabled === true;
2597
- const rowBg = disabled ? "bg-disabled-bg" : selected ? "bg-selected-bg" : "bg-white hover:bg-selected-bg";
2570
+ const rowBg = disabled ? "bg-disabled-bg" : selected ? "bg-selected-bg" : "bg-popover hover:bg-selected-bg";
2598
2571
  return /* @__PURE__ */ jsxRuntime.jsx(
2599
2572
  "div",
2600
2573
  {
@@ -2604,11 +2577,11 @@ const OptionList = React.forwardRef(
2604
2577
  rowBg,
2605
2578
  disabled ? "cursor-default" : "cursor-pointer"
2606
2579
  ),
2607
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px] p-[14px]", children: [
2580
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 p-3.5", children: [
2608
2581
  opt.icon && /* @__PURE__ */ jsxRuntime.jsx(
2609
2582
  "span",
2610
2583
  {
2611
- className: "flex size-[20px] shrink-0 items-center justify-center overflow-clip",
2584
+ className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-clip",
2612
2585
  style: {
2613
2586
  color: disabled ? "var(--disabled)" : "var(--muted-foreground)"
2614
2587
  },
@@ -2618,19 +2591,26 @@ const OptionList = React.forwardRef(
2618
2591
  /* @__PURE__ */ jsxRuntime.jsx(
2619
2592
  "p",
2620
2593
  {
2621
- className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-[14px] leading-[20px] text-ellipsis whitespace-nowrap not-italic",
2594
+ className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap not-italic",
2622
2595
  style: {
2623
2596
  color: disabled ? "var(--disabled)" : "var(--foreground)"
2624
2597
  },
2625
2598
  children: opt.label
2626
2599
  }
2627
2600
  ),
2628
- selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-[20px] shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-primary-action" }) })
2601
+ selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
2602
+ react.Check,
2603
+ {
2604
+ size: 16,
2605
+ weight: "bold",
2606
+ className: "text-primary-action"
2607
+ }
2608
+ ) })
2629
2609
  ] })
2630
2610
  },
2631
2611
  opt.value
2632
2612
  );
2633
- }) : /* @__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 }) }) })
2613
+ }) : /* @__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 }) }) })
2634
2614
  }
2635
2615
  );
2636
2616
  }
@@ -2652,8 +2632,8 @@ const SearchInput = React.forwardRef(
2652
2632
  const currentValue = controlled ? value : internalValue;
2653
2633
  const isFilled = currentValue.length > 0;
2654
2634
  const iconSize = size === "lg" ? 24 : 22;
2655
- const minHeight = size === "sm" ? "min-h-[32px]" : "";
2656
- const padding = size === "sm" ? "px-[14px] py-[8px]" : "px-[14px] py-[12px]";
2635
+ const minHeight = size === "sm" ? "h-[38px]" : "";
2636
+ const padding = size === "sm" ? "px-3.5 py-2" : "px-3.5 py-3";
2657
2637
  const borderInset = focused ? "-1px" : "0px";
2658
2638
  const borderRad = focused ? "9px" : "8px";
2659
2639
  const borderColor = focused ? "var(--primary-action)" : "var(--border)";
@@ -2673,7 +2653,7 @@ const SearchInput = React.forwardRef(
2673
2653
  {
2674
2654
  ref,
2675
2655
  className: cn(
2676
- "relative flex cursor-text items-center gap-[8px] rounded-[8px] bg-white",
2656
+ "relative flex cursor-text items-center gap-2 rounded-lg bg-background",
2677
2657
  padding,
2678
2658
  minHeight,
2679
2659
  className
@@ -2699,7 +2679,7 @@ const SearchInput = React.forwardRef(
2699
2679
  react.MagnifyingGlass,
2700
2680
  {
2701
2681
  size: iconSize,
2702
- color: "var(--muted-foreground)",
2682
+ color: focused ? "var(--subtle-text)" : "var(--muted-foreground)",
2703
2683
  weight: "regular"
2704
2684
  }
2705
2685
  ) }),
@@ -2707,7 +2687,7 @@ const SearchInput = React.forwardRef(
2707
2687
  !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
2708
2688
  "p",
2709
2689
  {
2710
- className: "pointer-events-none absolute inset-0 flex items-center text-[16px] leading-[20px] not-italic",
2690
+ className: "pointer-events-none absolute inset-0 flex items-center text-base leading-5 not-italic",
2711
2691
  style: { color: "var(--muted-foreground)" },
2712
2692
  children: placeholder
2713
2693
  }
@@ -2722,7 +2702,7 @@ const SearchInput = React.forwardRef(
2722
2702
  onChange: (e) => handleChange(e.target.value),
2723
2703
  onFocus: () => setFocused(true),
2724
2704
  onBlur: () => setFocused(false),
2725
- className: "m-0 w-full border-none bg-transparent p-0 text-[16px] leading-[20px] outline-none",
2705
+ className: "m-0 w-full border-none bg-transparent p-0 text-base leading-5 outline-none",
2726
2706
  style: {
2727
2707
  color: isFilled ? "var(--foreground)" : "transparent",
2728
2708
  caretColor: "var(--caret-color)"
@@ -2756,33 +2736,50 @@ const SearchInput = React.forwardRef(
2756
2736
  SearchInput.displayName = "SearchInput";
2757
2737
  const sizeClasses = {
2758
2738
  lg: {
2759
- pad: "px-[12px] py-[10px]",
2760
- text: "text-[14px]",
2761
- leading: "leading-[20px]",
2762
- font: "font-bold"
2739
+ pad: "px-3 py-2.5",
2740
+ text: "text-sm",
2741
+ leading: "leading-5",
2742
+ font: "font-bold",
2743
+ gap: "gap-1.5",
2744
+ iconSize: "h-5 w-5",
2745
+ badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
2763
2746
  },
2764
2747
  md: {
2765
- pad: "px-[10px] py-[8px]",
2766
- text: "text-[14px]",
2767
- leading: "leading-[20px]",
2768
- font: "font-bold"
2748
+ pad: "px-2.5 py-2",
2749
+ text: "text-sm",
2750
+ leading: "leading-5",
2751
+ font: "font-bold",
2752
+ gap: "gap-1.5",
2753
+ iconSize: "h-[18px] w-[18px]",
2754
+ badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
2769
2755
  },
2770
2756
  sm: {
2771
- pad: "px-[8px] py-[6px]",
2772
- text: "text-[12px]",
2773
- leading: "leading-[16px]",
2774
- font: "font-semibold"
2757
+ pad: "px-2 py-1.5",
2758
+ text: "text-xs",
2759
+ leading: "leading-4",
2760
+ font: "font-semibold",
2761
+ gap: "gap-1",
2762
+ iconSize: "h-4 w-4",
2763
+ badgeClass: "min-h-[14px] px-1 text-[length:var(--text-xxs)] leading-[var(--leading-3)]"
2775
2764
  }
2776
2765
  };
2766
+ function DefaultTabIcon({ className }) {
2767
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", className) });
2768
+ }
2777
2769
  const Tab = React.forwardRef(function Tab2({
2778
2770
  title = "Tab",
2779
2771
  size = "md",
2780
2772
  active = false,
2781
2773
  disabled = false,
2782
2774
  onClick,
2783
- className
2775
+ className,
2776
+ icon,
2777
+ notification
2784
2778
  }, ref) {
2785
2779
  const s = sizeClasses[size];
2780
+ const hasIcon = Boolean(icon);
2781
+ const hasNotification = notification !== void 0 && notification !== null;
2782
+ const renderedIcon = icon === true ? /* @__PURE__ */ jsxRuntime.jsx(DefaultTabIcon, { className: s.iconSize }) : icon;
2786
2783
  const textColor = disabled ? "text-disabled" : active ? "text-primary-action" : "text-muted-foreground";
2787
2784
  const borderColor = active && !disabled ? "border-primary-action" : "border-border";
2788
2785
  const cursor = disabled ? "cursor-not-allowed" : "cursor-pointer";
@@ -2796,8 +2793,9 @@ const Tab = React.forwardRef(function Tab2({
2796
2793
  "aria-disabled": disabled,
2797
2794
  onClick: !disabled ? onClick : void 0,
2798
2795
  className: cn(
2799
- "relative flex min-w-[80px] select-none items-center justify-center bg-white transition-colors duration-150",
2796
+ "relative flex min-w-[80px] select-none items-center justify-center bg-background transition-colors duration-150",
2800
2797
  s.pad,
2798
+ (hasIcon || hasNotification) && s.gap,
2801
2799
  cursor,
2802
2800
  hoverBg,
2803
2801
  className
@@ -2813,11 +2811,24 @@ const Tab = React.forwardRef(function Tab2({
2813
2811
  )
2814
2812
  }
2815
2813
  ),
2814
+ hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
2815
+ "span",
2816
+ {
2817
+ "aria-hidden": "true",
2818
+ className: cn(
2819
+ "relative shrink-0",
2820
+ s.iconSize,
2821
+ disabled ? "text-disabled" : active ? "text-primary-action" : "text-muted-foreground"
2822
+ ),
2823
+ children: renderedIcon
2824
+ }
2825
+ ),
2816
2826
  /* @__PURE__ */ jsxRuntime.jsx(
2817
2827
  "span",
2818
2828
  {
2819
2829
  className: cn(
2820
2830
  "relative overflow-hidden text-ellipsis whitespace-nowrap text-center",
2831
+ hasIcon && hasNotification && "flex-1 min-w-px",
2821
2832
  s.text,
2822
2833
  s.leading,
2823
2834
  s.font,
@@ -2825,6 +2836,16 @@ const Tab = React.forwardRef(function Tab2({
2825
2836
  ),
2826
2837
  children: title
2827
2838
  }
2839
+ ),
2840
+ hasNotification && /* @__PURE__ */ jsxRuntime.jsx(
2841
+ "span",
2842
+ {
2843
+ className: cn(
2844
+ "relative flex shrink-0 items-center justify-center rounded-[60px] bg-visual-red-default text-center font-normal text-on-visual-red",
2845
+ s.badgeClass
2846
+ ),
2847
+ children: notification
2848
+ }
2828
2849
  )
2829
2850
  ]
2830
2851
  }
@@ -2840,6 +2861,8 @@ const TabGroup = React.forwardRef(
2840
2861
  size,
2841
2862
  active: item.id === activeId,
2842
2863
  disabled: item.disabled,
2864
+ icon: item.icon,
2865
+ notification: item.notification,
2843
2866
  onClick: () => onChange == null ? void 0 : onChange(item.id)
2844
2867
  },
2845
2868
  item.id
@@ -2847,6 +2870,112 @@ const TabGroup = React.forwardRef(
2847
2870
  }
2848
2871
  );
2849
2872
  TabGroup.displayName = "TabGroup";
2873
+ const sizeStyles = {
2874
+ large: {
2875
+ container: "px-2 py-1",
2876
+ text: "text-xs leading-4",
2877
+ closeIcon: "h-4 w-4",
2878
+ closeButton: "h-4 w-4"
2879
+ },
2880
+ small: {
2881
+ container: "px-1 py-0.5",
2882
+ text: "text-xxs leading-3",
2883
+ closeIcon: "h-3.5 w-3.5",
2884
+ closeButton: "h-3.5 w-3.5"
2885
+ }
2886
+ };
2887
+ const variantStyles = {
2888
+ blue: {
2889
+ bg: "bg-[var(--fill-blue-50)]",
2890
+ text: "text-[var(--fill-blue-700)]"
2891
+ },
2892
+ green: {
2893
+ bg: "bg-[var(--fill-green-100)]",
2894
+ text: "text-[var(--fill-green-600)]"
2895
+ },
2896
+ yellow: {
2897
+ bg: "bg-[var(--fill-yellow-100)]",
2898
+ text: "text-[var(--fill-yellow-600)]"
2899
+ },
2900
+ red: {
2901
+ bg: "bg-[var(--fill-red-100)]",
2902
+ text: "text-[var(--fill-red-600)]"
2903
+ },
2904
+ gray: {
2905
+ bg: "bg-[var(--fill-gray-100)]",
2906
+ text: "text-subtle-text"
2907
+ },
2908
+ lime: {
2909
+ bg: "bg-[var(--fill-lime-100)]",
2910
+ text: "text-[var(--fill-lime-600)]"
2911
+ }
2912
+ };
2913
+ function CircleIcon({ disabled }) {
2914
+ return /* @__PURE__ */ jsxRuntime.jsx(
2915
+ react.Circle,
2916
+ {
2917
+ "aria-hidden": "true",
2918
+ weight: "regular",
2919
+ className: "h-3.5 w-3.5 shrink-0",
2920
+ color: disabled ? "var(--disabled)" : "var(--subtle-text)"
2921
+ }
2922
+ );
2923
+ }
2924
+ function CloseIcon({ disabled, className }) {
2925
+ return /* @__PURE__ */ jsxRuntime.jsx(
2926
+ react.X,
2927
+ {
2928
+ "aria-hidden": "true",
2929
+ weight: "regular",
2930
+ className: cn("shrink-0", className),
2931
+ color: disabled ? "var(--disabled)" : "var(--subtle-text)"
2932
+ }
2933
+ );
2934
+ }
2935
+ const Tag = React.forwardRef(function Tag2({
2936
+ text = "Tag",
2937
+ size = "large",
2938
+ state = "default",
2939
+ variant = "gray",
2940
+ icon = false,
2941
+ close = false,
2942
+ className
2943
+ }, ref) {
2944
+ const isDisabled = state === "disabled";
2945
+ const s = sizeStyles[size] ?? sizeStyles.large;
2946
+ const v = variantStyles[variant] ?? variantStyles.gray;
2947
+ const bgClass = state === "disabled" ? "bg-disabled-bg" : state === "hover" ? "bg-hover-bg" : v.bg;
2948
+ const textClass = isDisabled ? "text-disabled" : v.text;
2949
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2950
+ "div",
2951
+ {
2952
+ ref,
2953
+ className: cn(
2954
+ "inline-flex items-center justify-center rounded-[4px]",
2955
+ (icon || close) && "gap-[2px]",
2956
+ s.container,
2957
+ bgClass,
2958
+ className
2959
+ ),
2960
+ children: [
2961
+ icon && /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { disabled: isDisabled }),
2962
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("whitespace-nowrap font-normal", s.text, textClass), children: text }),
2963
+ close && /* @__PURE__ */ jsxRuntime.jsx(
2964
+ "span",
2965
+ {
2966
+ className: cn(
2967
+ "inline-flex items-center justify-center rounded-[2px] transition-colors",
2968
+ s.closeButton,
2969
+ !isDisabled && "cursor-pointer hover:bg-black/10"
2970
+ ),
2971
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { disabled: isDisabled, className: s.closeIcon })
2972
+ }
2973
+ )
2974
+ ]
2975
+ }
2976
+ );
2977
+ });
2978
+ Tag.displayName = "Tag";
2850
2979
  const TextArea = React.forwardRef(
2851
2980
  function TextArea2({
2852
2981
  placeholder = "Text label",
@@ -2889,13 +3018,13 @@ const TextArea = React.forwardRef(
2889
3018
  if (!controlled) setInternalValue(newValue);
2890
3019
  onChange == null ? void 0 : onChange(newValue);
2891
3020
  };
2892
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-[4px]", className), children: [
3021
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-1", className), children: [
2893
3022
  /* @__PURE__ */ jsxRuntime.jsxs(
2894
3023
  "div",
2895
3024
  {
2896
3025
  className: cn(
2897
- "relative h-[116px] rounded-[8px]",
2898
- isDisabled ? "bg-disabled-bg" : "bg-white"
3026
+ "relative h-[116px] rounded-lg",
3027
+ isDisabled ? "bg-disabled-bg" : "bg-background"
2899
3028
  ),
2900
3029
  children: [
2901
3030
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2906,13 +3035,27 @@ const TextArea = React.forwardRef(
2906
3035
  style: { inset: borderInset, borderRadius: borderRad, borderColor }
2907
3036
  }
2908
3037
  ),
2909
- isFilled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-start p-[14px] pb-[6px]", children: [
2910
- /* @__PURE__ */ jsxRuntime.jsx(
3038
+ isFilled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col px-3.5 pt-3.5 pb-1.5", children: [
3039
+ /* @__PURE__ */ jsxRuntime.jsxs(
2911
3040
  "p",
2912
3041
  {
2913
- className: "w-full shrink-0 text-[12px] leading-[16px] not-italic",
3042
+ className: "w-full shrink-0 text-xs leading-4 not-italic",
2914
3043
  style: { color: floatLabel },
2915
- children: placeholder
3044
+ children: [
3045
+ placeholder,
3046
+ required && /* @__PURE__ */ jsxRuntime.jsxs(
3047
+ "span",
3048
+ {
3049
+ style: {
3050
+ color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
3051
+ },
3052
+ children: [
3053
+ " ",
3054
+ "*"
3055
+ ]
3056
+ }
3057
+ )
3058
+ ]
2916
3059
  }
2917
3060
  ),
2918
3061
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2935,7 +3078,7 @@ const TextArea = React.forwardRef(
2935
3078
  rows,
2936
3079
  "aria-label": placeholder,
2937
3080
  className: cn(
2938
- "m-0 min-w-0 flex-1 resize-none border-none bg-transparent p-0 text-[14px] leading-[20px] not-italic outline-none"
3081
+ "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"
2939
3082
  ),
2940
3083
  style: {
2941
3084
  ...textareaProps.style,
@@ -2944,11 +3087,11 @@ const TextArea = React.forwardRef(
2944
3087
  }
2945
3088
  }
2946
3089
  )
2947
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full items-start p-[14px]", children: [
3090
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full items-start p-3.5", children: [
2948
3091
  /* @__PURE__ */ jsxRuntime.jsxs(
2949
3092
  "p",
2950
3093
  {
2951
- className: "pointer-events-none relative h-full min-h-[1px] min-w-0 flex-1 text-[16px] leading-[20px] not-italic",
3094
+ className: "pointer-events-none relative h-full min-h-[1px] min-w-0 flex-1 text-base leading-5 not-italic",
2952
3095
  style: { color: floatLabel },
2953
3096
  children: [
2954
3097
  placeholder,
@@ -2985,7 +3128,7 @@ const TextArea = React.forwardRef(
2985
3128
  },
2986
3129
  rows,
2987
3130
  className: cn(
2988
- "absolute inset-0 h-full w-full cursor-text resize-none border-none bg-transparent text-[16px] outline-none"
3131
+ "absolute inset-0 h-full w-full cursor-text resize-none border-none bg-transparent text-base outline-none"
2989
3132
  ),
2990
3133
  style: {
2991
3134
  ...textareaProps.style,
@@ -3000,27 +3143,21 @@ const TextArea = React.forwardRef(
3000
3143
  ]
3001
3144
  }
3002
3145
  ),
3003
- showBelow && /* @__PURE__ */ jsxRuntime.jsxs(
3004
- "div",
3005
- {
3006
- className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]",
3007
- children: [
3008
- leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
3009
- showCount && /* @__PURE__ */ jsxRuntime.jsxs(
3010
- "span",
3011
- {
3012
- className: "shrink-0 whitespace-nowrap text-right",
3013
- style: { color: countColor },
3014
- children: [
3015
- charCount,
3016
- "/",
3017
- maxCount
3018
- ]
3019
- }
3020
- )
3021
- ]
3022
- }
3023
- )
3146
+ showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-1 text-xs leading-4", children: [
3147
+ leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
3148
+ showCount && /* @__PURE__ */ jsxRuntime.jsxs(
3149
+ "span",
3150
+ {
3151
+ className: "shrink-0 whitespace-nowrap text-right",
3152
+ style: { color: countColor },
3153
+ children: [
3154
+ charCount,
3155
+ "/",
3156
+ maxCount
3157
+ ]
3158
+ }
3159
+ )
3160
+ ] })
3024
3161
  ] });
3025
3162
  }
3026
3163
  );
@@ -3200,7 +3337,7 @@ function RangeSlotPicker({
3200
3337
  className: "leading-[22px] relative shrink-0 text-[14px] text-center whitespace-nowrap",
3201
3338
  style: {
3202
3339
  fontVariationSettings: "'wdth' 100",
3203
- color: isSelected ? "#ffffff" : "var(--foreground)"
3340
+ color: isSelected ? "var(--on-primary-action)" : "var(--foreground)"
3204
3341
  },
3205
3342
  children: slot.label
3206
3343
  }
@@ -3344,7 +3481,7 @@ const TimeInput = React.forwardRef(
3344
3481
  const isError = state === "error";
3345
3482
  const isFocus = state === "focus";
3346
3483
  const isFilled = mode === "single" ? Boolean(currentValue) : true;
3347
- const bgClass = isDisabled ? "bg-disabled-bg" : "bg-white";
3484
+ const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
3348
3485
  const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
3349
3486
  const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
3350
3487
  const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
@@ -3425,8 +3562,7 @@ const TimeInput = React.forwardRef(
3425
3562
  react.Minus,
3426
3563
  {
3427
3564
  size: 20,
3428
- color: minusColor,
3429
- weight: "bold"
3565
+ color: minusColor
3430
3566
  }
3431
3567
  ),
3432
3568
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3473,9 +3609,9 @@ const TimeInput = React.forwardRef(
3473
3609
  );
3474
3610
  };
3475
3611
  const isTriggerFilled = isFilled && (mode === "range" || currentValue);
3476
- const triggerPadding = isTriggerFilled ? "py-[6px]" : "py-[12px]";
3612
+ const triggerPadding = isTriggerFilled ? "py-1.5" : "py-3";
3477
3613
  const triggerBase = cn(
3478
- "relative flex gap-[8px] items-center rounded-[8px] px-[14px] w-full",
3614
+ "relative flex gap-2 items-center rounded-lg px-3.5 w-full",
3479
3615
  bgClass,
3480
3616
  triggerPadding
3481
3617
  );
@@ -3511,7 +3647,7 @@ const TimeInput = React.forwardRef(
3511
3647
  }
3512
3648
  )
3513
3649
  ] });
3514
- const belowMsg = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
3650
+ const belowMsg = showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-1 text-xs leading-4", children: /* @__PURE__ */ jsxRuntime.jsx(
3515
3651
  "span",
3516
3652
  {
3517
3653
  className: "flex-1 min-w-0",
@@ -3633,10 +3769,10 @@ const TimeInput = React.forwardRef(
3633
3769
  {
3634
3770
  align: "start",
3635
3771
  sideOffset: 4,
3636
- className: "z-50 rounded-[8px] bg-white p-3 outline-none max-w-[340px]",
3772
+ className: "z-50 rounded-[8px] bg-popover p-3 outline-none max-w-[340px] text-popover-foreground",
3637
3773
  style: {
3638
- boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
3639
- border: "1px solid rgba(0,0,0,0.08)",
3774
+ boxShadow: "var(--elevation-popover)",
3775
+ border: "1px solid var(--border)",
3640
3776
  minWidth: mode === "single" ? 327 : void 0
3641
3777
  },
3642
3778
  onOpenAutoFocus: (e) => e.preventDefault(),
@@ -3666,6 +3802,7 @@ exports.OptionList = OptionList;
3666
3802
  exports.SearchInput = SearchInput;
3667
3803
  exports.Tab = Tab;
3668
3804
  exports.TabGroup = TabGroup;
3805
+ exports.Tag = Tag;
3669
3806
  exports.TextArea = TextArea;
3670
3807
  exports.TimeInput = TimeInput;
3671
3808
  exports.cn = cn;