sellmate-design-system-react 9.0.0-beta.32 → 9.0.0-beta.34

package/dist/index.cjs

@@ -7,7 +7,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
-var RPopover11 = require('@radix-ui/react-popover');
+var RPopover12 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown2 = require('@radix-ui/react-dropdown-menu');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 }
 
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
-var RPopover11__namespace = /*#__PURE__*/_interopNamespace(RPopover11);
+var RPopover12__namespace = /*#__PURE__*/_interopNamespace(RPopover12);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown2__namespace = /*#__PURE__*/_interopNamespace(RDropdown2);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -5192,8 +5192,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn2;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -5205,8 +5205,8 @@ function SGhostButton({
         children: btn2
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover11__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover12__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -5782,14 +5782,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -5800,9 +5800,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover11__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover12__namespace.Content,
       {
         side: placement,
         sideOffset,
@@ -5836,7 +5836,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6914,7 +6914,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover11__namespace.Root,
+    RPopover12__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6922,9 +6922,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover12__namespace.Content,
           {
             side: placement,
             align,
@@ -7368,12 +7368,15 @@ var SYSTEM_ACTION_BUTTON_COLOR_CONFIG = {
   dark: {
     bg: item2("dark-bg-default"),
     bgHover: item2("dark-bg-hover"),
+    // 프레임은 hover 에서도 행의 기본 표면색을 지킨다 — 표면만 한 단계 밝아지고 프레임은
+    // 제자리에 남아, 밝아진 면에 뚫린 구멍처럼 읽힌다. `dark-icon-bg-hover`(흰색) 토큰은
+    // 이 시안과 어긋나 쓰지 않는다.
     iconBg: item2("dark-icon-bg-default"),
-    iconBgHover: item2("dark-icon-bg-hover"),
-    // 어두운 면에는 글리프색 토큰이 없다. 기본은 프레임이 배경과 블렌딩되므로 라벨색(흰색),
-    // hover 는 프레임이 흰색이 되므로 그 위에 표면색을 그대로 얹는다.
+    iconBgHover: item2("dark-icon-bg-default"),
+    // 어두운 면에는 글리프색 토큰이 없다. 프레임이 배경과 블렌딩되므로 라벨색(흰색)을 쓰고,
+    // 프레임이 hover 에서 그대로이므로 글리프도 그대로 둔다.
     iconGlyph: item2("dark-text"),
-    iconGlyphHover: item2("dark-bg-hover"),
+    iconGlyphHover: item2("dark-text"),
     text: item2("dark-text"),
     actionText: {
       switch: action("switch-text-dark"),
@@ -7385,10 +7388,11 @@ var SYSTEM_ACTION_BUTTON_COLOR_CONFIG = {
   darker: {
     bg: item2("darker-bg-default"),
     bgHover: item2("darker-bg-hover"),
+    // dark 와 같은 규칙 — 프레임은 hover 에서도 행의 기본 표면색을 지킨다.
     iconBg: item2("darker-icon-bg-default"),
-    iconBgHover: item2("darker-icon-bg-hover"),
+    iconBgHover: item2("darker-icon-bg-default"),
     iconGlyph: item2("darker-text"),
-    iconGlyphHover: item2("darker-bg-hover"),
+    iconGlyphHover: item2("darker-text"),
     text: item2("darker-text"),
     actionText: {
       switch: action("switch-text-dark"),
@@ -7433,7 +7437,13 @@ var SYSTEM_ACTION_BUTTON_LAYOUT = {
   /** 우측 여백 */
   paddingRight: action("paddingRight"),
   /** 액션 텍스트 ↔ 액션 아이콘 간격 */
-  actionGap: action("selectData-gap")
+  actionGap: action("selectData-gap"),
+  /**
+   * 액션 아이콘 글리프 한 변. 프레임 한 변은 타입별 토큰(`actionButton.*-icon`)이 정하고
+   * 그 안에 글리프가 이 크기로 놓인다 — 선행 아이콘의 프레임(24)/글리프(20) 과 같은 구조다.
+   * 대응 토큰이 없어 디자인 값을 그대로 쓴다.
+   */
+  actionIconGlyph: "12px"
 };
 function TokenIcon2({ name, size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
@@ -7536,7 +7546,15 @@ var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
                 children: actionText
               }
             ),
-            spec.actionIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0 items-center text-(--sab-action-icon)", children: /* @__PURE__ */ jsxRuntime.jsx(TokenIcon2, { name: spec.actionIcon.name, size: spec.actionIcon.size }) })
+            spec.actionIcon && // 토큰이 정하는 크기는 글리프가 아니라 프레임이다 — 그 안에 글리프를 가운데로 놓는다.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "inline-flex shrink-0 items-center justify-center text-(--sab-action-icon)",
+                style: { width: spec.actionIcon.size, height: spec.actionIcon.size },
+                children: /* @__PURE__ */ jsxRuntime.jsx(TokenIcon2, { name: spec.actionIcon.name, size: SYSTEM_ACTION_BUTTON_LAYOUT.actionIconGlyph })
+              }
+            )
           ] })
         ]
       }
@@ -7657,10 +7675,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover11__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover12__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -7726,7 +7744,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -7837,10 +7855,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover11__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover12__namespace.Content,
       {
         side: "bottom",
         align: "start",
@@ -9270,9 +9288,9 @@ var GNB_RAIL = {
 var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
-var GNB_MENU_WIDTH = 240;
+var GNB_MENU_WIDTH = 214;
 var GNB_MENU_MIN_WIDTH = 200;
-var GNB_MENU_MAX_WIDTH = 300;
+var GNB_MENU_MAX_WIDTH = 240;
 var GNB_MENU_RESIZE_KEY_STEP = { normal: 10, large: 50 };
 var clampGnbMenuWidth = (width) => Math.min(GNB_MENU_MAX_WIDTH, Math.max(GNB_MENU_MIN_WIDTH, Math.round(width)));
 var GNB_FULL_LOGO_WIDTH = 140;
@@ -9830,8 +9848,15 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     "topContent"
   ) : null;
   const systemMenuContext = react.useMemo(
-    () => ({ color, folded: false, placement: "panel", active: !railFolded }),
-    [color, railFolded]
+    // 기본 폭보다 줄여 놓은 메뉴 컬럼이면 판에 알린다 — 알림 개수가 점 배지로 줄어든다.
+    () => ({
+      color,
+      folded: false,
+      placement: "panel",
+      active: !railFolded,
+      narrow: menuWidth < GNB_MENU_WIDTH
+    }),
+    [color, railFolded, menuWidth]
   );
   const systemFoldedContext = react.useMemo(
     () => ({ color, folded: true, placement: "panel", active: true }),
@@ -9984,10 +10009,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover12__namespace.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -10098,7 +10123,7 @@ var GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";
 function TokenIcon3({ name, size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
-function SystemButton({
+var SystemButton = /* @__PURE__ */ react.forwardRef(function SystemButton2({
   color,
   icon,
   label,
@@ -10110,21 +10135,22 @@ function SystemButton({
   dot,
   accentColor,
   stretch,
-  buttonRef,
   hasPopup,
   expanded,
-  onClick
-}) {
+  onClick,
+  onMouseLeave
+}, ref) {
   const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      ref: buttonRef,
+      ref,
       type: "button",
       "aria-label": label ? void 0 : ariaLabel,
       "aria-haspopup": hasPopup ? "dialog" : void 0,
       "aria-expanded": hasPopup ? expanded : void 0,
       onClick,
+      onMouseLeave,
       className: cn(
         "group box-border flex cursor-pointer items-center border-none bg-(--gsb-bg) text-(--gsb-text) transition-colors hover:bg-(--gsb-bg-hover)",
         stretch ? "min-w-0 flex-1" : "shrink-0",
@@ -10170,12 +10196,14 @@ function SystemButton({
             ]
           }
         ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-semibold min-w-0 flex-1 truncate", children: label }),
-        count != null && count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold shrink-0", style: { color: accentColor }, children: count.toLocaleString() })
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-semibold min-w-0 truncate", children: label }),
+        count != null && count > 0 && // 개수 오른쪽은 버튼 여백(alertButton.paddingX)만으로는 좁다 — 시안이 4px 을 더 준다.
+        // 대응 토큰이 없어 디자인 값을 그대로 쓴다.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold me-[4px] shrink-0", style: { color: accentColor }, children: count.toLocaleString() })
       ]
     }
   );
-}
+});
 var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
   color: colorProp,
   folded: foldedProp,
@@ -10194,6 +10222,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
   const isTop = placement === "top";
   const folded = !isTop && (foldedProp ?? gnb2?.folded ?? false);
   const active = gnb2?.active ?? true;
+  const narrow = !isTop && !folded && (gnb2?.narrow ?? false);
   const c = GNB_SYSTEM_COLOR_CONFIG[color];
   const t = GNB_SYSTEM_TOP_COLOR_CONFIG[color];
   const itemColor = isTop ? t.item : color;
@@ -10212,13 +10241,39 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
     setAccountOpen(next);
     account?.onOpenChange?.(next);
   };
+  const alertButtonRef = react.useRef(null);
+  const [alertListOpen, setAlertListOpen] = react.useState(false);
+  const hasAlertList = alert2?.listBox != null;
+  const commitAlertListOpen = (next) => {
+    setAlertListOpen(next);
+    alert2?.onOpenChange?.(next);
+  };
   react.useEffect(() => {
     if (active || !accountOpen) return;
     setAccountOpen(false);
     account?.onOpenChange?.(false);
   }, [active, accountOpen, account]);
+  react.useEffect(() => {
+    if (active || !alertListOpen) return;
+    setAlertListOpen(false);
+    alert2?.onOpenChange?.(false);
+  }, [active, alertListOpen, alert2]);
   const alertCount = alert2?.count ?? 0;
   const notified = alertCount > 0;
+  const alertTooltip = (alert2?.tooltip ?? []).filter((line) => line.trim() !== "");
+  const hasAlertTooltip = alertTooltip.length > 0;
+  const [alertTooltipDismissed, setAlertTooltipDismissed] = react.useState(false);
+  const hadAlertTooltip = react.useRef(hasAlertTooltip);
+  if (hadAlertTooltip.current !== hasAlertTooltip) {
+    hadAlertTooltip.current = hasAlertTooltip;
+    if (hasAlertTooltip && alertTooltipDismissed) setAlertTooltipDismissed(false);
+  }
+  const alertTooltipOpen = hasAlertTooltip && active && !alertTooltipDismissed;
+  const dismissAlertTooltip = () => {
+    if (!alertTooltipOpen) return;
+    setAlertTooltipDismissed(true);
+    alert2?.onTooltipDismiss?.();
+  };
   const alertLabel = alert2?.label ?? GNB_SYSTEM_ALERT_LABEL;
   const settingLabel = setting?.label ?? GNB_SYSTEM_SETTING_LABEL;
   const alertButton = alert2 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10231,13 +10286,51 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
       paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
       iconColor: notified ? alertIconColor : void 0,
       hoverBg: notified ? alertHoverBg : void 0,
-      count: folded ? void 0 : alertCount,
-      dot: folded && notified,
+      count: folded || narrow ? void 0 : alertCount,
+      dot: (folded || narrow) && notified,
       accentColor: alertCountColor,
       stretch: !folded && !isTop,
-      onClick: alert2.onClick
+      ref: alertButtonRef,
+      hasPopup: hasAlertList,
+      expanded: alertListOpen,
+      onClick: () => {
+        dismissAlertTooltip();
+        alert2.onClick?.();
+        if (hasAlertList) commitAlertListOpen(!alertListOpen);
+      },
+      onMouseLeave: hasAlertTooltip ? dismissAlertTooltip : void 0
     }
   );
+  const alertListBox = alert2 && hasAlertList && /* @__PURE__ */ jsxRuntime.jsx(
+    SPortal,
+    {
+      open: alertListOpen && active,
+      onClose: () => commitAlertListOpen(false),
+      anchorRef: alertButtonRef,
+      placement: isTop ? "bottom" : "right",
+      align: "end",
+      offset: 8,
+      viewportPadding: 8,
+      ariaLabel: alert2.label ?? GNB_SYSTEM_ALERT_LABEL,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      className: "rounded-(--radius-8)",
+      children: alert2.listBox
+    }
+  );
+  const alertNode = alertButton && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasAlertTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+      STooltip2,
+      {
+        trigger: "none",
+        open: alertTooltipOpen,
+        message: alertTooltip,
+        tooltipType: color === "light" ? "default" : "accent",
+        placement: isTop ? "bottom" : "right",
+        children: alertButton
+      }
+    ) : alertButton,
+    alertListBox
+  ] });
   const settingButton = setting && /* @__PURE__ */ jsxRuntime.jsx(
     SystemButton,
     {
@@ -10293,7 +10386,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         )
       })
     );
-    if (alertButton) segments.push({ key: "alert", node: alertButton });
+    if (alertNode) segments.push({ key: "alert", node: alertNode });
     if (settingButton) segments.push({ key: "setting", node: settingButton });
     if (domainTag || accountButton) {
       segments.push({
@@ -10351,7 +10444,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         "data-folded": "",
         ...rest,
         children: [
-          alertButton,
+          alertNode,
           account && /* @__PURE__ */ jsxRuntime.jsx(
             SystemButton,
             {
@@ -10359,7 +10452,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
               icon: "user",
               ariaLabel: account.label ?? "account",
               paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-              buttonRef: foldedAccountRef,
+              ref: foldedAccountRef,
               hasPopup: true,
               expanded: accountOpen,
               onClick: () => {
@@ -10405,7 +10498,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         domainTag,
         hasUserBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           (alert2 || setting) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
-            alertButton,
+            alertNode,
             alert2 && setting && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -11477,6 +11570,636 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   );
 });
 
+// src/lib/date.ts
+function todayStr() {
+  const d = /* @__PURE__ */ new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function formatDate(year, month, day) {
+  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+function calcYearMonth(year, month, dir) {
+  if (dir === "prev")
+    return month === 1 ? { year: year - 1, month: 12 } : { year, month: month - 1 };
+  return month === 12 ? { year: year + 1, month: 1 } : { year, month: month + 1 };
+}
+function monthCells(year, month) {
+  const firstDayIndex = new Date(year, month - 1, 1).getDay();
+  const daysInCurrent = new Date(year, month, 0).getDate();
+  const prev = calcYearMonth(year, month, "prev");
+  const daysInPrev = new Date(prev.year, prev.month, 0).getDate();
+  const next = calcYearMonth(year, month, "next");
+  const cells = [];
+  for (let i = firstDayIndex - 1; i >= 0; i--) {
+    const day = daysInPrev - i;
+    cells.push({ date: formatDate(prev.year, prev.month, day), day, inCurrentMonth: false });
+  }
+  for (let day = 1; day <= daysInCurrent; day++) {
+    cells.push({ date: formatDate(year, month, day), day, inCurrentMonth: true });
+  }
+  const remaining = (7 - cells.length % 7) % 7;
+  for (let day = 1; day <= remaining; day++) {
+    cells.push({ date: formatDate(next.year, next.month, day), day, inCurrentMonth: false });
+  }
+  return cells;
+}
+var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+
+// src/components/SCalendarBoard/calendarBoard.config.ts
+var CALENDAR_BOARD_EVENT_COLORS = [
+  "default",
+  "blue",
+  "oceanBlue",
+  "lightBlue",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "white"
+];
+var BG = (name) => `var(--cmp-calendarBoard-eventButton-bg-${name})`;
+var CALENDAR_BOARD_EVENT_PRESETS = {
+  default: { bg: BG("default"), dot: "indigo" },
+  blue: { bg: BG("blue"), dot: "blue" },
+  oceanBlue: { bg: BG("oceanBlue"), dot: "darkblue" },
+  lightBlue: { bg: BG("lightBlue"), dot: "lightblue" },
+  green: { bg: BG("green"), dot: "green" },
+  yellow: { bg: BG("yellow"), dot: "yellow" },
+  orange: { bg: BG("orange"), dot: "orange" },
+  red: { bg: BG("red"), dot: "red" },
+  white: { bg: BG("white"), dot: "grey" }
+};
+var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
+var CALENDAR_BOARD_DAY_COLORS = [
+  "default",
+  "danger",
+  "accent",
+  "complete",
+  "dim"
+];
+var CALENDAR_BOARD_DAY_BG = {
+  default: "var(--cmp-calendarBoard-dayCard-bg)",
+  danger: "var(--color-red-30)",
+  accent: "var(--color-brilliantblue-40)",
+  complete: "var(--color-green-45)",
+  dim: "var(--color-grey-25)"
+};
+function CalendarEventButton({
+  event,
+  onSelect,
+  className
+}) {
+  const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
+  const dot = event.dotColor ?? preset.dot;
+  const disabled = event.disabled === true;
+  const hasDescription = event.description != null && event.description !== "";
+  const hasValue = event.value != null && event.value !== "";
+  const title = [event.label.replace(/<[^>]*>/g, ""), event.description, event.value].filter((v) => v != null && v !== "").join(" ") || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      title,
+      className: cn(
+        // hover 는 배경 위에 8% 오버레이를 얹는다 — 프리셋 배경이 9종이라 색마다 hover 색을 두지 않는다.
+        "group relative flex w-full min-w-0 items-center overflow-hidden text-left",
+        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
+        "gap-(--cmp-calendarBoard-eventButton-inline-gap) px-(--cmp-calendarBoard-item-paddingX)",
+        "bg-(--ceb-bg) text-(--cmp-calendarBoard-eventButton-text-color-default)",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className
+      ),
+      style: { "--ceb-bg": preset.bg },
+      onClick: (e) => {
+        if (disabled) return;
+        onSelect?.(event, e);
+      },
+      children: [
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-default min-w-0 flex-1 truncate", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "typo-body-sm-semibold",
+                  hasDescription && "me-(--cmp-calendarBoard-eventButton-label-gap)"
+                ),
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(event.label) }
+              }
+            ),
+            hasDescription && event.description
+          ] }),
+          hasValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "typo-body-sm-default text-(--cmp-calendarBoard-eventButton-text-color-separator)",
+                children: "/"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default whitespace-nowrap", children: event.value })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "group relative flex w-full min-w-0 cursor-pointer items-center overflow-hidden text-left",
+        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
+        "gap-(--cmp-calendarBoard-moreButton-gap) px-(--cmp-calendarBoard-item-paddingX)",
+        "bg-(--cmp-calendarBoard-moreButton-bg)",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-moreButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-moreButton-hover-overlay-opacity)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-semibold shrink-0 text-(--cmp-calendarBoard-moreButton-count-color)", children: [
+          count,
+          "\uAC1C"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default min-w-0 truncate text-(--cmp-calendarBoard-moreButton-label-color)", children: label })
+      ]
+    }
+  );
+});
+var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2({
+  date,
+  day,
+  inCurrentMonth,
+  isToday,
+  isSelected,
+  selectable,
+  color,
+  events,
+  body,
+  hiddenCount,
+  isOpen,
+  moreLabel,
+  onDaySelect,
+  onEventClick,
+  onOpenEvents,
+  ...rest
+}, ref) {
+  const hasEvents = events.length + hiddenCount > 0;
+  const interactive = selectable || hasEvents;
+  const activate = () => {
+    if (hasEvents) onOpenEvents?.();
+    if (selectable) onDaySelect?.(date);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "gridcell",
+      "data-date": date,
+      "aria-selected": selectable ? isSelected : void 0,
+      "aria-current": isToday ? "date" : void 0,
+      "aria-haspopup": hasEvents ? "dialog" : void 0,
+      "aria-expanded": hasEvents ? isOpen : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onClick: interactive ? activate : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activate();
+        }
+      } : void 0,
+      className: cn(
+        "relative flex min-h-(--cmp-calendarBoard-dayCard-minHeight) min-w-(--cmp-calendarBoard-dayCard-minWidth) flex-col bg-(--cdc-bg) px-(--cmp-calendarBoard-dayCard-paddingX) outline-none",
+        interactive && "cursor-pointer"
+      ),
+      style: { ...rest.style, "--cdc-bg": CALENDAR_BOARD_DAY_BG[color] },
+      children: [
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-[1px] rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex size-(--cmp-calendarBoard-daySequence-size) items-center justify-center rounded-(--cmp-calendarBoard-daySequence-radius)",
+              isToday ? "typo-body-md-bold bg-(--cmp-calendarBoard-daySequence-bg-today) text-(--cmp-calendarBoard-daySequence-text-today)" : cn(
+                "typo-body-md-medium",
+                inCurrentMonth ? "text-(--cmp-calendarBoard-daySequence-text-default)" : "text-(--cmp-calendarBoard-daySequence-text-otherMonth)"
+              ),
+              // 오늘이 아니면서 선택된 날은 테두리 원으로 표시한다 (오늘은 이미 채운 원이라 겹치지 않는다).
+              // 굵기는 1px 로 고정한다 — 칸을 감싸는 focus 테두리(2px)와 달리 얇은 원이고, 대응 토큰이 없다.
+              isSelected && !isToday && "border border-solid border-(--cmp-calendarBoard-daySequence-border-selected)"
+            ),
+            children: day
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-h-0 flex-col gap-(--cmp-calendarBoard-dayCard-grid-gap) pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)",
+              // 슬롯은 남는 세로를 다 갖는다 — 안에서 h-full 로 칸을 채울 수 있어야 한다.
+              body != null && "flex-1"
+            ),
+            children: [
+              body,
+              body == null && events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarEventButton,
+                {
+                  event,
+                  onSelect: (ev, e) => {
+                    e.stopPropagation();
+                    onEventClick?.(ev, e);
+                  }
+                },
+                event.id ?? `${event.date}-${i}`
+              )),
+              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarMoreButton,
+                {
+                  count: hiddenCount,
+                  label: moreLabel,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenEvents?.();
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+var MAX_HEIGHT = 480;
+var MAX_WIDTH = "calc(100vw - 16px)";
+function CalendarDayEventListBox({
+  date,
+  events,
+  onEventClick,
+  minWidth,
+  minHeight,
+  onClose,
+  closeLabel = "\uB2EB\uAE30"
+}) {
+  const [y, m, d] = date.split("-").map(Number);
+  const weekday = WEEK_LABELS[new Date(y, m - 1, d).getDay()];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex w-max flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) bg-(--cmp-calendarBoard-bg) shadow-(--shadow-overlay)",
+      style: { minWidth, maxWidth: MAX_WIDTH, minHeight, maxHeight: MAX_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-dayEvent-header-gap) px-(--cmp-calendarBoard-dayEvent-header-paddingX) py-(--cmp-calendarBoard-dayEvent-header-paddingY)", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-md text-(--cmp-calendarBoard-header-content-color)", children: [
+            d,
+            "\uC77C"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-lg-default flex-1 text-(--cmp-calendarBoard-header-content-color)", children: [
+            "(",
+            weekday,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "close",
+              size: "xs",
+              ariaLabel: closeLabel,
+              className: "shrink-0",
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SScrollArea, { axis: "vertical", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-(--cmp-calendarBoard-dayEvent-body-gap) px-(--cmp-calendarBoard-dayEvent-body-paddingX) pb-(--cmp-calendarBoard-dayEvent-body-paddingBottom)", children: events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarEventButton,
+          {
+            event,
+            onSelect: onEventClick
+          },
+          event.id ?? `${event.date}-${i}`
+        )) }) })
+      ]
+    }
+  );
+}
+var DAY_EVENT_OUTDENT = 16;
+var VIEWPORT_PADDING2 = 8;
+function shiftIntoView(desired, size, viewport) {
+  const max = Math.max(viewport - size - VIEWPORT_PADDING2, VIEWPORT_PADDING2);
+  return Math.min(Math.max(desired, VIEWPORT_PADDING2), max) - desired;
+}
+function measureRowCapacity(cell) {
+  const cs = getComputedStyle(cell);
+  const v = (name) => Number.parseFloat(cs.getPropertyValue(name)) || 0;
+  const gap = v("--cmp-calendarBoard-dayCard-grid-gap");
+  const row = v("--cmp-calendarBoard-item-height") + gap;
+  if (row <= 0) return null;
+  const header = v("--cmp-calendarBoard-dayCard-header-paddingTop") + v("--cmp-calendarBoard-daySequence-size") + v("--cmp-calendarBoard-dayCard-header-paddingBottom");
+  const free = cell.getBoundingClientRect().height - header - v("--cmp-calendarBoard-dayCard-grid-paddingBottom") + gap;
+  if (free <= 0) return null;
+  return Math.max(1, Math.floor(free / row));
+}
+function SCalendarBoard({
+  year,
+  month,
+  defaultYear,
+  defaultMonth,
+  onViewChange,
+  selectable = false,
+  value,
+  onValueChange,
+  events,
+  dayColors,
+  dayContent,
+  onEventClick,
+  onMoreClick,
+  todayLabel = "\uC624\uB298",
+  moreLabel,
+  headerRight,
+  className,
+  style
+}) {
+  const today = todayStr();
+  const [ty, tm] = [Number(today.slice(0, 4)), Number(today.slice(5, 7))];
+  const [innerView, setInnerView] = react.useState(() => ({
+    year: defaultYear ?? ty,
+    month: defaultMonth ?? tm
+  }));
+  const controlled = year != null && month != null;
+  const view = controlled ? { year, month } : innerView;
+  const [openDate, setOpenDate] = react.useState(null);
+  const [placement, setPlacement] = react.useState({ cellWidth: 0, cellHeight: 0, side: 0, align: 0 });
+  const [panelEl, setPanelEl] = react.useState(null);
+  const portalContainer = usePortalContainer();
+  const setView = react.useCallback(
+    (next) => {
+      setOpenDate(null);
+      if (!controlled) setInnerView(next);
+      onViewChange?.(next);
+    },
+    [controlled, onViewChange]
+  );
+  const cells = react.useMemo(() => monthCells(view.year, view.month), [view.year, view.month]);
+  const rowCount = cells.length / 7;
+  const gridRef = react.useRef(null);
+  const [rowCapacity, setRowCapacity] = react.useState(CALENDAR_BOARD_MAX_VISIBLE_EVENTS);
+  react.useEffect(() => {
+    const grid = gridRef.current;
+    if (grid == null || typeof ResizeObserver === "undefined") return;
+    const cell = grid.querySelector('[role="gridcell"]');
+    if (cell == null) return;
+    const apply = () => {
+      const next = measureRowCapacity(cell);
+      if (next != null) setRowCapacity(next);
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(cell);
+    return () => observer.disconnect();
+  }, [rowCount]);
+  const eventMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    (events ?? []).forEach((event) => {
+      const list = map.get(event.date);
+      if (list) list.push(event);
+      else map.set(event.date, [event]);
+    });
+    return map;
+  }, [events]);
+  const openEvents = openDate ? eventMap.get(openDate) ?? [] : [];
+  react.useLayoutEffect(() => {
+    if (openDate == null || panelEl == null) return;
+    const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
+    if (cell == null) return;
+    const adjust = () => {
+      const cellRect = cell.getBoundingClientRect();
+      const panelRect = panelEl.getBoundingClientRect();
+      const next = {
+        cellWidth: cellRect.width,
+        cellHeight: cellRect.height,
+        side: -(cellRect.height + DAY_EVENT_OUTDENT) + shiftIntoView(cellRect.top - DAY_EVENT_OUTDENT, panelRect.height, window.innerHeight),
+        align: -DAY_EVENT_OUTDENT + shiftIntoView(cellRect.left - DAY_EVENT_OUTDENT, panelRect.width, window.innerWidth)
+      };
+      setPlacement(
+        (prev) => prev.cellWidth === next.cellWidth && prev.cellHeight === next.cellHeight && prev.side === next.side && prev.align === next.align ? prev : next
+      );
+    };
+    adjust();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(adjust);
+    observer?.observe(panelEl);
+    window.addEventListener("scroll", adjust, true);
+    window.addEventListener("resize", adjust);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("scroll", adjust, true);
+      window.removeEventListener("resize", adjust);
+    };
+  }, [openDate, panelEl]);
+  const columns = "repeat(7, minmax(var(--cmp-calendarBoard-dayCard-minWidth), 1fr))";
+  const openEventList = (date, list) => {
+    if (onMoreClick) {
+      onMoreClick({ date, events: list });
+      return;
+    }
+    setOpenDate((prev) => prev === date ? null : date);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        // 판 높이는 부모가 정한다 — 행이 그 높이를 균등 분할하고, 칸 높이가 다시 "몇 줄 보일지" 를 정한다.
+        "flex h-full w-full flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) border border-solid border-(--cmp-calendarBoard-border) bg-(--cmp-calendarBoard-bg)",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-header-gap) px-sd-16 py-sd-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronLeft",
+                size: "xxs",
+                ariaLabel: "\uC774\uC804 \uD574",
+                onClick: () => setView({ year: view.year - 1, month: view.month })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: view.year }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronRight",
+                size: "xxs",
+                ariaLabel: "\uB2E4\uC74C \uD574",
+                onClick: () => setView({ year: view.year + 1, month: view.month })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, height: "var(--cmp-calendarBoard-header-content-divider-height)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronLeft",
+                size: "xxs",
+                ariaLabel: "\uC774\uC804 \uB2EC",
+                onClick: () => setView(calcYearMonth(view.year, view.month, "prev"))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: [
+              view.month,
+              "\uC6D4"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronRight",
+                size: "xxs",
+                ariaLabel: "\uB2E4\uC74C \uB2EC",
+                onClick: () => setView(calcYearMonth(view.year, view.month, "next"))
+              }
+            )
+          ] }),
+          todayLabel !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+            SButton,
+            {
+              color: "neutral",
+              outline: true,
+              size: "xs",
+              label: todayLabel,
+              onClick: () => setView({ year: ty, month: tm })
+            }
+          ),
+          headerRight != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: headerRight })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid shrink-0 bg-(--cmp-calendarBoard-grid-bg) pt-(--cmp-calendarBoard-grid-paddingTop) pb-(--cmp-calendarBoard-grid-gap)",
+            style: { gridTemplateColumns: columns },
+            children: WEEK_LABELS.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "typo-body-md-default flex justify-center text-(--cmp-calendarBoard-grid-weekRow-color)",
+                children: label
+              },
+              label
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          RPopover12__namespace.Root,
+          {
+            open: openDate !== null,
+            onOpenChange: (open) => {
+              if (!open) setOpenDate(null);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: gridRef,
+                  role: "grid",
+                  className: "grid min-h-0 flex-1 gap-px overflow-auto border-t border-solid border-(--cmp-calendarBoard-grid-month-border) bg-(--cmp-calendarBoard-grid-month-border)",
+                  style: {
+                    gridTemplateColumns: columns,
+                    // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
+                    gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
+                  },
+                  children: cells.map((cell) => {
+                    const content = dayContent?.[cell.date];
+                    const list = content == null ? eventMap.get(cell.date) ?? [] : [];
+                    const folded = list.length > rowCapacity;
+                    const visible = folded ? list.slice(0, rowCapacity - 1) : list;
+                    const card = /* @__PURE__ */ jsxRuntime.jsx(
+                      CalendarDayCard,
+                      {
+                        date: cell.date,
+                        day: cell.day,
+                        inCurrentMonth: cell.inCurrentMonth,
+                        isToday: cell.date === today,
+                        isSelected: value != null && value === cell.date,
+                        selectable,
+                        color: dayColors?.[cell.date] ?? "default",
+                        events: visible,
+                        body: content,
+                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
+                        isOpen: openDate === cell.date,
+                        moreLabel,
+                        onDaySelect: (date) => onValueChange?.(date, list),
+                        onEventClick,
+                        onOpenEvents: () => openEventList(cell.date, list)
+                      },
+                      cell.date
+                    );
+                    return cell.date === openDate ? /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: card }, cell.date) : card;
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover12__namespace.Content,
+                {
+                  onInteractOutside: (e) => {
+                    const target = e.detail.originalEvent.target;
+                    if (target instanceof Node && gridRef.current?.contains(target)) e.preventDefault();
+                  },
+                  side: "bottom",
+                  align: "start",
+                  ref: setPanelEl,
+                  sideOffset: placement.side,
+                  alignOffset: placement.align,
+                  avoidCollisions: false,
+                  className: cn("z-50 outline-none", FLOATING_SLIDE_ANIM),
+                  onOpenAutoFocus: (e) => e.preventDefault(),
+                  children: openDate != null && /* @__PURE__ */ jsxRuntime.jsx(
+                    CalendarDayEventListBox,
+                    {
+                      date: openDate,
+                      minWidth: placement.cellWidth > 0 ? placement.cellWidth + DAY_EVENT_OUTDENT * 2 : void 0,
+                      minHeight: placement.cellHeight > 0 ? placement.cellHeight + DAY_EVENT_OUTDENT * 2 : void 0,
+                      events: openEvents,
+                      onEventClick,
+                      onClose: () => setOpenDate(null)
+                    }
+                  )
+                },
+                openDate
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/lib/floating-height.ts
 var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
 function clampToAvailableHeight(value, availableHeight) {
@@ -13432,10 +14155,10 @@ function useTruncatedValueTooltip({
     valueRef: elRef,
     onMouseEnter: active ? onMouseEnter : cancelHide,
     onMouseLeave: active ? startHide : cancelHide,
-    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Anchor, { virtualRef: elRef }),
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        RPopover11__namespace.Content,
+    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RPopover12__namespace.Content,
         {
           side: "top",
           sideOffset: 4,
@@ -14191,41 +14914,6 @@ function SRadioGroup({
     }
   );
 }
-
-// src/lib/date.ts
-function todayStr() {
-  const d = /* @__PURE__ */ new Date();
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-function formatDate(year, month, day) {
-  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-}
-function calcYearMonth(year, month, dir) {
-  if (dir === "prev")
-    return month === 1 ? { year: year - 1, month: 12 } : { year, month: month - 1 };
-  return month === 12 ? { year: year + 1, month: 1 } : { year, month: month + 1 };
-}
-function monthCells(year, month) {
-  const firstDayIndex = new Date(year, month - 1, 1).getDay();
-  const daysInCurrent = new Date(year, month, 0).getDate();
-  const prev = calcYearMonth(year, month, "prev");
-  const daysInPrev = new Date(prev.year, prev.month, 0).getDate();
-  const next = calcYearMonth(year, month, "next");
-  const cells = [];
-  for (let i = firstDayIndex - 1; i >= 0; i--) {
-    const day = daysInPrev - i;
-    cells.push({ date: formatDate(prev.year, prev.month, day), day, inCurrentMonth: false });
-  }
-  for (let day = 1; day <= daysInCurrent; day++) {
-    cells.push({ date: formatDate(year, month, day), day, inCurrentMonth: true });
-  }
-  const remaining = (7 - cells.length % 7) % 7;
-  for (let day = 1; day <= remaining; day++) {
-    cells.push({ date: formatDate(next.year, next.month, day), day, inCurrentMonth: false });
-  }
-  return cells;
-}
-var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 function SCalendar({
   value,
   onValueChange,
@@ -14804,8 +15492,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             role: "button",
@@ -14864,8 +15552,8 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover12__namespace.Content,
           {
             side: "bottom",
             align: mode === "date" ? "start" : "center",
@@ -15338,7 +16026,7 @@ function SDateRangePicker({
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover11__namespace.Root,
+        RPopover12__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -15347,7 +16035,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 role: "button",
@@ -15411,8 +16099,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover11__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover12__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -17909,10 +18597,10 @@ function EditorToolbarBar({
             },
             item4
           );
-        return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover11__namespace.Content,
+        return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover12__namespace.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -19120,7 +19808,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     "div",
     {
       className: cn(
-        "flex w-full items-start gap-[var(--chipfilter-bar-gap)] border-b border-solid bg-[var(--chipfilter-bar-bg)] px-[var(--chipfilter-bar-padding-x)] py-[var(--chipfilter-bar-padding-y)]",
+        "flex w-full items-start gap-[var(--chipfilter-bar-gap)] bg-[var(--chipfilter-bar-bg)] px-[var(--chipfilter-bar-padding-x)] py-[var(--chipfilter-bar-padding-y)]",
         className
       ),
       style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
@@ -19248,8 +19936,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
-            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
@@ -19274,8 +19962,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover11__namespace.Content,
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover12__namespace.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -19310,17 +19998,17 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover11__namespace.Anchor,
+            RPopover12__namespace.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover11__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover12__namespace.Content,
             {
               side: "bottom",
               align: "start",
@@ -19912,8 +20600,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -19922,8 +20610,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover12__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -21231,8 +21919,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -21292,8 +21980,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover12__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -21698,8 +22386,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -21759,8 +22447,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover11__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover12__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -21795,6 +22483,11 @@ exports.ACCOUNT_LIST_BOX_TONE_CONFIG = ACCOUNT_LIST_BOX_TONE_CONFIG;
 exports.BADGE_COLORS = BADGE_COLORS;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
+exports.CALENDAR_BOARD_DAY_BG = CALENDAR_BOARD_DAY_BG;
+exports.CALENDAR_BOARD_DAY_COLORS = CALENDAR_BOARD_DAY_COLORS;
+exports.CALENDAR_BOARD_EVENT_COLORS = CALENDAR_BOARD_EVENT_COLORS;
+exports.CALENDAR_BOARD_EVENT_PRESETS = CALENDAR_BOARD_EVENT_PRESETS;
+exports.CALENDAR_BOARD_MAX_VISIBLE_EVENTS = CALENDAR_BOARD_MAX_VISIBLE_EVENTS;
 exports.COLOR_KEYS = COLOR_KEYS;
 exports.FIELD_WIDTH_GRADES = FIELD_WIDTH_GRADES;
 exports.GNB_COLORS = GNB_COLORS;
@@ -21823,6 +22516,7 @@ exports.SBarcodeInput = SBarcodeInput;
 exports.SButton = SButton;
 exports.SCROLL_AREA_AXES = SCROLL_AREA_AXES;
 exports.SCalendar = SCalendar;
+exports.SCalendarBoard = SCalendarBoard;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
 exports.SCheckbox = SCheckbox;