sellmate-design-system-react 9.0.0-beta.89 → 9.0.0-beta.90

package/dist/index.js

@@ -12,6 +12,7 @@ import * as RDropdown5 from '@radix-ui/react-dropdown-menu';
 import * as RSwitch from '@radix-ui/react-switch';
 import * as RDialog from '@radix-ui/react-dialog';
 import * as Ariakit from '@ariakit/react';
+import * as RSlider from '@radix-ui/react-slider';
 
 var isSdSpacing = (value) => /^sd-\d+$/.test(value);
 var SD_SPACING_GROUPS = [
@@ -4870,10 +4871,16 @@ var ALIGN = {
   end: "flex-end"
 };
 var FOCUS_RING_SHADOW = "0px 0px 4px 0px #0071ff66";
+var fieldLabelId = (controlId) => `${controlId}-label`;
+function useFieldControlId(id) {
+  const autoId = useId();
+  return id ?? autoId;
+}
 var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
 var SField = /* @__PURE__ */ forwardRef(function SField2({
   name,
   label = "",
+  controlId,
   subLabel = "",
   icon,
   iconColor,
@@ -4996,7 +5003,19 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                       style: { marginRight: s.labelGap }
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      id: controlId ? fieldLabelId(controlId) : void 0,
+                      htmlFor: controlId,
+                      className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+                      onClick: () => {
+                        const control = controlId ? document.getElementById(controlId) : null;
+                        if (control && !("labels" in control)) control.focus();
+                      },
+                      children: label
+                    }
+                  ),
                   subLabel !== "" && // field 라벨 토큰이 아니라 기본 타이포 토큰을 쓴다 — 보조 라벨은 굵기·색이 라벨과
                   // 따로 가므로 field 토큰에 묶지 않는다. 크기도 size 와 무관하게 body/sm 고정.
                   /* @__PURE__ */ jsx(
@@ -5148,6 +5167,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
   const minHeight = heightForRows(MIN_ROWS);
   const maxHeight = autogrow && maxRows != null ? heightForRows(maxRows) : void 0;
   const [ruleError, setRuleError] = useState("");
+  const controlId = useFieldControlId(rest.id);
   const innerRef = useRef(null);
   const setRefs2 = useCallback(
     (node) => {
@@ -5189,6 +5209,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -5215,6 +5236,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
         "textarea",
         {
           ref: setRefs2,
+          id: controlId,
           value: value ?? "",
           rows,
           disabled,
@@ -5265,7 +5287,9 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
   placeholder = DEFAULT_PLACEHOLDER,
   disabled = false,
   onSend,
+  hasAttachments = false,
   onAttach,
+  onPasteFiles,
   busy = false,
   onStop,
   footerAction,
@@ -5275,17 +5299,26 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
   textareaClassName,
   ...rest
 }, ref) {
-  const canSend = !disabled && !busy && value.trim() !== "";
+  const hasText = value.trim() !== "";
+  const canSend = !disabled && !busy && (hasText || hasAttachments);
   const send = useCallback(() => {
     if (!canSend) return;
-    onSend?.(value);
-  }, [canSend, onSend, value]);
+    onSend?.(hasText ? value : "");
+  }, [canSend, hasText, onSend, value]);
   const handleKeyDown = (e) => {
     rest.onKeyDown?.(e);
     if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) return;
     e.preventDefault();
     send();
   };
+  const handlePaste = (e) => {
+    rest.onPaste?.(e);
+    if (onPasteFiles == null || e.defaultPrevented) return;
+    const files = Array.from(e.clipboardData.files);
+    if (files.length === 0) return;
+    e.preventDefault();
+    onPasteFiles(files);
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
       onAttach != null && /* @__PURE__ */ jsx(
@@ -5316,7 +5349,8 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
           textareaClassName,
           textareaStyle: { minHeight: TEXTAREA_MIN_HEIGHT },
           ...rest,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          onPaste: handlePaste
         }
       ),
       busy ? /* @__PURE__ */ jsx(
@@ -5577,6 +5611,7 @@ var SChatMessageImpl = /* @__PURE__ */ forwardRef(function SChatMessage({
   readStatus,
   avatarSrc,
   avatarAlt,
+  showAvatar = true,
   continued = false,
   variant = "default",
   actions,
@@ -5607,7 +5642,7 @@ var SChatMessageImpl = /* @__PURE__ */ forwardRef(function SChatMessage({
       ),
       ...rest,
       children: [
-        !outgoing && /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
+        !outgoing && showAvatar && /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -6754,6 +6789,7 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
   className,
   onMouseEnter,
   onMouseLeave,
+  onKeyDown,
   ...rest
 }, ref) {
   const [hovered, setHovered] = useState(false);
@@ -6777,15 +6813,29 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
     setHovered(false);
     onMouseLeave?.(event);
   };
+  const pressable = isInteractive && rest.onClick != null;
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!pressable || event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       "aria-disabled": disabled || void 0,
+      role: pressable ? "button" : void 0,
+      tabIndex: pressable ? 0 : void 0,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onKeyDown: handleKeyDown,
       className: cn(
         "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-(--cmp-listItem-text-default)",
+        // 링을 안쪽으로 그린다 — bordered 항목은 overflow-hidden 이라 바깥 링이 잘린다
+        pressable && "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--sys-color-border-accent)",
         titleTypo,
         disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : isSelected ? cn(
           "cursor-pointer text-(--cmp-listItem-text-selected)",
@@ -7469,6 +7519,7 @@ function SCheckbox({
   val,
   onValueChange,
   label = "",
+  ariaLabel,
   disabled = false,
   inverse = false,
   className,
@@ -7509,6 +7560,7 @@ function SCheckbox({
             checked: state2,
             disabled,
             onCheckedChange: handleChange,
+            "aria-label": ariaLabel,
             className: cn(
               "flex h-[var(--cmp-checkbox-size)] w-[var(--cmp-checkbox-size)] items-center justify-center rounded-[var(--cmp-checkbox-radius)] border-[length:var(--cmp-checkbox-borderWidth)] border-solid bg-[var(--cb-bg)] border-[color:var(--cb-border)] outline-none",
               disabled ? "cursor-not-allowed" : "cursor-pointer",
@@ -15709,6 +15761,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const baseId = useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
+  const triggerId = `${baseId}-trigger`;
   const [win, setWin] = useState({ start: 0, end: 0, top: 0, bottom: 0 });
   const winRef = useRef(win);
   winRef.current = win;
@@ -16195,6 +16248,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     SField,
     {
       label,
+      controlId: triggerId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -16220,8 +16274,10 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
           "button",
           {
             ref: triggerRef,
+            id: triggerId,
             type: "button",
             disabled: effectiveDisabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : void 0,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
@@ -16317,7 +16373,12 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
               event.preventDefault();
               requestAnimationFrame(() => searchInputRef.current?.focus());
             },
-            onPointerDownOutside: () => {
+            onPointerDownOutside: (event) => {
+              const target = event.target;
+              if (label && target?.closest?.(`[id="${fieldLabelId(triggerId)}"]`)) {
+                event.preventDefault();
+                return;
+              }
               dismissedByPointerRef.current = true;
             },
             onCloseAutoFocus: (event) => {
@@ -18237,6 +18298,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
 }, ref) {
   const [visible, setVisible] = useState(false);
   const [ruleError, setRuleError] = useState("");
+  const controlId = useFieldControlId(rest.id);
   const f = FONT2[size];
   const isPassword = type === "password";
   const inputType = isPassword ? visible ? "text" : "password" : type;
@@ -18261,6 +18323,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -18300,6 +18363,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
               "input",
               {
                 ref: mergeRefs(ref, valueTooltip.valueRef),
+                id: controlId,
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -18475,6 +18539,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
   const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
   const [display, setDisplay] = useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = useState("");
+  const controlId = useFieldControlId();
   const [rangeError, setRangeError] = useState("");
   const innerRef = useRef(null);
   const valueTooltip = useTruncatedValueTooltip({ enabled: readOnly && !disabled, text: display });
@@ -18624,6 +18689,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -18663,6 +18729,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
               "input",
               {
                 ref: setRefs2,
+                id: controlId,
                 name,
                 type: "text",
                 inputMode: allowDecimal ? "decimal" : "numeric",
@@ -19364,6 +19431,8 @@ function SDatePicker({
 }) {
   const portalContainer = usePortalContainer();
   const [open, setOpen] = useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const hasValue = value != null && value !== "";
@@ -19420,6 +19489,7 @@ function SDatePicker({
   return /* @__PURE__ */ jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -19446,8 +19516,10 @@ function SDatePicker({
         /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -19477,6 +19549,7 @@ function SDatePicker({
               /* @__PURE__ */ jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minW,
@@ -19903,6 +19976,8 @@ function SDateRangePicker({
 }) {
   const portalContainer = usePortalContainer();
   const [open, setOpen] = useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [ruleError, setRuleError] = useState("");
   const [pendingStart, setPendingStart] = useState(null);
   const hasValue = value != null && value[0] !== "" && value[1] !== "";
@@ -19959,6 +20034,7 @@ function SDateRangePicker({
   return /* @__PURE__ */ jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -19994,8 +20070,10 @@ function SDateRangePicker({
             /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
               "div",
               {
+                id: triggerId,
                 role: "button",
                 "aria-disabled": disabled,
+                "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
                 tabIndex: disabled ? -1 : 0,
                 "data-name": name,
                 onKeyDown: (event) => {
@@ -20023,6 +20101,7 @@ function SDateRangePicker({
                   /* @__PURE__ */ jsx(
                     "span",
                     {
+                      id: triggerTextId,
                       className: cn(
                         "flex-1 items-center",
                         hasDisplay ? "flex" : "block truncate text-center"
@@ -20285,6 +20364,8 @@ function SFilePicker({
 }) {
   const autoId = useId();
   const resolvedName = name ?? autoId;
+  const triggerId = `${autoId}-trigger`;
+  const displayTextId = `${autoId}-text`;
   const inputRef = useRef(null);
   const contentBoxRef = useRef(null);
   const [ruleError, setRuleError] = useState("");
@@ -20385,10 +20466,12 @@ function SFilePicker({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            id: triggerId,
             type: "button",
             disabled,
             onClick: open,
             "aria-label": placeholder,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${displayTextId}` : void 0,
             className: cn(
               "flex min-w-0 flex-1 items-center bg-transparent text-left",
               gapCls,
@@ -20406,6 +20489,7 @@ function SFilePicker({
               /* @__PURE__ */ jsx(
                 "span",
                 {
+                  id: displayTextId,
                   className: cn(
                     "min-w-0 flex-1 truncate text-[12px]",
                     inlinePlaceholder && "text-[color:var(--cmp-filepicker-text-placeholder)] transition-colors group-hover/filepicker:text-[color:var(--cmp-filepicker-text-default)]"
@@ -20453,6 +20537,7 @@ function SFilePicker({
       {
         borderless: inline,
         label,
+        controlId: triggerId,
         labelPosition,
         subLabel,
         labelWidth,
@@ -25009,8 +25094,12 @@ var EditorBody = /* @__PURE__ */ forwardRef(function EditorBody2({
   bubbleMenu,
   onImageUpload,
   editorClassName,
-  editorStyle
+  editorStyle,
+  controlId,
+  labelled
 }, ref) {
+  const labelledRef = useRef(labelled);
+  labelledRef.current = labelled;
   const placeholderRef = useRef(placeholder);
   placeholderRef.current = placeholder;
   const handlers = useRef({ onInput, onFocusChange });
@@ -25025,6 +25114,10 @@ var EditorBody = /* @__PURE__ */ forwardRef(function EditorBody2({
     editable,
     // 소비 앱이 Next.js RSC 라면 첫 렌더가 서버에서 일어난다 — 즉시 렌더하면 하이드레이션이 어긋난다
     immediatelyRender: false,
+    // 본문은 contenteditable 이라 <label for> 가 닿지 않는다 — 레이블 id 로 이름을 잇는다
+    editorProps: {
+      attributes: () => labelledRef.current ? { "id": controlId, "aria-labelledby": fieldLabelId(controlId) } : { id: controlId }
+    },
     onUpdate: ({ editor: e }) => {
       const html = e.isEmpty ? "" : e.getHTML();
       htmlRef.current = html;
@@ -25243,6 +25336,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
 }, ref) {
   const [ruleError, setRuleError] = useState("");
   const [selfFocused, setSelfFocused] = useState(false);
+  const controlId = useFieldControlId();
   const htmlRef = useRef(value ?? defaultValue ?? "");
   const bodyRef = useRef(null);
   const pendingFocusRef = useRef(false);
@@ -25313,6 +25407,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
     {
       name,
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -25376,6 +25471,8 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
           toolbar: resolvedToolbar,
           bubbleMenu: resolvedBubbleMenu,
           onImageUpload,
+          controlId,
+          labelled: !!label,
           editorClassName,
           editorStyle
         }
@@ -25383,6 +25480,302 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
     }
   );
 });
+var TRACK = 6;
+var THUMB = 16;
+var PRESS_SCALE = 1.2;
+var PRESS_GROW = THUMB * (PRESS_SCALE - 1) / 2;
+var SHADOW_Y = 2;
+var SHADOW_BLUR = 4;
+var KNOB_BLEED = Math.ceil(PRESS_GROW + SHADOW_BLUR);
+var MARK_DOT = 4;
+var BUBBLE_HEIGHT = 18;
+var BUBBLE_GAP = 4;
+var ROW_HEIGHT = { sm: 28, md: 36 };
+var COLOR = {
+  track: "var(--sys-color-border-default)",
+  trackDisabled: "var(--sys-color-disabled-bg)",
+  range: "var(--sys-color-bg-accent)",
+  rangeDisabled: "var(--color-brilliantblue-40)",
+  thumbBg: "var(--sys-color-bg-frame)",
+  markOn: "var(--sys-color-bg-frame)",
+  markOff: "var(--sys-color-border-strong)",
+  markOffDisabled: "var(--sys-color-disabled-border)",
+  markLabel: "var(--sys-color-fg-tertiary)",
+  bubbleBg: "var(--sys-color-bg-deep)",
+  bubbleText: "var(--sys-color-fg-inverse)"
+};
+var thumbAlignedLeft = (pct) => `calc(${pct}% + ${THUMB / 2 * (1 - pct / 50)}px)`;
+var toPercent = (v, min, max) => max === min ? 0 : (v - min) / (max - min) * 100;
+var SSlider = /* @__PURE__ */ forwardRef(function SSlider2({
+  value,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  marks,
+  showValue = "drag",
+  formatValue = String,
+  size = "sm",
+  rules,
+  name,
+  status,
+  label,
+  labelPosition,
+  subLabel,
+  labelWidth,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  hint,
+  error,
+  errorMessage,
+  width,
+  disabled = false,
+  readOnly = false,
+  className,
+  style
+}, ref) {
+  const isRange = Array.isArray(value);
+  const values = isRange ? value : [value ?? min];
+  const toOut = (v) => isRange ? [v[0], v[1]] : v[0];
+  const [ruleError, setRuleError] = useState("");
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
+  const resolvedError = error || ruleError !== "";
+  const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
+  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const [dragging, setDragging] = useState(false);
+  const [focusIndex, setFocusIndex] = useState(null);
+  const thumbId = useFieldControlId();
+  const wrapRef = useRef(null);
+  const bubbleRefs = useRef([]);
+  const layoutKey = `${values.join(",")}|${values.map(formatValue).join(",")}`;
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const layout = () => {
+      const outer = wrap.clientWidth;
+      const track = outer - KNOB_BLEED * 2;
+      bubbleRefs.current.forEach((el, i) => {
+        if (!el || values[i] === void 0) return;
+        const pct = toPercent(values[i], min, max);
+        const center = KNOB_BLEED + track * pct / 100 + THUMB / 2 * (1 - pct / 50);
+        const half = el.offsetWidth / 2;
+        const shift = center - half < 0 ? half - center : center + half > outer ? outer - half - center : 0;
+        el.style.transform = `translateX(calc(-50% + ${shift}px))`;
+      });
+    };
+    layout();
+    const ro = new ResizeObserver(layout);
+    ro.observe(wrap);
+    return () => ro.disconnect();
+  }, [layoutKey, min, max, showValue]);
+  const rowHeight = ROW_HEIGHT[size];
+  const rowGap = (rowHeight - THUMB) / 2;
+  const topSpace = Math.max(
+    0,
+    KNOB_BLEED - rowGap,
+    showValue === "none" ? 0 : BUBBLE_HEIGHT + BUBBLE_GAP + PRESS_GROW - rowGap
+  );
+  const bottomSpace = Math.max(0, KNOB_BLEED + SHADOW_Y - rowGap);
+  const markList = marks === true ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => ({
+    value: min + i * step
+  })) : Array.isArray(marks) ? marks.filter((m) => m.value >= min && m.value <= max) : [];
+  const hasMarkLabels = markList.some((m) => m.label);
+  const [rangeStart, rangeEnd] = isRange ? [values[0], values[1]] : [min, values[0]];
+  const interactive = !disabled && !readOnly;
+  return /* @__PURE__ */ jsx(
+    SField,
+    {
+      name,
+      label,
+      controlId: thumbId,
+      labelPosition,
+      subLabel,
+      labelWidth,
+      labelHeight: topSpace > 0 ? rowHeight + topSpace * 2 : void 0,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      hint,
+      size,
+      error: resolvedError,
+      status: resolvedStatus,
+      errorMessage: resolvedErrorMessage,
+      width,
+      disabled,
+      readOnly,
+      borderless: true,
+      multiline: true,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: wrapRef,
+          className: "flex w-full flex-col",
+          style: { padding: `${topSpace}px ${KNOB_BLEED}px ${bottomSpace}px` },
+          children: [
+            /* @__PURE__ */ jsxs(
+              RSlider.Root,
+              {
+                ref,
+                value: values,
+                min,
+                max,
+                step,
+                disabled,
+                minStepsBetweenThumbs: 0,
+                onValueChange: (v) => {
+                  if (!interactive) return;
+                  const next = toOut(v);
+                  onValueChange?.(next);
+                  if (ruleError !== "") setRuleError(runRules(next, rules));
+                },
+                onValueCommit: (v) => {
+                  if (!interactive) return;
+                  const next = toOut(v);
+                  onValueCommit?.(next);
+                  if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+                },
+                onPointerDown: () => interactive && setDragging(true),
+                onPointerUp: () => setDragging(false),
+                onLostPointerCapture: () => setDragging(false),
+                className: cn(
+                  "relative flex w-full touch-none items-center select-none",
+                  // 읽기 전용은 포인터로 잡히지 않게 한다 — 키보드 포커스는 남겨 값을 읽을 수 있게 한다
+                  readOnly && "pointer-events-none"
+                ),
+                style: { height: rowHeight },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    RSlider.Track,
+                    {
+                      className: "relative grow overflow-hidden rounded-full",
+                      style: { height: TRACK, background: disabled ? COLOR.trackDisabled : COLOR.track },
+                      children: /* @__PURE__ */ jsx(
+                        RSlider.Range,
+                        {
+                          className: "absolute h-full",
+                          style: { background: disabled ? COLOR.rangeDisabled : COLOR.range }
+                        }
+                      )
+                    }
+                  ),
+                  markList.map((m) => {
+                    const on = m.value >= rangeStart && m.value <= rangeEnd;
+                    return /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+                        style: {
+                          left: thumbAlignedLeft(toPercent(m.value, min, max)),
+                          width: MARK_DOT,
+                          height: MARK_DOT,
+                          background: on ? COLOR.markOn : disabled ? COLOR.markOffDisabled : COLOR.markOff
+                        }
+                      },
+                      m.value
+                    );
+                  }),
+                  values.map((v, i) => {
+                    const pressed = interactive && dragging && focusIndex === i;
+                    return /* @__PURE__ */ jsxs(
+                      RSlider.Thumb,
+                      {
+                        id: i === 0 ? thumbId : void 0,
+                        "aria-label": isRange ? `${label ?? ""} ${i === 0 ? "\uCD5C\uC19F\uAC12" : "\uCD5C\uB313\uAC12"}`.trim() : label,
+                        "aria-valuetext": formatValue(v),
+                        "aria-readonly": readOnly || void 0,
+                        onFocus: () => setFocusIndex(i),
+                        onBlur: () => setFocusIndex(null),
+                        className: cn(
+                          "group/thumb relative block rounded-full outline-none",
+                          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sys-color-field-border-focus)",
+                          interactive ? "cursor-grab active:cursor-grabbing" : disabled && "cursor-not-allowed"
+                        ),
+                        style: { width: THUMB, height: THUMB },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "aria-hidden": true,
+                              className: "absolute inset-0 rounded-full border-3 border-solid shadow-[0_2px_4px_rgba(0,0,0,0.16)] transition-transform duration-150 ease-out",
+                              style: {
+                                background: COLOR.thumbBg,
+                                borderColor: disabled ? COLOR.rangeDisabled : COLOR.range,
+                                transform: pressed ? `scale(${PRESS_SCALE})` : void 0
+                              }
+                            }
+                          ),
+                          showValue !== "none" && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              ref: (el) => {
+                                bubbleRefs.current[i] = el;
+                              },
+                              "aria-hidden": true,
+                              className: cn(
+                                // 줄 높이로 가운데를 맞추면 줄 상자에 내림 획 자리가 들어 있어 숫자가 위로 1px 가까이 뜬다.
+                                // 글자 상자를 대문자 높이~기준선으로 잘라(text-box) 그 상자를 flex 로 가운데 둔다.
+                                "typo-body-xs-medium pointer-events-none absolute left-1/2 flex items-center rounded-[6px] px-[6px] whitespace-nowrap transition-opacity",
+                                showValue === "always" || pressed ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100",
+                                // 비활성·읽기 전용에서는 조작이 없으므로 drag 말풍선도 띄우지 않는다
+                                showValue === "drag" && !interactive && "hidden"
+                              ),
+                              style: {
+                                bottom: `calc(100% + ${BUBBLE_GAP + (pressed ? PRESS_GROW : 0)}px)`,
+                                height: BUBBLE_HEIGHT,
+                                transform: "translateX(-50%)",
+                                background: COLOR.bubbleBg,
+                                color: COLOR.bubbleText
+                              },
+                              children: /* @__PURE__ */ jsx("span", { className: "[text-box:trim-both_cap_alphabetic]", children: formatValue(v) })
+                            }
+                          )
+                        ]
+                      },
+                      i
+                    );
+                  })
+                ]
+              }
+            ),
+            hasMarkLabels && /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: BUBBLE_HEIGHT }, children: markList.map((m) => {
+              if (!m.label) return null;
+              const pct = toPercent(m.value, min, max);
+              const align = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
+              return /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "typo-body-xs-medium absolute top-0 whitespace-nowrap",
+                  style: {
+                    left: pct <= 0 ? 0 : pct >= 100 ? "100%" : thumbAlignedLeft(pct),
+                    transform: align,
+                    color: disabled ? "var(--sys-color-disabled-text)" : COLOR.markLabel
+                  },
+                  children: m.label
+                },
+                m.value
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+});
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
 var EDITOR_LISTBOX_MAX_HEIGHT = "min(640px, var(--radix-popover-content-available-height))";
@@ -27263,6 +27656,24 @@ function EmptyItem({ children }) {
     }
   );
 }
+function splitBySeparators(text, separators) {
+  const seps = separators.filter((s) => s !== "");
+  if (seps.length === 0) return { parts: [], rest: text };
+  const pieces = [];
+  let from = 0;
+  for (let i = 0; i < text.length; ) {
+    const sep = seps.find((s) => text.startsWith(s, i));
+    if (sep) {
+      pieces.push(text.slice(from, i));
+      i += sep.length;
+      from = i;
+    } else {
+      i += 1;
+    }
+  }
+  const parts = pieces.map((p) => p.trim()).filter((p) => p !== "");
+  return { parts, rest: text.slice(from) };
+}
 var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   values = [],
   onValueChange,
@@ -27273,7 +27684,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   disabledChips = [],
   size = "sm",
   disabled = false,
-  placeholder = "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D / \uCF64\uB9C8\uB85C \uAD6C\uBD84 / \uB744\uC5B4\uC4F0\uAE30 \uBD88\uAC00)",
+  placeholder: placeholderProp,
   name,
   rules,
   error,
@@ -27286,6 +27697,9 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   recommendedItems = [],
   loadingRecommendedItems = false,
   dropdownMinWidth = 200,
+  commitOnBlur = false,
+  separators,
+  ariaLabel,
   label,
   labelPosition,
   subLabel,
@@ -27301,7 +27715,9 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   className,
   style
 }, ref) {
+  const placeholder = placeholderProp ?? (separators?.includes(",") ? "\uD0DC\uADF8 \uC785\uB825 (Enter\xB7\uCF64\uB9C8\uB85C \uB4F1\uB85D)" : "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D)");
   const autoId = useId();
+  const controlId = `${autoId}-input`;
   const resolvedName = name ?? autoId;
   const listboxId = `${autoId}-listbox`;
   const activeOptionId = `${autoId}-active-option`;
@@ -27348,12 +27764,17 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   const isMax = maxCount != null && values.length >= maxCount;
   const resolvedDropdownMinWidth = dropdownMinWidth == null ? void 0 : typeof dropdownMinWidth === "number" ? `${dropdownMinWidth}px` : dropdownMinWidth;
   const commit = (next) => onValueChange?.(next);
+  const addChips = (vs, rest = "") => {
+    const room = maxCount == null ? vs.length : Math.max(maxCount - values.length, 0);
+    const added = vs.slice(0, room);
+    if (added.length > 0) commit([...values, ...added]);
+    setInputValue(rest);
+    setActiveIndex(-1);
+    onInput?.(rest);
+  };
   const addChip = (v) => {
     if (maxCount != null && values.length >= maxCount) return;
-    commit([...values, v]);
-    setInputValue("");
-    setActiveIndex(-1);
-    onInput?.("");
+    addChips([v]);
     inputRef.current?.focus();
   };
   const removeChip = (i) => {
@@ -27438,6 +27859,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -27536,7 +27958,9 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                     "input",
                     {
                       ref: inputRef,
+                      id: controlId,
                       name: resolvedName,
+                      "aria-label": ariaLabel,
                       size: 1,
                       role: "combobox",
                       "aria-expanded": showDropdown,
@@ -27560,8 +27984,24 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                       placeholder: values.length === 0 ? placeholder : "",
                       disabled,
                       value: inputValue,
+                      onPaste: (e) => {
+                        if (!separators) return;
+                        const pasted = e.clipboardData.getData("text");
+                        if (!separators.some((s) => s !== "" && pasted.includes(s))) return;
+                        e.preventDefault();
+                        const { parts, rest } = splitBySeparators(inputValue + pasted, separators);
+                        const tail = rest.trim();
+                        addChips(tail === "" ? parts : [...parts, tail]);
+                      },
                       onChange: (e) => {
                         const nextValue = e.target.value;
+                        if (separators && !isComposingRef.current) {
+                          const { parts, rest } = splitBySeparators(nextValue, separators);
+                          if (parts.length > 0 || rest !== nextValue) {
+                            addChips(parts, rest);
+                            return;
+                          }
+                        }
                         const wasEmpty = inputValue === "";
                         const isEmpty = nextValue === "";
                         if (wasEmpty !== isEmpty) {
@@ -27576,8 +28016,11 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                       onCompositionStart: () => {
                         isComposingRef.current = true;
                       },
-                      onCompositionEnd: () => {
+                      onCompositionEnd: (e) => {
                         isComposingRef.current = false;
+                        if (!separators) return;
+                        const { parts, rest } = splitBySeparators(e.currentTarget.value, separators);
+                        if (parts.length > 0 || rest !== e.currentTarget.value) addChips(parts, rest);
                       },
                       onFocus: () => {
                         setFocused(true);
@@ -27587,6 +28030,8 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                       onBlur: () => {
                         setFocused(false);
                         setActiveIndex(-1);
+                        if (commitOnBlur && inputValue.trim() !== "" && !isMax)
+                          addChips([inputValue.trim()]);
                         onBlur?.();
                       }
                     }
@@ -27780,6 +28225,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
   }, ref) {
     const f = FONT3[size];
     const [ruleError, setRuleError] = useState("");
+    const controlId = useFieldControlId();
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
       name,
@@ -27800,6 +28246,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
       SField,
       {
         label,
+        controlId,
         labelPosition,
         subLabel,
         labelWidth,
@@ -27825,16 +28272,21 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
           ...style
         },
         children: /* @__PURE__ */ jsxs(
-          "label",
+          "div",
           {
+            role: "presentation",
             className: "flex h-full w-full items-center",
             style: { gap: f.gap, padding: `0 ${f.paddingX}` },
+            onClick: (e) => {
+              if (e.target === e.currentTarget) e.currentTarget.querySelector("input")?.focus();
+            },
             children: [
               prefix,
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   ref: mergeRefs(ref, valueTooltip.valueRef),
+                  id: controlId,
                   name,
                   type: "text",
                   value: value ?? "",
@@ -27872,7 +28324,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
                 {
                   icon: "close",
                   size: "xxs",
-                  ariaLabel: "clear",
+                  ariaLabel: "\uC9C0\uC6B0\uAE30",
                   onClick: () => {
                     onValueChange?.("");
                     setRuleError(runRules("", rules));
@@ -28189,6 +28641,8 @@ function STimePicker({
   const portalContainer = usePortalContainer();
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
@@ -28226,6 +28680,7 @@ function STimePicker({
   return /* @__PURE__ */ jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -28253,8 +28708,10 @@ function STimePicker({
           "div",
           {
             ref: triggerRef,
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -28284,6 +28741,7 @@ function STimePicker({
               /* @__PURE__ */ jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minWidth,
@@ -28659,6 +29117,8 @@ function STimeRangePicker({
   const portalContainer = usePortalContainer();
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
@@ -28698,6 +29158,7 @@ function STimeRangePicker({
   return /* @__PURE__ */ jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -28725,8 +29186,10 @@ function STimeRangePicker({
           "div",
           {
             ref: triggerRef,
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -28756,6 +29219,7 @@ function STimeRangePicker({
               /* @__PURE__ */ jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minWidth,
@@ -28809,6 +29273,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, STimeline2 as STimeline, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, STreeTable, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSlider, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, STimeline2 as STimeline, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, STreeTable, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldLabelId, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map