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

package/dist/index.js

@@ -4122,7 +4122,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,
@@ -4711,6 +4711,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
   iconColor,
   labelTooltip = "",
   labelTooltipProps,
+  labelPosition = "left",
   labelWidth,
   labelHeight,
   size = "sm",
@@ -4753,6 +4754,7 @@ var SField = /* @__PURE__ */ 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."
@@ -4791,103 +4793,120 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
       style,
       onMouseEnter,
       onMouseLeave,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start", children: [
-        label !== "" && /* @__PURE__ */ 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__ */ jsx(
-                SIcon,
-                {
-                  name: icon,
-                  size: s.icon,
-                  color: iconColor,
-                  style: { marginRight: s.labelGap }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
-                STooltip2,
-                {
-                  message: labelTooltip !== "" ? [labelTooltip] : void 0,
-                  iconSize: s.icon,
-                  ...labelTooltipProps
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
-            style: {
-              width: resolvedWidth,
-              minWidth: fieldWidthValue(minWidth),
-              maxWidth: resolvedMaxWidth
-            },
-            children: [
-              /* @__PURE__ */ 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__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex w-full",
+            labelOnTop ? "flex-col gap-(--sys-space-field-vertical-gap)" : "items-start"
+          ),
+          children: [
+            label !== "" && /* @__PURE__ */ 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__ */ 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__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                          effectiveAddonLabel
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
-                  ]
-                }
-              ),
-              showError ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                    SIcon,
+                    {
+                      name: icon,
+                      size: s.icon,
+                      color: iconColor,
+                      style: { marginRight: s.labelGap }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
+                    STooltip2,
+                    {
+                      message: labelTooltip !== "" ? [labelTooltip] : void 0,
+                      iconSize: s.icon,
+                      ...labelTooltipProps
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                              effectiveAddonLabel
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
+                      ]
+                    }
+                  ),
+                  showError ? /* @__PURE__ */ 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__ */ 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
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 });
@@ -4924,6 +4943,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
   textareaClassName,
   textareaStyle,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -4983,6 +5003,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -6950,7 +6971,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))]"
             )
           }
         )
@@ -7103,7 +7124,12 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
                 onToggle?.(node, event);
               }
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "size-(--cmp-tree-item-arrow-icon) shrink-0", "aria-hidden": "true" }),
+          ) : (
+            // 자식이 없는 줄은 펼침 버튼 자리를 빈 칸으로 남겨 라벨의 시작점을 맞춘다.
+            // 크기는 자리를 대신하는 그 버튼(`SGhostButton size="xxs"`)의 토큰을 그대로 쓴다 —
+            // 버튼 크기가 바뀌면 빈 칸도 같이 따라가야 줄이 어긋나지 않는다.
+            /* @__PURE__ */ jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
+          ),
           leadingNode,
           selectable && /* @__PURE__ */ jsx(
             "span",
@@ -8046,6 +8072,96 @@ var SCallout = /* @__PURE__ */ forwardRef(function SCallout2({ type = "default",
     }
   );
 });
+
+// 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__ */ 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__ */ 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__ */ jsx(
+          SIcon,
+          {
+            name: icon,
+            size: "var(--cmp-contextAlert-icon)",
+            color: CONTEXT_ALERT_ICON_COLOR,
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
+            "p",
+            {
+              className: "m-0 break-keep break-words text-pretty",
+              dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+            },
+            `${i}-${m}`
+          )
+        )) }),
+        action2 != null && /* @__PURE__ */ 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)",
@@ -10044,7 +10160,7 @@ function SConfirmModal({
               }
             )
           ] }),
-          hasBody && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsx(
               "p",
               {
@@ -10230,7 +10346,7 @@ function SLoadingModal({
         lines.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: lines.map((m, i) => /* @__PURE__ */ 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
@@ -11985,7 +12101,7 @@ var SGnb = /* @__PURE__ */ 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__ */ jsx(
         SLauncherListBox,
         {
@@ -13689,6 +13805,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",
@@ -13733,7 +13941,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;
@@ -13753,10 +13964,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);
@@ -13766,7 +13980,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__ */ jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
@@ -13800,7 +14014,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -13813,6 +14027,7 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
+      style,
       onClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -13831,6 +14046,9 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
     }
   );
 });
+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__ */ forwardRef(function CalendarDayCard2({
   date,
   day,
@@ -13839,9 +14057,11 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   isSelected,
   selectable,
   color,
-  events,
+  segments,
+  dayEventCount,
   body,
   hiddenCount,
+  moreLane,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -13849,7 +14069,7 @@ var CalendarDayCard = /* @__PURE__ */ 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?.();
@@ -13884,7 +14104,7 @@ var CalendarDayCard = /* @__PURE__ */ 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__ */ jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsx(
@@ -13903,39 +14123,41 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
             children: day
           }
         ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
+        body != null && /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                CalendarEventButton,
-                {
-                  event,
-                  onSelect: (ev, e) => {
-                    e.stopPropagation();
-                    onEventClick?.(ev, e);
-                  }
-                },
-                event.id ?? `${event.date}-${i}`
-              )),
-              hiddenCount > 0 && /* @__PURE__ */ 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__ */ 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?.();
+            }
           }
         )
       ]
@@ -14069,16 +14291,14 @@ function SCalendarBoard({
     observer.observe(cell);
     return () => observer.disconnect();
   }, [rowCount]);
-  const eventMap = 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 = 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];
   useLayoutEffect(() => {
     if (openDate == null || panelEl == null) return;
     const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
@@ -14219,11 +14439,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__ */ jsx(
                       CalendarDayCard,
                       {
@@ -14234,9 +14452,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),
@@ -14629,6 +14849,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   onSearchChange,
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -15061,6 +15282,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -16791,6 +17013,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
   inputClassName,
   inputStyle,
   label,
+  labelPosition,
   labelWidth,
   labelTooltip,
   labelTooltipProps,
@@ -16834,6 +17057,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelTooltip,
       labelTooltipProps,
@@ -17024,6 +17248,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
   focused,
   hovered,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -17193,6 +17418,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -17480,7 +17706,7 @@ function SCalendar({
     if (e !== "" && date > e) return true;
     return false;
   };
-  const pick = (date) => {
+  const pick2 = (date) => {
     if (!isDisabled(date)) onValueChange?.(date);
   };
   return /* @__PURE__ */ jsxs(
@@ -17565,7 +17791,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"
@@ -17911,6 +18137,7 @@ function SDatePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -17983,6 +18210,7 @@ function SDatePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18445,6 +18673,7 @@ function SDateRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -18517,6 +18746,7 @@ function SDateRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18821,6 +19051,7 @@ function SFilePicker({
   status,
   size = "sm",
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -19005,6 +19236,7 @@ function SFilePicker({
       {
         borderless: inline,
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -19270,7 +19502,7 @@ function ChartGrid({ scale, direction, width, height }) {
   return /* @__PURE__ */ 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;
@@ -19348,7 +19580,7 @@ function ChartAxisLabels({
     }
   );
 }
-var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ title, unit, legend, legendPosition = "top", children, className, style, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -19361,6 +19593,14 @@ var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ legend, legen
       style,
       ...props,
       children: [
+        (title || unit) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-(--cmp-chart-gap)", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "typo-body-md-medium text-(--cmp-chart-title-color)", children: title }),
+          unit && // ml-auto — title 유무와 관계없이 항상 오른쪽 끝에 붙는다.
+          /* @__PURE__ */ 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
@@ -19411,46 +19651,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 = useRef(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
@@ -19528,7 +19779,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: {
@@ -19575,12 +19827,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";
@@ -19640,6 +19892,8 @@ function barPath(x, y, width, height, direction, negative) {
 var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
   categories,
   series,
+  title,
+  unit,
   direction = "vertical",
   stacked = false,
   palette = "default",
@@ -20105,6 +20359,8 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20145,18 +20401,18 @@ var SBarChart = /* @__PURE__ */ 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;
@@ -20236,6 +20492,8 @@ function runsOf(row) {
 var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   categories,
   series,
+  title,
+  unit,
   curve = "linear",
   area = false,
   stacked = false,
@@ -20265,6 +20523,10 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
     (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
     [palette, customColors]
   );
+  const dimmedColorAt = useCallback(
+    (seriesIndex) => linePointDimmedColor(palette, seriesIndex, customColors),
+    [palette, customColors]
+  );
   const rows = useMemo(() => {
     const running = categories.map(() => 0);
     return series.map(
@@ -20436,10 +20698,13 @@ var SLineChart = /* @__PURE__ */ 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}`
         );
@@ -20456,6 +20721,7 @@ var SLineChart = /* @__PURE__ */ 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(
@@ -20465,12 +20731,8 @@ var SLineChart = /* @__PURE__ */ 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}`
             )
@@ -20482,8 +20744,11 @@ var SLineChart = /* @__PURE__ */ 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__ */ jsx("title", { children: `${categories[categoryIndex]} ${series[seriesIndex]?.name ?? ""} ${formatValue(point.own)}` })
             },
@@ -20493,7 +20758,17 @@ var SLineChart = /* @__PURE__ */ 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 = useMemo(
     () => showValueLabel ? plotted.flatMap(
       (row, seriesIndex) => row.map(
@@ -20519,6 +20794,8 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20654,8 +20931,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) {
@@ -20705,6 +20983,8 @@ function slicePath(center, outer, inner, start, end, corner = 0) {
 }
 var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   data,
+  title,
+  unit,
   palette = "multi",
   colors,
   showValueLabel = false,
@@ -20776,6 +21056,8 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20786,6 +21068,7 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
           {
             width: diameter,
             height: diameter,
+            overflow: "visible",
             role: "img",
             "aria-label": `${arcs.length}\uAC1C \uD56D\uBAA9 ${kind}`,
             onMouseLeave: () => setHovered(null),
@@ -20798,7 +21081,7 @@ var RadialChart = /* @__PURE__ */ 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) => {
@@ -20812,6 +21095,10 @@ var RadialChart = /* @__PURE__ */ 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),
@@ -23382,6 +23669,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
   onFocus,
   onBlur,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -23470,6 +23758,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
     {
       name,
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -25357,7 +25646,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: {
@@ -25442,6 +25731,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   loadingRecommendedItems = false,
   dropdownMinWidth = 200,
   label,
+  labelPosition,
   labelWidth,
   hint,
   errorMessage,
@@ -25582,6 +25872,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
@@ -25900,6 +26191,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     inputClassName,
     inputStyle,
     label,
+    labelPosition,
     labelWidth,
     icon,
     iconColor,
@@ -25936,6 +26228,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
       SField,
       {
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -26305,6 +26598,7 @@ function STimePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26359,6 +26653,7 @@ function STimePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -26771,6 +27066,7 @@ function STimeRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26827,6 +27123,7 @@ function STimeRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -26935,6 +27232,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_DEFAULT_ICON, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map