sellmate-design-system-react 9.0.0-beta.75 → 9.0.0-beta.76

package/dist/index.cjs

@@ -3792,43 +3792,46 @@ var STROKE = 12;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var COLOR_MAP = {
   primary: { arc: "var(--cmp-progress-color-active)", track: "var(--cmp-progress-color-track)" },
-  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
-  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" },
+  // inverse: 어두운 배경용 — arc 는 반전색, track 은 반전색을 inverse-opacity 만큼만(회색 링)
+  inverse: {
+    arc: "var(--cmp-progress-inverse-color)",
+    track: "color-mix(in srgb, var(--cmp-progress-inverse-color) var(--cmp-progress-inverse-opacity), transparent)"
+  },
+  warning: { arc: "var(--cmp-progress-color-warning)", track: "var(--cmp-progress-color-track)" },
+  error: { arc: "var(--cmp-progress-color-error)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "var(--cmp-progress-color-success)", track: "var(--cmp-progress-color-track)" },
   // neutral: 콘텐츠가 아직 없는 자리를 채우는 용도 — arc 도 회색이라 진행률보다 "대기"로 읽힌다
-  neutral: { arc: "var(--color-grey-35)", track: "var(--cmp-progress-color-track)" }
+  neutral: { arc: "var(--cmp-progress-color-neutral)", track: "var(--cmp-progress-color-track)" }
 };
-var DEFAULT_SIZE = 80;
 var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = /* @__PURE__ */ react.forwardRef(
   function SCircleProgress2({
     value = 0,
     type = "primary",
     indeterminate = false,
-    size = DEFAULT_SIZE,
+    size,
     label,
     innerValue = false,
     className,
     style
   }, ref) {
     const v = clamp(value);
-    const dimension = typeof size === "number" ? `${size}px` : size;
+    const dimension = size === void 0 ? "var(--cmp-progress-circular-size)" : typeof size === "number" ? `${size}px` : size;
     const colors = COLOR_MAP[type];
     const c = VIEWBOX / 2;
-    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
+    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary)" : colors.arc;
     const filled = v / 100 * CIRCUMFERENCE;
     const showPercent = !indeterminate;
     const percentNode = /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold",
+          "typo-heading-md text-center",
           innerValue ? (
             // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
             // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
             "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
-          ) : "leading-[26px]"
+          ) : void 0
         ),
         style: { color: percentColor },
         children: [
@@ -3894,7 +3897,7 @@ var SCircleProgress = /* @__PURE__ */ react.forwardRef(
             showPercent && innerValue && percentNode
           ] }),
           showPercent && !innerValue && percentNode,
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -7631,6 +7634,10 @@ function TreeBranch({ expanded, children }) {
     }
   );
 }
+function isRowControlClick(event) {
+  const control = event.target.closest("[data-tree-control]");
+  return control != null && event.currentTarget.contains(control);
+}
 function STreeAllItem({
   selected,
   indeterminate,
@@ -7653,14 +7660,16 @@ function STreeAllItem({
       "data-tree-row": rowId,
       tabIndex,
       onKeyDown,
-      onClick: onSelect,
+      onClick: (event) => {
+        if (!isRowControlClick(event)) onSelect(event);
+      },
       className: cn(
         "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
         typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tree-control": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7691,6 +7700,10 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   trailing,
   onToggle,
   onTreeSelect,
+  // treeitem 은 포커스를 받을 수 있어야 한다. tab 순서는 STree 가 한 줄에만 0 을 줘서 정한다(roving).
+  tabIndex = -1,
+  // 줄 단위 키보드 조작(화살표·Enter·Space)은 줄 사이를 오가야 해서 STree 가 쥐고 내려준다
+  onKeyDown,
   className,
   ...rest
 }, ref) {
@@ -7715,6 +7728,11 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
     onTreeSelect?.(node, event);
   };
   const handleRowClick = (event) => {
+    if (isRowControlClick(event)) return;
+    if (selectable && event.target.closest("[data-tree-label]")) {
+      handleSelect(event);
+      return;
+    }
     if (hasChildren) onToggle?.(node, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7726,6 +7744,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
       "aria-expanded": hasChildren ? expanded : void 0,
       "aria-selected": selectable ? selected : void 0,
       "aria-disabled": node.disabled || void 0,
+      tabIndex,
+      onKeyDown,
       onClick: handleRowClick,
       className: cn(
         "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
@@ -7771,7 +7791,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           selectable && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              onClick: (event) => event.stopPropagation(),
+              "data-tree-control": true,
               className: "flex shrink-0",
               "aria-hidden": node.disabled ? "true" : void 0,
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7787,11 +7807,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              onClick: (event) => {
-                if (!selectable) return;
-                event.stopPropagation();
-                if (!node.disabled && selectable) onTreeSelect?.(node, event);
-              },
+              "data-tree-label": true,
               className: cn(
                 "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
                 labelTypo,
@@ -8795,6 +8811,7 @@ var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({ i
 });
 var FILL_COLOR = {
   primary: "var(--cmp-progress-color-active)",
+  warning: "var(--cmp-progress-color-warning)",
   error: "var(--cmp-progress-color-error)",
   complete: "var(--cmp-progress-color-success)"
 };
@@ -8803,20 +8820,20 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
   function SLinearProgress2({ value = 0, type = "primary", size = "sm", indeterminate = false, label, className, style }, ref) {
     const v = clamp2(value);
     const fill = FILL_COLOR[type];
-    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary)" : fill;
     const valueText = `${Math.round(v)}%`;
     const showValue = !indeterminate && size !== "xs";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn("flex w-full flex-col gap-[12px]", className),
+        className: cn("flex w-full flex-col gap-[var(--cmp-progress-linear-gap)]", className),
         style,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "relative w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]",
+              className: "relative w-full overflow-hidden rounded-[var(--cmp-progress-linear-radius)] bg-[var(--cmp-progress-color-track)]",
               style: { height: `var(--cmp-progress-linear-height-${size})` },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -8833,7 +8850,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center",
                       style: { color: valueColor },
                       children: valueText
                     }
@@ -8841,7 +8858,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center text-[color:var(--cmp-progress-bar-text)]",
                       style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
                       children: valueText
                     }
@@ -8850,7 +8867,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -15728,10 +15745,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     }
     commitOpen(next);
   };
+  const commitOpenRef = react.useRef(commitOpen);
+  commitOpenRef.current = commitOpen;
   react.useEffect(() => {
     if (!insideModal || portalContainer == null || !pendingOpen) return;
     setPendingOpen(false);
-    commitOpen(true);
+    commitOpenRef.current(true);
   }, [insideModal, pendingOpen, portalContainer]);
   const requestOpenRef = react.useRef(requestOpen);
   requestOpenRef.current = requestOpen;
@@ -15933,6 +15952,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
+  const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
   const handleClear = () => {
     emit3([]);
@@ -16107,6 +16127,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
             "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
+            "aria-busy": showTriggerSpinner || void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
@@ -16158,7 +16179,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                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,
                   {
                     name: "chevronDown",
@@ -16274,12 +16295,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
                     /* @__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." })
                   ),
-                  loading2 && /* @__PURE__ */ jsxRuntime.jsx(
+                  loading2 && /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
                       role: "status",
-                      className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
-                      children: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                      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..."
+                      ]
                     }
                   )
                 ]
@@ -16549,7 +16573,7 @@ var colWidthFromDef = (c) => {
   const px = typeof c.width === "number" ? c.width : parseInt(c.width, 10);
   return Number.isFinite(px) ? px : DEFAULT_COLUMN_WIDTH;
 };
-var STable = /* @__PURE__ */ react.forwardRef(function STable2({
+var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   columns = [],
   headerGroups,
   rows = [],
@@ -17659,6 +17683,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     }
   );
 });
+var STable2 = STableImpl;
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
@@ -18465,11 +18490,13 @@ function SCalendar({
   const base = value || today;
   const [y, setY] = react.useState(() => Number(base.split("-")[0]));
   const [m, setM] = react.useState(() => Number(base.split("-")[1]));
-  react.useEffect(() => {
+  const [syncedValue, setSyncedValue] = react.useState(value);
+  if (syncedValue !== value) {
+    setSyncedValue(value);
     const b = value || today;
     setY(Number(b.split("-")[0]));
     setM(Number(b.split("-")[1]));
-  }, [value]);
+  }
   const cells = react.useMemo(() => monthCells(y, m), [y, m]);
   const eventMap = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -19792,6 +19819,7 @@ var SChipImpl = /* @__PURE__ */ react.forwardRef(function SChip({
           {
             ref: inputRef,
             role: "textbox",
+            tabIndex: 0,
             contentEditable: !disabled,
             suppressContentEditableWarning: true,
             spellCheck: false,
@@ -22216,6 +22244,7 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
     const [mounted2, setMounted] = react.useState(false);
     const timers = react.useRef(/* @__PURE__ */ new Map());
     const elRefs = react.useRef(/* @__PURE__ */ new Map());
+    const resizeObserverRef = react.useRef(null);
     const [heights, setHeights] = react.useState(/* @__PURE__ */ new Map());
     const onShowRef = react.useRef(onShow);
     const onDismissRef = react.useRef(onDismiss);
@@ -22229,6 +22258,8 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       if (!liveIds.current.has(id)) return;
       liveIds.current.delete(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
+      const el = elRefs.current.get(id);
+      if (el) resizeObserverRef.current?.unobserve(el);
       elRefs.current.delete(id);
       setHeights((prev) => {
         if (!prev.has(id)) return prev;
@@ -22262,21 +22293,31 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       });
       return () => cancelAnimationFrame(raf);
     }, [toasts]);
-    react.useLayoutEffect(() => {
-      let changed = false;
-      const next = new Map(heights);
-      toasts.forEach((t) => {
-        const el = elRefs.current.get(t.id);
-        if (el) {
+    react.useEffect(() => {
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries4) => {
+        const measured = [];
+        for (const entry of entries4) {
+          const el = entry.target;
+          const id = el.dataset.toastId;
           const h = el.offsetHeight;
-          if (h > 0 && next.get(t.id) !== h) {
-            next.set(t.id, h);
-            changed = true;
-          }
+          if (id != null && h > 0 && liveIds.current.has(id)) measured.push([id, h]);
         }
+        if (measured.length === 0) return;
+        setHeights((prev) => {
+          if (measured.every(([id, h]) => prev.get(id) === h)) return prev;
+          const next = new Map(prev);
+          for (const [id, h] of measured) next.set(id, h);
+          return next;
+        });
       });
-      if (changed) setHeights(next);
-    });
+      resizeObserverRef.current = observer;
+      elRefs.current.forEach((el) => observer.observe(el));
+      return () => {
+        observer.disconnect();
+        resizeObserverRef.current = null;
+      };
+    }, []);
     const scheduleAutoClose = react.useCallback(
       (id, duration) => {
         if (duration > 0)
@@ -22415,8 +22456,11 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
           children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              "data-toast-id": entry.id,
               ref: (el) => {
-                if (el) elRefs.current.set(entry.id, el);
+                if (el == null || elRefs.current.get(entry.id) === el) return;
+                elRefs.current.set(entry.id, el);
+                resizeObserverRef.current?.observe(el);
               },
               style: itemStyle(entry),
               children: /* @__PURE__ */ jsxRuntime.jsx(SToast, { ...entry.options, onClose: () => startDismiss(entry.id) })
@@ -26737,7 +26781,16 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   const loading2 = effectiveAutocomplete ? loadingSuggestions && suggestions.length === 0 : loadingRecommendedItems && recommendedItems.length === 0;
   const isFieldEmpty = inputValue === "" && values.length > 0 && !focused;
   const isFieldFilled = inputValue !== "";
+  const reopenDropdown = () => {
+    setSuppressSuggestions(false);
+    setSuppressRecommendations(false);
+  };
   const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" && !showDropdown && (inputValue === "" ? suppressRecommendations : suppressSuggestions)) {
+      e.preventDefault();
+      reopenDropdown();
+      return;
+    }
     if (showDropdown && items.length > 0) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -26815,10 +26868,10 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
             "relative box-border flex w-full flex-wrap content-center items-center gap-(--cmp-chipInput-chip-gap)",
             size === "md" ? "min-h-(--cmp-chipInput-md-minHeight) px-(--cmp-chipInput-md-paddingX) py-(--cmp-chipInput-md-paddingY)" : "min-h-(--cmp-chipInput-sm-minHeight) px-(--cmp-chipInput-sm-paddingX) py-(--cmp-chipInput-sm-paddingY)"
           ),
+          role: "presentation",
           onClick: () => {
             if (!disabled) {
-              setSuppressSuggestions(false);
-              setSuppressRecommendations(false);
+              reopenDropdown();
               inputRef.current?.focus();
             }
           },
@@ -26949,6 +27002,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                   metaPlacement === "end" && "ml-auto"
                 ),
                 "data-placement": metaPlacement,
+                role: "presentation",
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -27005,6 +27059,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                   {
                     id: listboxId,
                     role: "listbox",
+                    tabIndex: -1,
                     className: "s-chip-input__suggestions flex w-full flex-col outline-none",
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
@@ -27018,6 +27073,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: "rounded-full",
                             style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
@@ -27037,6 +27093,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: cn(
                               "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-sd-8 overflow-hidden text-ellipsis whitespace-nowrap px-sd-12 py-sd-4 text-12 leading-sd-20",
                               selected ? "cursor-default overflow-visible font-bold text-(--cmp-listBoxItem-content-selected)" : active ? "bg-(--cmp-listBoxItem-bg-hover) font-medium text-(--cmp-listBoxItem-content-hover)" : "text-(--cmp-listBoxItem-content-default)"
@@ -28305,7 +28362,7 @@ exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
 exports.SSystemActionButton = SSystemActionButton;
 exports.STEPPER_SIZES = STEPPER_SIZES;
-exports.STable = STable;
+exports.STable = STable2;
 exports.STableBar = STableBar;
 exports.STabs = STabs;
 exports.STag = STag;