sellmate-design-system-react 9.0.0-beta.63 → 9.0.0-beta.65

package/dist/index.cjs

@@ -4150,7 +4150,7 @@ function SFooter({
     {
       className: cn(
         "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
-        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
+        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--cmp-overlay-footer-shadow)]",
         className
       ),
       style,
@@ -4739,6 +4739,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   iconColor,
   labelTooltip = "",
   labelTooltipProps,
+  labelPosition = "left",
   labelWidth,
   labelHeight,
   size = "sm",
@@ -4781,6 +4782,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
     []
   );
   const s = FIELD_SIZE[size];
+  const labelOnTop = labelPosition === "top";
   if (label !== "" && addonLabel !== "" && typeof console !== "undefined") {
     console.warn(
       "[SField] label \uACFC addonLabel \uC740 \uD568\uAED8 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. addonLabel \uC744 \uBB34\uC2DC\uD569\uB2C8\uB2E4."
@@ -4819,103 +4821,120 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
       style,
       onMouseEnter,
       onMouseLeave,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start", children: [
-        label !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
-            style: {
-              height: cssLen(labelHeight) ?? s.height,
-              marginRight: s.fieldGap,
-              width: cssLen(labelWidth),
-              fontSize: s.fontSize,
-              lineHeight: `${s.lineHeight}px`
-            },
-            children: [
-              icon && /* @__PURE__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: icon,
-                  size: s.icon,
-                  color: iconColor,
-                  style: { marginRight: s.labelGap }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                STooltip2,
-                {
-                  message: labelTooltip !== "" ? [labelTooltip] : void 0,
-                  iconSize: s.icon,
-                  ...labelTooltipProps
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
-            style: {
-              width: resolvedWidth,
-              minWidth: fieldWidthValue(minWidth),
-              maxWidth: resolvedMaxWidth
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: cn(
-                    "relative box-border flex min-w-0 items-stretch border border-solid border-(--field-bc)",
-                    // 둘 다 넘친 것을 잘라 내지만 clip 은 스크롤 상자를 만들지 않는다. hidden 이면
-                    // 이 상자가 스크롤포트가 되어 안쪽의 position:sticky 가 페이지 스크롤을 따라가지
-                    // 못한다 (SEditor 의 고정 툴바). 여러 줄 필드에서만 바꿔 파급을 좁힌다.
-                    multiline ? "overflow-clip" : "overflow-hidden",
-                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
-                    disabled && "cursor-not-allowed"
-                  ),
-                  style: {
-                    // @ts-expect-error CSS 변수
-                    "--field-bc": borderColor,
-                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                    ...interactive && !borderless && (focused || hovered) ? { boxShadow: FOCUS_RING_SHADOW } : {},
-                    ...multiline ? { minHeight: s.height } : { height: s.height },
-                    "borderRadius": s.radius,
-                    "background": bgColor,
-                    "color": textColor
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex w-full",
+            labelOnTop ? "flex-col gap-(--sys-space-field-vertical-gap)" : "items-start"
+          ),
+          children: [
+            label !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
+                style: {
+                  // 위에 선 라벨은 제 글줄 높이만 차지한다 — 컨트롤 높이에 맞춰 늘리면
+                  // 라벨과 컨트롤 사이가 간격 토큰보다 넓어진다. 줄 세우기용 labelWidth 도
+                  // 뜻이 없다(아래에 컨트롤이 제 폭으로 선다).
+                  ...labelOnTop ? {} : {
+                    height: cssLen(labelHeight) ?? s.height,
+                    marginRight: s.fieldGap,
+                    width: cssLen(labelWidth)
                   },
-                  "data-focused": focused || void 0,
-                  "data-hovered": hovered || void 0,
-                  children: [
-                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-sd-20",
-                        style: {
-                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
-                          width: cssLen(labelWidth),
-                          justifyContent: ALIGN[addonAlign],
-                          background: "var(--cmp-field-addonLabel-bg)",
-                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
-                          borderTopLeftRadius: s.radius - 1,
-                          borderBottomLeftRadius: s.radius - 1
-                        },
-                        children: [
-                          icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                          effectiveAddonLabel
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
-                  ]
-                }
-              ),
-              showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-hint-color)", children: hint }) : null
-            ]
-          }
-        )
-      ] })
+                  fontSize: s.fontSize,
+                  lineHeight: `${s.lineHeight}px`
+                },
+                children: [
+                  icon && /* @__PURE__ */ jsxRuntime.jsx(
+                    SIcon,
+                    {
+                      name: icon,
+                      size: s.icon,
+                      color: iconColor,
+                      style: { marginRight: s.labelGap }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    STooltip2,
+                    {
+                      message: labelTooltip !== "" ? [labelTooltip] : void 0,
+                      iconSize: s.icon,
+                      ...labelTooltipProps
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 flex-col",
+                  !labelOnTop && !hug && !isPercentWidth && "flex-1"
+                ),
+                style: {
+                  width: resolvedWidth,
+                  minWidth: fieldWidthValue(minWidth),
+                  maxWidth: resolvedMaxWidth
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "relative box-border flex min-w-0 items-stretch border border-solid border-(--field-bc)",
+                        // 둘 다 넘친 것을 잘라 내지만 clip 은 스크롤 상자를 만들지 않는다. hidden 이면
+                        // 이 상자가 스크롤포트가 되어 안쪽의 position:sticky 가 페이지 스크롤을 따라가지
+                        // 못한다 (SEditor 의 고정 툴바). 여러 줄 필드에서만 바꿔 파급을 좁힌다.
+                        multiline ? "overflow-clip" : "overflow-hidden",
+                        interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                        disabled && "cursor-not-allowed"
+                      ),
+                      style: {
+                        // @ts-expect-error CSS 변수
+                        "--field-bc": borderColor,
+                        // focused/hovered prop이 명시된 경우 강조를 즉시 반영
+                        ...interactive && !borderless && (focused || hovered) ? { boxShadow: FOCUS_RING_SHADOW } : {},
+                        ...multiline ? { minHeight: s.height } : { height: s.height },
+                        "borderRadius": s.radius,
+                        "background": bgColor,
+                        "color": textColor
+                      },
+                      "data-focused": focused || void 0,
+                      "data-hovered": hovered || void 0,
+                      children: [
+                        effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-sd-20",
+                            style: {
+                              // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
+                              width: cssLen(labelWidth),
+                              justifyContent: ALIGN[addonAlign],
+                              background: "var(--cmp-field-addonLabel-bg)",
+                              borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
+                              borderTopLeftRadius: s.radius - 1,
+                              borderBottomLeftRadius: s.radius - 1
+                            },
+                            children: [
+                              icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                              effectiveAddonLabel
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
+                      ]
+                    }
+                  ),
+                  showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-hint-color)", children: hint }) : null
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 });
@@ -4952,6 +4971,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   textareaClassName,
   textareaStyle,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -5011,6 +5031,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -6978,7 +6999,7 @@ function TreeConnector({
             className: cn(
               "absolute left-[6px] h-px bg-(--cmp-tree-connector-line-color)",
               branchTop,
-              hasChildren ? "w-[14px]" : "w-[calc(14px+var(--cmp-tree-item-arrow-icon))]"
+              hasChildren ? "w-[14px]" : "w-[calc(14px+var(--cmp-ghostButton-xxs-size))]"
             )
           }
         )
@@ -7131,7 +7152,12 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
                 onToggle?.(node, event);
               }
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-tree-item-arrow-icon) shrink-0", "aria-hidden": "true" }),
+          ) : (
+            // 자식이 없는 줄은 펼침 버튼 자리를 빈 칸으로 남겨 라벨의 시작점을 맞춘다.
+            // 크기는 자리를 대신하는 그 버튼(`SGhostButton size="xxs"`)의 토큰을 그대로 쓴다 —
+            // 버튼 크기가 바뀌면 빈 칸도 같이 따라가야 줄이 어긋나지 않는다.
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
+          ),
           leadingNode,
           selectable && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -8074,6 +8100,96 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
     }
   );
 });
+
+// src/components/SContextAlert/contextAlert.config.ts
+var CONTEXT_ALERT_INTENTS = [
+  "default",
+  "danger",
+  "warning",
+  "success",
+  "accent",
+  "discovery"
+];
+var CONTEXT_ALERT_SURFACE = {
+  default: {
+    bg: "var(--cmp-contextAlert-default-bg)",
+    border: "var(--cmp-contextAlert-default-border)"
+  },
+  danger: {
+    bg: "var(--cmp-contextAlert-danger-bg)",
+    border: "var(--cmp-contextAlert-danger-border)"
+  },
+  warning: {
+    bg: "var(--cmp-contextAlert-warning-bg)",
+    border: "var(--cmp-contextAlert-warning-border)"
+  },
+  success: {
+    bg: "var(--cmp-contextAlert-success-bg)",
+    border: "var(--cmp-contextAlert-success-border)"
+  },
+  accent: {
+    bg: "var(--cmp-contextAlert-accent-bg)",
+    border: "var(--cmp-contextAlert-accent-border)"
+  },
+  discovery: {
+    bg: "var(--cmp-contextAlert-discovery-bg)",
+    border: "var(--cmp-contextAlert-discovery-border)"
+  }
+};
+var CONTEXT_ALERT_DEFAULT_ICON = "notificationOutline";
+var CONTEXT_ALERT_ICON_COLOR = "var(--sys-color-fg-tertiary)";
+var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({
+  intent = "default",
+  messages = [],
+  icon = CONTEXT_ALERT_DEFAULT_ICON,
+  action: action2,
+  className,
+  style
+}, ref) {
+  const surface = CONTEXT_ALERT_SURFACE[intent];
+  const vars = {
+    "--ca-bg": surface.bg,
+    "--ca-border": surface.border
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "note",
+      className: cn(
+        "flex w-full items-center gap-[var(--cmp-contextAlert-gap)]",
+        "rounded-[var(--cmp-contextAlert-radius)] border-[length:var(--cmp-contextAlert-border-width)] border-solid",
+        "px-[var(--cmp-contextAlert-paddingX)] py-[var(--cmp-contextAlert-paddingY)]",
+        "border-[color:var(--ca-border)] bg-[var(--ca-bg)]",
+        className
+      ),
+      style: { ...vars, ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: icon,
+            size: "var(--cmp-contextAlert-icon)",
+            color: CONTEXT_ALERT_ICON_COLOR,
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col text-[12px] font-normal leading-[20px] text-[color:var(--cmp-contextAlert-content)]", children: messages.map((m, i) => (
+          // 메시지는 HTML 문자열을 허용하되, sanitizeInlineHtml 로 살균 후 innerHTML 렌더 (XSS 방어)
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "m-0 break-keep break-words text-pretty",
+              dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+            },
+            `${i}-${m}`
+          )
+        )) }),
+        action2 != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: action2 })
+      ]
+    }
+  );
+});
 var FILL_COLOR = {
   primary: "var(--cmp-progress-color-active)",
   error: "var(--cmp-progress-color-error)",
@@ -10072,7 +10188,7 @@ function SConfirmModal({
               }
             )
           ] }),
-          hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
+          hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "typo-feedback-md-regular flex w-full flex-col items-center gap-[20px] text-center text-[color:var(--cmp-modal-confirm-message-color)]", children: [
             topMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
@@ -10258,7 +10374,7 @@ function SLoadingModal({
         lines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: lines.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: "m-0 max-w-[400px] break-keep text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-loading-message-color)]",
+            className: "typo-feedback-md-regular m-0 max-w-[400px] break-keep text-center text-[color:var(--cmp-modal-loading-message-color)]",
             children: m
           },
           i
@@ -12013,7 +12129,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       viewportPadding: 8,
       ariaLabel: GNB_LAUNCHER_LABEL,
       onOpenAutoFocus: (event) => event.preventDefault(),
-      className: "w-auto rounded-(--cmp-gnb-launcher-listBox-radius) bg-(--cmp-gnb-launcher-listBox-bg) shadow-floating",
+      className: "w-auto rounded-(--cmp-gnb-launcher-listBox-radius) bg-(--cmp-gnb-launcher-listBox-bg) shadow-(--cmp-gnb-launcher-listBox-shadow)",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SLauncherListBox,
         {
@@ -13717,6 +13833,98 @@ function monthCells(year, month) {
 }
 var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 
+// src/components/SCalendarBoard/calendar-board-layout.ts
+function eventEndDate(event) {
+  const end = event.endDate;
+  return end != null && end > event.date ? end : event.date;
+}
+function layoutCalendarBoard({
+  cells,
+  events,
+  rowCapacity,
+  blockedDates
+}) {
+  const count = cells.length;
+  const weekCount = Math.ceil(count / 7);
+  const segmentsByCell = Array.from({ length: count }, () => []);
+  const eventsByCell = Array.from({ length: count }, () => []);
+  const hiddenCountByCell = new Array(count).fill(0);
+  const moreLaneByWeek = new Array(weekCount).fill(-1);
+  const runs = [];
+  events.forEach((event, order) => {
+    const start = event.date;
+    const end = eventEndDate(event);
+    let from = -1;
+    let to = -1;
+    for (let i = 0; i < count; i++) {
+      const { date } = cells[i];
+      if (date < start || date > end) continue;
+      if (from < 0) from = i;
+      to = i;
+      if (!blockedDates.has(date)) eventsByCell[i].push(event);
+    }
+    if (from < 0) return;
+    let runStart = -1;
+    const flush = (endIndex) => {
+      if (runStart < 0) return;
+      runs.push({ event, order, startIndex: runStart, endIndex, lane: -1 });
+      runStart = -1;
+    };
+    for (let i = from; i <= to; i++) {
+      if (blockedDates.has(cells[i].date)) {
+        flush(i - 1);
+        continue;
+      }
+      if (runStart >= 0 && i % 7 === 0) flush(i - 1);
+      if (runStart < 0) runStart = i;
+    }
+    flush(to);
+  });
+  runs.sort(
+    (a, b) => a.startIndex - b.startIndex || b.endIndex - b.startIndex - (a.endIndex - a.startIndex) || a.order - b.order
+  );
+  const weekLanes = Array.from({ length: weekCount }, () => []);
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const fromDay = run.startIndex % 7;
+    const toDay = run.endIndex % 7;
+    const lanes = weekLanes[week];
+    let lane = 0;
+    for (; ; ) {
+      if (lanes[lane] == null) lanes[lane] = new Array(7).fill(false);
+      let free = true;
+      for (let d = fromDay; d <= toDay && free; d++) if (lanes[lane][d]) free = false;
+      if (free) break;
+      lane += 1;
+    }
+    for (let d = fromDay; d <= toDay; d++) lanes[lane][d] = true;
+    run.lane = lane;
+  }
+  for (let week = 0; week < weekCount; week++) {
+    if (weekLanes[week].length > rowCapacity) moreLaneByWeek[week] = rowCapacity - 1;
+  }
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const moreLane = moreLaneByWeek[week];
+    const limit = moreLane < 0 ? rowCapacity : moreLane;
+    if (run.lane >= limit) {
+      for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
+      continue;
+    }
+    const { event } = run;
+    segmentsByCell[run.startIndex].push({
+      event,
+      key: `${event.id ?? `${event.date}-${run.order}`}-${run.startIndex}`,
+      startIndex: run.startIndex,
+      span: run.endIndex - run.startIndex + 1,
+      lane: run.lane,
+      startsHere: cells[run.startIndex].date === event.date,
+      endsHere: cells[run.endIndex].date === eventEndDate(event)
+    });
+  }
+  return { segmentsByCell, eventsByCell, hiddenCountByCell, moreLaneByWeek };
+}
+
 // src/components/SCalendarBoard/calendarBoard.config.ts
 var CALENDAR_BOARD_EVENT_COLORS = [
   "default",
@@ -13761,7 +13969,10 @@ var CALENDAR_BOARD_DAY_BG = {
 function CalendarEventButton({
   event,
   onSelect,
-  className
+  flatStart = false,
+  flatEnd = false,
+  className,
+  style
 }) {
   const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
   const dot = event.dotColor ?? preset.dot;
@@ -13781,10 +13992,13 @@ function CalendarEventButton({
         "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)",
+        // 잘린 쪽은 평평하게 — 다음 조각과 이어 보면 한 막대가 주 경계에서 나뉜 모양이 된다.
+        flatStart && "rounded-s-none",
+        flatEnd && "rounded-e-none",
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style: { "--ceb-bg": preset.bg },
+      style: { ...style, "--ceb-bg": preset.bg },
       onClick: (e) => {
         if (disabled) return;
         onSelect?.(event, e);
@@ -13794,7 +14008,7 @@ function CalendarEventButton({
           "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)"
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] 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" }),
@@ -13828,7 +14042,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -13841,6 +14055,7 @@ var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreB
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
+      style,
       onClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -13859,6 +14074,9 @@ var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreB
     }
   );
 });
+var HEADER_HEIGHT = "var(--cmp-calendarBoard-dayCard-header-paddingTop) + var(--cmp-calendarBoard-daySequence-size) + var(--cmp-calendarBoard-dayCard-header-paddingBottom)";
+var laneTop = (lane) => `calc(${HEADER_HEIGHT} + ${lane} * (var(--cmp-calendarBoard-item-height) + var(--cmp-calendarBoard-dayCard-grid-gap)))`;
+var spanWidth = (span) => `calc(${span} * 100% + ${span - 1}px - 2 * var(--cmp-calendarBoard-dayCard-paddingX))`;
 var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2({
   date,
   day,
@@ -13867,9 +14085,11 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   isSelected,
   selectable,
   color,
-  events,
+  segments,
+  dayEventCount,
   body,
   hiddenCount,
+  moreLane,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -13877,7 +14097,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   onOpenEvents,
   ...rest
 }, ref) {
-  const hasEvents = events.length + hiddenCount > 0;
+  const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
     if (hasEvents) onOpenEvents?.();
@@ -13912,7 +14132,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
           "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)"
+            className: "pointer-events-none absolute inset-[1px] z-20 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(
@@ -13931,39 +14151,41 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
             children: day
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        body != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)", children: body }),
+        body == null && segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarEventButton,
           {
-            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?.();
-                  }
-                }
-              )
-            ]
+            event: segment.event,
+            flatStart: !segment.startsHere,
+            flatEnd: !segment.endsHere,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(segment.lane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(segment.span)
+            },
+            onSelect: (ev, e) => {
+              e.stopPropagation();
+              onEventClick?.(ev, e);
+            }
+          },
+          segment.key
+        )),
+        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarMoreButton,
+          {
+            count: hiddenCount,
+            label: moreLabel,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(moreLane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(1)
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              onOpenEvents?.();
+            }
           }
         )
       ]
@@ -14097,16 +14319,14 @@ function SCalendarBoard({
     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) ?? [] : [];
+  const layout = react.useMemo(() => {
+    const blockedDates = new Set(
+      cells.filter((cell) => dayContent?.[cell.date] != null).map((cell) => cell.date)
+    );
+    return layoutCalendarBoard({ cells, events: events ?? [], rowCapacity, blockedDates });
+  }, [cells, events, rowCapacity, dayContent]);
+  const openIndex = openDate == null ? -1 : cells.findIndex((cell) => cell.date === openDate);
+  const openEvents = openIndex < 0 ? [] : layout.eventsByCell[openIndex];
   react.useLayoutEffect(() => {
     if (openDate == null || panelEl == null) return;
     const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
@@ -14247,11 +14467,9 @@ function SCalendarBoard({
                     // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
                     gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
                   },
-                  children: cells.map((cell) => {
+                  children: cells.map((cell, index) => {
                     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 list = layout.eventsByCell[index];
                     const card = /* @__PURE__ */ jsxRuntime.jsx(
                       CalendarDayCard,
                       {
@@ -14262,9 +14480,11 @@ function SCalendarBoard({
                         isSelected: value != null && value === cell.date,
                         selectable,
                         color: dayColors?.[cell.date] ?? "default",
-                        events: visible,
+                        segments: layout.segmentsByCell[index],
+                        dayEventCount: list.length,
                         body: content,
-                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
+                        hiddenCount: layout.hiddenCountByCell[index],
+                        moreLane: layout.moreLaneByWeek[Math.floor(index / 7)],
                         isOpen: openDate === cell.date,
                         moreLabel,
                         onDaySelect: (date) => onValueChange?.(date, list),
@@ -14657,6 +14877,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   onSearchChange,
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -15089,6 +15310,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -16819,6 +17041,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   inputClassName,
   inputStyle,
   label,
+  labelPosition,
   labelWidth,
   labelTooltip,
   labelTooltipProps,
@@ -16862,6 +17085,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelTooltip,
       labelTooltipProps,
@@ -17052,6 +17276,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   focused,
   hovered,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -17221,6 +17446,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -17508,7 +17734,7 @@ function SCalendar({
     if (e !== "" && date > e) return true;
     return false;
   };
-  const pick = (date) => {
+  const pick2 = (date) => {
     if (!isDisabled(date)) onValueChange?.(date);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17593,7 +17819,7 @@ function SCalendar({
             {
               type: "button",
               disabled: !cell.inCurrentMonth || disabled,
-              onClick: () => cell.inCurrentMonth && pick(cell.date),
+              onClick: () => cell.inCurrentMonth && pick2(cell.date),
               className: cn(
                 "flex min-h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-width)] flex-col items-center justify-start border-none bg-transparent p-0",
                 !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer"
@@ -17939,6 +18165,7 @@ function SDatePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -18011,6 +18238,7 @@ function SDatePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18473,6 +18701,7 @@ function SDateRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -18545,6 +18774,7 @@ function SDateRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18849,6 +19079,7 @@ function SFilePicker({
   status,
   size = "sm",
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -19033,6 +19264,7 @@ function SFilePicker({
       {
         borderless: inline,
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -19298,7 +19530,7 @@ function ChartGrid({ scale, direction, width, height }) {
   return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, children: scale.ticks.map((tick) => {
     const ratio = ratioOf(tick, scale);
     const isBaseline = tick === 0;
-    const color = isBaseline ? "var(--cmp-chart-baseline-color)" : "var(--cmp-chart-grid-line-color)";
+    const color = isBaseline ? "var(--cmp-chart-baseline-color)" : "var(--cmp-chart-gridline-color)";
     const position = vertical ? height - ratio * height : ratio * width;
     const extent = vertical ? height : width;
     const snapped = Math.min(Math.max(Math.round(position), 0), Math.max(0, extent - 1)) + 0.5;
@@ -19376,7 +19608,7 @@ function ChartAxisLabels({
     }
   );
 }
-var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ title, unit, legend, legendPosition = "top", children, className, style, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -19389,6 +19621,14 @@ var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ legend,
       style,
       ...props,
       children: [
+        (title || unit) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-chart-gap)", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-medium text-(--cmp-chart-title-color)", children: title }),
+          unit && // ml-auto — title 유무와 관계없이 항상 오른쪽 끝에 붙는다.
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto whitespace-nowrap typo-body-sm-default text-(--cmp-chart-unit-color)", children: [
+            "\uB2E8\uC704 : ",
+            unit
+          ] })
+        ] }),
         legend && legendPosition === "top" && legend,
         children,
         legend && legendPosition === "bottom" && legend
@@ -19439,46 +19679,57 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
 
 // src/lib/chart/palette.ts
 var V3 = (path) => `var(--cmp-chart-palette-${path})`;
-var CHART_COLORS = {
-  positivePrimary: V3("variation-positivePrimary"),
-  positiveSecondary: V3("variation-positiveSecondary"),
-  negativePrimary: V3("variation-negativePrimary"),
-  negativeSecondary: V3("variation-negativeSecondary"),
-  neutralPrimary: V3("variation-neutralPrimary"),
-  neutralSecondary: V3("variation-neutralSecondary")
-};
-var CHART_PALETTES = {
-  default: [V3("single")],
+var DIMMED = (path) => `var(--cmp-chart-line-point-dimmed-palette-${path})`;
+var colorsOf = (v) => ({
+  positivePrimary: v("variation-positivePrimary"),
+  positiveSecondary: v("variation-positiveSecondary"),
+  negativePrimary: v("variation-negativePrimary"),
+  negativeSecondary: v("variation-negativeSecondary"),
+  neutralPrimary: v("variation-neutralPrimary"),
+  neutralSecondary: v("variation-neutralSecondary")
+});
+var palettesOf = (v) => ({
+  default: [v("single")],
   multi: [
-    V3("multi-blue"),
-    V3("multi-skyblue"),
-    V3("multi-yellow"),
-    V3("multi-olive"),
-    V3("multi-lightRed"),
-    V3("multi-warmBlue"),
-    V3("multi-orange"),
-    V3("multi-green"),
-    V3("multi-navy"),
-    V3("multi-grey"),
-    V3("multi-red")
+    v("multi-blue"),
+    v("multi-skyblue"),
+    v("multi-yellow"),
+    v("multi-olive"),
+    v("multi-lightRed"),
+    v("multi-warmBlue"),
+    v("multi-orange"),
+    v("multi-green"),
+    v("multi-navy"),
+    v("multi-grey"),
+    v("multi-red")
   ],
   gradation: [
-    V3("gradation-1"),
-    V3("gradation-2"),
-    V3("gradation-3"),
-    V3("gradation-4"),
-    V3("gradation-5"),
-    V3("gradation-6")
+    v("gradation-1"),
+    v("gradation-2"),
+    v("gradation-3"),
+    v("gradation-4"),
+    v("gradation-5"),
+    v("gradation-6")
   ]
-};
-function paletteColor(palette, index, colors) {
+});
+var CHART_COLORS = colorsOf(V3);
+var CHART_PALETTES = palettesOf(V3);
+var DIMMED_COLORS = colorsOf(DIMMED);
+var DIMMED_PALETTES = palettesOf(DIMMED);
+function pick(names, palettes, palette, index, colors) {
   if (palette === "custom") {
-    if (!colors?.length) return CHART_PALETTES.default[0];
-    return CHART_COLORS[colors[index % colors.length]];
+    if (!colors?.length) return palettes.default[0];
+    return names[colors[index % colors.length]];
   }
-  const list = CHART_PALETTES[palette] ?? CHART_PALETTES.default;
+  const list = palettes[palette] ?? palettes.default;
   return list[index % list.length];
 }
+function paletteColor(palette, index, colors) {
+  return pick(CHART_COLORS, CHART_PALETTES, palette, index, colors);
+}
+function linePointDimmedColor(palette, index, colors) {
+  return pick(DIMMED_COLORS, DIMMED_PALETTES, palette, index, colors);
+}
 function useElementSize() {
   const ref = react.useRef(null);
   const [size, setSize] = react.useState({ width: 0, height: 0 });
@@ -19556,7 +19807,8 @@ function ChartTooltip({
         "pointer-events-none absolute top-0 left-0 z-10 w-max",
         "flex flex-col gap-(--cmp-chart-chartTooltip-gap)",
         "px-(--cmp-chart-chartTooltip-paddingX) py-(--cmp-chart-chartTooltip-paddingY)",
-        "rounded-(--cmp-chart-chartTooltip-radius) bg-(--cmp-chart-chartTooltip-bg) shadow-floating",
+        "rounded-(--cmp-chart-chartTooltip-radius) bg-(--cmp-chart-chartTooltip-bg)",
+        "shadow-(--cmp-chart-chartTooltip-shadow)",
         className
       ),
       style: {
@@ -19603,12 +19855,12 @@ var BAR_SIZE_MAX = 80;
 var BAR_GAP = 6;
 var GROUP_PADDING_MIN = 8;
 var GROUP_PADDING_MAX = 24;
-var VALUE_LABEL_GAP = 6;
+var VALUE_LABEL_GAP = 4;
 var BAR_RADIUS = 8;
-var BAR_OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
+var BAR_OPACITY_DEFAULT = "var(--cmp-chart-opacity-default)";
 var BAR_OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
 var BAR_OPACITY_HOVER = 1;
-var BAR_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+var BAR_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 var BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";
 var BAR_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
 var BAR_HOVER_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
@@ -19668,6 +19920,8 @@ function barPath(x, y, width, height, direction, negative) {
 var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   categories,
   series,
+  title,
+  unit,
   direction = "vertical",
   stacked = false,
   palette = "default",
@@ -20133,6 +20387,8 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20173,18 +20429,18 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
 });
 
 // src/components/SLineChart/lineChart.config.ts
-var LINE_WIDTH = 2;
-var POINT_RADIUS = 4;
-var POINT_HOVER_RADIUS = 9.5;
-var POINT_HOVER_BORDER_WIDTH = 1;
-var POINT_HOVER_INNER_RADIUS = 5;
-var POINT_HOVER_BG = "var(--cmp-chart-bg)";
-var POINT_HOVER_EXTENT = POINT_HOVER_RADIUS + POINT_HOVER_BORDER_WIDTH / 2;
+var LINE_WIDTH = "var(--cmp-chart-line-width)";
+var LINE_OPACITY = "var(--cmp-chart-line-opacity)";
+var POINT_RADIUS = 5;
+var POINT_HOVER_RADIUS = 6;
+var POINT_HALO_RADIUS = 12;
+var POINT_HALO_OPACITY = "var(--cmp-chart-line-point-opacity-bg)";
+var POINT_HOVER_EXTENT = POINT_HALO_RADIUS;
 var BAND_MIN = 40;
-var VALUE_LABEL_GAP2 = 6;
-var AREA_OPACITY_TOP = "30%";
-var AREA_OPACITY_BOTTOM = "var(--opacity-005)";
-var LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+var VALUE_LABEL_GAP2 = 4;
+var AREA_OPACITY_TOP = "var(--cmp-chart-line-area-gradation-start)";
+var AREA_OPACITY_BOTTOM = "var(--cmp-chart-line-area-gradation-end)";
+var LINE_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 var LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";
 var LINE_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
 var r = (value) => Math.round(value * 100) / 100;
@@ -20264,6 +20520,8 @@ function runsOf(row) {
 var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   categories,
   series,
+  title,
+  unit,
   curve = "linear",
   area = false,
   stacked = false,
@@ -20293,6 +20551,10 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
     [palette, customColors]
   );
+  const dimmedColorAt = react.useCallback(
+    (seriesIndex) => linePointDimmedColor(palette, seriesIndex, customColors),
+    [palette, customColors]
+  );
   const rows = react.useMemo(() => {
     const running = categories.map(() => 0);
     return series.map(
@@ -20464,10 +20726,13 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             "aria-hidden": true,
             d,
             fill: "none",
-            strokeWidth: LINE_WIDTH,
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            style: { stroke: colorAt(seriesIndex) }
+            style: {
+              stroke: colorAt(seriesIndex),
+              strokeWidth: LINE_WIDTH,
+              strokeOpacity: LINE_OPACITY
+            }
           },
           `line-${seriesIndex}-${runIndex}`
         );
@@ -20484,6 +20749,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
         const hovered = hoveredCategory === categoryIndex;
         if (!showPoint && !hovered) return;
         const color = colorAt(seriesIndex);
+        const dimmed = hoveredCategory != null && !hovered;
         const key = `${seriesIndex}-${categoryIndex}`;
         if (hovered) {
           halos.push(
@@ -20493,12 +20759,8 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
                 "aria-hidden": true,
                 cx: point.x,
                 cy: point.y,
-                r: POINT_HOVER_RADIUS,
-                style: {
-                  fill: POINT_HOVER_BG,
-                  stroke: color,
-                  strokeWidth: POINT_HOVER_BORDER_WIDTH
-                }
+                r: POINT_HALO_RADIUS,
+                style: { fill: color, fillOpacity: POINT_HALO_OPACITY }
               },
               `halo-${key}`
             )
@@ -20510,8 +20772,11 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             {
               cx: point.x,
               cy: point.y,
-              r: hovered ? POINT_HOVER_INNER_RADIUS : POINT_RADIUS,
-              style: { fill: color, cursor: onPointClick ? "pointer" : void 0 },
+              r: hovered ? POINT_HOVER_RADIUS : POINT_RADIUS,
+              style: {
+                fill: dimmed ? dimmedColorAt(seriesIndex) : color,
+                cursor: onPointClick ? "pointer" : void 0
+              },
               onClick: onPointClick ? () => onPointClick({ seriesIndex, categoryIndex, value: point.own }) : void 0,
               children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${series[seriesIndex]?.name ?? ""} ${formatValue(point.own)}` })
             },
@@ -20521,7 +20786,17 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
       });
     });
     return { pointHalos: halos, pointDots: dots };
-  }, [plotted, showPoint, hoveredCategory, colorAt, onPointClick, categories, series, formatValue]);
+  }, [
+    plotted,
+    showPoint,
+    hoveredCategory,
+    colorAt,
+    dimmedColorAt,
+    onPointClick,
+    categories,
+    series,
+    formatValue
+  ]);
   const valueLabels = react.useMemo(
     () => showValueLabel ? plotted.flatMap(
       (row, seriesIndex) => row.map(
@@ -20547,6 +20822,8 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20682,8 +20959,9 @@ var LABEL_MIN_RATIO = 0.05;
 var PIE_LABEL_RADIUS_RATIO = 0.65;
 var HOVER_GROW = 4;
 var HOVER_CORNER = 2;
-var OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
-var OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
+var OPACITY_DEFAULT = "var(--cmp-chart-opacity-default)";
+var OPACITY_DIMMED = "var(--cmp-chart-doughnut-opacity-dimmed)";
+var SLICE_HOVER_SHADOW = "var(--cmp-chart-doughnut-shadow-hover-filter)";
 var OPACITY_HOVER = 1;
 var defaultFormat3 = (value) => value.toLocaleString();
 function formatRatio(ratio) {
@@ -20733,6 +21011,8 @@ function slicePath(center, outer, inner, start, end, corner = 0) {
 }
 var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
   data,
+  title,
+  unit,
   palette = "multi",
   colors,
   showValueLabel = false,
@@ -20804,6 +21084,8 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20814,6 +21096,7 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
           {
             width: diameter,
             height: diameter,
+            overflow: "visible",
             role: "img",
             "aria-label": `${arcs.length}\uAC1C \uD56D\uBAA9 ${kind}`,
             onMouseLeave: () => setHovered(null),
@@ -20826,7 +21109,7 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                     "aria-hidden": true,
                     d: slicePath(center, outer, inner, 0, Math.PI * 2),
                     fillRule: "evenodd",
-                    style: { fill: "var(--cmp-chart-grid-line-color)" }
+                    style: { fill: "var(--cmp-chart-gridline-color)" }
                   }
                 )
               ) : arcs.map((arc2) => {
@@ -20840,6 +21123,10 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                     style: {
                       fill: arc2.color,
                       opacity,
+                      // 짚은 조각만 떠오른다. SVG 도형에는 box-shadow 가 걸리지 않아
+                      // 같은 토큰의 filter 형태를 쓴다 (drop-shadow 에는 spread 가 없다 —
+                      // 토큰의 음수 spread 만큼 설계보다 조금 넓게 깔린다).
+                      filter: hovered === arc2.index ? SLICE_HOVER_SHADOW : void 0,
                       cursor: onSliceClick ? "pointer" : void 0
                     },
                     onMouseEnter: () => setHovered(arc2.index),
@@ -23410,6 +23697,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   onFocus,
   onBlur,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -23498,6 +23786,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
     {
       name,
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -25385,7 +25674,7 @@ function ListBox({
     "div",
     {
       className: cn(
-        "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+        "overflow-hidden border border-solid shadow-[var(--cmp-chipFilter-listbox-shadow)]",
         maxHeight && "flex flex-col"
       ),
       style: {
@@ -25470,6 +25759,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   loadingRecommendedItems = false,
   dropdownMinWidth = 200,
   label,
+  labelPosition,
   labelWidth,
   hint,
   errorMessage,
@@ -25610,6 +25900,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
@@ -25928,6 +26219,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     inputClassName,
     inputStyle,
     label,
+    labelPosition,
     labelWidth,
     icon,
     iconColor,
@@ -25964,6 +26256,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
       SField,
       {
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -26333,6 +26626,7 @@ function STimePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26387,6 +26681,7 @@ function STimePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -26799,6 +27094,7 @@ function STimeRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26855,6 +27151,7 @@ function STimeRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -26986,6 +27283,10 @@ exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
 exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
 exports.CHIP_COLORS = CHIP_COLORS;
 exports.COLOR_KEYS = COLOR_KEYS;
+exports.CONTEXT_ALERT_DEFAULT_ICON = CONTEXT_ALERT_DEFAULT_ICON;
+exports.CONTEXT_ALERT_ICON_COLOR = CONTEXT_ALERT_ICON_COLOR;
+exports.CONTEXT_ALERT_INTENTS = CONTEXT_ALERT_INTENTS;
+exports.CONTEXT_ALERT_SURFACE = CONTEXT_ALERT_SURFACE;
 exports.FIELD_WIDTH_GRADES = FIELD_WIDTH_GRADES;
 exports.GNB_COLORS = GNB_COLORS;
 exports.GNB_COMMON = GNB_COMMON;
@@ -27040,6 +27341,7 @@ exports.SChipFilter = SChipFilter;
 exports.SChipInput = SChipInput;
 exports.SCircleProgress = SCircleProgress;
 exports.SConfirmModal = SConfirmModal;
+exports.SContextAlert = SContextAlert;
 exports.SDatePicker = SDatePicker;
 exports.SDatePickerMonthListbox = SDatePickerMonthListbox;
 exports.SDatePickerYearListbox = SDatePickerYearListbox;