sellmate-design-system-react 4.2.0 → 4.3.0

package/AGENTS.md

@@ -153,6 +153,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
   접두를 빼면 Tailwind 기본 스케일이 적용된다(`gap-8` = 32px). 접두는 속성 뒤, 숫자 앞에 온다.
 - 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 44 48 56 60 62 80`
+- **스케일에 없는 간격이 필요하면 임의 값(`p-[64px]`)으로 우회하지 않는다.** 가까운 스케일 값으로 맞추거나, 디자인상 그 값이어야 하면 **토큰 추가를 요청한다.** 이미 있는 토큰을 정확히 써야 할 때만 `gap-[var(--토큰명)]` 으로 참조한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
@@ -490,6 +491,8 @@ const columns: STableColumn[] = [
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·위저드 푸터** | `md` |
+| **페이지 하단 실행 버튼** (폼 저장·상세 수정 등) | `md` |
+| 스크롤 시 헤더로 승격된 버튼 | `sm` (최대) |
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
@@ -622,11 +625,12 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
 | --- | --- | --- | --- |
 | `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
-| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** | 로고 오른쪽 남는 폭 전체 |
+| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
 
 - `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색·계정 메뉴·알림처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
 - `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `onLauncherClick` 을 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
 
 ```tsx
 <SLayout type="box" header="full">
@@ -947,4 +951,6 @@ export default function ProductDetailPage() {
 
 `gap-sd-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. 반대로 접두를 빠뜨린 `gap-8` 은 Tailwind 기본 스케일이라 **32px 이 적용된다**. 둘 다 "간격이 왜 이러지" 로만 보이므로 반드시 `sd-` 접두 스케일 값을 쓴다. (린트는 기본값에서 앞쪽만 잡는다 — 뒤쪽까지 강제하려면 `requirePrefix: true`)
 
+접두 누락은 **자동 수정되지 않는다.** `p-16` 은 지금 64px 로 동작하는 코드라 `p-sd-16`(16px)으로 바꾸면 여백이 달라지기 때문이다. 린트는 "숫자를 px 로 의도했나(`p-sd-16`)" 와 "현재 값을 유지할 건가(스케일에 있으면 그 값)" 를 제안으로 내놓으니 **의도에 맞는 쪽을 골라 적용한다.**
+
 린트가 잡지 못하는 것(§3 컴포넌트 선택, §4 페이지 골격, 버튼 배치)은 §5 체크리스트로 직접 확인한다.

package/README.md

@@ -252,9 +252,25 @@ export default [...sellmate.configs.strict];
 { rules: { 'sellmate/no-off-scale-spacing': ['error', { requirePrefix: true }] } }
 ```
 
-> ⚠️ 이 옵션의 자동 수정은 **"클래스의 숫자 = px"** 를 전제로 `p-16` → `p-sd-16` 으로 바꿉니다.
-> 기본 Tailwind 스케일(`p-4` = 16px)로 쓰던 앱에서 켜면 여백이 1/4 로 줄어듭니다.
-> **3.x 이하의 디자인 시스템 간격 스케일을 쓰던 앱**에서만 켜고 `eslint --fix` 로 한 번에 옮기세요.
+접두 없는 `p-16` 은 **깨진 코드가 아니라 Tailwind 기본 스케일로 64px 이 적용되는 코드**입니다. 이걸 `p-sd-16`(16px)으로 옮기는 것은 표기 정규화가 아니라 값 변경이라, **자동 수정하지 않고 두 해석을 제안(suggestion)으로만** 냅니다.
+
+```text
+`p-4` 은 현재 16px 입니다 (Tailwind 기본 스케일).
+  4px 을 의도했다면  → `p-sd-4`
+  16px 을 유지하려면 → `p-sd-16`
+```
+
+편집기에서 둘 중 하나를 골라 적용하고, 스케일에 없는 값이면 대응 토큰이 없다는 안내가 나옵니다.
+
+#### 3.x 에서 한 번에 옮길 때
+
+3.x 이하의 간격 스케일(숫자 = px)을 쓰던 앱은 `unsafeFix` 로 예전의 일괄 수정을 켤 수 있습니다.
+
+```js
+{ rules: { 'sellmate/no-off-scale-spacing': ['error', { requirePrefix: true, unsafeFix: true }] } }
+```
+
+> ⚠️ `unsafeFix` 는 **"클래스의 숫자 = px"** 를 단정해 `p-16` → `p-sd-16` 으로 바꿉니다. 기본 Tailwind 스케일(`p-4` = 16px)로 쓰던 앱에서 켜면 **여백이 1/4 로 줄어듭니다.** 마이그레이션 커밋에서만 켜고 `eslint --fix` 를 돌린 뒤 다시 끄세요.
 
 ## 제공 컴포넌트
 

package/dist/components/SButton/README.md

@@ -21,6 +21,7 @@
 
  - [SActionModal](../SActionModal)
  - [SConfirmModal](../SConfirmModal)
+ - [SDrawer](../SDrawer)
  - [SDropdownButton](../SDropdownButton)
  - [SKeyValueTable](../SKeyValueTable)
  - [SLoadingModal](../SLoadingModal)
@@ -39,6 +40,7 @@ graph TD;
   SButton --> SIcon
   SActionModal --> SButton
   SConfirmModal --> SButton
+  SDrawer --> SButton
   SDropdownButton --> SButton
   SKeyValueTable --> SButton
   SLoadingModal --> SButton

package/dist/components/SDrawer/README.md

@@ -0,0 +1,42 @@
+# SDrawer
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDrawer
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — | 표시 여부 |
+| `persistent?` | `boolean` | `false` | true면 backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. |
+| `title?` | `string` | `''` | 접근성 제목 및 헤더 제목 |
+| `width?` | `number \| string` | `572` | Drawer 너비. 기본값은 Figma drawer 기준 572px이다. |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 슬롯 |
+| `button?` | `SDrawerButton` | — | 우측 기본 액션 버튼 |
+| `children?` | `ReactNode` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` | 표시 상태 변경 |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDrawer --> SButton
+  SDrawer --> SGhostButton
+  style SDrawer fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDrawer/SDrawer.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SButtonColor, type SButtonSize } from '../SButton';
+export interface SDrawerButton {
+    label?: string;
+    color?: SButtonColor;
+    outline?: boolean;
+    size?: SButtonSize;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface SDrawerProps {
+    /** 표시 여부 */
+    open?: boolean;
+    /** 표시 상태 변경 */
+    onOpenChange?: (open: boolean) => void;
+    /** 닫기(X) 버튼 클릭 */
+    onClose?: () => void;
+    /** true면 backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. */
+    persistent?: boolean;
+    /** 접근성 제목 및 헤더 제목 */
+    title?: string;
+    /** Drawer 너비. 기본값은 Figma drawer 기준 572px이다. */
+    width?: number | string;
+    /** footer 좌측 슬롯 */
+    footerLeft?: ReactNode;
+    /** 우측 기본 액션 버튼 */
+    button?: SDrawerButton;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SDrawer — Figma drawer 포팅.
+ *
+ * 모달과 동일한 전역 modal host와 stack을 공유한다. 따라서 Drawer가 열린 상태에서
+ * 모달을 추가로 열면 새 모달이 Drawer 위에 쌓이고, Drawer 내부 floating은 전용 portal
+ * container를 통해 Drawer의 backdrop 위에 표시된다.
+ */
+export declare function SDrawer({ open, onOpenChange, onClose, persistent, title, width, footerLeft, button, children, className, style, }: SDrawerProps): import("react").JSX.Element;

package/dist/components/SDrawer/index.d.ts

@@ -0,0 +1 @@
+export { SDrawer, type SDrawerButton, type SDrawerProps } from './SDrawer';

package/dist/components/SGhostButton/README.md

@@ -35,6 +35,7 @@
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SDrawer](../SDrawer)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
@@ -63,6 +64,7 @@ graph TD;
   SCalendar --> SGhostButton
   SChip --> SGhostButton
   SDateRangePicker --> SGhostButton
+  SDrawer --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
   SGuide --> SGhostButton

package/dist/components/SGnb/gnb.config.d.ts

@@ -119,6 +119,7 @@ export declare const GNB_MENU_WIDTH = 240;
  * header="full" 상단바의 로고 슬롯 고정 폭(토큰 없음 → 상수).
  * 전폭 상단바에서는 로고 오른쪽에 topContent 슬롯이 이어지므로, 로고 내용이 바뀌어도
  * 그 시작점이 흔들리지 않도록 자리를 못 박는다. fix 는 상단바가 GNB 컬럼 안이라 내용 폭을 따른다.
+ * 런처를 쓰지 않으면 그 자리를 로고가 이어받는다 → GNB_FULL_LOGO_WIDTH_NO_LAUNCHER.
  */
 export declare const GNB_FULL_LOGO_WIDTH = 140;
 /**
@@ -127,6 +128,16 @@ export declare const GNB_FULL_LOGO_WIDTH = 140;
  * 이보다 넓은 --cmp-gnb-top-gap 을 쓴다.
  */
 export declare const GNB_TOP_ICON_GAP = 8;
+/**
+ * 상단바 아이콘 버튼(xs 고스트) 폭 = --cmp-ghostButton-xs-size.
+ * 토큰이 CSS 변수라 JS 에서 더할 수 없어 값을 상수로 둔다(GNB_RAIL_WIDTH 와 같은 이유).
+ */
+export declare const GNB_TOP_ICON_SIZE = 24;
+/**
+ * 런처를 쓰지 않는 header="full" 의 로고 슬롯 폭 = 기본 폭 + 런처가 비운 자리(버튼 + 간격).
+ * 런처 유무로 topContent 시작점이 32px 씩 밀리지 않도록, 빈 자리를 로고가 흡수한다.
+ */
+export declare const GNB_FULL_LOGO_WIDTH_NO_LAUNCHER: number;
 /**
  * useRail 에서 value 를 품은 첫 depth(레일) 아이템의 value.
  * value 자체가 레일 아이템이면 그 값을, 어디에도 없으면 undefined 를 반환한다.

package/dist/index.cjs

@@ -3645,9 +3645,10 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
           !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
-          // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
-          bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
-          bordered && isExpanded && "!border-[#93C4FF]",
+          // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
+          // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
+          bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
+          bordered && isExpanded && "!border-border-accentLight",
           className
         ),
         ...rest,
@@ -6599,6 +6600,170 @@ function SLoadingModal({
     }
   );
 }
+var CLOSE_ANIMATION_DURATION2 = 300;
+function SDrawer({
+  open,
+  onOpenChange,
+  onClose,
+  persistent = false,
+  title = "",
+  width = 572,
+  footerLeft,
+  button,
+  children,
+  className,
+  style
+}) {
+  const [shaking, setShaking] = react.useState(false);
+  const [rendered, setRendered] = react.useState(() => Boolean(open));
+  const [entered, setEntered] = react.useState(false);
+  const [portalContainer, setPortalContainer] = react.useState(null);
+  const backdropPointerDownRef = react.useRef(false);
+  const contentRef = react.useRef(null);
+  const stackRegistrationRef = react.useRef(null);
+  const [layerIndex, setLayerIndex] = react.useState(null);
+  react.useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    if (!rendered) return;
+    const timer = window.setTimeout(() => setRendered(false), CLOSE_ANIMATION_DURATION2);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  react.useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return;
+    }
+    setEntered(false);
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const registration = registerModalStackEntry();
+    stackRegistrationRef.current = registration;
+    setLayerIndex(registration.layerIndex);
+    return () => {
+      registration.unregister();
+      if (stackRegistrationRef.current === registration) stackRegistrationRef.current = null;
+    };
+  }, [open]);
+  const triggerShake = react.useCallback(() => {
+    setShaking(false);
+    requestAnimationFrame(() => setShaking(true));
+  }, []);
+  const guardClose = persistent ? (event) => {
+    event.preventDefault();
+    if (stackRegistrationRef.current?.isTop()) triggerShake();
+  } : void 0;
+  const handleBackdropInteraction = () => {
+    if (persistent) {
+      if (stackRegistrationRef.current?.isTop()) triggerShake();
+      return;
+    }
+    onOpenChange?.(false);
+  };
+  const modalHost = getModalHost();
+  return /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RDialog__namespace.Overlay,
+      {
+        forceMount: rendered ? true : void 0,
+        className: "pointer-events-auto absolute inset-0 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out",
+        style: { zIndex: 0, animationFillMode: "forwards" },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          backdropPointerDownRef.current = true;
+          handleBackdropInteraction();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+          if (backdropPointerDownRef.current) {
+            backdropPointerDownRef.current = false;
+            return;
+          }
+          handleBackdropInteraction();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RDialog__namespace.Content,
+      {
+        forceMount: rendered ? true : void 0,
+        ref: contentRef,
+        className: "pointer-events-auto absolute inset-y-0 right-0 w-fit max-w-full outline-none",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          contentRef.current?.focus({ preventScroll: true });
+        },
+        onEscapeKeyDown: guardClose,
+        onPointerDownOutside: guardClose,
+        onInteractOutside: guardClose,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: title || "Drawer" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-auto relative flex h-full max-w-full translate-x-full flex-col overflow-hidden bg-[var(--cmp-drawer-bg)] shadow-[var(--shadow-overlay)] transition-transform duration-300 ease-out data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full",
+                shaking && "animate-drawer-shake",
+                className
+              ),
+              "data-state": open && entered ? "open" : "closed",
+              style: { width, ...style },
+              onAnimationEnd: (event) => {
+                if (event.animationName === "drawer-shake") setShaking(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] bg-[var(--cmp-overlay-header-bg)] px-[var(--cmp-overlay-header-paddingX)] py-[var(--cmp-overlay-header-paddingY)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SGhostButton,
+                    {
+                      icon: "close",
+                      ariaLabel: "\uB2EB\uAE30",
+                      onClick: () => {
+                        onClose?.();
+                        onOpenChange?.(false);
+                      },
+                      className: "absolute right-[12px] top-[12px]"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-drawer-body-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) }) }),
+                (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] bg-[var(--cmp-overlay-footer-bg-default)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-overlay)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center justify-between", children: footerLeft }),
+                  button && /* @__PURE__ */ jsxRuntime.jsx(
+                    SButton,
+                    {
+                      color: button.color ?? "primary",
+                      outline: button.outline,
+                      size: button.size ?? "md",
+                      disabled: button.disabled,
+                      onClick: () => button.onClick?.(),
+                      label: button.label ?? "\uD655\uC778"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: setPortalContainer,
+              className: "pointer-events-auto fixed left-0 top-0",
+              style: { zIndex: 2 }
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) });
+}
 var EXIT_DURATION = 300;
 var EXIT_BUFFER = 100;
 var SModalRefImpl = class {
@@ -6963,6 +7128,8 @@ var GNB_EXPAND_MS = 200;
 var GNB_MENU_WIDTH = 240;
 var GNB_FULL_LOGO_WIDTH = 140;
 var GNB_TOP_ICON_GAP = 8;
+var GNB_TOP_ICON_SIZE = 24;
+var GNB_FULL_LOGO_WIDTH_NO_LAUNCHER = GNB_FULL_LOGO_WIDTH + GNB_TOP_ICON_SIZE + GNB_TOP_ICON_GAP;
 function findGnbRailValue(items, value) {
   if (items.some((item) => item.value === value)) return value;
   return findGnbAncestors(items, value)[0];
@@ -7340,7 +7507,11 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
         ...header === "full" ? (
           // full 은 전폭이라 로고 자리가 고정이다 — 폭 140px(디자인 스펙, 전용 토큰 없음)로 못 박아
           // 로고 내용이 바뀌어도 오른쪽 topContent 시작점이 흔들리지 않게 한다.
-          { width: GNB_FULL_LOGO_WIDTH, marginLeft: H.topGap }
+          // 런처가 없으면 그 자리(버튼 + 간격)를 로고가 이어받아, 런처 유무로 topContent 가 밀리지 않는다.
+          {
+            width: launcherButton ? GNB_FULL_LOGO_WIDTH : GNB_FULL_LOGO_WIDTH_NO_LAUNCHER,
+            marginLeft: H.topGap
+          }
         ) : (
           // fix 는 폴드가 ml-auto 로 밀려나므로(margin-left 를 못 쓴다) 로고 오른쪽에 최소 간격을 둔다
           { marginRight: H.topGap }
@@ -7891,10 +8062,10 @@ function SStepper({
                       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" })
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
                       ]
                     }
                   )
@@ -8044,7 +8215,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
                 STooltip2,
                 {
                   message: labelTooltip !== "" ? [labelTooltip] : void 0,
@@ -12289,7 +12460,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                     "span",
                     {
                       className: "s-chip-input__divider shrink-0",
-                      style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
+                      style: { width: 1, height: 12, backgroundColor: "var(--color-divider-default)" }
                     }
                   ),
                   showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12351,7 +12522,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             role: "option",
                             "aria-selected": selected || active,
                             className: "rounded-full",
-                            style: active ? { outline: "2px solid #0075FF", outlineOffset: 1 } : void 0,
+                            style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
                               e.preventDefault();
                               if (!selected) addChip(item);
@@ -13482,6 +13653,7 @@ exports.SDraggableGroup = SDraggableGroup;
 exports.SDraggableItem = SDraggableItem2;
 exports.SDraggableList = SDraggableList;
 exports.SDraggableProvider = SDraggableProvider;
+exports.SDrawer = SDrawer;
 exports.SDropdownButton = SDropdownButton2;
 exports.SExpansionItem = SExpansionItem;
 exports.SExpansionList = SExpansionList2;