sellmate-design-system-react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -2937,6 +2937,51 @@ var SDivider = react.forwardRef(function SDivider2({ vertical = false, className
   );
 });
 
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var AXIS_CLASS = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var SScrollArea = react.forwardRef(function SScrollArea2({
+  axis = "both",
+  background = false,
+  bordered = false,
+  maxHeight,
+  maxWidth,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const mergedStyle = { ...style };
+  if (maxHeight) mergedStyle.maxHeight = maxHeight;
+  if (maxWidth) mergedStyle.maxWidth = maxWidth;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        AXIS_CLASS[axis],
+        SCROLLBAR_CLASS,
+        background && SCROLLBAR_TRACK_BG_CLASS,
+        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/components/SScrollArea/scrollArea.config.ts
+var SCROLL_AREA_AXES = ["vertical", "horizontal", "both"];
+
 // src/components/STag/tag.config.ts
 var TAG_SHAPES = ["square", "pill"];
 var TAG_SIZES = ["xs", "sm", "md"];
@@ -4472,7 +4517,18 @@ var SPopup = react.forwardRef(function SPopup2({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-h-0 flex-1 overflow-auto",
+              SCROLLBAR_CLASS,
+              SCROLLBAR_TRACK_BG_CLASS,
+              SCROLLBAR_TRACK_BORDER_CLASS
+            ),
+            children
+          }
+        ),
         useFooter && /* @__PURE__ */ jsxRuntime.jsxs(
           "footer",
           {
@@ -5272,9 +5328,24 @@ var SGnb = react.forwardRef(function SGnb2({
             onMouseEnter: () => setHoveredKey(item.value),
             onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
             children: [
-              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: M.depth1Icon, color: C.itemIcon, className: "shrink-0" }),
+              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: item.icon,
+                  size: M.depth1Icon,
+                  color: isSelected ? C.itemColorActive : C.itemIcon,
+                  className: "shrink-0"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex flex-no-wrap items-center", children: [
-                depth > 1 && iconBranch ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[20px] h-[24px] flex items-center justify-center mr-[8px]", children: "-" }) : null,
+                depth > 1 && iconBranch ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-[20px] flex items-center justify-center mr-[8px]",
+                    style: { height: M.itemLineHeight },
+                    children: "-"
+                  }
+                ) : null,
                 item.label
               ] }),
               item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5333,10 +5404,11 @@ var SGnb = react.forwardRef(function SGnb2({
   }, [layout, railHasLeaf, showMenu]);
   const railFolded = folded && header === "fix";
   const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : bodyWidth;
+  const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
   const rootStyle = {
     width: rootWidth,
     transition: `width ${GNB_FOLD_MS}ms ease-out`,
-    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg, borderRight: rightBorder },
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
@@ -5503,6 +5575,8 @@ var SGnb = react.forwardRef(function SGnb2({
                     paddingTop: M.bodyPaddingY,
                     paddingBottom: M.bodyPaddingY,
                     backgroundColor: C.panelBg,
+                    // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                    borderRight: header === "full" ? rightBorder : void 0,
                     pointerEvents: "auto"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
@@ -5759,6 +5833,165 @@ function SPagination({
     }
   );
 }
+
+// src/components/SStepper/stepper.config.ts
+var STEPPER_SIZES = ["sm", "lg"];
+var V2 = (path) => `var(--cmp-stepper-${path})`;
+var STEPPER_SIZE_CONFIG = {
+  sm: {
+    sequenceSize: V2("sm-sequence-size"),
+    fontSize: "12px",
+    lineHeight: "20px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  },
+  lg: {
+    sequenceSize: V2("lg-sequence-size"),
+    fontSize: "14px",
+    lineHeight: "24px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  }
+};
+var STEPPER_LAYOUT = {
+  containerGap: V2("container-gap"),
+  itemGap: V2("item-gap"),
+  dashWidth: V2("dash-width"),
+  sequenceRadius: V2("sequence-radius"),
+  sequenceBorderWidth: V2("sequence-border-witdh"),
+  sequenceIcon: V2("sequence-icon")
+};
+var STEPPER_COLORS = {
+  dash: V2("dash-color"),
+  sequenceBorder: {
+    active: V2("sequence-border-active"),
+    default: V2("sequence-border-default"),
+    completed: V2("sequence-border-completed")
+  },
+  sequenceBg: {
+    active: V2("sequence-bg-active"),
+    default: V2("sequence-bg-default"),
+    completed: V2("sequence-bg-completed")
+  },
+  sequenceText: {
+    active: V2("sequence-text-active"),
+    default: V2("sequence-text-default")
+  },
+  text: {
+    active: V2("text-active"),
+    default: V2("text-default")
+  }
+};
+function getItemValue(item, index) {
+  return item.value ?? String(index + 1);
+}
+function SStepper({
+  items,
+  value,
+  size = "sm",
+  ariaLabel = "\uC9C4\uD589 \uB2E8\uACC4",
+  className,
+  style
+}) {
+  const config = STEPPER_SIZE_CONFIG[size];
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item, index) => getItemValue(item, index) === value)
+  );
+  const getState = (index) => {
+    if (index < activeIndex) return "completed";
+    if (index === activeIndex) return "active";
+    return "default";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center", className),
+      style: {
+        gap: STEPPER_LAYOUT.containerGap,
+        fontSize: config.fontSize,
+        lineHeight: config.lineHeight,
+        ...style
+      },
+      children: items.map((item, index) => {
+        const state2 = getState(index);
+        const itemStyle = {
+          gap: STEPPER_LAYOUT.itemGap,
+          color: state2 === "active" ? STEPPER_COLORS.text.active : STEPPER_COLORS.text.default,
+          fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
+        };
+        const sequenceStyle = {
+          width: config.sequenceSize,
+          height: config.sequenceSize,
+          flexBasis: config.sequenceSize,
+          borderRadius: STEPPER_LAYOUT.sequenceRadius,
+          borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
+          borderColor: STEPPER_COLORS.sequenceBorder[state2],
+          background: STEPPER_COLORS.sequenceBg[state2],
+          color: state2 === "completed" ? STEPPER_COLORS.text.default : STEPPER_COLORS.sequenceText[state2]
+        };
+        const content = /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            role: "listitem",
+            "aria-current": state2 === "active" ? "step" : void 0,
+            className: "inline-flex items-center whitespace-nowrap",
+            style: itemStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
+                  style: sequenceStyle,
+                  children: state2 === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          }
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "inline-flex items-center",
+            style: { gap: STEPPER_LAYOUT.containerGap },
+            children: [
+              content,
+              index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "inline-flex h-px shrink-0 items-center",
+                  style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "1",
+                      viewBox: "0 0 20 1",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          getItemValue(item, index)
+        );
+      })
+    }
+  );
+}
 function SCheckbox({
   value = false,
   val,
@@ -5887,6 +6120,7 @@ var SField = react.forwardRef(function SField2({
   disabled = false,
   readOnly = false,
   width,
+  minWidth,
   multiline = false,
   borderless = false,
   children,
@@ -5983,6 +6217,7 @@ var SField = react.forwardRef(function SField2({
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
                 ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
+                "minWidth": cssLen(minWidth),
                 "width": cssLen(width),
                 "borderRadius": s.radius,
                 "background": bgColor,
@@ -6364,7 +6599,12 @@ var SSelect = react.forwardRef(function SSelect2({
               "div",
               {
                 ref: listRef,
-                className: "overflow-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:bg-[var(--color-grey-25)] [&::-webkit-scrollbar:horizontal]:h-[8px] [&::-webkit-scrollbar-thumb]:rounded-[4px] [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-25)]",
+                className: cn(
+                  "overflow-auto",
+                  SCROLLBAR_CLASS,
+                  SCROLLBAR_TRACK_BG_CLASS,
+                  SCROLLBAR_TRACK_BORDER_CLASS
+                ),
                 style: { maxHeight: dropdownHeight },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
@@ -6879,6 +7119,9 @@ var STable = react.forwardRef(function STable2({
             onScroll: handleScroll,
             className: cn(
               "bg-white relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
+              SCROLLBAR_CLASS,
+              SCROLLBAR_TRACK_BG_CLASS,
+              SCROLLBAR_TRACK_BORDER_CLASS,
               radiusClass,
               // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤·인터랙션 차단
               (isLoading || rowCount === 0) && "overflow-hidden pointer-events-none"
@@ -10196,15 +10439,15 @@ var SBarcodeInput = react.forwardRef(
 );
 
 // src/components/STimePicker/timepicker.config.ts
-var V2 = (path) => `var(--cmp-timepicker-${path})`;
+var V3 = (path) => `var(--cmp-timepicker-${path})`;
 var TIMEPICKER_SIZES = ["sm", "md"];
 var TIMEPICKER_SIZE_CONFIG = {
   sm: {
-    height: V2("sm-height"),
-    paddingX: V2("sm-paddingX"),
-    gap: V2("sm-gap"),
-    icon: V2("sm-icon"),
-    radius: V2("sm-radius"),
+    height: V3("sm-height"),
+    paddingX: V3("sm-paddingX"),
+    gap: V3("sm-gap"),
+    icon: V3("sm-icon"),
+    radius: V3("sm-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 12,
     lineHeight: 20,
@@ -10212,11 +10455,11 @@ var TIMEPICKER_SIZE_CONFIG = {
     fieldMinWidth: 128
   },
   md: {
-    height: V2("md-height"),
-    paddingX: V2("md-paddingX"),
-    gap: V2("md-gap"),
-    icon: V2("md-icon"),
-    radius: V2("md-radius"),
+    height: V3("md-height"),
+    paddingX: V3("md-paddingX"),
+    gap: V3("md-gap"),
+    icon: V3("md-icon"),
+    radius: V3("md-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 14,
     lineHeight: 24,
@@ -10250,6 +10493,8 @@ function formatTimeDisplay(value, type) {
   const displayHour = hour % 12 === 0 ? 12 : hour % 12;
   return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
 }
+var TIME_SELECTOR_WIDTH = 136;
+var MERIDIEM_TIME_SELECTOR_WIDTH = 154;
 function TimeSelector({
   value,
   useMeridiem,
@@ -10488,7 +10733,9 @@ function STimePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
+  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -10509,6 +10756,11 @@ function STimePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
+    if (next) {
+      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
+      const selectorWidth = effectiveUseMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
+      setPopoverAlignOffset(Math.max(0, (triggerWidth - selectorWidth) / 2));
+    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -10535,19 +10787,32 @@ function STimePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinWidth,
       disabled,
       className,
-      style: { minWidth: dims.fieldMinWidth, ...style },
+      style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
         /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            ref: triggerRef,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                commitOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10593,6 +10858,7 @@ function STimePicker({
             side: "bottom",
             align: "start",
             sideOffset: 4,
+            alignOffset: popoverAlignOffset,
             className: cn("z-50", FLOATING_SLIDE_ANIM),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               TimeSelector,
@@ -10630,6 +10896,11 @@ function formatTimeRangeDisplay(value, type) {
   if (value == null || value[0] === "" || value[1] === "") return "";
   return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
 }
+var TIME_RANGE_SELECTOR_WIDTH = 345;
+var MIDDAY_FIELD_MIN_WIDTH = {
+  sm: 178,
+  md: 216
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -10919,7 +11190,9 @@ function STimeRangePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
+  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -10943,6 +11216,10 @@ function STimeRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
+    if (next) {
+      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
+      setPopoverAlignOffset(Math.max(0, (triggerWidth - TIME_RANGE_SELECTOR_WIDTH) / 2));
+    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -10969,19 +11246,32 @@ function STimeRangePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
       disabled,
       className,
-      style: { minWidth: dims.fieldMinWidth, ...style },
+      style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
         /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            ref: triggerRef,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                commitOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -11027,6 +11317,7 @@ function STimeRangePicker({
             side: "bottom",
             align: "start",
             sideOffset: 4,
+            alignOffset: popoverAlignOffset,
             className: cn("z-50", FLOATING_SLIDE_ANIM),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RangeTimeSelector,
@@ -11062,6 +11353,7 @@ exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
 exports.SBarcodeInput = SBarcodeInput;
 exports.SButton = SButton;
+exports.SCROLL_AREA_AXES = SCROLL_AREA_AXES;
 exports.SCalendar = SCalendar;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
@@ -11098,8 +11390,11 @@ exports.SPortal = SPortal;
 exports.SRadio = SRadio;
 exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
+exports.SScrollArea = SScrollArea;
 exports.SSelect = SSelect;
+exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
+exports.STEPPER_SIZES = STEPPER_SIZES;
 exports.STable = STable;
 exports.STabs = STabs;
 exports.STag = STag;