@sarunyu/system-one 3.0.2 → 4.0.0

package/dist/index.cjs

@@ -248,17 +248,78 @@ const Button = React.forwardRef(function Button2({
 });
 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 DurationBadge({
+  duration,
+  size
+}) {
+  const isUpcoming = duration === "upcoming";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute flex items-center gap-[4px] rounded-[4px] bg-black/60",
+        size === "lg" ? "bottom-[6px] right-[6px] h-[20px] px-[4px]" : "bottom-[4px] right-[4px] h-[16px] px-[2px]"
+      ),
+      children: [
+        isUpcoming && /* @__PURE__ */ jsxRuntime.jsx(react.BroadcastIcon, { size: 14, className: "text-white" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "whitespace-nowrap font-normal text-white",
+              size === "lg" ? "text-[14px] leading-[20px]" : "text-[12px] leading-[16px]"
+            ),
+            children: isUpcoming ? "Up Coming" : duration
+          }
+        )
+      ]
+    }
+  );
 }
-function LocationIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.MapPin, { size: 16, weight: "regular", color: "var(--subtle-text)" });
+function LockBadgeChip({ flush = false }) {
+  const corner = flush ? "rounded-none rounded-bl-[4px]" : "rounded-[4px]";
+  const borderRing = flush ? "border-0 border-b border-l border-solid border-border" : "border border-solid border-border";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex items-center gap-[4px] bg-hover-bg px-[6px] py-[4px]",
+        corner
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0",
+              borderRing,
+              corner
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Lock, { size: 16, weight: "regular", color: "var(--subtle-text)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] leading-[18px] text-subtle-text", children: "Lock" })
+      ]
+    }
+  );
 }
-function AudienceIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Users, { size: 16, weight: "regular", color: "var(--subtle-text)" });
+function LockBadge({
+  align = "left",
+  flush = false,
+  size = "desktop"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute z-10",
+        flush ? "top-0" : size === "mobile" ? "top-[6px]" : "top-[8px]",
+        align === "left" ? flush ? "left-0" : size === "mobile" ? "left-[6px]" : "left-[8px]" : flush ? "right-0" : size === "mobile" ? "right-[6px]" : "right-[8px]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(LockBadgeChip, { flush })
+    }
+  );
 }
 const tagConfig = {
   "not-registered": {
@@ -269,287 +330,775 @@ const tagConfig = {
   registered: {
     bg: "var(--success-bg)",
     text: "var(--success)",
-    label: "ลงทะเบียนแล้ว"
+    label: "ลงทะเบียนแล้ว",
+    Icon: react.CheckCircle
   },
   full: {
     bg: "var(--error-bg)",
     text: "var(--destructive)",
-    label: "เต็มแล้ว"
+    label: "เต็มแล้ว",
+    Icon: react.XCircle
   }
 };
 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 ตลาดหลักทรัพย์แห่งประเทศไทย",
+  variant = "event",
+  size = "desktop",
+  title,
+  locked = true,
+  image,
+  className,
+  // event
+  date,
+  time,
+  location,
   showLocation = true,
   showAudience = true,
   count = "200/200",
-  locked = true,
   tagStatus = "not-registered",
-  image,
-  className
+  // news
+  category,
+  bookmarked = false,
+  onBookmarkToggle,
+  // social
+  tags,
+  source,
+  // live
+  duration
 }, ref) {
-  const widthClass = variant === "desktop" ? "w-[308px]" : variant === "tablet" ? "w-[224px]" : "w-[163px]";
-  const padding = variant === "desktop" ? "p-4" : variant === "tablet" ? "p-3" : "p-2.5";
-  const titleGap = variant === "desktop" ? "gap-1.5" : "gap-1";
-  const bannerClass = variant === "desktop" ? "h-[173px]" : "aspect-video w-full";
-  const tag = tagConfig[tagStatus];
   const bannerSrc = image ?? imgBanner;
+  if (variant === "social") {
+    const isDesktop = size === "desktop";
+    const cardWidth = isDesktop ? "w-[587px]" : "w-[343px]";
+    const cardPadding = isDesktop ? "p-4" : "p-3";
+    const cardGap = isDesktop ? "gap-3" : "gap-2";
+    const contentGap = isDesktop ? "gap-6" : "gap-3";
+    const textGap = isDesktop ? "gap-[10px]" : "gap-[6px]";
+    const titleText = isDesktop ? "text-[16px] leading-[24px]" : "text-[12px] leading-[16px]";
+    const tagChip = isDesktop ? "rounded-[4px] px-[6px] py-[4px] text-[12px] leading-[16px]" : "rounded-[4px] px-[4px] py-[2px] text-[9px] leading-[14px]";
+    const resolvedTags = tags ?? [
+      {
+        label: "Analysis",
+        bg: "var(--tag-bg-blue, #F3F8FE)",
+        text: "var(--tag-text-blue, #095EC4)"
+      },
+      {
+        label: "Stock",
+        bg: "var(--tag-bg-cyan, #F3F8FE)",
+        text: "var(--tag-text-cyan, #095EC4)"
+      },
+      {
+        label: "My Asset",
+        bg: "var(--tag-bg-purple, #F3E8FF)",
+        text: "var(--tag-text-purple, #59168B)"
+      }
+    ];
+    const resolvedTitle = title ?? "การออกแบบที่ตอบโจทย์ผู้ใช้: สร้างประสบการณ์ที่น่าจดจำ asdasdasdas";
+    const resolvedSource = source ?? "Wealth Design Daily";
+    const resolvedDate = date ?? "9 ธันวาคม 2567";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex flex-col overflow-clip bg-card shadow-card",
+          isDesktop ? "rounded-[8px]" : "rounded-[6px]",
+          cardWidth,
+          cardPadding,
+          cardGap,
+          className
+        ),
+        children: [
+          locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, { align: "right", flush: true }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-row items-start", contentGap), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", textGap), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-[8px]", children: resolvedTags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex whitespace-nowrap font-normal",
+                    tagChip
+                  ),
+                  style: {
+                    backgroundColor: t.bg ?? "var(--disabled-bg)",
+                    color: t.text ?? "var(--foreground)"
+                  },
+                  children: t.label
+                },
+                t.label
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "line-clamp-2 font-semibold text-foreground",
+                    titleText
+                  ),
+                  children: resolvedTitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                alt: "social thumbnail",
+                className: "pointer-events-none absolute inset-0 size-full object-cover",
+                src: bannerSrc
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            isDesktop ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-[12px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-[12px] leading-[16px] text-subtle-text", children: resolvedSource }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 truncate text-[12px] leading-[16px] text-muted-foreground", children: resolvedDate })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] leading-[16px] text-subtle-text", children: resolvedSource }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] leading-[16px] text-muted-foreground", children: resolvedDate })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "aria-label": bookmarked ? "Remove bookmark" : "Add bookmark",
+                className: "flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-hover-bg cursor-pointer",
+                onClick: onBookmarkToggle,
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  react.BookmarkSimpleIcon,
+                  {
+                    size: 23.65,
+                    weight: bookmarked ? "fill" : "regular",
+                    color: bookmarked ? "var(--primary-action)" : "var(--subtle-text)"
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  if (variant === "live") {
+    const isDesktop = size === "desktop";
+    const cardWidth = isDesktop ? "w-[704px]" : "w-[343px]";
+    const imgWidth = isDesktop ? "w-[212px]" : "w-[149px]";
+    const imgHeight = isDesktop ? "h-[119px]" : "h-[84px]";
+    const padding2 = isDesktop ? "p-4" : "p-3";
+    const gap = isDesktop ? "gap-6" : "gap-3";
+    const cardRadius = isDesktop ? "rounded-[8px]" : "rounded-[6px]";
+    const thumbRadius = isDesktop ? "rounded-[6px]" : "rounded-[4px]";
+    const metaTextClass = isDesktop ? "flex min-w-0 items-center gap-[12px]" : "flex min-w-0 flex-col";
+    const resolvedTitle = title ?? "6 หุ้นเด่นทางเทคนิค OSP, BTS, BANPU, SECURE, AH, DCC [TECHNICAL VIEW 17/07/2567]";
+    const resolvedSource = source ?? "Wealth Design Daily";
+    const resolvedDate = date ?? "9 ธันวาคม 2567";
+    const resolvedDuration = duration ?? "1:26:36";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-clip bg-card shadow-card",
+          cardRadius,
+          cardWidth,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-row items-stretch", padding2, gap), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "min-w-0 line-clamp-2 font-semibold text-foreground",
+                  isDesktop ? "text-[16px] leading-[24px]" : "text-[12px] leading-[16px]"
+                ),
+                children: resolvedTitle
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: metaTextClass, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-xs leading-4 text-subtle-text", children: resolvedSource }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 truncate text-xs leading-4 text-muted-foreground", children: resolvedDate })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative shrink-0 overflow-clip",
+                thumbRadius,
+                imgWidth,
+                imgHeight
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    alt: "live thumbnail",
+                    className: "pointer-events-none absolute inset-0 size-full object-cover",
+                    src: bannerSrc
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "absolute h-[22px] left-[6px] top-[6px] flex items-center gap-[4px] rounded-[4px] px-[6px]",
+                    style: { backgroundColor: "#FB2C36" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[6px] shrink-0 rounded-full bg-white" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-[12px] font-semibold leading-[16px] text-white", children: "Live" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DurationBadge,
+                  {
+                    duration: resolvedDuration,
+                    size: isDesktop ? "lg" : "sm"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (variant === "news" && size === "desktop") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-[343px] min-h-[120px] flex-col items-start overflow-clip rounded-[8px] bg-card shadow-card",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[184px] w-full shrink-0 overflow-clip", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                alt: "news banner",
+                className: "pointer-events-none absolute inset-0 size-full object-cover",
+                src: bannerSrc
+              }
+            ),
+            locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NewsContent,
+            {
+              padding: "px-4 py-3",
+              category: category ?? "Category",
+              title: title ?? "Great design begins with understanding user needs and creating memorable",
+              date: date ?? "01 มกราคม 2025",
+              bookmarked,
+              onBookmarkToggle,
+              tone: "desktop"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (variant === "news" && size === "mobile") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex h-[114px] w-[343px] flex-row overflow-clip rounded-[8px] bg-card shadow-card",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[114px] w-[171px] shrink-0 overflow-clip", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                alt: "news banner",
+                className: "pointer-events-none absolute inset-0 size-full object-cover",
+                src: bannerSrc
+              }
+            ),
+            locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NewsContent,
+            {
+              padding: "p-3",
+              category: category ?? "Category",
+              title: title ?? "Great design begins with understanding user needs and creating memorable",
+              date: date ?? "01 มกราคม 2025",
+              bookmarked,
+              onBookmarkToggle,
+              tone: "mobile"
+            }
+          )
+        ]
+      }
+    );
+  }
+  const widthClass = size === "desktop" ? "w-[308px]" : size === "tablet" ? "w-[224px]" : "w-[163px]";
+  const padding = size === "desktop" ? "p-4" : size === "tablet" ? "p-3" : "p-2.5";
+  const bannerClass = size === "desktop" ? "h-[173px]" : "aspect-video w-full";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex min-h-[120px] flex-col items-start overflow-clip rounded-[8px] shadow-card",
+        widthClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("relative w-full shrink-0 overflow-clip", bannerClass),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  alt: variant === "news" ? "news banner" : "event banner",
+                  className: "pointer-events-none absolute inset-0 size-full object-cover",
+                  src: bannerSrc
+                }
+              ),
+              locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, { size })
+            ]
+          }
+        ),
+        variant === "news" ? /* @__PURE__ */ jsxRuntime.jsx(
+          NewsContent,
+          {
+            padding,
+            category: category ?? "Category",
+            title: title ?? "Great design begins with understanding user needs and creating memorable",
+            date: date ?? "01 มกราคม 2025",
+            bookmarked,
+            onBookmarkToggle,
+            tone: "default"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          EventContent,
+          {
+            size,
+            padding,
+            title: title ?? "Lorem ipsum dolor sit amet consectetur. Lectus viverraasdasd",
+            date: date ?? "23 มิ.ย. 2567",
+            time: time ?? "08.30 - 12.00",
+            location: location ?? "ณ หอประชุมศาสตราจารย์สังเวียน อินทรวิชัย ชั้น 7 ตลาดหลักทรัพย์แห่งประเทศไทย",
+            showLocation,
+            showAudience,
+            count,
+            tagStatus
+          }
+        )
+      ]
+    }
+  );
+});
+Card.displayName = "Card";
+function EventContent({
+  size,
+  padding,
+  title,
+  date,
+  time,
+  location,
+  showLocation,
+  showAudience,
+  count,
+  tagStatus
+}) {
+  const titleGap = size === "desktop" ? "gap-1.5" : "gap-1";
+  const tag = tagConfig[tagStatus];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full shrink-0 bg-card", padding), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 w-full overflow-hidden text-ellipsis text-sm font-bold leading-5 text-foreground", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.CalendarBlank,
+            {
+              size: 16,
+              weight: "regular",
+              color: "var(--accent-orange)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-xs font-semibold leading-4 text-accent-orange", children: date })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px shrink-0 bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text", children: time })
+      ] }),
+      showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MapPin, { size: 16, weight: "regular", color: "var(--subtle-text)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text", children: location })
+      ] }),
+      showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Users, { size: 16, weight: "regular", color: "var(--subtle-text)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-subtle-text", children: "ผู้เข้าร่วม" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-primary-action", children: count })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center justify-center gap-1 overflow-clip rounded-[4px] px-[8px] py-[4px]",
+        style: { backgroundColor: tag.bg },
+        children: [
+          tag.Icon && /* @__PURE__ */ jsxRuntime.jsx(tag.Icon, { size: 14, weight: "fill", color: tag.text }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "whitespace-nowrap text-[12px] leading-[16px]",
+              style: { color: tag.text },
+              children: tag.label
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+function NewsContent({
+  padding,
+  category,
+  title,
+  date,
+  bookmarked,
+  onBookmarkToggle,
+  tone = "default"
+}) {
+  const isDesktopTone = tone === "desktop";
+  const isMobileTone = tone === "mobile";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-1 shrink-0 flex-col bg-card",
+        isDesktopTone || isMobileTone ? "gap-[10px]" : "gap-2",
+        padding
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-primary-action",
+                isMobileTone ? "text-[9px] font-semibold leading-[14px]" : isDesktopTone ? "text-xs font-semibold leading-4" : "text-xs leading-4"
+              ),
+              children: category
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "line-clamp-2 text-foreground",
+                isMobileTone ? "text-xs font-semibold leading-4" : isDesktopTone ? "text-sm font-bold leading-5" : "text-sm font-semibold leading-5"
+              ),
+              children: title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs leading-4",
+                isDesktopTone ? "text-muted-foreground" : "text-subtle-text"
+              ),
+              children: date
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              "aria-label": bookmarked ? "Remove bookmark" : "Add bookmark",
+              className: cn(
+                "flex shrink-0 items-center justify-center rounded transition-colors hover:bg-hover-bg cursor-pointer",
+                isMobileTone ? "size-5" : isDesktopTone ? "size-6" : "p-0.5"
+              ),
+              onClick: onBookmarkToggle,
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.BookmarkSimpleIcon,
+                {
+                  size: isMobileTone ? 20 : 23.65,
+                  weight: bookmarked ? "fill" : "regular",
+                  color: bookmarked ? "var(--primary-action)" : "var(--subtle-text)"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CheckboxVisual({
+  state,
+  disabled
+}) {
+  if (state === "default") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "block w-4 h-4 rounded-[2px] border-[1.5px]",
+          disabled ? "bg-disabled-bg border-[var(--fill-black-100)]" : "bg-background border-[var(--fill-black-200)]"
+        )
+      }
+    );
+  }
+  const containerFill = disabled ? "var(--fill-gray-300)" : "var(--fill-p1-600)";
+  const iconFill = disabled ? "var(--fill-gray-400)" : "var(--fill-white-1000)";
+  if (state === "checked") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V8V1.77778C16 0.8 15.2 0 14.2222 0ZM6.85333 11.8133C6.50667 12.16 5.94667 12.16 5.6 11.8133L2.40889 8.62222C2.06222 8.27556 2.06222 7.71556 2.40889 7.36889C2.75556 7.02222 3.31556 7.02222 3.66222 7.36889L6.22222 9.92889L12.3378 3.81333C12.6844 3.46667 13.2444 3.46667 13.5911 3.81333C13.9378 4.16 13.9378 4.72 13.5911 5.06667L6.85333 11.8133Z",
+              fill: containerFill
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M5.6 11.8133C5.94667 12.16 6.50667 12.16 6.85333 11.8133L13.5911 5.06667C13.9378 4.72 13.9378 4.16 13.5911 3.81333C13.2444 3.46667 12.6844 3.46667 12.3378 3.81333L6.22222 9.92889L3.66222 7.36889C3.31556 7.02222 2.75556 7.02222 2.40889 7.36889C2.06222 7.71556 2.06222 8.27556 2.40889 8.62222L5.6 11.8133Z",
+              fill: iconFill
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2 0 14.2222 0ZM11.5556 8.88889H4.44444C3.95556 8.88889 3.55556 8.48889 3.55556 8C3.55556 7.51111 3.95556 7.11111 4.44444 7.11111H11.5556C12.0444 7.11111 12.4444 7.51111 12.4444 8C12.4444 8.48889 12.0444 8.88889 11.5556 8.88889Z",
+            fill: containerFill
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4.44444 8.88889H11.5556C12.0444 8.88889 12.4444 8.48889 12.4444 8C12.4444 7.51111 12.0444 7.11111 11.5556 7.11111H4.44444C3.95556 7.11111 3.55556 7.51111 3.55556 8C3.55556 8.48889 3.95556 8.88889 4.44444 8.88889Z",
+            fill: iconFill
+          }
+        )
+      ]
+    }
+  );
+}
+const Checkbox = React.forwardRef(function Checkbox2({
+  checked = false,
+  disabled = false,
+  label,
+  description,
+  variant = "text",
+  onChange,
+  name,
+  value,
+  id,
+  ariaLabel,
+  className
+}, ref) {
+  const localRef = React.useRef(null);
+  const state = checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "default";
+  React.useEffect(() => {
+    if (localRef.current) {
+      localRef.current.indeterminate = checked === "indeterminate";
+    }
+  }, [checked]);
+  const setRefs = React.useCallback(
+    (node) => {
+      localRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e.target.checked);
+  };
+  const hasText = label !== void 0 || description !== void 0;
+  const hasActiveBorder = state === "checked" || state === "indeterminate";
+  const isButton = variant === "button";
+  const buttonBorder = disabled ? "border-[var(--fill-black-100)]" : hasActiveBorder ? "border-primary-action" : "border-[var(--fill-black-200)]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    "label",
     {
-      ref,
       className: cn(
-        "flex min-h-[120px] flex-col items-start overflow-clip rounded-[8px]",
-        "shadow-card",
-        widthClass,
+        "inline-flex gap-1 select-none",
+        description ? "items-start" : "items-center",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        isButton && cn("bg-background rounded-lg border py-2.5 pl-3 pr-4", buttonBorder),
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full shrink-0 overflow-clip", bannerClass), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            "input",
             {
-              alt: "event banner",
-              className: "pointer-events-none absolute inset-0 size-full object-cover",
-              src: bannerSrc
+              ref: setRefs,
+              id,
+              name,
+              value,
+              type: "checkbox",
+              checked: checked === true,
+              disabled,
+              onChange: handleChange,
+              "aria-label": ariaLabel,
+              "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+              className: "absolute inset-0 w-full h-full opacity-0 m-0 cursor-[inherit] disabled:cursor-[inherit]"
             }
           ),
-          locked && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(CheckboxVisual, { state, disabled })
+        ] }),
+        hasText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+          label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
               className: cn(
-                "absolute left-[8px] top-[8px] flex items-center gap-[4px] rounded-[4px] bg-hover-bg px-[6px] py-[4px]"
+                "text-base leading-6",
+                disabled ? "text-disabled" : "text-foreground"
               ),
-              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" })
-              ]
+              children: label
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full shrink-0 bg-card", padding), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col items-start", titleGap), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "line-clamp-2 w-full overflow-hidden text-ellipsis text-sm leading-5 text-foreground"
-                ),
-                children: title
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] shrink-0 items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-nowrap text-xs leading-4 text-accent-orange", children: date })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] w-px shrink-0 bg-border" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
-                  ),
-                  children: time
-                }
-              )
-            ] }),
-            showLocation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-subtle-text"
-                  ),
-                  children: location
-                }
-              )
-            ] }),
-            showAudience && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[22px] w-full items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AudienceIcon, {}),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-subtle-text", children: "ผู้เข้าร่วม" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 whitespace-nowrap text-xs leading-4 text-primary-action", children: count })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          ),
+          description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              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 })
+              className: cn(
+                "text-xs leading-4",
+                disabled ? "text-disabled" : "text-subtle-text"
+              ),
+              children: description
             }
-          ) })
-        ] }) })
+          )
+        ] })
       ]
     }
   );
 });
-Card.displayName = "Card";
-const pageWidthClass = {
-  sm: "max-w-[640px]",
-  md: "max-w-[960px]",
-  lg: "max-w-[1200px]",
-  xl: "max-w-[1440px]",
-  full: "max-w-none"
-};
-const Page = React.forwardRef(function Page2({ width = "lg", className, children, ...rest }, ref) {
+Checkbox.displayName = "Checkbox";
+function RadioVisual({ checked, disabled }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "main",
+    "span",
     {
-      ref,
+      "aria-hidden": "true",
       className: cn(
-        "mx-auto w-full px-6 md:px-8 py-10 flex flex-col gap-12",
-        pageWidthClass[width],
-        className
+        "w-[18px] h-[18px] rounded-full border-[1.5px] flex items-center justify-center",
+        disabled ? "bg-disabled-bg border-[var(--fill-black-100)]" : checked ? "bg-background border-primary-action" : "bg-background border-[var(--fill-black-200)]"
       ),
-      ...rest,
-      children
-    }
-  );
-});
-const PageHeader = React.forwardRef(
-  function PageHeader2({ title, description, actions, eyebrow, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "header",
-      {
-        ref,
-        className: cn(
-          "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-          className
-        ),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [
-            eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: eyebrow }),
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-[720px]", children: description })
-          ] }),
-          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: actions })
-        ]
-      }
-    );
-  }
-);
-const Section = React.forwardRef(function Section2({ title, description, actions, className, children, ...rest }, ref) {
-  const hasHeader = Boolean(title || description || actions);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      ref,
-      className: cn("flex flex-col gap-6", className),
-      ...rest,
-      children: [
-        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-[720px]", children: description })
-          ] }),
-          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: actions })
-        ] }),
-        children
-      ]
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "w-2 h-2 rounded-full",
+            disabled ? "bg-[var(--fill-gray-400)]" : "bg-primary-action"
+          )
+        }
+      )
     }
   );
-});
-const Toolbar = React.forwardRef(
-  function Toolbar2({ end, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-wrap items-center gap-3",
-          className
-        ),
-        ...rest,
-        children: [
-          children,
-          end && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-3", children: end })
-        ]
-      }
-    );
-  }
-);
-const cardGridColsClass = {
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-};
-const CardGrid = React.forwardRef(
-  function CardGrid2({ cols = 3, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("grid gap-6", cardGridColsClass[cols], className),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-const stackGapClass = {
-  1: "gap-1",
-  2: "gap-2",
-  3: "gap-3",
-  4: "gap-4",
-  6: "gap-6",
-  8: "gap-8",
-  10: "gap-10",
-  12: "gap-12"
-};
-const stackAlignClass = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch"
-};
-const stackJustifyClass = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around"
-};
-const Stack = React.forwardRef(function Stack2({
-  direction = "col",
-  gap = 4,
-  align,
-  justify,
-  wrap,
-  className,
-  children,
-  ...rest
+}
+const Radio = React.forwardRef(function Radio2({
+  checked = false,
+  disabled = false,
+  label,
+  description,
+  variant = "text",
+  onChange,
+  name,
+  value,
+  id,
+  ariaLabel,
+  className
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  const hasText = label !== void 0 || description !== void 0;
+  const isButton = variant === "button";
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e.target.checked);
+  };
+  const buttonBorder = disabled ? "border-[var(--fill-black-100)]" : checked ? "border-primary-action" : "border-[var(--fill-black-200)]";
+  const buttonBackground = disabled && !checked ? "bg-disabled-bg" : "bg-background";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
     {
-      ref,
       className: cn(
-        "flex",
-        direction === "col" ? "flex-col" : "flex-row",
-        stackGapClass[gap],
-        align && stackAlignClass[align],
-        justify && stackJustifyClass[justify],
-        wrap && "flex-wrap",
+        "inline-flex gap-1 select-none",
+        description ? "items-start" : "items-center",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        isButton && cn(buttonBackground, "rounded-lg border py-2.5 pl-3 pr-4", buttonBorder),
         className
       ),
-      ...rest,
-      children
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center w-6 h-6 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              id,
+              name,
+              value,
+              type: "radio",
+              checked,
+              disabled,
+              onChange: handleChange,
+              "aria-label": ariaLabel,
+              className: "absolute inset-0 w-full h-full opacity-0 m-0 cursor-[inherit] disabled:cursor-[inherit]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(RadioVisual, { checked, disabled })
+        ] }),
+        hasText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+          label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                disabled ? "text-disabled" : "text-foreground"
+              ),
+              children: label
+            }
+          ),
+          description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs leading-4",
+                disabled ? "text-disabled" : "text-subtle-text"
+              ),
+              children: description
+            }
+          )
+        ] })
+      ]
     }
   );
 });
+Radio.displayName = "Radio";
 const sizeStyles$1 = {
   large: {
     container: "h-9 px-3 gap-1",
@@ -2581,18 +3130,18 @@ const Input = React.forwardRef(function Input2({
   const isFocus = state === "focus";
   const isFilled = currentValue.length > 0;
   const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
-  const floatLabel = isDisabled ? "var(--disabled, #99a1af)" : "var(--muted-foreground, #6a7282)";
-  const filledValue = isDisabled ? "var(--disabled, #99a1af)" : "var(--foreground, #101828)";
-  const unitColor = isDisabled ? "var(--disabled, #99a1af)" : "var(--muted-foreground, #6a7282)";
+  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, rgba(0, 0, 0, 0.05))" : isError ? "var(--destructive, #e7000b)" : isFocus ? "var(--primary-action, #0a6ee7)" : "var(--border, rgba(0, 0, 0, 0.1))";
+  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-[14px]" : "p-[14px]";
   const charCount = currentValue.length;
   const showBelow = isError || Boolean(helperText) || showCount;
   const leftText = isError ? errorMessage : helperText ?? "";
-  const leftColor = isError ? "var(--destructive, #e7000b)" : "var(--muted-foreground, #6a7282)";
+  const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
   const handleChange = (e) => {
     if (isDisabled) return;
     let next = e.target.value;
@@ -2612,7 +3161,7 @@ const Input = React.forwardRef(function Input2({
   };
   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, #1447e6)"
+    caretColor: "var(--caret-color)"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1 w-full", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2660,7 +3209,7 @@ const Input = React.forwardRef(function Input2({
                         {
                           className: "text-xs leading-4",
                           style: {
-                            color: isDisabled ? "var(--disabled, #99a1af)" : "var(--error-dark, #c10007)"
+                            color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
                           },
                           children: " *"
                         }
@@ -2690,7 +3239,7 @@ const Input = React.forwardRef(function Input2({
                     style: isFilled ? { ...inputStyleProp, color: filledValue, ...inputCaretStyle } : {
                       ...inputStyleProp,
                       color: "transparent",
-                      caretColor: isFocus ? "var(--caret-color, #1447e6)" : "transparent",
+                      caretColor: isFocus ? "var(--caret-color)" : "transparent",
                       padding: hasRight ? "12px 14px" : "14px"
                     }
                   }
@@ -2733,7 +3282,7 @@ const Input = React.forwardRef(function Input2({
         "span",
         {
           className: "shrink-0 text-right whitespace-nowrap",
-          style: { color: "var(--muted-foreground, #6a7282)" },
+          style: { color: "var(--muted-foreground)" },
           children: [
             charCount,
             "/",
@@ -3230,6 +3779,308 @@ function StatusTag({ type = "stop", text, className }) {
     }
   );
 }
+const TableScrollShadowContext = React.createContext({
+  hasLeftOverflow: false,
+  hasRightOverflow: false
+});
+const TableRowStateContext = React.createContext({
+  selected: false,
+  hovered: false
+});
+function getSurface(selected, hovered) {
+  if (selected) return "bg-[var(--bg-brand-primary-light,#f3f8fe)]";
+  if (hovered) return "bg-[var(--bg-default-secondary,#f9fafb)]";
+  return "bg-[var(--bg-default-primary-medium,white)]";
+}
+function getTextClass(textStyle) {
+  return textStyle === "bold" || textStyle === "bold-description" ? "font-bold text-foreground" : "font-normal text-foreground";
+}
+function resolveStickyShadowDirection(fixed, fixedShadow) {
+  if (fixedShadow) return fixedShadow;
+  if (fixed === "left") return "right";
+  if (fixed === "right") return "left";
+  return void 0;
+}
+function StickyShadowEdge({ direction }) {
+  if (direction === "left") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-[-10px] w-2.5",
+        style: {
+          background: "linear-gradient(90deg, rgba(16,24,40,0.00) 0%, rgba(16,24,40,0.03) 55%, rgba(16,24,40,0.08) 100%)"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-y-0 right-[-10px] w-2.5",
+      style: {
+        background: "linear-gradient(90deg, rgba(16,24,40,0.08) 0%, rgba(16,24,40,0.03) 45%, rgba(16,24,40,0.00) 100%)"
+      }
+    }
+  );
+}
+const Table = React.forwardRef(function Table2({ className, responsive = true, ...props }, ref) {
+  const scrollRef = React.useRef(null);
+  const [shadowState, setShadowState] = React.useState({
+    hasLeftOverflow: false,
+    hasRightOverflow: false
+  });
+  React.useEffect(() => {
+    if (!responsive) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const updateShadowState = () => {
+      const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+      setShadowState({
+        hasLeftOverflow: el.scrollLeft > 0,
+        hasRightOverflow: el.scrollLeft < maxScrollLeft - 1
+      });
+    };
+    updateShadowState();
+    el.addEventListener("scroll", updateShadowState, { passive: true });
+    window.addEventListener("resize", updateShadowState);
+    const observer = new ResizeObserver(updateShadowState);
+    observer.observe(el);
+    if (el.firstElementChild instanceof HTMLElement) {
+      observer.observe(el.firstElementChild);
+    }
+    return () => {
+      el.removeEventListener("scroll", updateShadowState);
+      window.removeEventListener("resize", updateShadowState);
+      observer.disconnect();
+    };
+  }, [responsive]);
+  const contextValue = React.useMemo(() => shadowState, [shadowState]);
+  const table = /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full border-collapse border-spacing-0 text-sm", className),
+      ...props
+    }
+  );
+  if (!responsive) return table;
+  return /* @__PURE__ */ jsxRuntime.jsx(TableScrollShadowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "w-full overflow-x-auto", children: table }) });
+});
+const TableRow = React.forwardRef(
+  function TableRow2({ className, selected = false, hoverable = false, onMouseEnter, onMouseLeave, ...props }, ref) {
+    const [hovered, setHovered] = React.useState(false);
+    const handleMouseEnter = (e) => {
+      if (hoverable) setHovered(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e) => {
+      if (hoverable) setHovered(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(e);
+    };
+    const rowState = React.useMemo(
+      () => ({ selected, hovered: hoverable ? hovered : false }),
+      [hoverable, hovered, selected]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRowStateContext.Provider, { value: rowState, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ref,
+        className: cn("align-middle", className),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props
+      }
+    ) });
+  }
+);
+const TableHeaderCell = React.forwardRef(
+  function TableHeaderCell2({
+    className,
+    type = "text",
+    state = "default",
+    sortable = true,
+    icon,
+    sortDirection = "none",
+    onSortChange,
+    checkState = false,
+    onCheckChange,
+    fixed,
+    fixedOffset = 0,
+    fixedShadow,
+    children = "Title text",
+    style: styleProp,
+    ...props
+  }, ref) {
+    const { hasLeftOverflow, hasRightOverflow } = React.useContext(TableScrollShadowContext);
+    const stateClass = state === "disabled" ? "bg-[var(--bg-default-tertiary,#f3f4f6)] text-[var(--text-default-tertiary,#6a7282)]" : state === "hover" ? "bg-[var(--bg-default-secondary,#f9fafb)] text-[var(--text-default-tertiary,#6a7282)]" : "bg-[var(--bg-default-primary,white)] text-[var(--text-default-tertiary,#6a7282)]";
+    const interactiveHoverClass = state === "default" ? "hover:bg-[var(--bg-default-secondary,#f9fafb)]" : "";
+    const sortIcon = sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowUp, { size: 16, weight: "fill", className: "shrink-0" }) : sortDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(react.ArrowDown, { size: 16, weight: "fill", className: "shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsDownUp, { size: 16, weight: "fill", className: "shrink-0" });
+    const handleSortClick = () => {
+      if (!sortable || !onSortChange) return;
+      const nextDirection = sortDirection === "none" ? "asc" : sortDirection === "asc" ? "desc" : "none";
+      onSortChange(nextDirection);
+    };
+    const content = type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 font-normal", children }),
+      sortable && sortIcon
+    ] }) : type === "icon" ? icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 20, weight: "regular", className: "shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        checked: checkState,
+        disabled: state === "disabled",
+        onChange: onCheckChange,
+        ariaLabel: "Select all rows"
+      }
+    );
+    const fixedStyle = fixed === "left" ? { left: fixedOffset } : fixed === "right" ? { right: fixedOffset } : void 0;
+    const shadowDirection = resolveStickyShadowDirection(fixed, fixedShadow);
+    const shouldShowShadow = shadowDirection === "right" ? hasLeftOverflow : shadowDirection === "left" ? hasRightOverflow : false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "th",
+      {
+        ref,
+        className: cn(
+          "relative h-12 border-b border-border px-4 py-3",
+          type === "text" ? "min-w-[284px] text-left" : "w-[56px] text-center",
+          stateClass,
+          interactiveHoverClass,
+          fixed && "sticky z-20",
+          sortable && type === "text" && onSortChange && "cursor-pointer select-none",
+          className
+        ),
+        style: { ...fixedStyle, ...styleProp },
+        ...props,
+        onClick: type === "text" ? handleSortClick : props.onClick,
+        children: [
+          shadowDirection && shouldShowShadow && /* @__PURE__ */ jsxRuntime.jsx(StickyShadowEdge, { direction: shadowDirection }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center",
+                type === "text" ? "justify-start gap-1" : "justify-center gap-0"
+              ),
+              children: content
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const TableCell = React.forwardRef(function TableCell2({
+  className,
+  type = "default",
+  textStyle = "default",
+  selected,
+  hovered,
+  label = "Text label",
+  description = "Text Description",
+  imageSrc,
+  tagText = "Tag",
+  tagVariant = "gray",
+  icon,
+  contentAlign = "start",
+  fixed,
+  fixedOffset = 0,
+  fixedShadow,
+  style: styleProp,
+  ...props
+}, ref) {
+  const { hasLeftOverflow, hasRightOverflow } = React.useContext(TableScrollShadowContext);
+  const rowState = React.useContext(TableRowStateContext);
+  const cellSelected = selected ?? rowState.selected;
+  const cellHovered = hovered ?? rowState.hovered;
+  const surfaceClass = getSurface(cellSelected, cellHovered);
+  const primaryTextClass = getTextClass(textStyle);
+  const hasDescription = textStyle === "bold-description";
+  const iconSize = hasDescription ? 24 : 20;
+  const imageSize = hasDescription ? "size-8" : "size-5";
+  const fixedStyle = fixed === "left" ? { left: fixedOffset } : fixed === "right" ? { right: fixedOffset } : void 0;
+  const shadowDirection = resolveStickyShadowDirection(fixed, fixedShadow);
+  const shouldShowShadow = shadowDirection === "right" ? hasLeftOverflow : shadowDirection === "left" ? hasRightOverflow : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "td",
+    {
+      ref,
+      className: cn(
+        "relative border-b border-border px-4",
+        hasDescription ? "py-3 align-top" : "py-3.5 align-middle",
+        surfaceClass,
+        type === "default" || type === "text-icon" || type === "text-image" || type === "tag" ? "min-w-[284px]" : "w-[56px]",
+        fixed && "sticky z-10",
+        className
+      ),
+      style: { ...fixedStyle, ...styleProp },
+      ...props,
+      children: [
+        shadowDirection && shouldShowShadow && /* @__PURE__ */ jsxRuntime.jsx(StickyShadowEdge, { direction: shadowDirection }),
+        type === "default" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
+        ] }),
+        type === "text-icon" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: iconSize, weight: "regular", className: "shrink-0 text-subtle-text" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
+          ] })
+        ] }),
+        type === "text-image" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 overflow-hidden rounded", imageSize), children: imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              alt: "",
+              className: "pointer-events-none size-full object-cover",
+              src: imageSrc
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full bg-hover-bg" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-5", primaryTextClass), children: label }),
+            hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 font-normal text-subtle-text", children: description })
+          ] })
+        ] }),
+        type === "tag" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { text: tagText, size: "large", variant: tagVariant }) }),
+        type === "icon" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center",
+              contentAlign === "start" ? "justify-start" : "justify-center"
+            ),
+            children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 24, weight: "regular", className: "text-subtle-text" })
+          }
+        ),
+        type === "button" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center",
+              contentAlign === "start" ? "justify-start" : "justify-center"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xs", variant: "outline-black", children: "Button" })
+          }
+        ),
+        type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center",
+              contentAlign === "start" ? "justify-start" : "justify-center"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: cellSelected })
+          }
+        )
+      ]
+    }
+  );
+});
+Table.displayName = "Table";
+TableRow.displayName = "TableRow";
+TableHeaderCell.displayName = "TableHeaderCell";
+TableCell.displayName = "TableCell";
 const TextArea = React.forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -4048,24 +4899,24 @@ const TimeInput = React.forwardRef(
 TimeInput.displayName = "TimeInput";
 exports.Button = Button;
 exports.Card = Card;
-exports.CardGrid = CardGrid;
+exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.DateInput = DateInput;
 exports.Dropdown = Dropdown;
 exports.DropdownMultiple = DropdownMultiple;
 exports.Input = Input;
 exports.OptionList = OptionList;
-exports.Page = Page;
-exports.PageHeader = PageHeader;
+exports.Radio = Radio;
 exports.SearchInput = SearchInput;
-exports.Section = Section;
-exports.Stack = Stack;
 exports.StatusTag = StatusTag;
 exports.Tab = Tab;
 exports.TabGroup = TabGroup;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
-exports.Toolbar = Toolbar;
 exports.cn = cn;
 //# sourceMappingURL=index.cjs.map