@wipco/sdui 1.5.0 → 1.6.1

package/dist/{chunk-RNOUXUBO.js → chunk-YYAGE733.js}

@@ -1,4 +1,4 @@
-import { mergeStyle, containerLayoutStyle, joinClass } from './chunk-5WW4MBRO.js';
+import { mergeStyle, containerLayoutStyle, joinClass } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -183,8 +183,135 @@ var CALC_OPS = /* @__PURE__ */ new Set([
   "join",
   "split",
   "sortBy",
-  "map"
+  "map",
+  // 서식 (신규) — 원시 ISO 일시·금액을 Text 로 찍던 자리를 사람이 읽는 글자로
+  "formatDate",
+  "formatNumber",
+  // 지금 — 인쇄 양식의 "출력일"처럼 스펙이 오늘 날짜를 박아 두던 자리(고정값 2026-08-03 실측)
+  "today"
 ]);
+var KST_OFFSET_MINUTES = 9 * 60;
+var ISO_DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var ISO_DATETIME_RE = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:[.,]\d+)?)?(Z|[+-]\d{2}(?::?\d{2})?)?$/i;
+var pad2 = (n) => String(n).padStart(2, "0");
+function isRealDate(year, month, day) {
+  if (month < 1 || month > 12 || day < 1) return false;
+  const probe = new Date(Date.UTC(year, month - 1, day));
+  return probe.getUTCFullYear() === year && probe.getUTCMonth() === month - 1 && probe.getUTCDate() === day;
+}
+function offsetMinutes(zone) {
+  if (zone === "Z" || zone === "z") return 0;
+  const match = /^([+-])(\d{2}):?(\d{2})?$/.exec(zone);
+  if (!match) return null;
+  const hours = Number(match[2]);
+  const minutes = Number(match[3] ?? "0");
+  if (hours > 23 || minutes > 59) return null;
+  const total = hours * 60 + minutes;
+  return match[1] === "-" ? -total : total;
+}
+function kstClockOf(utcMs) {
+  const shifted = new Date(utcMs + KST_OFFSET_MINUTES * 6e4);
+  return {
+    year: shifted.getUTCFullYear(),
+    month: shifted.getUTCMonth() + 1,
+    day: shifted.getUTCDate(),
+    hour: shifted.getUTCHours(),
+    minute: shifted.getUTCMinutes(),
+    hasTime: true
+  };
+}
+function wallClockOf(text) {
+  const trimmed = text.trim();
+  const dateOnly = ISO_DATE_RE.exec(trimmed);
+  if (dateOnly) {
+    const [year2, month2, day2] = [Number(dateOnly[1]), Number(dateOnly[2]), Number(dateOnly[3])];
+    if (!isRealDate(year2, month2, day2)) return null;
+    return { year: year2, month: month2, day: day2, hour: 0, minute: 0, hasTime: false };
+  }
+  const match = ISO_DATETIME_RE.exec(trimmed);
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const hour = Number(match[4]);
+  const minute = Number(match[5]);
+  const second = match[6] === void 0 ? 0 : Number(match[6]);
+  if (!isRealDate(year, month, day) || hour > 23 || minute > 59 || second > 60) return null;
+  const zone = match[7];
+  if (zone === void 0) return { year, month, day, hour, minute, hasTime: true };
+  const offset = offsetMinutes(zone);
+  if (offset === null) return null;
+  return kstClockOf(Date.UTC(year, month - 1, day, hour, minute, second) - offset * 6e4);
+}
+function isZonedIsoDateTime(value) {
+  if (typeof value !== "string") return false;
+  const match = ISO_DATETIME_RE.exec(value.trim());
+  return match !== null && match[7] !== void 0 && wallClockOf(value) !== null;
+}
+function formatDateValue(value, format = "datetime") {
+  if (value === null || value === void 0 || value === "") return "";
+  let clock;
+  if (value instanceof Date) {
+    clock = Number.isNaN(value.getTime()) ? null : kstClockOf(value.getTime());
+  } else if (typeof value === "string") {
+    clock = wallClockOf(value);
+  } else {
+    return String(value);
+  }
+  if (!clock) return typeof value === "string" ? value : "";
+  const ymd = `${String(clock.year).padStart(4, "0")}-${pad2(clock.month)}-${pad2(clock.day)}`;
+  if (!clock.hasTime) return ymd;
+  const hm = `${pad2(clock.hour)}:${pad2(clock.minute)}`;
+  if (format === "date") return ymd;
+  if (format === "time") return hm;
+  return `${ymd} ${hm}`;
+}
+function parseNumeric(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string") return null;
+  const plain = value.replace(/,/g, "").trim();
+  if (!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(plain)) return null;
+  const parsed = Number(plain);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function groupThousands(value) {
+  const text = String(value);
+  if (!/^-?\d+(\.\d+)?$/.test(text)) return text;
+  const negative = text.startsWith("-");
+  const [integer, fraction] = (negative ? text.slice(1) : text).split(".");
+  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${negative ? "-" : ""}${grouped}${fraction === void 0 ? "" : `.${fraction}`}`;
+}
+function formatNumberValue(value, digits) {
+  if (value === null || value === void 0 || value === "") return "";
+  const numeric = parseNumeric(value);
+  if (numeric === null) return typeof value === "string" ? value : String(value);
+  const wanted = digits === null || digits === void 0 || digits === "" ? NaN : Number(digits);
+  if (!Number.isFinite(wanted)) return groupThousands(numeric);
+  const fixed = Math.max(0, Math.min(6, Math.trunc(wanted)));
+  return new Intl.NumberFormat("ko-KR", {
+    minimumFractionDigits: fixed,
+    maximumFractionDigits: fixed
+  }).format(numeric);
+}
+var DISPLAY_FORMATS = /* @__PURE__ */ new Set(["date", "datetime", "time", "number", "currency"]);
+function formatDisplayValue(value, format) {
+  if (typeof value !== "string" && typeof value !== "number") return value;
+  if (value === "") return value;
+  const chosen = typeof format === "string" && DISPLAY_FORMATS.has(format) ? format : void 0;
+  switch (chosen) {
+    case "date":
+    case "datetime":
+    case "time":
+      return typeof value === "string" ? formatDateValue(value, chosen) : value;
+    case "number":
+      return formatNumberValue(value);
+    case "currency":
+      return parseNumeric(value) === null ? value : `${formatNumberValue(value, 0)}\uC6D0`;
+    default:
+      return isZonedIsoDateTime(value) ? formatDateValue(value, "datetime") : value;
+  }
+}
 function isFieldRef(value) {
   return isPlainObject(value) && "$field" in value;
 }
@@ -395,6 +522,17 @@ function evaluateCalc(calc, resolved, resolve) {
         return desc ? -order : order;
       });
     }
+    /* ── 서식 ── */
+    case "formatDate": {
+      const format = resolved[1];
+      return formatDateValue(first, format === "date" || format === "time" ? format : "datetime");
+    }
+    case "formatNumber":
+      return formatNumberValue(first, resolved[1]);
+    case "today": {
+      const format = first === "datetime" || first === "time" ? first : "date";
+      return formatDateValue(/* @__PURE__ */ new Date(), format);
+    }
     default:
       return null;
   }
@@ -1219,6 +1357,48 @@ function pickOptionText(option, key) {
   if (raw === null || raw === void 0) return void 0;
   return String(raw);
 }
+var SELECT_BOX_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "width",
+  "minWidth",
+  "maxWidth",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignSelf",
+  "justifySelf",
+  "order",
+  "gridColumn",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRow",
+  "gridRowStart",
+  "gridRowEnd",
+  "gridArea",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginInline",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "marginBlock",
+  "marginBlockStart",
+  "marginBlockEnd"
+]);
+function splitSelectStyle(style) {
+  if (!style) return {};
+  const box = {};
+  const control = {};
+  for (const [key, value] of Object.entries(style)) {
+    (SELECT_BOX_STYLE_KEYS.has(key) ? box : control)[key] = value;
+  }
+  return {
+    box: Object.keys(box).length > 0 ? box : void 0,
+    control: Object.keys(control).length > 0 ? control : void 0
+  };
+}
 function Select({
   options,
   valueKey = "value",
@@ -1227,15 +1407,17 @@ function Select({
   invalid = false,
   placeholder,
   className = "",
+  style,
   ...rest
 }) {
+  const { box: boxStyle, control: controlStyle } = splitSelectStyle(style);
   const classes = ["wp-select"];
   if (size !== "md") classes.push(`wp-select--${size}`);
   if (invalid) classes.push("wp-select--invalid");
   if (className) classes.push(className);
   const list = Array.isArray(options) ? options : [];
-  return /* @__PURE__ */ jsxs("div", { className: "wp-selectwrap", children: [
-    /* @__PURE__ */ jsxs("select", { className: classes.join(" "), "aria-invalid": invalid || void 0, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "wp-selectwrap", style: boxStyle, children: [
+    /* @__PURE__ */ jsxs("select", { className: classes.join(" "), "aria-invalid": invalid || void 0, style: controlStyle, ...rest, children: [
       placeholder ? /* @__PURE__ */ jsx("option", { value: "", children: placeholder }) : null,
       list.map((option, index) => {
         const value = pickOptionText(option, valueKey);
@@ -1262,12 +1444,12 @@ function Select({
     /* @__PURE__ */ jsx("span", { className: "wp-selectwrap__caret", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 15 }) })
   ] });
 }
-function Checkbox({ label, description, indeterminate = false, disabled = false, className = "", ...rest }) {
+function Checkbox({ label, description, indeterminate = false, disabled = false, className = "", style, ...rest }) {
   const ref = React.useRef(null);
   React.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-check", disabled && "wp-check--disabled", className), children: [
+  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-check", disabled && "wp-check--disabled", className), style, children: [
     /* @__PURE__ */ jsx("input", { ref, type: "checkbox", disabled, ...rest }),
     /* @__PURE__ */ jsx("span", { className: "wp-check__box", children: /* @__PURE__ */ jsx(Icon, { name: indeterminate ? "minus" : "check", size: 12, strokeWidth: 2.5 }) }),
     label || description ? /* @__PURE__ */ jsxs("span", { className: "wp-check__text", children: [
@@ -1276,8 +1458,8 @@ function Checkbox({ label, description, indeterminate = false, disabled = false,
     ] }) : null
   ] });
 }
-function Switch({ label, size = "md", disabled = false, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-switch", size === "sm" && "wp-switch--sm", className), children: [
+function Switch({ label, size = "md", disabled = false, className = "", style, ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-switch", size === "sm" && "wp-switch--sm", className), style, children: [
     /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", disabled, ...rest }),
     /* @__PURE__ */ jsx("span", { className: "wp-switch__track" }),
     label ? /* @__PURE__ */ jsx("span", { children: label }) : null
@@ -1318,24 +1500,60 @@ function Card({
   if (selected) classes.push("wp-card--selected");
   if (className) classes.push(className);
   const bodyClass = padding === "tight" ? "wp-card__body wp-card__body--tight" : "wp-card__body";
-  return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), ...rest, children: [
-    cover ? /* @__PURE__ */ jsx("div", { className: "wp-card__cover", children: cover }) : null,
-    title || actions ? /* @__PURE__ */ jsxs("div", { className: "wp-card__head", children: [
-      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx("div", { className: "wp-card__title", children: title }),
-        subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-card__sub", children: subtitle }) : null
-      ] }),
-      actions ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { gap: 6, flex: "none" }, children: actions }) : null
-    ] }) : null,
-    padding === "none" ? children : /* @__PURE__ */ jsx("div", { className: bodyClass, children }),
-    footer ? /* @__PURE__ */ jsx("div", { className: "wp-card__foot", children: footer }) : null
-  ] });
+  const { onClick, onKeyDown, role, tabIndex, ...divRest } = rest;
+  const pressable = interactive && typeof onClick === "function";
+  const handleKeyDown = pressable ? (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    if (event.repeat) return;
+    event.currentTarget.click();
+  } : onKeyDown;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes.join(" "),
+      ...divRest,
+      onClick,
+      onKeyDown: handleKeyDown,
+      role: role ?? (pressable ? "button" : void 0),
+      tabIndex: tabIndex ?? (pressable ? 0 : void 0),
+      children: [
+        cover ? /* @__PURE__ */ jsx("div", { className: "wp-card__cover", children: cover }) : null,
+        title || actions ? /* @__PURE__ */ jsxs("div", { className: "wp-card__head", children: [
+          /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("div", { className: "wp-card__title", children: title }),
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-card__sub", children: subtitle }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { gap: 6, flex: "none" }, children: actions }) : null
+        ] }) : null,
+        padding === "none" ? children : /* @__PURE__ */ jsx("div", { className: bodyClass, children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "wp-card__foot", children: footer }) : null
+      ]
+    }
+  );
 }
-function Badge({ tone = "neutral", dot = false, size = "md", children, className = "", ...rest }) {
+function Badge({
+  tone = "neutral",
+  dot = false,
+  size = "md",
+  wrap = false,
+  children,
+  className = "",
+  ...rest
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: joinClass("wp-badge", `wp-badge--${tone}`, dot && "wp-badge--dot", size === "lg" && "wp-badge--lg", className),
+      className: joinClass(
+        "wp-badge",
+        `wp-badge--${tone}`,
+        dot && "wp-badge--dot",
+        size === "lg" && "wp-badge--lg",
+        wrap && "wp-badge--wrap",
+        className
+      ),
       ...rest,
       children
     }
@@ -1385,14 +1603,33 @@ function Toast({ tone = "info", title, children, action, onClose, className = ""
     onClose ? /* @__PURE__ */ jsx("button", { type: "button", className: "wp-toast__x", "aria-label": "\uB2EB\uAE30", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 13 }) }) : null
   ] });
 }
+function revealSelectedTab(list) {
+  if (!list || list.scrollWidth <= list.clientWidth + 1) return;
+  const tab = list.querySelector('[role="tab"][aria-selected="true"]');
+  if (!tab) return;
+  const listBox = list.getBoundingClientRect();
+  const tabBox = tab.getBoundingClientRect();
+  const margin = 24;
+  if (tabBox.left < listBox.left) {
+    list.scrollLeft -= listBox.left - tabBox.left + margin;
+  } else if (tabBox.right > listBox.right) {
+    list.scrollLeft += tabBox.right - listBox.right + margin;
+  }
+}
 function Tabs({ items = [], value, onChange, size = "md", onChrome = false, className = "", ...rest }) {
+  const listRef = React.useRef(null);
+  const itemList = asArray(items);
+  React.useEffect(() => {
+    revealSelectedTab(listRef.current);
+  }, [value, itemList.length]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: joinClass("wp-tabs", size === "lg" && "wp-tabs--lg", onChrome && "wp-tabs--onchrome", className),
       role: "tablist",
       ...rest,
-      children: asArray(items).map((item) => /* @__PURE__ */ jsxs(
+      ref: listRef,
+      children: itemList.map((item) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -1423,19 +1660,25 @@ function Table({
   rowKey = "id",
   onRowClick,
   empty,
+  emptyText,
+  stackable: stackableProp,
   className = "",
+  style,
   ...rest
 }) {
+  const stackable = stackableProp ?? !sticky;
+  const wrapped = !sticky;
   const classes = ["wp-table"];
   if (dense) classes.push("wp-table--dense");
   if (hover) classes.push("wp-table--hover");
   if (sticky) classes.push("wp-table--sticky");
-  if (className) classes.push(className);
+  if (stackable) classes.push("wp-table--stackable");
+  if (!wrapped && className) classes.push(className);
   const columnList = asArray(columns);
   const rowList = asArray(rows);
   const selectedList = asArray(selectedIds);
   if (!rowList.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
-  return /* @__PURE__ */ jsxs("table", { className: classes.join(" "), ...rest, children: [
+  const table = /* @__PURE__ */ jsxs("table", { className: classes.join(" "), style: wrapped ? void 0 : style, ...rest, children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columnList.map((column) => /* @__PURE__ */ jsx("th", { style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 }, children: column.sortable && onSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "wp-table__sort", onClick: () => onSort(column.key), children: [
       column.header,
       /* @__PURE__ */ jsx(
@@ -1446,34 +1689,53 @@ function Table({
         }
       )
     ] }) : column.header }, column.key)) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rowList.map((row, index) => /* @__PURE__ */ jsx(
-      "tr",
-      {
-        "aria-selected": selectedList.indexOf(row?.[rowKey]) > -1 || void 0,
-        onClick: onRowClick ? () => onRowClick(row) : void 0,
-        style: onRowClick ? { cursor: "pointer" } : void 0,
-        children: columnList.map((column) => {
-          const cls = [];
-          if (column.align === "right") cls.push("wp-table__num");
-          if (column.mono) cls.push("wp-table__mono");
-          if (column.strong) cls.push("wp-table__strong");
-          const raw = column.key ? fieldOf(row, column.key) : void 0;
-          let content;
-          if (column.render) {
-            content = column.render(row, index);
-          } else if (column.badge) {
-            const key = raw == null ? "" : String(raw);
-            const tone = column.badge.toneMap?.[key] ?? "neutral";
-            content = /* @__PURE__ */ jsx(Badge, { tone, children: column.badge.labelMap?.[key] ?? key });
-          } else {
-            content = raw;
-          }
-          return /* @__PURE__ */ jsx("td", { className: cls.join(" ") || void 0, children: content }, column.key);
-        })
-      },
-      row?.[rowKey] != null ? String(row[rowKey]) : index
-    )) })
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      rowList.length === 0 ? (
+        // 머리글은 남겨 "무슨 표인지"는 보이게 하고, 비었다는 사실은 한 줄로 말한다.
+        // data-label="" — 행 카드 모드에서 라벨 없이 문구만 서게(선택 칸과 같은 규칙).
+        /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "wp-table__empty", colSpan: Math.max(1, columnList.length), "data-label": "", children: emptyText || "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" }) })
+      ) : null,
+      rowList.map((row, index) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          "aria-selected": selectedList.indexOf(row?.[rowKey]) > -1 || void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          style: onRowClick ? { cursor: "pointer" } : void 0,
+          children: columnList.map((column) => {
+            const cls = [];
+            if (column.align === "right") cls.push("wp-table__num");
+            if (column.mono) cls.push("wp-table__mono");
+            if (column.strong) cls.push("wp-table__strong");
+            const raw = column.key ? fieldOf(row, column.key) : void 0;
+            let content;
+            if (column.render) {
+              content = column.render(row, index);
+            } else if (column.badge) {
+              const key = raw == null ? "" : String(raw);
+              const tone = column.badge.toneMap?.[key] ?? "neutral";
+              content = /* @__PURE__ */ jsx(Badge, { tone, children: column.badge.labelMap?.[key] ?? key });
+            } else {
+              content = formatDisplayValue(raw, column.format);
+            }
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: cls.join(" ") || void 0,
+                "data-label": stackable ? typeof column.header === "string" ? column.header : "" : void 0,
+                children: content
+              },
+              column.key
+            );
+          })
+        },
+        row?.[rowKey] != null ? String(row[rowKey]) : index
+      ))
+    ] })
   ] });
+  if (!wrapped) return table;
+  const boxClasses = ["wp-table-scroll", "wp-table-scroll--plain"];
+  if (className) boxClasses.push(className);
+  return /* @__PURE__ */ jsx("div", { className: boxClasses.join(" "), style, children: table });
 }
 function StatCard({ label, value, unit, delta, trend = "flat", icon, footer, size = "md", className = "", ...rest }) {
   const arrow = trend === "up" ? "arrow-up-right" : trend === "down" ? "arrow-down" : "minus";
@@ -1483,7 +1745,7 @@ function StatCard({ label, value, unit, delta, trend = "flat", icon, footer, siz
       label
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "wp-stat__value", children: [
-      value,
+      typeof value === "number" ? formatNumberValue(value) : value,
       unit ? /* @__PURE__ */ jsx("span", { className: "wp-stat__unit", children: unit }) : null
     ] }),
     delta ? /* @__PURE__ */ jsxs("div", { className: `wp-stat__delta wp-stat__delta--${trend}`, children: [
@@ -1501,18 +1763,20 @@ function EmptyState({ icon = "square-dashed", title, children, actions, tight =
     actions ? /* @__PURE__ */ jsx("div", { className: "wp-empty__actions", children: actions }) : null
   ] });
 }
-function Spinner({ size = "md", inverse = false, label, className = "", ...rest }) {
+function Spinner({ size = "md", inverse = false, label, className = "", style, ...rest }) {
+  const labeled = Boolean(label);
   const el = /* @__PURE__ */ jsx(
     "span",
     {
-      className: joinClass("wp-spinner", size !== "md" && `wp-spinner--${size}`, inverse && "wp-spinner--inverse", className),
+      className: joinClass("wp-spinner", size !== "md" && `wp-spinner--${size}`, inverse && "wp-spinner--inverse", !labeled && className),
+      style: labeled ? void 0 : style,
       role: "status",
       "aria-label": label || "\uB85C\uB529 \uC911",
       ...rest
     }
   );
-  if (!label) return el;
-  return /* @__PURE__ */ jsxs("span", { className: "wp-row", style: { gap: 8 }, children: [
+  if (!labeled) return el;
+  return /* @__PURE__ */ jsxs("span", { className: joinClass("wp-row", className), style: { gap: 8, ...style }, children: [
     el,
     /* @__PURE__ */ jsx("span", { className: "wp-caption", children: label })
   ] });
@@ -1583,7 +1847,7 @@ function Pagination({ page = 1, pageCount = 1, total, pageSize, onChange, classN
   const from = total != null && pageSize ? (page - 1) * pageSize + 1 : null;
   const to = total != null && pageSize ? Math.min(total, page * pageSize) : null;
   return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-pager", className), ...rest, children: [
-    from != null ? /* @__PURE__ */ jsxs("span", { className: "wp-num", children: [
+    from != null && total === 0 ? /* @__PURE__ */ jsx("span", { className: "wp-num", children: "0\uAC74" }) : from != null ? /* @__PURE__ */ jsxs("span", { className: "wp-num", children: [
       from,
       "\u2013",
       to,
@@ -1730,4 +1994,4 @@ function Tooltip({ label, shortcut, placement = "top", wrap = false, children, c
   );
 }
 
-export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, ICON_NODES, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, evaluateCalc, fieldOf, isPlainObject, toNumber, warnOnce };
+export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, ICON_NODES, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, evaluateCalc, fieldOf, formatDateValue, formatDisplayValue, formatNumberValue, isPlainObject, isZonedIsoDateTime, parseNumeric, toNumber, warnOnce };