sellmate-design-system-react 9.0.0-beta.101 → 9.0.0-beta.103

package/dist/index.cjs

@@ -272,6 +272,126 @@ var fieldWidthValue = (v) => {
   if (isFieldWidthGrade(v)) return `var(--cmp-field-width-${v})`;
   return typeof v === "number" ? `${v}px` : v;
 };
+
+// src/lib/locale.ts
+var SLOCALES = ["ko", "en", "ja", "zh"];
+var DEFAULT_LOCALE = "ko";
+var BUNDLES = {
+  ko: {
+    pagination: {
+      firstPage: "\uCCAB \uD398\uC774\uC9C0",
+      prevPage: "\uC774\uC804 \uD398\uC774\uC9C0",
+      nextPage: "\uB2E4\uC74C \uD398\uC774\uC9C0",
+      lastPage: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
+      prevGroup: "\uC774\uC804 \uADF8\uB8F9",
+      nextGroup: "\uB2E4\uC74C \uADF8\uB8F9"
+    },
+    select: {
+      placeholder: "\uC120\uD0DD",
+      allSelected: "\uC804\uCCB4",
+      clear: "\uC120\uD0DD \uC9C0\uC6B0\uAE30",
+      deselect: (label) => `${label} \uC120\uD0DD \uD574\uC81C`,
+      searchPlaceholder: "\uAC80\uC0C9",
+      empty: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      loading: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+    }
+  },
+  en: {
+    pagination: {
+      firstPage: "First page",
+      prevPage: "Previous page",
+      nextPage: "Next page",
+      lastPage: "Last page",
+      prevGroup: "Previous pages",
+      nextGroup: "Next pages"
+    },
+    select: {
+      placeholder: "Select",
+      allSelected: "All",
+      clear: "Clear selection",
+      deselect: (label) => `Deselect ${label}`,
+      searchPlaceholder: "Search",
+      empty: "No items to display.",
+      loading: "Loading..."
+    }
+  },
+  ja: {
+    pagination: {
+      firstPage: "\u6700\u521D\u306E\u30DA\u30FC\u30B8",
+      prevPage: "\u524D\u306E\u30DA\u30FC\u30B8",
+      nextPage: "\u6B21\u306E\u30DA\u30FC\u30B8",
+      lastPage: "\u6700\u5F8C\u306E\u30DA\u30FC\u30B8",
+      prevGroup: "\u524D\u306E\u30B0\u30EB\u30FC\u30D7",
+      nextGroup: "\u6B21\u306E\u30B0\u30EB\u30FC\u30D7"
+    },
+    select: {
+      placeholder: "\u9078\u629E",
+      allSelected: "\u3059\u3079\u3066",
+      clear: "\u9078\u629E\u3092\u30AF\u30EA\u30A2",
+      deselect: (label) => `${label} \u306E\u9078\u629E\u3092\u89E3\u9664`,
+      searchPlaceholder: "\u691C\u7D22",
+      empty: "\u8868\u793A\u3059\u308B\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093\u3002",
+      loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D..."
+    }
+  },
+  zh: {
+    pagination: {
+      firstPage: "\u7B2C\u4E00\u9875",
+      prevPage: "\u4E0A\u4E00\u9875",
+      nextPage: "\u4E0B\u4E00\u9875",
+      lastPage: "\u6700\u540E\u4E00\u9875",
+      prevGroup: "\u4E0A\u4E00\u7EC4",
+      nextGroup: "\u4E0B\u4E00\u7EC4"
+    },
+    select: {
+      placeholder: "\u8BF7\u9009\u62E9",
+      allSelected: "\u5168\u90E8",
+      clear: "\u6E05\u9664\u9009\u62E9",
+      deselect: (label) => `\u53D6\u6D88\u9009\u62E9 ${label}`,
+      searchPlaceholder: "\u641C\u7D22",
+      empty: "\u6CA1\u6709\u53EF\u663E\u793A\u7684\u9879\u76EE\u3002",
+      loading: "\u52A0\u8F7D\u4E2D..."
+    }
+  }
+};
+function normalizeLocale(locale) {
+  if (!locale) return DEFAULT_LOCALE;
+  const lang = locale.toLowerCase().split(/[-_]/)[0];
+  return SLOCALES.includes(lang) ? lang : DEFAULT_LOCALE;
+}
+function mergeDefined(base, override) {
+  const next = { ...base };
+  if (!override) return next;
+  for (const key of Object.keys(override)) {
+    if (override[key] !== void 0) next[key] = override[key];
+  }
+  return next;
+}
+function resolveMessages(locale, override) {
+  const base = BUNDLES[normalizeLocale(locale)];
+  return {
+    pagination: mergeDefined(base.pagination, override?.pagination),
+    select: mergeDefined(base.select, override?.select)
+  };
+}
+function createValue(locale, override) {
+  const normalized = normalizeLocale(locale);
+  const numberFormat = new Intl.NumberFormat(normalized);
+  return {
+    locale: normalized,
+    messages: resolveMessages(normalized, override),
+    formatNumber: (value) => numberFormat.format(value)
+  };
+}
+var DEFAULT_VALUE = createValue(void 0);
+var LocaleContext = /* @__PURE__ */ react.createContext(DEFAULT_VALUE);
+function SLocaleProvider({ locale, messages, children }) {
+  const value = react.useMemo(() => createValue(locale, messages), [locale, messages]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LocaleContext.Provider, { value, children });
+}
+function useLocale() {
+  return react.useContext(LocaleContext);
+}
 var Icon_account = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1739,6 +1859,41 @@ var Icon_date = (p) => {
     }
   );
 };
+var Icon_dollar = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 5V7.1M12 7.1V12M12 7.1H15.3333M12 7.1H10.3333C9.04467 7.1 8 8.1969 8 9.55C8 10.9031 9.04467 12 10.3333 12H12M12 12V16.9M12 12H13.6667C14.9553 12 16 13.0969 16 14.45C16 15.8031 14.9553 16.9 13.6667 16.9H12M12 16.9V19M12 16.9H8.66667",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_dot = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1955,6 +2110,54 @@ var Icon_focus = (p) => {
     }
   );
 };
+var Icon_fullscreen = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M9 3H4C3.44772 3 3 3.44772 3 4V9M15 3H20C20.5523 3 21 3.44772 21 4V9M21 15V20C21 20.5523 20.5523 21 20 21H15M9 21H4C3.44772 21 3 20.5523 3 20V15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+var Icon_fullscreenExit = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3 9H8C8.55228 9 9 8.55228 9 8V3M15 3V8C15 8.55228 15.4477 9 16 9H21M21 15H16C15.4477 15 15 15.4477 15 16V21M9 21V16C9 15.4477 8.55228 15 8 15H3",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
 var Icon_global = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3657,6 +3860,7 @@ var ICONS = {
   coupon: Icon_coupon,
   dashboard: Icon_dashboard,
   date: Icon_date,
+  dollar: Icon_dollar,
   dot: Icon_dot,
   download: Icon_download,
   drag: Icon_drag,
@@ -3664,6 +3868,8 @@ var ICONS = {
   etc: Icon_etc,
   event: Icon_event,
   focus: Icon_focus,
+  fullscreen: Icon_fullscreen,
+  fullscreenExit: Icon_fullscreenExit,
   global: Icon_global,
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
@@ -10449,7 +10655,17 @@ function TokenIcon2({ name, size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
 var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
-  function SSystemActionButton2({ color = "light", type, label, option, disabled = false, className, style, ...rest }, ref) {
+  function SSystemActionButton2({
+    color = "light",
+    type,
+    label,
+    labelSlot,
+    option,
+    disabled = false,
+    className,
+    style,
+    ...rest
+  }, ref) {
     const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
     const spec = SYSTEM_ACTION_BUTTON_TYPE_CONFIG[type];
     const listBox = type === "account" ? option ?? {} : void 0;
@@ -10537,7 +10753,19 @@ var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
               icon: "dot",
               label: selected?.label ?? status.value
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }) }),
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+            labelSlot != null && // 라벨↔슬롯 간격에 대응 토큰이 없어 아이콘↔라벨 간격을 같은 호흡으로 쓴다.
+            // 라벨이 없으면 슬롯이 아이콘 바로 옆에서 시작하도록 간격은 라벨이 있을 때만 준다.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "inline-flex shrink-0 items-center",
+                style: label != null ? { marginLeft: SYSTEM_ACTION_BUTTON_LAYOUT.iconLabelGap } : void 0,
+                children: labelSlot
+              }
+            )
+          ] }) }),
           (actionText != null || spec.actionIcon) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center", style: { gap: SYSTEM_ACTION_BUTTON_LAYOUT.actionGap }, children: [
             actionText != null && spec.actionText && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -14087,8 +14315,10 @@ var PAGE_PADDINGS = ["default", "none"];
 var PAGE_CONTENT_WIDTHS = ["full", "fixed", "fixedCenter"];
 var PAGE_HEADER_VARIANTS = ["plain", "bar"];
 var SPageHeader = /* @__PURE__ */ withDisplayName(
-  react.forwardRef(function SPageHeader2({ title, subText, variant, onBack, slot, scrolled, className, style, ...rest }, ref) {
+  react.forwardRef(function SPageHeader2({ title, subText, titleSlot, variant, onBack, slot, scrolled, className, style, ...rest }, ref) {
     const hasBack = onBack != null;
+    const hasTitleSlot = titleSlot != null && titleSlot !== false;
+    const titleEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title });
     const bar = variant === "bar";
     const column = react.useContext(SPageColumnContext);
     const isScrolled = scrolled ?? column?.scrolled ?? false;
@@ -14138,7 +14368,13 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
                     !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                    hasTitleSlot ? (
+                      // max-w-full: plain 의 열은 items-start 라 래퍼가 내용 폭을 따라가 긴 제목이 잘리지 않고 태그를 밀어낸다
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full min-w-0 items-center gap-(--cmp-pageHeader-gap)", children: [
+                        titleEl,
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: titleSlot })
+                      ] })
+                    ) : titleEl,
                     subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
                   ]
                 }
@@ -14307,6 +14543,7 @@ function SPagination({
   className,
   style
 }) {
+  const t = useLocale().messages.pagination;
   const start = Math.floor((currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
   const end = Math.min(start + PER_PAGE - 1, lastPage);
   const pageNumbers = Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
@@ -14333,18 +14570,18 @@ function SPagination({
     }
   );
   const prevButtons = simple ? currentPage > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronLeftEnd", "\uCCAB \uD398\uC774\uC9C0", () => go(1)),
-    navBtn("chevronLeft", "\uC774\uC804 \uD398\uC774\uC9C0", () => go(currentPage - 1))
+    navBtn("chevronLeftEnd", t.firstPage, () => go(1)),
+    navBtn("chevronLeft", t.prevPage, () => go(currentPage - 1))
   ] }) : !isFirstGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronLeftEnd", "\uCCAB \uD398\uC774\uC9C0", () => go(1)),
-    navBtn("chevronLeft", "\uC774\uC804 \uADF8\uB8F9", () => groupMove("backward"))
+    navBtn("chevronLeftEnd", t.firstPage, () => go(1)),
+    navBtn("chevronLeft", t.prevGroup, () => groupMove("backward"))
   ] });
   const nextButtons = simple ? currentPage < lastPage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronRight", "\uB2E4\uC74C \uD398\uC774\uC9C0", () => go(currentPage + 1)),
-    navBtn("chevronRightEnd", "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", () => go(lastPage))
+    navBtn("chevronRight", t.nextPage, () => go(currentPage + 1)),
+    navBtn("chevronRightEnd", t.lastPage, () => go(lastPage))
   ] }) : !isLastGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronRight", "\uB2E4\uC74C \uADF8\uB8F9", () => groupMove("forward")),
-    navBtn("chevronRightEnd", "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", () => go(lastPage))
+    navBtn("chevronRight", t.nextGroup, () => groupMove("forward")),
+    navBtn("chevronRightEnd", t.lastPage, () => go(lastPage))
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -14381,6 +14618,224 @@ function SPagination({
   );
 }
 
+// src/components/SSectionNav/section-nav-scroll.ts
+var ACTIVATE_RATIO = 0.25;
+function pickActiveIndex(tops, m) {
+  if (tops.length === 0) return -1;
+  const atBottom = m.scrollTop > 0 && m.scrollTop + m.clientHeight >= m.scrollHeight - 1;
+  const last = tops.length - 1;
+  if (atBottom && tops[last] < m.clientHeight) return last;
+  const line = m.clientHeight * ACTIVATE_RATIO;
+  let active = 0;
+  tops.forEach((top, i) => {
+    if (top <= line) active = i;
+  });
+  return active;
+}
+function findSection(id, scope) {
+  if (!scope) return document.getElementById(id);
+  return scope.querySelector(`[id="${id.replace(/["\\]/g, "\\$&")}"]`);
+}
+var isScrollable = (el) => {
+  const { overflowY } = window.getComputedStyle(el);
+  return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+};
+function findScrollParent(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    if (p === document.body || p === document.documentElement) break;
+    if (isScrollable(p)) return p;
+  }
+  return document.scrollingElement ?? document.documentElement;
+}
+var isRootScroller = (el) => el === document.scrollingElement || el === document.documentElement;
+var viewportTop = (container) => isRootScroller(container) ? 0 : container.getBoundingClientRect().top + container.clientTop;
+var readMetrics = (container) => ({
+  // 문서 전체는 가로 스크롤바를 뺀 높이(documentElement.clientHeight)여야 scrollHeight 와 같은 기준이다
+  clientHeight: isRootScroller(container) ? document.documentElement.clientHeight : container.clientHeight,
+  scrollTop: container.scrollTop,
+  scrollHeight: container.scrollHeight
+});
+var sectionTop = (section, container) => section.getBoundingClientRect().top - viewportTop(container);
+function scrollToSection(section, container, behavior = "smooth") {
+  const margin = parseFloat(window.getComputedStyle(section).scrollMarginTop) || 0;
+  const top = container.scrollTop + sectionTop(section, container) - margin;
+  const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (typeof container.scrollTo === "function") {
+    container.scrollTo({ top, behavior: behavior === "smooth" && !reduce ? "smooth" : "instant" });
+  } else {
+    container.scrollTop = top;
+  }
+}
+var SETTLE_MS = 150;
+var SSectionNav = /* @__PURE__ */ react.forwardRef(function SSectionNav2({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  scrollContainer,
+  "aria-label": ariaLabel,
+  className,
+  style
+}, ref) {
+  const controlled = value !== void 0;
+  const [inner, setInner] = react.useState(defaultValue);
+  const active = controlled ? value : inner;
+  const activeRef = react.useRef(active);
+  const emittedRef = react.useRef(void 0);
+  activeRef.current = active;
+  react.useEffect(() => {
+    emittedRef.current = void 0;
+  }, [active]);
+  const onChangeRef = react.useRef(onValueChange);
+  onChangeRef.current = onValueChange;
+  const select = react.useCallback(
+    (next, notify = true) => {
+      if (next === activeRef.current) return;
+      if (!controlled) setInner(next);
+      if (notify && next !== emittedRef.current) {
+        emittedRef.current = next;
+        onChangeRef.current?.(next);
+      }
+    },
+    [controlled]
+  );
+  const lockedRef = react.useRef(false);
+  const unlockTimer = react.useRef(void 0);
+  const holdLock = react.useCallback(() => {
+    lockedRef.current = true;
+    clearTimeout(unlockTimer.current);
+    unlockTimer.current = setTimeout(() => {
+      lockedRef.current = false;
+    }, SETTLE_MS);
+  }, []);
+  const initialTarget = react.useRef(controlled ? void 0 : defaultValue);
+  const initialPending = react.useRef(initialTarget.current !== void 0);
+  const valuesKey = items.map((i) => i.value).join("\0");
+  react.useEffect(() => {
+    const scope = scrollContainer?.current ?? null;
+    const findPresent = () => items.map((item4) => ({ item: item4, el: findSection(item4.value, scope) })).filter((s) => s.el !== null);
+    let detach;
+    let waiter;
+    const attach = () => {
+      const [firstPresent] = findPresent();
+      if (!firstPresent) return false;
+      const container = scope ?? findScrollParent(firstPresent.el);
+      const root = isRootScroller(container);
+      const scroller = root ? window : container;
+      const update = (notify) => {
+        const present = findPresent();
+        const index = pickActiveIndex(
+          present.map((s) => sectionTop(s.el, container)),
+          readMetrics(container)
+        );
+        if (index >= 0) select(present[index].item.value, notify);
+      };
+      const refresh = () => {
+        if (!lockedRef.current) update(true);
+      };
+      const onScroll = () => {
+        if (lockedRef.current) {
+          holdLock();
+          return;
+        }
+        initialPending.current = false;
+        update(true);
+      };
+      const applyInitial = () => {
+        const target = initialTarget.current;
+        if (!initialPending.current || target === void 0) return;
+        const section = findSection(target, scope);
+        if (!section) return;
+        initialPending.current = false;
+        holdLock();
+        scrollToSection(section, container, "instant");
+      };
+      scroller.addEventListener("scroll", onScroll, { passive: true });
+      const sizes = /* @__PURE__ */ new WeakMap();
+      const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver((entries4) => {
+        const changed = entries4.filter((e) => {
+          const size = `${e.contentRect.width}x${e.contentRect.height}`;
+          const before = sizes.get(e.target);
+          sizes.set(e.target, size);
+          return before !== void 0 && before !== size;
+        });
+        if (changed.length > 0) refresh();
+      });
+      const observeSizes = () => {
+        resize?.observe(root ? document.documentElement : container);
+        findPresent().forEach((s) => resize?.observe(s.el));
+      };
+      observeSizes();
+      let presentKey = findPresent().map((s) => s.item.value).join("\0");
+      const mutation = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(() => {
+        const key = findPresent().map((s) => s.item.value).join("\0");
+        if (key === presentKey) return;
+        presentKey = key;
+        observeSizes();
+        applyInitial();
+        refresh();
+      });
+      mutation?.observe(root ? document.body : container, { childList: true, subtree: true });
+      const current = activeRef.current;
+      if (current === void 0 || !items.some((i) => i.value === current)) update(false);
+      applyInitial();
+      detach = () => {
+        scroller.removeEventListener("scroll", onScroll);
+        resize?.disconnect();
+        mutation?.disconnect();
+      };
+      return true;
+    };
+    if (!attach() && typeof MutationObserver !== "undefined") {
+      waiter = new MutationObserver(() => {
+        if (attach()) waiter?.disconnect();
+      });
+      waiter.observe(scope ?? document.body, { childList: true, subtree: true });
+    }
+    return () => {
+      waiter?.disconnect();
+      detach?.();
+    };
+  }, [valuesKey, scrollContainer, select, holdLock]);
+  const go = (next) => {
+    const scope = scrollContainer?.current ?? null;
+    const section = findSection(next, scope);
+    if (!section) {
+      throw new Error(`SSectionNav: id="${next}" \uC778 \uC139\uC158 \uC694\uC18C\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`);
+    }
+    holdLock();
+    select(next);
+    scrollToSection(section, scope ?? findScrollParent(section));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": ariaLabel, className, style, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col gap-(--cmp-sideNav-gap) p-0", children: items.map((item4) => {
+    const selected = item4.value === active;
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-current": selected ? "location" : void 0,
+        onClick: () => go(item4.value),
+        className: cn(
+          "box-border flex h-(--cmp-sideNav-height) w-full cursor-pointer items-center rounded-(--cmp-sideNav-radius) border-0 px-(--cmp-sideNav-paddingX) text-left transition-colors duration-200",
+          selected ? "typo-body-md-semibold bg-(--cmp-sideNav-bg-selected) text-(--cmp-sideNav-fg-selected)" : "typo-body-md-default bg-transparent text-(--cmp-sideNav-fg-default) hover:font-semibold hover:text-(--cmp-sideNav-fg-hover)"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "invisible truncate font-semibold",
+              style: { gridArea: "1 / 1" },
+              children: item4.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", style: { gridArea: "1 / 1" }, children: item4.label })
+        ] })
+      }
+    ) }, item4.value);
+  }) }) });
+});
+
 // src/components/SStepper/stepper.config.ts
 var STEPPER_SIZES = ["sm", "lg"];
 var V2 = (path) => `var(--cmp-stepper-${path})`;
@@ -16218,8 +16673,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   valueDisplay = "text",
   showSearch = false,
   showSelectAll = false,
-  allSelectedLabel = "\uC804\uCCB4",
-  placeholder = "\uC120\uD0DD",
+  allSelectedLabel: allSelectedLabelProp,
+  placeholder: placeholderProp,
   disabled = false,
   clearable = false,
   error = false,
@@ -16260,6 +16715,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const partialOptions = pagingEnabled || serverSearch;
   const portalContainer = usePortalContainer();
   const insideModal = useInsideModal();
+  const t = useLocale().messages.select;
+  const allSelectedLabel = allSelectedLabelProp ?? t.allSelected;
+  const placeholder = placeholderProp ?? t.placeholder;
   const [search, setSearch] = react.useState("");
   const [ruleError, setRuleError] = react.useState("");
   const [open, setOpen] = react.useState(false);
@@ -17001,7 +17459,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           chip.removable && /* @__PURE__ */ jsxRuntime.jsx(
                             TriggerRemoveButton,
                             {
-                              ariaLabel: `${isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label} \uC120\uD0DD \uD574\uC81C`,
+                              ariaLabel: t.deselect(
+                                isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label
+                              ),
                               onRemove: () => handleRemoveChip(chip.values)
                             }
                           )
@@ -17013,7 +17473,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                 )
               ) : /* @__PURE__ */ jsxRuntime.jsx(TriggerLabel, { label: triggerText }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
-                showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: "\uC120\uD0DD \uC9C0\uC6B0\uAE30", onRemove: handleClear }),
+                showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: t.clear, onRemove: handleClear }),
                 showTriggerSpinner ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
                   SIcon,
                   {
@@ -17093,7 +17553,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           value: search,
                           onValueChange: handleSearchChange,
                           onKeyDown: handleKeyDown,
-                          placeholder: "\uAC80\uC0C9",
+                          placeholder: t.searchPlaceholder,
                           clearable: true,
                           "aria-controls": listboxId,
                           "aria-activedescendant": focusedIndex >= 0 ? activeOptionId : void 0
@@ -17137,7 +17597,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     }
                   ) : loading2 ? null : (
                     // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: t.empty })
                   ),
                   loading2 && /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
@@ -17146,7 +17606,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       className: "flex items-center justify-center gap-[8px] px-[12px] py-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 16 }),
-                        "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                        t.loading
                       ]
                     }
                   )
@@ -30380,6 +30840,7 @@ exports.SKELETON_TYPES = SKELETON_TYPES;
 exports.SKELETON_TYPE_CONFIG = SKELETON_TYPE_CONFIG;
 exports.SKeyValueTable = SKeyValueTable;
 exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
+exports.SLOCALES = SLOCALES;
 exports.SLauncherListBox = SLauncherListBox;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
@@ -30389,6 +30850,7 @@ exports.SList = SList2;
 exports.SListItem = SListItem2;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
+exports.SLocaleProvider = SLocaleProvider;
 exports.SLoginCard = SLoginCard2;
 exports.SLogo = SLogo;
 exports.SMeatballButton = SMeatballButton2;
@@ -30411,6 +30873,7 @@ exports.SSPLITTER_UNITS = SSPLITTER_UNITS;
 exports.SScrollArea = SScrollArea;
 exports.SSearchInput = SSearchInput;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
+exports.SSectionNav = SSectionNav;
 exports.SSelect = SSelect2;
 exports.SSkeleton = SSkeleton;
 exports.SSlider = SSlider;
@@ -30457,7 +30920,9 @@ exports.isColorKey = isColorKey;
 exports.isFieldWidthGrade = isFieldWidthGrade;
 exports.loading = loading;
 exports.normalizeExtension = normalizeExtension;
+exports.normalizeLocale = normalizeLocale;
 exports.resolveColor = resolveColor;
+exports.useLocale = useLocale;
 exports.useSLayout = useSLayout;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map