sellmate-design-system-react 9.0.0-beta.80 → 9.0.0-beta.85

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export * from './components/SPieChart';
 export * from './components/SDonutChart';
 export * from './components/SToast';
 export * from './components/SSkeleton';
+export * from './components/STimeline';
 export * from './components/SForm';
 export * from './components/SField';
 export * from './components/SCheckbox';

package/dist/index.js

@@ -4847,8 +4847,22 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
+  sm: {
+    height: 28,
+    radius: 4,
+    fieldGap: 12,
+    labelGap: 6,
+    labelTypo: "typo-field-sm-bold",
+    icon: 16
+  },
+  md: {
+    height: 36,
+    radius: 6,
+    fieldGap: 16,
+    labelGap: 8,
+    labelTypo: "typo-field-md-bold",
+    icon: 16
+  }
 };
 var ALIGN = {
   start: "flex-start",
@@ -4958,7 +4972,10 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
             label !== "" && /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
+                className: cn(
+                  "flex shrink-0 items-center text-(--sys-color-field-text-default)",
+                  s.labelTypo
+                ),
                 style: {
                   // 위에 선 라벨은 제 글줄 높이만 차지한다 — 컨트롤 높이에 맞춰 늘리면
                   // 라벨과 컨트롤 사이가 간격 토큰보다 넓어진다. 줄 세우기용 labelWidth 도
@@ -4967,9 +4984,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                     height: cssLen(labelHeight) ?? s.height,
                     marginRight: s.fieldGap,
                     width: cssLen(labelWidth)
-                  },
-                  fontSize: s.fontSize,
-                  lineHeight: `${s.lineHeight}px`
+                  }
                 },
                 children: [
                   icon && /* @__PURE__ */ jsx(
@@ -5142,16 +5157,22 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
     },
     [ref]
   );
+  const autoSizedRef = useRef(false);
+  const styleHeight = textareaStyle?.height;
   useLayoutEffect(() => {
     const el = innerRef.current;
     if (el == null) return;
     if (!autogrow) {
-      el.style.height = "";
+      if (autoSizedRef.current) {
+        el.style.height = typeof styleHeight === "number" ? `${styleHeight}px` : styleHeight ?? "";
+        autoSizedRef.current = false;
+      }
       return;
     }
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
-  }, [autogrow, maxHeight, minHeight, rows, value]);
+    autoSizedRef.current = true;
+  }, [autogrow, maxHeight, minHeight, rows, styleHeight, value]);
   useFormField({
     name: rest.name,
     validate: () => {
@@ -18766,7 +18787,8 @@ function SCalendar({
                     className: cn(
                       "flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent text-[14px] leading-[var(--cmp-datepicker-calendar-day-circle-size)]",
                       selected ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                      isToday && !disabled && "font-bold"
+                      // 오늘: datepicker.calendar.day.typography.bold (→ typography.field.md.bold) 의 굵기
+                      isToday && !disabled && "font-semibold"
                     ),
                     children: cell.inCurrentMonth ? cell.day : ""
                   }
@@ -19494,7 +19516,8 @@ function RangeCalendar({
                   "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
                   !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
                   isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                  isToday && !disabled && "font-bold"
+                  // 오늘: datepicker.calendar.day.typography.bold (→ typography.field.md.bold) 의 굵기
+                  isToday && !disabled && "font-semibold"
                 ),
                 children: cell.inCurrentMonth ? cell.day : ""
               }
@@ -21726,32 +21749,57 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
       `area-gradient-${seriesIndex}`
     )) });
   }, [area, plotted, colorAt, gradientId]);
-  const lines = useMemo(
+  const linePaths = useMemo(
     () => plotted.flatMap(
-      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+      (row, seriesIndex) => runsOf(row).flatMap((run, runIndex) => {
         const d = linePath(run, smooth);
-        if (!d) return null;
-        return /* @__PURE__ */ jsx(
+        return d ? [{ key: `${seriesIndex}-${runIndex}`, seriesIndex, d }] : [];
+      })
+    ),
+    [plotted, smooth]
+  );
+  const strokeShape = {
+    strokeWidth: LINE_WIDTH,
+    strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
+  };
+  const lines = linePaths.map(({ key, seriesIndex, d }) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      "aria-hidden": true,
+      d,
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { ...strokeShape, stroke: colorAt(seriesIndex), strokeOpacity: LINE_OPACITY }
+    },
+    `line-${key}`
+  ));
+  const areaMaskId = `${gradientId}-area-mask`;
+  const areaMask = area ? /* @__PURE__ */ jsxs(
+    "mask",
+    {
+      id: areaMaskId,
+      maskUnits: "userSpaceOnUse",
+      x: 0,
+      y: 0,
+      width: size.width,
+      height: size.height,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: size.width, height: size.height, style: { fill: "white" } }),
+        linePaths.map(({ key, d }) => /* @__PURE__ */ jsx(
           "path",
           {
-            "aria-hidden": true,
             d,
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            style: {
-              stroke: colorAt(seriesIndex),
-              strokeWidth: LINE_WIDTH,
-              strokeOpacity: LINE_OPACITY,
-              strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
-            }
+            style: { ...strokeShape, stroke: "black" }
           },
-          `line-${seriesIndex}-${runIndex}`
-        );
-      })
-    ),
-    [plotted, smooth, colorAt, lineStyle]
-  );
+          `mask-${key}`
+        ))
+      ]
+    }
+  ) : null;
   const { pointHalos, pointDots } = useMemo(() => {
     const halos = [];
     const dots = [];
@@ -21925,7 +21973,8 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
                                     }
                                   ),
                                   areaGradients,
-                                  areas,
+                                  areaMask,
+                                  area && /* @__PURE__ */ jsx("g", { mask: `url(#${areaMaskId})`, children: areas }),
                                   lines,
                                   pointHalos,
                                   pointDots,
@@ -22621,10 +22670,13 @@ var SKELETON_TYPES = [
   "switch"
 ];
 var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_MODES = ["light", "dark"];
 var SKELETON_TYPE_CONFIG = {
-  rect: { radius: "var(--sys-radius-control-sm)" },
+  rect: { radius: "var(--cmp-skeleton-radius)" },
   circle: { width: "48px", height: "48px", radius: "50%" },
-  text: { radius: "var(--sys-radius-control-sm)" },
+  // 세로를 절반(scale-y-50)으로 줄여 그리므로 세로 반지름을 두 배로 줘야 모서리가 둥글게 남는다.
+  // 칠하는 높이가 한 줄의 절반이라 스켈레톤 radius 는 알약처럼 보여 한 단계 작은 값을 쓴다
+  text: { radius: "var(--radius-2) / calc(var(--radius-2) * 2)" },
   button: {
     width: "90px",
     height: "var(--cmp-button-sm-height)",
@@ -22648,13 +22700,18 @@ var SKELETON_TYPE_CONFIG = {
     radius: "var(--cmp-switch-radius)"
   }
 };
+var wave = (alpha) => `linear-gradient(90deg, transparent, color-mix(in srgb, var(--cmp-skeleton-highlight) ${alpha}, transparent), transparent)`;
 var SKELETON_COLORS = {
-  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
-  bg: "var(--sys-color-disabled-bg)",
-  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
-  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
-  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
-  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+  light: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-dark) var(--cmp-skeleton-opacity), transparent)",
+    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+    wave: wave("50%")
+  },
+  dark: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-light) var(--cmp-skeleton-opacity), transparent)",
+    /** 어두운 면에서 50% 흰 띠는 너무 튀어 바탕과 같은 투명도로 낮춘다 (Quasar dark 도 .1) */
+    wave: wave("var(--cmp-skeleton-opacity)")
+  }
 };
 var ANIMATION_CLASS = {
   pulse: "animate-skeleton-pulse",
@@ -22663,10 +22720,10 @@ var ANIMATION_CLASS = {
 var toCss = (v) => typeof v === "number" ? `${v}px` : v;
 var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
   type = "rect",
+  mode = "light",
   animation = "wave",
   animationSpeed = 1500,
   square = false,
-  bordered = false,
   size,
   width,
   height,
@@ -22675,6 +22732,7 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
   ...props
 }, ref) {
   const t = SKELETON_TYPE_CONFIG[type];
+  const colors = SKELETON_COLORS[mode];
   const duration = `${animationSpeed}ms`;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -22686,7 +22744,6 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
         "box-border cursor-wait select-none",
         // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
         type === "text" && "scale-y-50",
-        bordered && "border border-solid",
         animation === "wave" && "relative overflow-hidden",
         animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
         "motion-reduce:animate-none",
@@ -22696,8 +22753,7 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
         width: toCss(width ?? size) ?? t.width,
         height: toCss(height ?? size) ?? t.height,
         borderRadius: square ? 0 : t.radius,
-        background: SKELETON_COLORS.bg,
-        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        background: colors.bg,
         animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
         ...style
       },
@@ -22707,13 +22763,81 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
           "span",
           {
             className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
-            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+            style: {
+              background: colors.wave,
+              animationDuration: duration,
+              transform: "translateX(-100%)"
+            }
           }
         )
       ]
     }
   );
 });
+var STimelineImpl = /* @__PURE__ */ forwardRef(function STimeline({ groups, emptyText = "\uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", className, ...rest }, ref) {
+  const filled = groups.filter((group) => group.entries.length > 0);
+  if (filled.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "typo-body-sm-default flex h-full items-center justify-center text-[color:var(--cmp-timeline-empty-color)]",
+          className
+        ),
+        ...rest,
+        children: emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: filled.map((group, groupIndex) => {
+    const isLastGroup = groupIndex === filled.length - 1;
+    return /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("div", { className: "typo-body-sm-bold py-[var(--cmp-timeline-heading-paddingY)] text-[color:var(--cmp-timeline-heading-color)]", children: group.heading }),
+      /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-col p-0", children: group.entries.map((entry, entryIndex) => {
+        const isFirstEntry = entryIndex === 0;
+        const isLastEntry = entryIndex === group.entries.length - 1;
+        return (
+          // 시각 열 너비는 토큰이 없다 — 줄마다 grid 가 따로라 auto 로 두면 열이 어긋나므로 고정한다.
+          /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "grid grid-cols-[52px_var(--cmp-timeline-rail-dot-size)_minmax(0,1fr)]",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "typo-body-sm-medium whitespace-nowrap pr-[var(--cmp-timeline-entry-horizontalGap)] text-right text-[color:var(--cmp-timeline-time-color)]", children: entry.time }),
+                /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "relative", children: [
+                  !(isLastGroup && isLastEntry) && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute left-1/2 w-[var(--cmp-timeline-rail-line-width)] -translate-x-1/2 bg-[var(--cmp-timeline-rail-line-color)]",
+                        isFirstEntry && groupIndex > 0 ? "top-0" : "top-[14px]",
+                        isLastEntry ? "bottom-0" : "bottom-[-8px]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-[6px] size-[var(--cmp-timeline-rail-dot-size)] rounded-[var(--cmp-timeline-rail-dot-radius)] bg-[var(--cmp-timeline-rail-dot-bg)]" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 pl-[var(--cmp-timeline-entry-horizontalGap)]",
+                      !isLastEntry && "pb-[var(--cmp-timeline-entry-gap)]"
+                    ),
+                    children: entry.content
+                  }
+                )
+              ]
+            },
+            entry.key
+          )
+        );
+      }) })
+    ] }, group.key ?? groupIndex);
+  }) });
+});
+var STimeline2 = /* @__PURE__ */ withDisplayName(STimelineImpl, "STimeline");
 var SForm = /* @__PURE__ */ forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = useRef(null);
   const fieldsRef = useRef(/* @__PURE__ */ new Set());
@@ -22799,6 +22923,7 @@ function SRadioButton({
   value,
   size = "sm",
   disabled = false,
+  readOnly = false,
   name,
   showTooltip = false,
   onValueChange,
@@ -22816,11 +22941,13 @@ function SRadioButton({
       {
         role: "radiogroup",
         "aria-disabled": disabled,
+        "aria-readonly": readOnly || void 0,
         className: cn("inline-flex isolate", className),
         style,
         children: options.map((o, i) => {
           const selected = o.value === value;
           const od = disabled || o.disabled;
+          const ro = readOnly && !od;
           const first = i === 0;
           const last = i === options.length - 1;
           const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
@@ -22832,7 +22959,7 @@ function SRadioButton({
               name,
               "aria-checked": selected,
               disabled: od,
-              onClick: () => !od && !selected && onValueChange?.(o.value),
+              onClick: () => !od && !ro && !selected && onValueChange?.(o.value),
               onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
               onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
               onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
@@ -22841,8 +22968,8 @@ function SRadioButton({
                 "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
                 first ? "" : "-ml-px",
                 selected ? "z-10" : "",
-                !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
-                od ? "cursor-not-allowed" : "cursor-pointer"
+                !od && !ro && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+                od ? "cursor-not-allowed" : ro ? "cursor-default" : "cursor-pointer"
               ),
               style: {
                 height: `var(--cmp-radioButton-${size}-height)`,
@@ -22855,9 +22982,9 @@ function SRadioButton({
                   last ? s.radius : "0",
                   first ? s.radius : "0"
                 ].join(" "),
-                background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
-                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
-                color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+                background: od ? "var(--cmp-radioButton-bg-disabled)" : ro ? "var(--cmp-radioButton-bg-readOnly)" : "var(--cmp-radioButton-bg-default)",
+                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? ro ? "var(--cmp-radioButton-border-readOnly)" : "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+                color: od ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
               },
               children: o.label
             },
@@ -28455,6 +28582,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_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, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, 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, 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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map