sellmate-design-system-react 9.0.0-beta.64 → 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,
         {
@@ -14761,6 +14877,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   onSearchChange,
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -15193,6 +15310,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -16923,6 +17041,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   inputClassName,
   inputStyle,
   label,
+  labelPosition,
   labelWidth,
   labelTooltip,
   labelTooltipProps,
@@ -16966,6 +17085,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelTooltip,
       labelTooltipProps,
@@ -17156,6 +17276,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   focused,
   hovered,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -17325,6 +17446,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -17612,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(
@@ -17697,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"
@@ -18043,6 +18165,7 @@ function SDatePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -18115,6 +18238,7 @@ function SDatePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18577,6 +18701,7 @@ function SDateRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -18649,6 +18774,7 @@ function SDateRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -18953,6 +19079,7 @@ function SFilePicker({
   status,
   size = "sm",
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -19137,6 +19264,7 @@ function SFilePicker({
       {
         borderless: inline,
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -19402,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;
@@ -19480,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",
     {
@@ -19493,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
@@ -19543,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 });
@@ -19660,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: {
@@ -19707,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";
@@ -19772,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",
@@ -20237,6 +20387,8 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20277,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;
@@ -20368,6 +20520,8 @@ function runsOf(row) {
 var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   categories,
   series,
+  title,
+  unit,
   curve = "linear",
   area = false,
   stacked = false,
@@ -20397,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(
@@ -20568,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}`
         );
@@ -20588,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(
@@ -20597,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}`
             )
@@ -20614,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)}` })
             },
@@ -20625,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(
@@ -20651,6 +20822,8 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20786,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) {
@@ -20837,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,
@@ -20908,6 +21084,8 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
     ChartFrame,
     {
       ref,
+      title,
+      unit,
       legend,
       legendPosition,
       className,
@@ -20918,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),
@@ -20930,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) => {
@@ -20944,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),
@@ -23514,6 +23697,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   onFocus,
   onBlur,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -23602,6 +23786,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
     {
       name,
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -25489,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: {
@@ -25574,6 +25759,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   loadingRecommendedItems = false,
   dropdownMinWidth = 200,
   label,
+  labelPosition,
   labelWidth,
   hint,
   errorMessage,
@@ -25714,6 +25900,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
@@ -26032,6 +26219,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     inputClassName,
     inputStyle,
     label,
+    labelPosition,
     labelWidth,
     icon,
     iconColor,
@@ -26068,6 +26256,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
       SField,
       {
         label,
+        labelPosition,
         labelWidth,
         icon,
         iconColor,
@@ -26437,6 +26626,7 @@ function STimePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26491,6 +26681,7 @@ function STimePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -26903,6 +27094,7 @@ function STimeRangePicker({
   rules,
   status,
   label,
+  labelPosition,
   labelWidth,
   icon,
   iconColor,
@@ -26959,6 +27151,7 @@ function STimeRangePicker({
     SField,
     {
       label,
+      labelPosition,
       labelWidth,
       icon,
       iconColor,
@@ -27090,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;
@@ -27144,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;