@sarunyu/system-one 1.0.0

package/dist/index.cjs

@@ -0,0 +1,3672 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const tailwindMerge = require("tailwind-merge");
+const react = require("@phosphor-icons/react");
+const reactDayPicker = require("react-day-picker");
+const Popover = require("@radix-ui/react-popover");
+const lucideReact = require("lucide-react");
+const vaul = require("vaul");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Popover__namespace = /* @__PURE__ */ _interopNamespaceDefault(Popover);
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+const labelIconSizeClass = {
+  xs: "size-[13px]",
+  sm: "size-[15px]",
+  md: "size-[15px]",
+  lg: "size-[16px]",
+  xl: "size-[16px]"
+};
+const gapClass = {
+  xs: "gap-[4px]",
+  sm: "gap-[4px]",
+  md: "gap-[4px]",
+  lg: "gap-[4px]",
+  xl: "gap-[4px]"
+};
+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]"
+};
+const roundedLabelClass = {
+  xs: "rounded-[4px]",
+  sm: "rounded-[6px]",
+  md: "rounded-[6px]",
+  lg: "rounded-[8px]",
+  xl: "rounded-[8px]"
+};
+function getPaddingClasses(size, hasLeft, hasRight) {
+  const pyMap = {
+    xs: "py-[4px]",
+    sm: "py-[4px]",
+    md: "py-[6px]",
+    lg: "py-[8px]",
+    xl: "py-[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]" }
+  };
+  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]" }
+  };
+  return [
+    hasLeft ? reducedMap[size].l : pxMap[size].l,
+    hasRight ? reducedMap[size].r : pxMap[size].r,
+    pyMap[size]
+  ];
+}
+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]" }
+};
+function getVariantClasses(variant, isDisabled) {
+  if (isDisabled) {
+    if (variant === "outline" || variant === "outline-black")
+      return "bg-disabled-bg text-disabled border border-border-disabled cursor-not-allowed";
+    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";
+  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";
+  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";
+}
+const Button = React.forwardRef(function Button2({
+  size = "md",
+  variant = "primary",
+  children,
+  leftIcon,
+  rightIcon,
+  disabled,
+  className = "",
+  // Destructure pointer events so we can merge with ghost-icon active handlers
+  onPointerDown,
+  onPointerUp,
+  onPointerLeave,
+  ...props
+}, ref) {
+  const isDisabled = variant === "disabled" || !!disabled;
+  const isGhost = variant === "outline-black" || variant === "plain-black";
+  const isIconOnly = size.startsWith("icon-");
+  const [ghostPressed, setGhostPressed] = React.useState(false);
+  const needsGhostPress = isGhost && isIconOnly && !isDisabled;
+  const ghostPressStyle = needsGhostPress && ghostPressed ? { backgroundColor: "var(--disabled-bg)", color: "var(--disabled)" } : void 0;
+  const handlePointerDown = needsGhostPress ? (e) => {
+    setGhostPressed(true);
+    onPointerDown == null ? void 0 : onPointerDown(e);
+  } : onPointerDown;
+  const handlePointerUp = needsGhostPress ? (e) => {
+    setGhostPressed(false);
+    onPointerUp == null ? void 0 : onPointerUp(e);
+  } : onPointerUp;
+  const handlePointerLeave = needsGhostPress ? (e) => {
+    setGhostPressed(false);
+    onPointerLeave == null ? void 0 : onPointerLeave(e);
+  } : 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";
+  if (isIconOnly) {
+    const spec = iconSizeSpec[size];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          baseClasses,
+          spec.rounded,
+          spec.btn,
+          "shrink-0",
+          variantClasses,
+          cursorClass,
+          className
+        ),
+        style: ghostPressStyle,
+        disabled: isDisabled,
+        "aria-label": "icon button",
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn("flex items-center justify-center"),
+            "aria-hidden": "true",
+            style: { width: spec.icon, height: spec.icon },
+            children
+          }
+        )
+      }
+    );
+  }
+  const labelSize = size;
+  const hasLeft = Boolean(leftIcon);
+  const hasRight = Boolean(rightIcon);
+  const paddingParts = getPaddingClasses(labelSize, hasLeft, hasRight);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      className: cn(
+        baseClasses,
+        roundedLabelClass[labelSize],
+        paddingParts[0],
+        paddingParts[1],
+        paddingParts[2],
+        hasLeft || hasRight ? gapClass[labelSize] : void 0,
+        variantClasses,
+        cursorClass,
+        textSizeClass[labelSize],
+        className
+      ),
+      disabled: isDisabled,
+      onPointerDown,
+      onPointerUp,
+      onPointerLeave,
+      ...props,
+      children: [
+        hasLeft && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center shrink-0 overflow-hidden",
+              labelIconSizeClass[labelSize]
+            ),
+            "aria-hidden": "true",
+            children: leftIcon
+          }
+        ),
+        children ?? "Button",
+        hasRight && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center shrink-0 overflow-hidden",
+              labelIconSizeClass[labelSize]
+            ),
+            "aria-hidden": "true",
+            children: rightIcon
+          }
+        )
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+const imgBanner = "";
+function LockIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Lock, { size: 16, weight: "regular", color: "var(--subtle-text)" });
+}
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.CalendarBlank, { size: 16, weight: "regular", color: "var(--accent-orange)" });
+}
+function LocationIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MapPin, { size: 16, weight: "regular", color: "var(--subtle-text)" });
+}
+function AudienceIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Users, { size: 16, weight: "regular", color: "var(--subtle-text)" });
+}
+const tagConfig = {
+  "not-registered": {
+    bg: "var(--disabled-bg)",
+    text: "var(--disabled)",
+    label: "ยังไม่ลงทะเบียน"
+  },
+  registered: {
+    bg: "var(--success-bg)",
+    text: "var(--success)",
+    label: "ลงทะเบียนแล้ว"
+  },
+  full: {
+    bg: "var(--error-bg)",
+    text: "var(--destructive)",
+    label: "เต็มแล้ว"
+  }
+};
+const Card = React.forwardRef(function Card2({
+  variant = "desktop",
+  title = "Lorem ipsum dolor sit amet consectetur. Lectus viverraasdasd",
+  date = "23 มิ.ย. 2567",
+  time = "08.30 - 12.00",
+  location = "ณ หอประชุมศาสตราจารย์สังเวียน อินทรวิชัย ชั้น 7 ตลาดหลักทรัพย์แห่งประเทศไทย",
+  showLocation = true,
+  showAudience = true,
+  count = "200/200",
+  locked = true,
+  tagStatus = "not-registered",
+  image,
+  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 bannerClass = variant === "desktop" ? "h-[173px]" : "aspect-video w-full";
+  const tag = tagConfig[tagStatus];
+  const bannerSrc = image ?? imgBanner;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      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)]",
+        widthClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full shrink-0 overflow-clip", bannerClass), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              alt: "event banner",
+              className: "pointer-events-none absolute inset-0 size-full object-cover",
+              src: bannerSrc
+            }
+          ),
+          locked && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute left-[8px] top-[8px] flex items-center gap-[4px] rounded-[4px] bg-hover-bg px-[6px] py-[4px]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-0 rounded-[4px] border border-solid border-border"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(LockIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[18px] text-subtle-text", children: "Lock" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full shrink-0 bg-white", padding), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-[4px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "line-clamp-2 w-full overflow-hidden text-ellipsis text-[14px] leading-[20px] text-foreground"
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-[4px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[16px] text-accent-orange", children: date })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] w-px shrink-0 bg-border" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
+                  ),
+                  children: time
+                }
+              )
+            ] }),
+            showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] leading-[16px] text-subtle-text"
+                  ),
+                  children: location
+                }
+              )
+            ] }),
+            showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-[4px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AudienceIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-subtle-text", children: "ผู้เข้าร่วม" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-[12px] leading-[16px] text-primary-action", children: count })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex items-center justify-center gap-[2px] overflow-clip rounded-[4px] px-[8px] py-[4px]",
+              style: { backgroundColor: tag.bg },
+              children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[16px]", style: { color: tag.text }, children: tag.label })
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+});
+Card.displayName = "Card";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React__namespace.useState(
+    void 0
+  );
+  React__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      vaul.Drawer.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+const THAI_MONTHS_SHORT = [
+  "ม.ค.",
+  "ก.พ.",
+  "มี.ค.",
+  "เม.ย.",
+  "พ.ค.",
+  "มิ.ย.",
+  "ก.ค.",
+  "ส.ค.",
+  "ก.ย.",
+  "ต.ค.",
+  "พ.ย.",
+  "ธ.ค."
+];
+const THAI_MONTHS_FULL = [
+  "มกราคม",
+  "กุมภาพันธ์",
+  "มีนาคม",
+  "เมษายน",
+  "พฤษภาคม",
+  "มิถุนายน",
+  "กรกฎาคม",
+  "สิงหาคม",
+  "กันยายน",
+  "ตุลาคม",
+  "พฤศจิกายน",
+  "ธันวาคม"
+];
+const THAI_WEEKDAYS = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"];
+function formatThaiDate(date) {
+  return `${date.getDate()} ${THAI_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear() + 543}`;
+}
+const DrawerRangeCtx = React.createContext(false);
+const DisabledDatesCtx = React.createContext({});
+const NAV_BTN_CLASS = cn(
+  "h-[28px] w-[28px] inline-flex items-center justify-center",
+  "rounded-[6px] bg-transparent border border-border cursor-pointer",
+  "text-muted-foreground hover:bg-disabled-bg transition-colors duration-100",
+  "p-0 outline-none"
+);
+function CustomCaption({
+  displayMonth,
+  displayIndex
+}) {
+  const { goToMonth, previousMonth, nextMonth, displayMonths } = reactDayPicker.useNavigation();
+  const isDrawerRange = React.useContext(DrawerRangeCtx);
+  const { disabledYears = [] } = React.useContext(DisabledDatesCtx);
+  const [view, setView] = React.useState("days");
+  const [pickerYear, setPickerYear] = React.useState(
+    displayMonth.getFullYear()
+  );
+  const [yearRangeStart, setYearRangeStart] = React.useState(
+    Math.floor(displayMonth.getFullYear() / 12) * 12
+  );
+  const isFirst = displayMonths[0].getTime() === displayMonth.getTime();
+  const isLast = displayMonths[displayMonths.length - 1].getTime() === displayMonth.getTime();
+  const idx = displayIndex ?? 0;
+  const handlePrevYear = () => {
+    const d = new Date(displayMonth);
+    d.setFullYear(d.getFullYear() - 1);
+    goToMonth(d);
+  };
+  const handleNextYear = () => {
+    const d = new Date(displayMonth);
+    d.setFullYear(d.getFullYear() + 1);
+    goToMonth(d);
+  };
+  if (isDrawerRange && !isFirst) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center pt-3 mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "text-[14px] leading-[20px] text-foreground font-medium hover:text-primary-action cursor-pointer bg-transparent border-0 outline-none transition-colors",
+        onClick: () => {
+          setPickerYear(displayMonth.getFullYear());
+          setView("months");
+        },
+        children: [
+          THAI_MONTHS_FULL[displayMonth.getMonth()],
+          " ",
+          displayMonth.getFullYear() + 543
+        ]
+      }
+    ) });
+  }
+  let headerText;
+  let onHeaderClick;
+  if (view === "years") {
+    headerText = `${yearRangeStart + 543} - ${yearRangeStart + 11 + 543}`;
+    onHeaderClick = () => setView("months");
+  } else if (view === "months") {
+    headerText = `${pickerYear + 543}`;
+    onHeaderClick = () => {
+      setYearRangeStart(Math.floor(pickerYear / 12) * 12);
+      setView("years");
+    };
+  } else {
+    headerText = `${THAI_MONTHS_FULL[displayMonth.getMonth()]} ${displayMonth.getFullYear() + 543}`;
+    onHeaderClick = () => {
+      setPickerYear(displayMonth.getFullYear());
+      setView("months");
+    };
+  }
+  let leftNav = null;
+  let rightNav = null;
+  if (view === "years") {
+    leftNav = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: NAV_BTN_CLASS,
+        onClick: () => setYearRangeStart((s) => s - 12),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+      }
+    );
+    rightNav = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: NAV_BTN_CLASS,
+        onClick: () => setYearRangeStart((s) => s + 12),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+      }
+    );
+  } else if (view === "months") {
+    leftNav = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: NAV_BTN_CLASS,
+        onClick: () => setPickerYear((y) => y - 1),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+      }
+    );
+    rightNav = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: NAV_BTN_CLASS,
+        onClick: () => setPickerYear((y) => y + 1),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+      }
+    );
+  } else if (isDrawerRange) {
+    leftNav = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: NAV_BTN_CLASS,
+          onClick: handlePrevYear,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { size: 16, className: "text-primary-action" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: NAV_BTN_CLASS,
+          onClick: () => previousMonth && goToMonth(previousMonth),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+        }
+      )
+    ] });
+    rightNav = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: NAV_BTN_CLASS,
+          onClick: () => nextMonth && goToMonth(nextMonth),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, className: "text-primary-action" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: NAV_BTN_CLASS,
+          onClick: handleNextYear,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { size: 16, className: "text-primary-action" })
+        }
+      )
+    ] });
+  } else {
+    if (isFirst) {
+      leftNav = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: NAV_BTN_CLASS,
+            onClick: handlePrevYear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronsLeft,
+              {
+                size: 16,
+                className: "text-primary-action"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: NAV_BTN_CLASS,
+            onClick: () => previousMonth && goToMonth(previousMonth),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16, className: "text-primary-action" })
+          }
+        )
+      ] });
+    }
+    if (isLast) {
+      rightNav = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: NAV_BTN_CLASS,
+            onClick: () => nextMonth && goToMonth(nextMonth),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronRight,
+              {
+                size: 16,
+                className: "text-primary-action"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: NAV_BTN_CLASS,
+            onClick: handleNextYear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronsRight,
+              {
+                size: 16,
+                className: "text-primary-action"
+              }
+            )
+          }
+        )
+      ] });
+    }
+  }
+  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"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: leftNav }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-[14px] leading-[20px] text-foreground font-medium hover:text-primary-action cursor-pointer bg-transparent border-0 outline-none transition-colors",
+          onClick: onHeaderClick,
+          children: headerText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: rightNav })
+    ] }),
+    view === "months" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
+        style: { top: "42px", bottom: "0" },
+        children: THAI_MONTHS_SHORT.map((name, i) => {
+          const isCurrent = pickerYear === displayMonth.getFullYear() && i === displayMonth.getMonth();
+          const isToday = pickerYear === now.getFullYear() && i === now.getMonth();
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                goToMonth(new Date(pickerYear, i - idx));
+                setView("days");
+              },
+              className: gridBtnClass(isCurrent, isToday),
+              children: name
+            },
+            i
+          );
+        })
+      }
+    ),
+    view === "years" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-0 right-0 z-10 bg-white grid grid-cols-3 gap-1 p-2 content-center",
+        style: { top: "42px", bottom: "0" },
+        children: Array.from({ length: 12 }, (_, i) => {
+          const year = yearRangeStart + i;
+          const isCurrent = year === displayMonth.getFullYear();
+          const isToday = year === now.getFullYear();
+          const isYearDisabled = disabledYears.includes(year);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: isYearDisabled,
+              onClick: () => {
+                if (isYearDisabled) return;
+                setPickerYear(year);
+                setView("months");
+              },
+              className: gridBtnClass(isCurrent, isToday, isYearDisabled),
+              children: year + 543
+            },
+            year
+          );
+        })
+      }
+    )
+  ] });
+}
+const DAY_PICKER_CLASSES = {
+  months: "flex flex-col sm:flex-row sm:gap-6",
+  month: "space-y-2 relative",
+  caption: "flex justify-center pt-1 relative items-center mb-2",
+  caption_label: "text-[14px] leading-[20px] text-foreground",
+  nav: "hidden",
+  nav_button: cn(
+    "h-[28px] w-[28px] inline-flex items-center justify-center",
+    "rounded-[6px] bg-transparent border border-border cursor-pointer",
+    "text-muted-foreground hover:bg-disabled-bg transition-colors duration-100",
+    "p-0 outline-none"
+  ),
+  nav_button_previous: "absolute left-1",
+  nav_button_next: "absolute right-1",
+  table: "w-full border-collapse",
+  head_row: "flex",
+  head_cell: "w-[36px] h-[32px] inline-flex items-center justify-center text-[12px] text-disabled font-normal",
+  row: "flex w-full mt-1",
+  cell: cn(
+    "h-[36px] w-[36px] text-center p-0 relative overflow-hidden",
+    "[&:has(.day-range-middle)]:bg-range-bg",
+    "[&:has(.day-range-start)]:bg-range-bg",
+    "[&:has(.day-range-end)]:bg-range-bg",
+    "[&:has(.day-range-start)]:rounded-l-[6px]",
+    "[&:has(.day-range-end)]:rounded-r-[6px]",
+    "[&:first-child:has(.day-range-middle)]:rounded-l-[6px]",
+    "[&:last-child:has(.day-range-middle)]:rounded-r-[6px]",
+    "[&:first-child:has(.day-range-end)]:rounded-l-[6px]",
+    "[&:last-child:has(.day-range-start)]:rounded-r-[6px]",
+    "focus-within:relative focus-within:z-20"
+  ),
+  day: cn(
+    "h-[36px] w-[36px] inline-flex items-center justify-center",
+    "text-[14px] text-foreground rounded-[6px]",
+    "border-0 bg-transparent cursor-pointer",
+    "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_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",
+  day_range_middle: "day-range-middle !bg-range-bg !text-range-text !rounded-none",
+  day_hidden: "invisible"
+};
+const DRAWER_DAY_PICKER_CLASSES = {
+  ...DAY_PICKER_CLASSES,
+  months: "flex flex-col gap-6 w-full",
+  month: "space-y-2 relative w-full",
+  table: "w-full border-collapse table-fixed",
+  head_row: "flex w-full",
+  head_cell: "flex-1 h-[40px] inline-flex items-center justify-center text-[13px] text-disabled font-normal",
+  row: "flex w-full mt-1",
+  cell: cn(
+    "h-[44px] flex-1 text-center p-0 relative overflow-hidden",
+    "[&:has(.day-range-middle)]:bg-range-bg",
+    "[&:has(.day-range-start)]:bg-range-bg",
+    "[&:has(.day-range-end)]:bg-range-bg",
+    "[&:has(.day-range-start)]:rounded-l-[8px]",
+    "[&:has(.day-range-end)]:rounded-r-[8px]",
+    "[&:first-child:has(.day-range-middle)]:rounded-l-[8px]",
+    "[&:last-child:has(.day-range-middle)]:rounded-r-[8px]",
+    "[&:first-child:has(.day-range-end)]:rounded-l-[8px]",
+    "[&:last-child:has(.day-range-start)]:rounded-r-[8px]",
+    "focus-within:relative focus-within:z-20"
+  ),
+  day: cn(
+    "h-[44px] w-full inline-flex items-center justify-center",
+    "text-[16px] text-foreground rounded-[8px]",
+    "border-0 bg-transparent cursor-pointer",
+    "hover:bg-disabled-bg transition-colors duration-100",
+    "outline-none aria-selected:opacity-100 p-0"
+  )
+};
+const DATE_ITEM_H = 40;
+const DATE_DRUM_H = 200;
+const DATE_SPACER = (DATE_DRUM_H - DATE_ITEM_H) / 2;
+const SCROLL_YEAR_START = 1950;
+const SCROLL_YEAR_END = 2060;
+const YEAR_ITEMS = Array.from(
+  { length: SCROLL_YEAR_END - SCROLL_YEAR_START + 1 },
+  (_, i) => String(SCROLL_YEAR_START + i)
+);
+function getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+function dateToScrollValue(date) {
+  const d = date ?? /* @__PURE__ */ new Date();
+  return {
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate()
+  };
+}
+function scrollValueToDate(v) {
+  return new Date(v.year, v.month - 1, v.day);
+}
+function DateScrollColumn({
+  items,
+  selectedIndex,
+  onChange,
+  flex = 1
+}) {
+  const containerRef = React.useRef(null);
+  const debounceRef = React.useRef(void 0);
+  const [localIndex, setLocalIndex] = React.useState(selectedIndex);
+  const isUserScrolling = React.useRef(false);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      el.scrollTop = selectedIndex * DATE_ITEM_H;
+      setLocalIndex(selectedIndex);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (isUserScrolling.current) return;
+    const el = containerRef.current;
+    if (el) {
+      el.scrollTo({
+        top: selectedIndex * DATE_ITEM_H,
+        behavior: "smooth"
+      });
+      setLocalIndex(selectedIndex);
+    }
+  }, [selectedIndex]);
+  const handleScroll = React.useCallback(() => {
+    isUserScrolling.current = true;
+    const el = containerRef.current;
+    if (!el) return;
+    const rawIdx = el.scrollTop / DATE_ITEM_H;
+    const idx = Math.max(
+      0,
+      Math.min(Math.round(rawIdx), items.length - 1)
+    );
+    setLocalIndex(idx);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      isUserScrolling.current = false;
+      const finalIdx = Math.max(
+        0,
+        Math.min(
+          Math.round(el.scrollTop / DATE_ITEM_H),
+          items.length - 1
+        )
+      );
+      el.scrollTo({
+        top: finalIdx * DATE_ITEM_H,
+        behavior: "smooth"
+      });
+      onChange(finalIdx);
+      setLocalIndex(finalIdx);
+    }, 120);
+  }, [items.length, onChange]);
+  const handleItemClick = React.useCallback(
+    (idx) => {
+      var _a;
+      setLocalIndex(idx);
+      onChange(idx);
+      (_a = containerRef.current) == null ? void 0 : _a.scrollTo({
+        top: idx * DATE_ITEM_H,
+        behavior: "smooth"
+      });
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative [&::-webkit-scrollbar]:hidden min-w-0",
+      style: {
+        flex,
+        height: DATE_DRUM_H,
+        overflowY: "scroll",
+        scrollSnapType: "y mandatory",
+        scrollbarWidth: "none"
+      },
+      onScroll: handleScroll,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: DATE_SPACER, flexShrink: 0 } }),
+        items.map((label, idx) => {
+          const isSel = idx === localIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                height: DATE_ITEM_H,
+                scrollSnapAlign: "center"
+              },
+              className: "flex items-center justify-center cursor-pointer select-none",
+              onClick: () => handleItemClick(idx),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: isSel ? 32 : 14,
+                    lineHeight: 1,
+                    color: isSel ? "var(--foreground)" : "var(--disabled)",
+                    transition: "font-size 0.1s, color 0.1s",
+                    whiteSpace: "nowrap"
+                  },
+                  children: label
+                }
+              )
+            },
+            idx
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: DATE_SPACER, flexShrink: 0 } })
+      ]
+    }
+  );
+}
+function ScrollDatePickerContent({
+  value,
+  onChange
+}) {
+  const daysInMonth = getDaysInMonth(value.year, value.month);
+  const dayItems = Array.from(
+    { length: daysInMonth },
+    (_, i) => String(i + 1).padStart(2, "0")
+  );
+  const monthIndex = value.month - 1;
+  const dayIndex = Math.min(value.day, daysInMonth) - 1;
+  const yearIndex = value.year - SCROLL_YEAR_START;
+  const handleMonthChange = React.useCallback(
+    (idx) => {
+      const newMonth = idx + 1;
+      const maxDay = getDaysInMonth(value.year, newMonth);
+      onChange({
+        ...value,
+        month: newMonth,
+        day: Math.min(value.day, maxDay)
+      });
+    },
+    [value, onChange]
+  );
+  const handleDayChange = React.useCallback(
+    (idx) => {
+      onChange({ ...value, day: idx + 1 });
+    },
+    [value, onChange]
+  );
+  const handleYearChange = React.useCallback(
+    (idx) => {
+      const newYear = SCROLL_YEAR_START + idx;
+      const maxDay = getDaysInMonth(newYear, value.month);
+      onChange({
+        ...value,
+        year: newYear,
+        day: Math.min(value.day, maxDay)
+      });
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-0 right-0 rounded-[4px] bg-selected-light-bg pointer-events-none",
+        style: {
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: DATE_ITEM_H,
+          zIndex: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative flex gap-[8px] items-center w-full min-w-[340px] px-4",
+        style: { zIndex: 1 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DateScrollColumn,
+            {
+              items: THAI_MONTHS_FULL,
+              selectedIndex: monthIndex,
+              onChange: handleMonthChange,
+              flex: 108
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DateScrollColumn,
+            {
+              items: dayItems,
+              selectedIndex: dayIndex,
+              onChange: handleDayChange,
+              flex: 38
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DateScrollColumn,
+            {
+              items: YEAR_ITEMS,
+              selectedIndex: yearIndex,
+              onChange: handleYearChange,
+              flex: 85
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const DateInput = React.forwardRef(
+  function DateInput2({
+    mode = "single",
+    placeholder = "Text label",
+    required = false,
+    forceState,
+    errorMessage = "Error message",
+    helperText,
+    pickerVariant = "calendar",
+    value,
+    onChange,
+    dateRange,
+    onRangeChange,
+    disabledYears,
+    className
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const [internalDate, setInternalDate] = React.useState(void 0);
+    const [internalRange, setInternalRange] = React.useState(void 0);
+    const isMobile = useIsMobile();
+    const [draftDate, setDraftDate] = React.useState(
+      void 0
+    );
+    const [draftRange, setDraftRange] = React.useState(void 0);
+    const [draftScrollValue, setDraftScrollValue] = React.useState(dateToScrollValue(void 0));
+    const isStatic = Boolean(forceState);
+    const isDisabled = forceState === "disabled";
+    const currentDate = value !== void 0 ? value : internalDate;
+    const currentRange = dateRange !== void 0 ? dateRange : internalRange;
+    const state = forceState ?? (open ? "focus" : "default");
+    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 labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const minusColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const asteriskColorEmpty = isDisabled ? "var(--disabled)" : "var(--error-dark)";
+    const asteriskColorFilled = isDisabled ? "var(--disabled)" : "var(--error-dark)";
+    const borderInset = isFocus || isError ? "-1px" : "0px";
+    const borderRad = isFocus || isError ? "9px" : "8px";
+    const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+    const showBelow = isError || Boolean(helperText);
+    const leftText = isError ? errorMessage : helperText ?? "";
+    const leftColor = isError ? "var(--error-dark)" : "var(--muted-foreground)";
+    const handleDateSelect = (date) => {
+      setDraftDate(date);
+    };
+    const handleRangeSelect = (range) => {
+      setDraftRange(range);
+    };
+    const handleCancel = () => setOpen(false);
+    const handleConfirm = () => {
+      if (pickerVariant === "scroll") {
+        const d = scrollValueToDate(draftScrollValue);
+        if (value === void 0) setInternalDate(d);
+        onChange == null ? void 0 : onChange(d);
+      } else if (mode === "single") {
+        if (value === void 0) setInternalDate(draftDate);
+        onChange == null ? void 0 : onChange(draftDate);
+      } else {
+        if (dateRange === void 0) setInternalRange(draftRange);
+        onRangeChange == null ? void 0 : onRangeChange(draftRange);
+      }
+      setOpen(false);
+    };
+    const renderContent = () => {
+      if (isFilled) {
+        const floatingLabel = required ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[2px] items-center relative shrink-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[16px] not-italic relative shrink-0 text-[12px] whitespace-nowrap",
+              style: { color: labelColor },
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[1.5] not-italic relative shrink-0 text-[9px] w-[7px]",
+              style: { color: asteriskColorFilled },
+              children: "*"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "leading-[16px] not-italic relative shrink-0 text-[12px] w-full",
+            style: { color: labelColor },
+            children: placeholder
+          }
+        );
+        const valueRow = mode === "single" && currentDate ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "leading-[20px] not-italic relative shrink-0 text-[16px] w-full",
+            style: { color: valueColor },
+            children: formatThaiDate(currentDate)
+          }
+        ) : mode === "range" && (currentRange == null ? void 0 : currentRange.from) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center relative shrink-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: valueColor },
+              children: formatThaiDate(currentRange.from)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Minus, { size: 20, weight: "bold", color: minusColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: valueColor },
+              children: currentRange.to ? formatThaiDate(currentRange.to) : "..."
+            }
+          )
+        ] }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 flex-col items-center justify-center min-h-px min-w-px relative", children: [
+          floatingLabel,
+          valueRow
+        ] });
+      }
+      if (required) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 min-w-px min-h-px gap-[2px] items-center relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic relative shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: labelColor },
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "font-normal h-full leading-[1.5] not-italic relative shrink-0 text-[12px] w-[7px]",
+              style: { color: asteriskColorEmpty },
+              children: "*"
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "flex-1 min-w-0 min-h-px text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap relative",
+          style: { color: labelColor },
+          children: placeholder
+        }
+      );
+    };
+    const triggerInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute pointer-events-none border border-solid",
+          style: {
+            inset: borderInset,
+            borderRadius: borderRad,
+            borderColor
+          }
+        }
+      ),
+      renderContent(),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-row items-center shrink-0",
+            isFilled && "self-stretch"
+          ),
+          children: isFilled ? /* @__PURE__ */ jsxRuntime.jsx(react.CalendarBlank, { size: 22, weight: "regular", color: iconColor }) : /* @__PURE__ */ jsxRuntime.jsx(react.CalendarBlank, { size: 24, weight: "regular", color: iconColor })
+        }
+      )
+    ] });
+    const triggerBaseClasses = cn(
+      "relative flex gap-[8px] items-center rounded-[8px]",
+      bgClass,
+      "px-[14px]",
+      isFilled ? "py-[6px]" : "py-[12px]",
+      "w-full"
+    );
+    const belowMessage = 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
+      }
+    ) });
+    if (isStatic) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col gap-[4px] w-full", className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: triggerBaseClasses, children: triggerInner }),
+            belowMessage
+          ]
+        }
+      );
+    }
+    const isScrollVariant = pickerVariant === "scroll" && mode === "single";
+    const pickerClasses = isMobile ? DRAWER_DAY_PICKER_CLASSES : DAY_PICKER_CLASSES;
+    const pickerInner = isScrollVariant ? /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollDatePickerContent,
+      {
+        value: draftScrollValue,
+        onChange: setDraftScrollValue
+      }
+    ) : mode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactDayPicker.DayPicker,
+      {
+        mode: "single",
+        selected: draftDate,
+        onSelect: handleDateSelect,
+        showOutsideDays: true,
+        classNames: pickerClasses,
+        formatters: {
+          formatWeekdayName: (date) => THAI_WEEKDAYS[date.getDay()]
+        },
+        components: { Caption: CustomCaption }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactDayPicker.DayPicker,
+      {
+        mode: "range",
+        selected: draftRange,
+        onSelect: handleRangeSelect,
+        numberOfMonths: 2,
+        showOutsideDays: true,
+        classNames: pickerClasses,
+        formatters: {
+          formatWeekdayName: (date) => THAI_WEEKDAYS[date.getDay()]
+        },
+        components: { Caption: CustomCaption }
+      }
+    );
+    const calendarContent = /* @__PURE__ */ jsxRuntime.jsx(DisabledDatesCtx.Provider, { value: { disabledYears }, children: pickerInner });
+    const actionButtons = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[12px] items-center pt-[12px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "lg",
+          className: "flex-1",
+          onClick: handleCancel,
+          children: "ยกเลิก"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "lg",
+          className: "flex-1",
+          onClick: handleConfirm,
+          children: "ตกลง"
+        }
+      )
+    ] });
+    const triggerButton = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        className: cn(triggerBaseClasses, "text-left cursor-pointer disabled:cursor-default"),
+        children: triggerInner
+      }
+    );
+    const handleOpenChange = (o) => {
+      if (!isDisabled) {
+        if (o) {
+          setDraftDate(currentDate);
+          setDraftRange(currentRange);
+          setDraftScrollValue(dateToScrollValue(currentDate));
+        }
+        setOpen(o);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-[4px] w-full", className),
+        children: [
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: "เลือกวันที่" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DrawerRangeCtx.Provider, { value: mode === "range", children: calendarContent }),
+                actionButtons
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            Popover__namespace.Root,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: triggerButton }),
+                /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Popover__namespace.Content,
+                  {
+                    align: "start",
+                    sideOffset: 4,
+                    className: "z-50 rounded-[8px] bg-white p-3 outline-none",
+                    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 var(--border)"
+                    },
+                    onOpenAutoFocus: (e) => e.preventDefault(),
+                    children: [
+                      calendarContent,
+                      actionButtons
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          belowMessage
+        ]
+      }
+    );
+  }
+);
+DateInput.displayName = "DateInput";
+function ChevronDownIcon$1({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronUpIcon$1({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+const Dropdown = React.forwardRef(
+  ({
+    placeholder = "Text label",
+    label,
+    required = false,
+    forceState,
+    errorMessage = "Error message",
+    helperText,
+    value,
+    onChange,
+    options = [],
+    className
+  }, ref) => {
+    var _a;
+    const [open, setOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
+    const [search, setSearch] = React.useState("");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const controlled = value !== void 0;
+    const currentValue = controlled ? value : internalValue;
+    const isDisabled = forceState === "disabled";
+    const selectedLabel = (_a = options.find((o) => o.value === currentValue)) == null ? void 0 : _a.label;
+    const isFilled = Boolean(selectedLabel);
+    const state = forceState ?? (open ? "focus" : "default");
+    const isError = state === "error";
+    const isFocus = state === "focus";
+    const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const filledColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const caretClassName = isDisabled ? "text-disabled" : "text-muted-foreground";
+    const hasExternalLabel = Boolean(label);
+    const borderInset = isFocus || isError ? "-1px" : "0px";
+    const borderRad = isFocus || isError ? "9px" : "8px";
+    const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+    const showBelow = isError || Boolean(helperText);
+    const leftText = isError ? errorMessage : helperText ?? "";
+    const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+    const filteredOptions = search.trim() ? options.filter(
+      (o) => o.label.toLowerCase().includes(search.trim().toLowerCase())
+    ) : options;
+    React.useEffect(() => {
+      if (open && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [open]);
+    React.useEffect(() => {
+      if (!open) setSearch("");
+    }, [open]);
+    React.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    const handleSelect = (val) => {
+      if (!controlled) setInternalValue(val);
+      onChange == null ? void 0 : onChange(val);
+      setOpen(false);
+    };
+    const handleToggle = () => {
+      if (isDisabled) return;
+      if (forceState) return;
+      setOpen((prev) => !prev);
+    };
+    const handleInputKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      } else if (e.key === "Enter" && filteredOptions.length === 1) {
+        handleSelect(filteredOptions[0].value);
+      }
+    };
+    const Asterisk = ({ color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "leading-[16px] not-italic text-[12px]", style: { color }, children: [
+      " ",
+      "*"
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cn("flex flex-col gap-[4px] w-full", className),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-[20px] not-italic relative shrink-0 text-foreground text-[14px] font-bold whitespace-nowrap", children: label }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onClick: handleToggle,
+              className: cn(
+                "relative flex gap-[8px] items-center rounded-[8px] px-[14px]",
+                bg,
+                hasExternalLabel ? "h-[38px]" : isFilled && !open ? "py-[6px]" : "p-[14px]",
+                !isDisabled && !forceState && "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "absolute pointer-events-none border border-solid",
+                    style: { inset: borderInset, borderRadius: borderRad, borderColor }
+                  }
+                ),
+                open && !forceState ? (
+                  /* ─── Open: search input ─── */
+                  hasExternalLabel ? (
+                    /* External label + open → single-line search input */
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        type: "text",
+                        value: search,
+                        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",
+                        style: {
+                          color: filledColor,
+                          caretColor: "var(--caret-color)"
+                        },
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    )
+                  ) : isFilled ? (
+                    /* Filled + open → floating label + search input */
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center flex-1 min-w-0 min-h-[1px]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "p",
+                        {
+                          className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
+                          style: { color: labelColor },
+                          children: [
+                            placeholder,
+                            required && /* @__PURE__ */ jsxRuntime.jsx(Asterisk, { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          ref: inputRef,
+                          type: "text",
+                          value: search,
+                          onChange: (e) => setSearch(e.target.value),
+                          onKeyDown: handleInputKeyDown,
+                          placeholder: selectedLabel,
+                          className: "w-full leading-[20px] not-italic text-[14px] min-w-0 bg-transparent outline-none border-none p-0 m-0 placeholder:text-disabled",
+                          style: {
+                            color: filledColor,
+                            caretColor: "var(--caret-color)"
+                          },
+                          onClick: (e) => e.stopPropagation()
+                        }
+                      )
+                    ] })
+                  ) : (
+                    /* Empty + open → inline search input */
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        type: "text",
+                        value: search,
+                        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",
+                        style: {
+                          color: "var(--foreground)",
+                          caretColor: "var(--caret-color)"
+                        },
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    )
+                  )
+                ) : isFilled ? (
+                  /* ─── Closed + Filled ─── */
+                  hasExternalLabel ? (
+                    /* External label → single-line selected value */
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "p",
+                      {
+                        className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] overflow-hidden text-ellipsis whitespace-nowrap",
+                        style: { color: filledColor },
+                        children: [
+                          selectedLabel,
+                          required && /* @__PURE__ */ jsxRuntime.jsx(Asterisk, { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" })
+                        ]
+                      }
+                    )
+                  ) : (
+                    /* Default → floating label + selected value */
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center flex-1 min-w-0 min-h-[1px]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "p",
+                        {
+                          className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
+                          style: { color: labelColor },
+                          children: [
+                            placeholder,
+                            required && /* @__PURE__ */ jsxRuntime.jsx(Asterisk, { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: "w-full leading-[20px] not-italic text-[14px] min-w-0 min-h-[1px]",
+                          style: { color: filledColor },
+                          children: selectedLabel
+                        }
+                      )
+                    ] })
+                  )
+                ) : (
+                  /* ─── Closed + Empty: placeholder ─── */
+                  required ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 min-w-0 min-h-[1px] gap-[2px] items-center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
+                        style: { color: labelColor },
+                        children: placeholder
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: "leading-[16px] not-italic text-[12px] w-[7px]",
+                        style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
+                        children: "*"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap",
+                      style: { color: labelColor },
+                      children: placeholder
+                    }
+                  )
+                ),
+                isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon$1, { className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon$1, { className: cn("shrink-0", caretClassName) })
+              ]
+            }
+          ),
+          open && !forceState && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
+                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)",
+                ...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
+              },
+              children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  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"
+                  ),
+                  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: cn(
+                        "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
+                        opt.value === currentValue ? "text-primary-action" : "text-foreground"
+                      ),
+                      children: opt.label
+                    }
+                  ) }) })
+                },
+                opt.value
+              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+            }
+          ),
+          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 }) })
+        ]
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
+const TAG_GAP = 4;
+const MAX_COMPONENT_WIDTH = 343;
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 9L11 13L15 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 13L11 9L15 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function XIcon({ color = "var(--muted-foreground)" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M9 3L3 9M3 3L9 9",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function RemovableTag({
+  label,
+  disabled,
+  onRemove,
+  maxWidth
+}) {
+  const textColor = disabled ? "var(--disabled)" : "var(--subtle-text)";
+  const iconColor = disabled ? "var(--disabled)" : "var(--muted-foreground)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "bg-disabled-bg flex items-center overflow-hidden pl-[8px] pr-[8px] py-[4px] rounded-[4px] shrink-0 relative group",
+      style: maxWidth !== void 0 ? { maxWidth, flexShrink: 1 } : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
+          {
+            className: "leading-[16px] not-italic text-[12px] whitespace-nowrap overflow-hidden text-ellipsis pr-[4px]",
+            style: { color: textColor },
+            children: [
+              label,
+              " "
+            ]
+          }
+        ),
+        !disabled && onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: "absolute right-[4px] top-1/2 -translate-y-1/2 flex items-center justify-center rounded-[2px] p-[1px] cursor-pointer opacity-0 group-hover:opacity-100 transition-all duration-150 bg-[#e5e7eb]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { color: iconColor })
+          }
+        )
+      ]
+    }
+  );
+}
+function StaticTag({
+  label,
+  disabled,
+  maxWidth
+}) {
+  const textColor = disabled ? "var(--disabled)" : "var(--subtle-text)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "bg-disabled-bg flex items-center justify-center overflow-clip px-[8px] py-[4px] rounded-[4px] shrink-0",
+      style: maxWidth !== void 0 ? { maxWidth, flexShrink: 1 } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "leading-[16px] not-italic text-[12px] whitespace-nowrap overflow-hidden text-ellipsis",
+          style: { color: textColor },
+          children: label
+        }
+      )
+    }
+  );
+}
+function OverflowBadge({
+  count,
+  disabled
+}) {
+  const bg = disabled ? "bg-[#fafafa]" : "bg-selected-bg";
+  const textColor = disabled ? "var(--disabled)" : "var(--primary-action)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        bg,
+        "flex items-center justify-center overflow-clip px-[8px] py-[4px] rounded-[4px] shrink-0"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          className: "leading-[16px] not-italic text-[12px] whitespace-nowrap",
+          style: { color: textColor },
+          children: [
+            "+",
+            count
+          ]
+        }
+      )
+    }
+  );
+}
+function CheckIcon$1(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "10",
+      height: "8",
+      viewBox: "0 0 10 8",
+      fill: "none",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M1 4L3.5 6.5L9 1",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function useChipLayout(selectedOptions, measureRef, containerRef) {
+  const [layout, setLayout] = React.useState({
+    visibleCount: selectedOptions.length,
+    lastTagMaxWidth: void 0
+  });
+  React.useLayoutEffect(() => {
+    var _a, _b;
+    const calculate = () => {
+      var _a2, _b2;
+      const total = selectedOptions.length;
+      if (!measureRef.current || total === 0) {
+        setLayout({
+          visibleCount: total,
+          lastTagMaxWidth: void 0
+        });
+        return;
+      }
+      const tagEls = Array.from(
+        measureRef.current.children
+      );
+      const containerWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) ?? MAX_COMPONENT_WIDTH;
+      const RIGHT_SECTION_WIDTH = 60;
+      const budget = containerWidth * 0.72 - RIGHT_SECTION_WIDTH;
+      let used = 0;
+      let count = 0;
+      for (let i = 0; i < tagEls.length; i++) {
+        const w = tagEls[i].offsetWidth;
+        const gap = count > 0 ? TAG_GAP : 0;
+        const nextUsed = used + gap + w;
+        if (nextUsed <= budget) {
+          used = nextUsed;
+          count++;
+        } else {
+          count++;
+          break;
+        }
+      }
+      count = Math.max(1, count);
+      const overflowCount = total - count;
+      const isFullWidth = used >= budget * 0.98;
+      let lastTagMaxWidth;
+      if (overflowCount > 0 || isFullWidth) {
+        const prevTagsWidth = tagEls.slice(0, count - 1).reduce(
+          (sum, el, i) => sum + el.offsetWidth + (i > 0 ? TAG_GAP : 0),
+          0
+        );
+        const gapBeforeLast = count > 1 ? TAG_GAP : 0;
+        const remaining = budget - prevTagsWidth - gapBeforeLast;
+        ((_b2 = tagEls[count - 1]) == null ? void 0 : _b2.offsetWidth) ?? 0;
+        if (remaining > 0) {
+          lastTagMaxWidth = remaining;
+        }
+      }
+      setLayout({ visibleCount: count, lastTagMaxWidth });
+    };
+    calculate();
+    (_b = (_a = document.fonts) == null ? void 0 : _a.ready) == null ? void 0 : _b.then(calculate);
+  }, [selectedOptions, measureRef, containerRef]);
+  return layout;
+}
+const DropdownMultiple = React.forwardRef(
+  function DropdownMultiple2({
+    placeholder = "Placeholder",
+    label,
+    required = false,
+    forceState,
+    errorMessage = "Error message",
+    helperText,
+    value,
+    onChange,
+    options = [],
+    className = ""
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState([]);
+    const [search, setSearch] = React.useState("");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const measureRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    const controlled = value !== void 0;
+    const currentValue = controlled ? value : internalValue;
+    const isDisabled = forceState === "disabled";
+    const isStatic = Boolean(forceState);
+    const isFilled = currentValue.length > 0;
+    const state = forceState ?? (open ? "focus" : "default");
+    const isError = state === "error";
+    const isFocus = state === "focus";
+    const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const caretColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const borderInset = isFocus || isError ? "-1px" : "0px";
+    const borderRad = isFocus || isError ? "9px" : "8px";
+    const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+    const showBelow = isError || Boolean(helperText);
+    const leftText = isError ? errorMessage : helperText ?? "";
+    const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+    const selectedOptions = React.useMemo(
+      () => currentValue.map((v) => options.find((o) => o.value === v)).filter(Boolean),
+      [currentValue, options]
+    );
+    const { visibleCount, lastTagMaxWidth } = useChipLayout(
+      selectedOptions,
+      measureRef,
+      containerRef
+    );
+    const visibleTags = selectedOptions.slice(0, visibleCount);
+    const overflowCount = Math.max(
+      0,
+      selectedOptions.length - visibleCount
+    );
+    const filteredOptions = React.useMemo(() => {
+      if (!search.trim()) return options;
+      const q = search.trim().toLowerCase();
+      return options.filter(
+        (o) => o.label.toLowerCase().includes(q)
+      );
+    }, [search, options]);
+    React.useEffect(() => {
+      if (open && inputRef.current) inputRef.current.focus();
+    }, [open]);
+    React.useEffect(() => {
+      if (!open) setSearch("");
+    }, [open]);
+    React.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    const updateValue = React.useCallback(
+      (next) => {
+        if (!controlled) setInternalValue(next);
+        onChange == null ? void 0 : onChange(next);
+      },
+      [controlled, onChange]
+    );
+    const handleToggleOption = React.useCallback(
+      (val) => {
+        const next = currentValue.includes(val) ? currentValue.filter((v) => v !== val) : [...currentValue, val];
+        updateValue(next);
+      },
+      [currentValue, updateValue]
+    );
+    const handleRemoveTag = React.useCallback(
+      (val) => {
+        updateValue(currentValue.filter((v) => v !== val));
+      },
+      [currentValue, updateValue]
+    );
+    const handleTriggerClick = () => {
+      var _a;
+      if (isDisabled || isStatic) return;
+      if (!open) setOpen(true);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleInputKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+      if (e.key === "Backspace" && search === "" && currentValue.length > 0) {
+        updateValue(currentValue.slice(0, -1));
+      }
+    };
+    const FloatingLabel = () => required ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[2px] items-center shrink-0 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "shrink-0 leading-[16px] not-italic text-[12px]",
+          style: { color: labelColor },
+          children: placeholder
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "leading-[1.5] not-italic text-[9px] w-[7px]",
+          style: {
+            color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+          },
+          children: "*"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "shrink-0 w-full leading-[16px] not-italic text-[12px]",
+        style: { color: labelColor },
+        children: placeholder
+      }
+    );
+    const Placeholder = () => required ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 min-w-0 min-h-[1px] gap-[2px] items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "leading-[20px] not-italic text-[16px] whitespace-nowrap",
+          style: { color: labelColor },
+          children: placeholder
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "leading-[16px] not-italic text-[12px] w-[7px]",
+          style: { color: isDisabled ? "var(--disabled)" : "var(--error-dark)" },
+          children: "*"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "flex-1 min-w-0 min-h-[1px] text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap py-[7px]",
+        style: { color: labelColor },
+        children: placeholder
+      }
+    );
+    const MeasurementLayer = () => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: measureRef,
+        "aria-hidden": true,
+        className: "absolute flex gap-[4px] items-center pointer-events-none",
+        style: {
+          visibility: "hidden",
+          top: 0,
+          left: 0,
+          height: 0,
+          overflow: "hidden"
+        },
+        children: selectedOptions.map(
+          (opt) => isStatic ? /* @__PURE__ */ jsxRuntime.jsx(
+            StaticTag,
+            {
+              label: opt.label,
+              disabled: isDisabled
+            },
+            opt.value
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            RemovableTag,
+            {
+              label: opt.label,
+              disabled: isDisabled
+            },
+            opt.value
+          )
+        )
+      }
+    );
+    const renderTriggerContent = () => {
+      const hasExternalLabel2 = Boolean(label);
+      if (isStatic) {
+        if (isFilled) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start flex-1 min-w-0 min-h-[1px] relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MeasurementLayer, {}),
+            " ",
+            !hasExternalLabel2 && /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "flex gap-[4px] items-center shrink-0 overflow-hidden",
+                style: { maxWidth: "100%" },
+                children: visibleTags.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  StaticTag,
+                  {
+                    label: opt.label,
+                    disabled: isDisabled,
+                    maxWidth: i === visibleTags.length - 1 ? lastTagMaxWidth : void 0
+                  },
+                  opt.value
+                ))
+              }
+            )
+          ] });
+        }
+        if (!isFilled) {
+          return /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {});
+        }
+        return null;
+      }
+      if (isFilled) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start flex-1 min-w-0 min-h-[1px] relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MeasurementLayer, {}),
+          !hasExternalLabel2 && /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex gap-[4px] items-center overflow-hidden",
+              style: { maxWidth: "100%" },
+              children: [
+                visibleTags.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  RemovableTag,
+                  {
+                    label: opt.label,
+                    onRemove: () => handleRemoveTag(opt.value),
+                    maxWidth: i === visibleTags.length - 1 ? lastTagMaxWidth : void 0
+                  },
+                  opt.value
+                )),
+                open && /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    onKeyDown: handleInputKeyDown,
+                    className: "flex-1 min-w-[40px] outline-none border-none bg-transparent text-[14px] leading-[20px]",
+                    style: {
+                      color: "var(--foreground)",
+                      caretColor: "var(--caret-color)"
+                    },
+                    onClick: (e) => e.stopPropagation()
+                  }
+                )
+              ]
+            }
+          )
+        ] });
+      }
+      if (open) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            onKeyDown: handleInputKeyDown,
+            className: "flex-1 min-w-[40px] outline-none border-none bg-transparent text-[14px] leading-[20px]",
+            style: {
+              color: "var(--foreground)",
+              caretColor: "var(--caret-color)"
+            },
+            onClick: (e) => e.stopPropagation()
+          }
+        );
+      }
+      if (!isFilled) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {});
+      }
+      return null;
+    };
+    const hasExternalLabel = Boolean(label);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("flex flex-col gap-[4px] w-full max-w-[343px]", className),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic relative shrink-0 text-foreground text-[14px] whitespace-nowrap",
+              style: { fontWeight: 700 },
+              children: label
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onClick: handleTriggerClick,
+              className: cn(
+                "relative flex gap-[8px] items-center rounded-[8px]",
+                bg,
+                "px-[14px]",
+                hasExternalLabel ? "h-[40px]" : "py-[4px] min-h-[48px]",
+                !isDisabled && !isStatic && "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "absolute pointer-events-none border border-solid",
+                    style: {
+                      inset: borderInset,
+                      borderRadius: borderRad,
+                      borderColor
+                    }
+                  }
+                ),
+                renderTriggerContent(),
+                isFilled && overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: hasExternalLabel ? "self-center" : "self-end",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      OverflowBadge,
+                      {
+                        count: overflowCount,
+                        disabled: isDisabled
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+              ]
+            }
+          ),
+          open && !isStatic && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative bg-white rounded-[8px] overflow-clip p-[8px] z-20 flex flex-col items-start",
+              style: {
+                boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-full flex flex-col",
+                    filteredOptions.length > 10 && "overflow-y-auto"
+                  ),
+                  style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
+                  children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+                    const isSelected = currentValue.includes(opt.value);
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        onClick: (e) => {
+                          var _a;
+                          e.stopPropagation();
+                          handleToggleOption(opt.value);
+                          (_a = inputRef.current) == null ? void 0 : _a.focus();
+                        },
+                        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"
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
+                                isSelected ? "text-primary-action" : "text-foreground"
+                              ),
+                              children: opt.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
+                                "bg-transparent"
+                              ),
+                              children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { className: "text-primary-action" })
+                            }
+                          )
+                        ] }) })
+                      },
+                      opt.value
+                    );
+                  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+                }
+              )
+            }
+          ),
+          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
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DropdownMultiple.displayName = "DropdownMultiple";
+const Input = React.forwardRef(function Input2({
+  placeholder = "Text label",
+  required = false,
+  forceState,
+  errorMessage = "Error message",
+  value,
+  onChange,
+  rightIcon,
+  unit,
+  helperText,
+  showCount = false,
+  maxCount = 100,
+  className = "",
+  type = "text",
+  style: inputStyleProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  disabled: _disabledProp,
+  ...inputRest
+}, ref) {
+  const [focused, setFocused] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState("");
+  const controlled = value !== void 0;
+  const currentValue = controlled ? value : internalValue;
+  const isDisabled = forceState === "disabled";
+  const state = forceState ?? (focused ? "focus" : "default");
+  const isError = state === "error";
+  const isFocus = state === "focus";
+  const isFilled = currentValue.length > 0;
+  const bg = isDisabled ? "bg-disabled-bg" : "bg-white";
+  const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+  const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
+  const unitColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+  const borderInset = isFocus || isError ? "-1px" : "0px";
+  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 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);
+  };
+  const handleFocus = (e) => {
+    onFocusProp == null ? void 0 : onFocusProp(e);
+    setFocused(true);
+  };
+  const handleBlur = (e) => {
+    onBlurProp == null ? void 0 : onBlurProp(e);
+    setFocused(false);
+  };
+  const containerFlex = isFilled ? !hasRight ? "flex-col items-start justify-center" : rightIcon ? "flex items-center gap-[8px]" : "flex items-end gap-[8px]" : cn("flex items-center", hasRight && "gap-[8px]");
+  const inputCaretStyle = {
+    caretColor: "var(--caret-color)"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-[4px] w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative rounded-[8px]",
+          padding,
+          bg,
+          containerFlex
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute pointer-events-none border border-solid",
+              style: {
+                inset: borderInset,
+                borderRadius: borderRad,
+                borderColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col min-w-0 min-h-[1px]",
+                hasRight ? "flex-1 justify-center" : "w-full justify-center"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "p",
+                  {
+                    className: cn(
+                      "shrink-0 w-full not-italic",
+                      isFilled ? "leading-[16px] text-[12px]" : "text-[16px] leading-[20px] pointer-events-none"
+                    ),
+                    style: { color: floatLabel },
+                    children: [
+                      placeholder,
+                      required && !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+                          },
+                          children: " *"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ...inputRest,
+                    type,
+                    value: currentValue,
+                    onChange: handleChange,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    disabled: isDisabled,
+                    "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]"
+                    ),
+                    style: isFilled ? { ...inputStyleProp, color: filledValue, ...inputCaretStyle } : {
+                      ...inputStyleProp,
+                      color: "transparent",
+                      caretColor: isFocus ? "var(--caret-color)" : "transparent",
+                      padding: hasRight ? "12px 14px" : "14px"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "shrink-0 flex items-center",
+                isFilled && "self-stretch",
+                !isFilled && "relative"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center size-[24px] overflow-hidden", children: rightIcon })
+            }
+          ),
+          unit && !rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "shrink-0 whitespace-nowrap text-[16px]",
+                !isFilled && "relative"
+              ),
+              style: {
+                color: unitColor,
+                lineHeight: "1.5",
+                fontVariationSettings: "'wdth' 100"
+              },
+              children: unit
+            }
+          )
+        ]
+      }
+    ),
+    showBelow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]", children: [
+      leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+      showCount && /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "shrink-0 text-right whitespace-nowrap",
+          style: { color: "var(--muted-foreground)" },
+          children: [
+            charCount,
+            "/",
+            maxCount
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+Input.displayName = "Input";
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "11",
+      viewBox: "0 0 16 11",
+      fill: "none",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M1 5.5L5.5 10L15 1",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+const OptionList = React.forwardRef(
+  function OptionList2({
+    options,
+    selectedValue,
+    selectedValues,
+    onSelect,
+    onToggle,
+    maxVisible = 10,
+    emptyText = "No results found",
+    className
+  }, ref) {
+    const isMulti = selectedValues !== void 0 || onToggle !== void 0;
+    const isScrollable = options.length > maxVisible;
+    const maxHeight = isScrollable ? maxVisible * 48 + 16 : void 0;
+    const isSelected = (val) => isMulti ? (selectedValues ?? []).includes(val) : val === selectedValue;
+    const handleClick = (opt) => {
+      if (opt.disabled) return;
+      if (isMulti) {
+        onToggle == null ? void 0 : onToggle(opt.value);
+      } else {
+        onSelect == null ? void 0 : onSelect(opt.value);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-start overflow-clip rounded-[8px] bg-white px-[8px] py-[8px]",
+          className
+        ),
+        style: {
+          boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1)",
+          ...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";
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: () => handleClick(opt),
+              className: cn(
+                "w-full shrink-0 rounded-[4px] transition-colors duration-100",
+                rowBg,
+                disabled ? "cursor-default" : "cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[8px] p-[14px]", children: [
+                opt.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "flex size-[20px] shrink-0 items-center justify-center overflow-clip",
+                    style: {
+                      color: disabled ? "var(--disabled)" : "var(--muted-foreground)"
+                    },
+                    children: opt.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-[14px] leading-[20px] text-ellipsis whitespace-nowrap not-italic",
+                    style: {
+                      color: disabled ? "var(--disabled)" : "var(--foreground)"
+                    },
+                    children: opt.label
+                  }
+                ),
+                selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-[20px] shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-primary-action" }) })
+              ] })
+            },
+            opt.value
+          );
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center p-[14px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-h-[1px] min-w-0 flex-1 text-[14px] leading-[20px] not-italic text-disabled", children: emptyText }) }) })
+      }
+    );
+  }
+);
+OptionList.displayName = "OptionList";
+const SearchInput = React.forwardRef(
+  function SearchInput2({
+    placeholder = "Placeholder",
+    value,
+    onChange,
+    size = "lg",
+    className,
+    onClear
+  }, ref) {
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
+    const inputRef = React.useRef(null);
+    const controlled = value !== void 0;
+    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 borderInset = focused ? "-1px" : "0px";
+    const borderRad = focused ? "9px" : "8px";
+    const borderColor = focused ? "var(--primary-action)" : "var(--border)";
+    const handleChange = (next) => {
+      if (!controlled) setInternalValue(next);
+      onChange == null ? void 0 : onChange(next);
+    };
+    const handleClear = () => {
+      var _a;
+      if (!controlled) setInternalValue("");
+      onChange == null ? void 0 : onChange("");
+      onClear == null ? void 0 : onClear();
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex cursor-text items-center gap-[8px] rounded-[8px] bg-white",
+          padding,
+          minHeight,
+          className
+        ),
+        onClick: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute border border-solid",
+              style: {
+                inset: borderInset,
+                borderRadius: borderRad,
+                borderColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            react.MagnifyingGlass,
+            {
+              size: iconSize,
+              color: "var(--muted-foreground)",
+              weight: "regular"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            !isFilled && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "pointer-events-none absolute inset-0 flex items-center text-[16px] leading-[20px] not-italic",
+                style: { color: "var(--muted-foreground)" },
+                children: placeholder
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                "aria-label": placeholder,
+                value: currentValue,
+                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",
+                style: {
+                  color: isFilled ? "var(--foreground)" : "transparent",
+                  caretColor: "var(--caret-color)"
+                }
+              }
+            )
+          ] }),
+          focused && isFilled && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear search",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleClear,
+              className: "m-0 flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.X,
+                {
+                  size: iconSize,
+                  color: "var(--muted-foreground)",
+                  weight: "regular"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+const sizeClasses = {
+  lg: {
+    pad: "px-[12px] py-[10px]",
+    text: "text-[14px]",
+    leading: "leading-[20px]",
+    font: "font-bold"
+  },
+  md: {
+    pad: "px-[10px] py-[8px]",
+    text: "text-[14px]",
+    leading: "leading-[20px]",
+    font: "font-bold"
+  },
+  sm: {
+    pad: "px-[8px] py-[6px]",
+    text: "text-[12px]",
+    leading: "leading-[16px]",
+    font: "font-semibold"
+  }
+};
+const Tab = React.forwardRef(function Tab2({
+  title = "Tab",
+  size = "md",
+  active = false,
+  disabled = false,
+  onClick,
+  className
+}, ref) {
+  const s = sizeClasses[size];
+  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";
+  const hoverBg = !disabled && !active ? "hover:bg-hover-bg" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tab",
+      "aria-selected": active,
+      "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",
+        s.pad,
+        cursor,
+        hoverBg,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0 border-b-[1.5px] border-solid",
+              borderColor
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "relative overflow-hidden text-ellipsis whitespace-nowrap text-center",
+              s.text,
+              s.leading,
+              s.font,
+              textColor
+            ),
+            children: title
+          }
+        )
+      ]
+    }
+  );
+});
+Tab.displayName = "Tab";
+const TabGroup = React.forwardRef(
+  function TabGroup2({ items, activeId, size = "md", onChange, className }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tablist", className: cn("flex", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      Tab,
+      {
+        title: item.title,
+        size,
+        active: item.id === activeId,
+        disabled: item.disabled,
+        onClick: () => onChange == null ? void 0 : onChange(item.id)
+      },
+      item.id
+    )) });
+  }
+);
+TabGroup.displayName = "TabGroup";
+const TextArea = React.forwardRef(
+  function TextArea2({
+    placeholder = "Text label",
+    required = false,
+    forceState,
+    errorMessage = "Error message",
+    value,
+    onChange,
+    helperText,
+    showCount = false,
+    maxCount = 100,
+    rows = 4,
+    className,
+    ...textareaProps
+  }, ref) {
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
+    const controlled = value !== void 0;
+    const currentValue = controlled ? value : internalValue;
+    const isDisabled = forceState === "disabled";
+    const state = forceState ?? (focused ? "focus" : "default");
+    const isError = state === "error";
+    const isFocus = state === "focus";
+    const isFilled = currentValue.length > 0;
+    const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const borderInset = isFocus || isError ? "-1px" : "0px";
+    const borderRad = isFocus || isError ? "9px" : "8px";
+    const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+    const charCount = currentValue.length;
+    const showBelow = isError || Boolean(helperText) || showCount;
+    const leftText = isError ? errorMessage : helperText ?? "";
+    const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+    const countColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+      if (showCount && newValue.length > maxCount) {
+        newValue = newValue.slice(0, maxCount);
+      }
+      if (!controlled) setInternalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-[4px]", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "relative h-[116px] rounded-[8px]",
+            isDisabled ? "bg-disabled-bg" : "bg-white"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute border border-solid",
+                style: { inset: borderInset, borderRadius: borderRad, borderColor }
+              }
+            ),
+            isFilled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-start p-[14px] pb-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "w-full shrink-0 text-[12px] leading-[16px] not-italic",
+                  style: { color: floatLabel },
+                  children: placeholder
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ...textareaProps,
+                  value: currentValue,
+                  onChange: handleChange,
+                  onFocus: (e) => {
+                    var _a;
+                    (_a = textareaProps.onFocus) == null ? void 0 : _a.call(textareaProps, e);
+                    setFocused(true);
+                  },
+                  onBlur: (e) => {
+                    var _a;
+                    (_a = textareaProps.onBlur) == null ? void 0 : _a.call(textareaProps, e);
+                    setFocused(false);
+                  },
+                  disabled: isDisabled,
+                  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"
+                  ),
+                  style: {
+                    ...textareaProps.style,
+                    color: filledValue,
+                    caretColor: "var(--caret-color)"
+                  }
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full items-start p-[14px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  className: "pointer-events-none relative h-full min-h-[1px] min-w-0 flex-1 text-[16px] leading-[20px] not-italic",
+                  style: { color: floatLabel },
+                  children: [
+                    placeholder,
+                    required && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+                        },
+                        children: [
+                          " ",
+                          "*"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ...textareaProps,
+                  value: currentValue,
+                  onChange: handleChange,
+                  onFocus: (e) => {
+                    var _a;
+                    (_a = textareaProps.onFocus) == null ? void 0 : _a.call(textareaProps, e);
+                    setFocused(true);
+                  },
+                  onBlur: (e) => {
+                    var _a;
+                    (_a = textareaProps.onBlur) == null ? void 0 : _a.call(textareaProps, e);
+                    setFocused(false);
+                  },
+                  rows,
+                  className: cn(
+                    "absolute inset-0 h-full w-full cursor-text resize-none border-none bg-transparent text-[16px] outline-none"
+                  ),
+                  style: {
+                    ...textareaProps.style,
+                    color: "transparent",
+                    caretColor: isFocus ? "var(--caret-color)" : "transparent",
+                    padding: "14px"
+                  },
+                  "aria-label": placeholder
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      showBelow && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-start gap-[8px] px-[4px] text-[12px] leading-[16px]",
+          children: [
+            leftText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", style: { color: leftColor }, children: leftText }) : showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+            showCount && /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "shrink-0 whitespace-nowrap text-right",
+                style: { color: countColor },
+                children: [
+                  charCount,
+                  "/",
+                  maxCount
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+const ITEM_H = 40;
+const DRUM_H = 248;
+const SPACER = (DRUM_H - ITEM_H) / 2;
+function generateHourlySlots() {
+  return Array.from({ length: 24 }, (_, i) => ({
+    start: { hour: i, minute: 0 },
+    end: { hour: (i + 1) % 24, minute: 0 },
+    label: `${pad2(i)}:00 - ${pad2((i + 1) % 24)}:00`
+  }));
+}
+function slotMatches(slot, start, end) {
+  return slot.start.hour === start.hour && slot.start.minute === start.minute && slot.end.hour === end.hour && slot.end.minute === end.minute;
+}
+function pad2(n) {
+  return n.toString().padStart(2, "0");
+}
+function formatTime(v) {
+  return `${pad2(v.hour)}:${pad2(v.minute)}`;
+}
+function ScrollColumn({
+  items,
+  value,
+  onChange
+}) {
+  const containerRef = React.useRef(null);
+  const debounceRef = React.useRef(void 0);
+  const [localValue, setLocalValue] = React.useState(value);
+  const isUserScrolling = React.useRef(false);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      el.scrollTop = items.indexOf(value) * ITEM_H;
+      setLocalValue(value);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (isUserScrolling.current) return;
+    const el = containerRef.current;
+    if (el) {
+      const idx = items.indexOf(value);
+      if (idx >= 0) {
+        el.scrollTo({ top: idx * ITEM_H, behavior: "smooth" });
+        setLocalValue(value);
+      }
+    }
+  }, [value, items]);
+  const handleScroll = React.useCallback(() => {
+    isUserScrolling.current = true;
+    const el = containerRef.current;
+    if (!el) return;
+    const rawIdx = el.scrollTop / ITEM_H;
+    const idx = Math.max(
+      0,
+      Math.min(Math.round(rawIdx), items.length - 1)
+    );
+    setLocalValue(items[idx]);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      isUserScrolling.current = false;
+      const finalIdx = Math.max(
+        0,
+        Math.min(
+          Math.round(el.scrollTop / ITEM_H),
+          items.length - 1
+        )
+      );
+      const finalValue = items[finalIdx];
+      el.scrollTo({
+        top: finalIdx * ITEM_H,
+        behavior: "smooth"
+      });
+      onChange(finalValue);
+      setLocalValue(finalValue);
+    }, 120);
+  }, [items, onChange]);
+  const handleItemClick = React.useCallback(
+    (item) => {
+      var _a;
+      const idx = items.indexOf(item);
+      setLocalValue(item);
+      onChange(item);
+      (_a = containerRef.current) == null ? void 0 : _a.scrollTo({
+        top: idx * ITEM_H,
+        behavior: "smooth"
+      });
+    },
+    [items, onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative [&::-webkit-scrollbar]:hidden",
+      style: {
+        width: 39,
+        height: DRUM_H,
+        overflowY: "scroll",
+        scrollSnapType: "y mandatory",
+        scrollbarWidth: "none"
+      },
+      onScroll: handleScroll,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: SPACER, flexShrink: 0 } }),
+        items.map((item) => {
+          const isSel = item === localValue;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                height: ITEM_H,
+                scrollSnapAlign: "center"
+              },
+              className: "flex items-center justify-center cursor-pointer select-none",
+              onClick: () => handleItemClick(item),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: isSel ? 32 : 14,
+                    lineHeight: 1,
+                    color: isSel ? "var(--foreground)" : "var(--disabled)",
+                    transition: "font-size 0.1s, color 0.1s"
+                  },
+                  children: pad2(item)
+                }
+              )
+            },
+            item
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: SPACER, flexShrink: 0 } })
+      ]
+    }
+  );
+}
+const DEFAULT_SLOTS = generateHourlySlots();
+function RangeSlotPicker({
+  slots = DEFAULT_SLOTS,
+  startValue,
+  endValue,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "overflow-y-auto [&::-webkit-scrollbar]:hidden",
+      style: { maxHeight: 320, scrollbarWidth: "none", minWidth: 300 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "content-center grid grid-cols-2 gap-x-[20px] gap-y-[32px] items-center justify-between overflow-clip relative",
+          style: { padding: "24px 40px" },
+          children: slots.map((slot, idx) => {
+            const isSelected = slotMatches(
+              slot,
+              startValue,
+              endValue
+            );
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                onClick: () => onSelect(slot),
+                className: cn(
+                  "content-stretch flex h-[25px] items-center justify-center relative rounded-[4px] shrink-0 cursor-pointer select-none transition-colors duration-100",
+                  isSelected ? "bg-primary-action" : "hover:bg-primary-action-light"
+                ),
+                style: { padding: "2px 8px" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "leading-[22px] relative shrink-0 text-[14px] text-center whitespace-nowrap",
+                    style: {
+                      fontVariationSettings: "'wdth' 100",
+                      color: isSelected ? "#ffffff" : "var(--foreground)"
+                    },
+                    children: slot.label
+                  }
+                )
+              },
+              idx
+            );
+          })
+        }
+      )
+    }
+  );
+}
+function TimePickerContent({
+  mode,
+  singleValue,
+  onSingleChange,
+  startValue,
+  endValue,
+  onStartChange,
+  onEndChange
+}) {
+  if (mode === "range") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RangeSlotPicker,
+      {
+        startValue,
+        endValue,
+        onSelect: (slot) => {
+          onStartChange(slot.start);
+          onEndChange(slot.end);
+        }
+      }
+    );
+  }
+  const handleHour = (h) => onSingleChange({ ...singleValue, hour: h });
+  const handleMinute = (m) => onSingleChange({ ...singleValue, minute: m });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-0 right-0 rounded-[4px] bg-selected-light-bg pointer-events-none",
+        style: {
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: ITEM_H,
+          zIndex: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative flex gap-[8px] items-center justify-center",
+        style: { zIndex: 1 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollColumn,
+            {
+              items: HOURS,
+              value: singleValue.hour,
+              onChange: handleHour
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex items-center justify-center shrink-0",
+              style: { height: ITEM_H, width: 8 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 32,
+                    lineHeight: 1,
+                    color: "var(--foreground)"
+                  },
+                  children: ":"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollColumn,
+            {
+              items: MINUTES,
+              value: singleValue.minute,
+              onChange: handleMinute
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const TimeInput = React.forwardRef(
+  ({
+    mode = "single",
+    placeholder = "Text label",
+    required = false,
+    forceState,
+    errorMessage = "Error message",
+    helperText,
+    value,
+    onChange,
+    startTime,
+    endTime,
+    onStartChange,
+    onEndChange,
+    className
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const isMobile = useIsMobile();
+    const [internalSingle, setInternalSingle] = React.useState(void 0);
+    const [internalStart, setInternalStart] = React.useState({
+      hour: 0,
+      minute: 0
+    });
+    const [internalEnd, setInternalEnd] = React.useState({
+      hour: 0,
+      minute: 0
+    });
+    const [draftSingle, setDraftSingle] = React.useState({
+      hour: 0,
+      minute: 0
+    });
+    const [draftStart, setDraftStart] = React.useState({
+      hour: 0,
+      minute: 0
+    });
+    const [draftEnd, setDraftEnd] = React.useState({
+      hour: 0,
+      minute: 0
+    });
+    const isStatic = Boolean(forceState);
+    const isDisabled = forceState === "disabled";
+    const currentValue = value !== void 0 ? value : internalSingle;
+    const currentStart = startTime !== void 0 ? startTime : internalStart;
+    const currentEnd = endTime !== void 0 ? endTime : internalEnd;
+    const state = forceState ?? (open ? "focus" : "default");
+    const isError = state === "error";
+    const isFocus = state === "focus";
+    const isFilled = mode === "single" ? Boolean(currentValue) : true;
+    const bgClass = isDisabled ? "bg-disabled-bg" : "bg-white";
+    const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const minusColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+    const asteriskColor = isDisabled ? "var(--disabled)" : "var(--error-dark)";
+    const asteriskSmall = isDisabled ? "var(--disabled)" : "var(--error-dark)";
+    const borderInset = isFocus || isError ? "-1px" : "0px";
+    const borderRad = isFocus || isError ? "9px" : "8px";
+    const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+    const showBelow = isError || Boolean(helperText);
+    const leftText = isError ? errorMessage : helperText ?? "";
+    const leftColor = isError ? "var(--error-dark)" : "var(--muted-foreground)";
+    const commitSingle = React.useCallback(
+      (v) => {
+        if (value === void 0) setInternalSingle(v);
+        onChange == null ? void 0 : onChange(v);
+      },
+      [value, onChange]
+    );
+    const commitStart = React.useCallback(
+      (v) => {
+        if (startTime === void 0) setInternalStart(v);
+        onStartChange == null ? void 0 : onStartChange(v);
+      },
+      [startTime, onStartChange]
+    );
+    const commitEnd = React.useCallback(
+      (v) => {
+        if (endTime === void 0) setInternalEnd(v);
+        onEndChange == null ? void 0 : onEndChange(v);
+      },
+      [endTime, onEndChange]
+    );
+    const renderContent = () => {
+      if (isFilled && (mode === "range" || currentValue)) {
+        const floatLabel = required ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[2px] items-center shrink-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[16px] not-italic shrink-0 text-[12px] whitespace-nowrap",
+              style: { color: labelColor },
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[1.5] not-italic shrink-0 text-[9px] w-[7px]",
+              style: { color: asteriskSmall },
+              children: "*"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "leading-[16px] not-italic shrink-0 text-[12px] w-full",
+            style: { color: labelColor },
+            children: placeholder
+          }
+        );
+        const valueRow = mode === "single" && currentValue ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "leading-[20px] not-italic shrink-0 text-[16px] w-full",
+            style: { color: valueColor },
+            children: formatTime(currentValue)
+          }
+        ) : mode === "range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center shrink-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: valueColor },
+              children: formatTime(currentStart)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Minus,
+            {
+              size: 20,
+              color: minusColor,
+              weight: "bold"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: valueColor },
+              children: formatTime(currentEnd)
+            }
+          )
+        ] }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 flex-col items-center justify-center min-h-px min-w-px relative", children: [
+          floatLabel,
+          valueRow
+        ] });
+      }
+      if (required) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex flex-1 min-w-px min-h-px gap-[2px] items-center relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "leading-[20px] not-italic shrink-0 text-[16px] whitespace-nowrap",
+              style: { color: labelColor },
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "font-normal h-full leading-[1.5] not-italic shrink-0 text-[12px] w-[7px]",
+              style: { color: asteriskColor },
+              children: "*"
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "flex-1 min-w-0 min-h-px text-[16px] leading-[20px] not-italic overflow-hidden text-ellipsis whitespace-nowrap relative",
+          style: { color: labelColor },
+          children: placeholder
+        }
+      );
+    };
+    const isTriggerFilled = isFilled && (mode === "range" || currentValue);
+    const triggerPadding = isTriggerFilled ? "py-[6px]" : "py-[12px]";
+    const triggerBase = cn(
+      "relative flex gap-[8px] items-center rounded-[8px] px-[14px] w-full",
+      bgClass,
+      triggerPadding
+    );
+    const triggerInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute pointer-events-none border border-solid",
+          style: {
+            inset: borderInset,
+            borderRadius: borderRad,
+            borderColor
+          }
+        }
+      ),
+      renderContent(),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-row items-center shrink-0",
+            isTriggerFilled && "self-stretch"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            react.Clock,
+            {
+              size: isTriggerFilled ? 22 : 24,
+              color: iconColor,
+              weight: "regular"
+            }
+          )
+        }
+      )
+    ] });
+    const belowMsg = 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
+      }
+    ) });
+    if (isStatic) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex flex-col gap-[4px] w-full",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: triggerBase, children: triggerInner }),
+            belowMsg
+          ]
+        }
+      );
+    }
+    const handleOpenChange = (o) => {
+      if (!isDisabled) {
+        if (o) {
+          setDraftSingle(
+            currentValue ?? { hour: 0, minute: 0 }
+          );
+          setDraftStart(currentStart);
+          setDraftEnd(currentEnd);
+        }
+        setOpen(o);
+      }
+    };
+    const handleCancel = () => setOpen(false);
+    const handleConfirm = () => {
+      if (mode === "single") {
+        commitSingle(draftSingle);
+      } else {
+        commitStart(draftStart);
+        commitEnd(draftEnd);
+      }
+      setOpen(false);
+    };
+    const triggerButton = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        className: cn(
+          triggerBase,
+          "text-left cursor-pointer disabled:cursor-default"
+        ),
+        children: triggerInner
+      }
+    );
+    const pickerContent = /* @__PURE__ */ jsxRuntime.jsx(
+      TimePickerContent,
+      {
+        mode,
+        singleValue: draftSingle,
+        onSingleChange: setDraftSingle,
+        startValue: draftStart,
+        endValue: draftEnd,
+        onStartChange: setDraftStart,
+        onEndChange: setDraftEnd
+      }
+    );
+    const actionButtons = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[12px] items-center pt-[12px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "lg",
+          className: "flex-1",
+          onClick: handleCancel,
+          children: "ยกเลิก"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "lg",
+          className: "flex-1",
+          onClick: handleConfirm,
+          children: "ตกลง"
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-[4px] w-full",
+          className
+        ),
+        children: [
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: "เลือกเวลา" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+                pickerContent,
+                actionButtons
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            Popover__namespace.Root,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: triggerButton }),
+                /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Popover__namespace.Content,
+                  {
+                    align: "start",
+                    sideOffset: 4,
+                    className: "z-50 rounded-[8px] bg-white p-3 outline-none max-w-[340px]",
+                    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)",
+                      minWidth: mode === "single" ? 327 : void 0
+                    },
+                    onOpenAutoFocus: (e) => e.preventDefault(),
+                    children: [
+                      pickerContent,
+                      actionButtons
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          belowMsg
+        ]
+      }
+    );
+  }
+);
+TimeInput.displayName = "TimeInput";
+exports.Button = Button;
+exports.Card = Card;
+exports.DateInput = DateInput;
+exports.Dropdown = Dropdown;
+exports.DropdownMultiple = DropdownMultiple;
+exports.Input = Input;
+exports.OptionList = OptionList;
+exports.SearchInput = SearchInput;
+exports.Tab = Tab;
+exports.TabGroup = TabGroup;
+exports.TextArea = TextArea;
+exports.TimeInput = TimeInput;
+exports.cn = cn;
+//# sourceMappingURL=index.cjs.map