sellmate-design-system-react 4.3.0 → 5.0.1

package/dist/lib/global-overlay.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 모달 위에 뜨는 전역 레이어(토스트·로딩)의 표식.
+ *
+ * 이 레이어들은 모달보다 위(Z_INDEX.toast/loading > Z_INDEX.modalHost)에 뜨지만 DOM 상으로는
+ * body 직속이라, Radix Dialog 입장에서는 '모달 바깥'이다. 표식이 없으면 토스트 닫기 버튼을
+ * 누르는 것만으로 바깥 클릭으로 처리돼 persistent 모달은 흔들리고 일반 모달은 닫혀버린다.
+ */
+export declare const GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
+/** 전역 레이어 루트에 펼쳐 넣는다. */
+export declare const globalOverlayProps: {
+    "data-s-global-overlay": string;
+};
+/**
+ * Radix 의 outside 이벤트(pointerDownOutside/focusOutside/interactOutside)가
+ * 전역 레이어에서 비롯됐는지 판별한다. Radix 는 원본 이벤트를 `detail.originalEvent` 에 담는다.
+ */
+export declare function isFromGlobalOverlay(event: Event): boolean;

package/dist/lib/isomorphic-layout-effect.d.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+/**
+ * 페인트 **전에** 부모로 상태를 올려야 할 때 쓴다.
+ * useEffect 로 올리면 등록 전 값(예: 폭 0)으로 한 프레임이 먼저 그려져 레이아웃이 번쩍인다.
+ *
+ * 서버에는 레이아웃 단계가 없어 useLayoutEffect 가 경고를 내므로 SSR 에서는 useEffect 로 내린다.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/llms-full.txt

@@ -404,6 +404,24 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
   .onDismissed(() => {});
 ```
 
+#### 3-3-5. 닫기 경로 — `persistent` 는 기본이 `true` 다
+
+모달 3종(`SActionModal` · `SConfirmModal` · `SLoadingModal`)과 `SDrawer` 는 **백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다.
+
+| | 기본 닫기 경로 | 백드롭·ESC |
+| --- | --- | --- |
+| `SActionModal` · `SConfirmModal` · `SLoadingModal` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
+| `SDrawer` | X 버튼, footer 버튼 | 막힘 (흔들림) |
+| `SPopover` · `STooltip` · `SSelect` 등 floating | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
+
+따라서 다음을 지킨다.
+
+- **닫을 수단을 반드시 하나는 둔다.** `SActionModal` 에 `showClose` 도 `button`/`footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다. 백드롭이 더 이상 탈출구가 아니다.
+- **`persistent` 를 `true` 로 직접 주지 않는다.** 기본값이므로 중복이다.
+- **`persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+
+작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭·ESC 를 일괄 차단할 뿐이다. 안내가 필요하면 앱이 자체 dirty 판정 후 `SModal.confirm` 으로 띄운다.
+
 ### 3-4. 테이블 컬럼 정렬
 
 **값의 크기를 비교하는 숫자 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).
@@ -1143,10 +1161,10 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent) |
+| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
 | `modalTitle?` | `string` | `''` |  |
 | `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
-| `button?` | `SActionModalButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |
+| `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯). 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
 | `width?` | `number \| string` | — |  |
 | `height?` | `number \| string` | — |  |
@@ -1163,8 +1181,9 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Depends on
 
-- [SButton](../SButton)
+- [SFooter](../SFooter)
 - [SModalContainer](../SModalContainer)
+- [SOverlayHeader](../SOverlayHeader)
 
 ### Graph
 
@@ -1273,14 +1292,12 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Used by
 
- - [SActionModal](../SActionModal)
  - [SConfirmModal](../SConfirmModal)
- - [SDrawer](../SDrawer)
  - [SDropdownButton](../SDropdownButton)
+ - [SFooter](../SFooter)
  - [SKeyValueTable](../SKeyValueTable)
  - [SLoadingModal](../SLoadingModal)
  - [SPopover](../SPopover)
- - [SPopup](../SPopup)
  - [SToast](../SToast)
 
 ### Depends on
@@ -1572,7 +1589,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent) |
+| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
 | `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정) |
 | `modalTitle?` | `string` | `''` |  |
 | `titleClass?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClass) |
@@ -1861,9 +1878,12 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — | 표시 여부 |
-| `persistent?` | `boolean` | `false` | true면 backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. |
+| `persistent?` | `boolean` | `true` | backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. **기본값 true** — Drawer는 내용을 작성·구성하는 곳이라 임의 닫힘을 막는 것이 기본이다. 닫기 경로는 X 버튼과 footer 버튼뿐이다. false로 주면 backdrop·ESC 닫기가 열린다. |
 | `title?` | `string` | `''` | 접근성 제목 및 헤더 제목 |
 | `width?` | `number \| string` | `572` | Drawer 너비. 기본값은 Figma drawer 기준 572px이다. |
+| `resizable?` | `boolean` | `false` | true면 왼쪽 테두리를 드래그해 너비를 조절할 수 있다. |
+| `minWidth?` | `number \| string` | — | 리사이즈 가능한 최소 너비(px, %, vw, vh) |
+| `maxWidth?` | `number \| string` | — | 리사이즈 가능한 최대 너비(px, %, vw, vh) |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 슬롯 |
 | `button?` | `SDrawerButton` | — | 우측 기본 액션 버튼 |
 | `children?` | `ReactNode` | — |  |
@@ -1881,8 +1901,8 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Depends on
 
-- [SButton](../SButton)
-- [SGhostButton](../SGhostButton)
+- [SFooter](../SFooter)
+- [SOverlayHeader](../SOverlayHeader)
 
 ### Graph
 
@@ -2133,6 +2153,40 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# SFooter
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SFooter
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `bg?` | `SFooterBg` | `'white'` | 배경색 |
+| `left?` | `ReactNode` | — | footer 좌측 slot |
+| `children?` | `ReactNode` | — | footer 좌측 slot. left와 함께 쓰면 left 뒤에 렌더된다 |
+| `button?` | `SFooterButton` | — | 우측 기본 액션 버튼 |
+| `className?` | `string` | — |  |
+| `leftClassName?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Used by
+
+ - [SActionModal](../SActionModal)
+ - [SDrawer](../SDrawer)
+ - [SPopup](../SPopup)
+
+### Depends on
+
+- [SButton](../SButton)
+
+### Graph
+
+---
+
 # SForm
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -2203,12 +2257,12 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SDateRangePicker](../SDateRangePicker)
- - [SDrawer](../SDrawer)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
  - [SModalContainer](../SModalContainer)
+ - [SOverlayHeader](../SOverlayHeader)
  - [SPopover](../SPopover)
  - [SSelect](../SSelect)
  - [STimePicker](../STimePicker)
@@ -2261,10 +2315,6 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ## Dependencies
 
-### Used by
-
- - [SLayout](../SLayout)
-
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
@@ -2482,7 +2532,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 |------|------|---------|-------------|
 | `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
 | `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
-| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, full 의 메뉴 열 폭도 레일만큼 넓어진다. 레일에 children 없는 아이템이 있으면 SGnb 가 header 를 full 로 강제하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
 | `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
 | `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
 
@@ -2499,10 +2549,6 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SGnb](../SGnb)
  - [SPage](../SPage)
 
-### Depends on
-
-- [SGnb](../SGnb)
-
 ### Graph
 
 ---
@@ -2626,7 +2672,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). 로딩 중 닫힘 방지에 유용 |
+| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
 | `state?` | `LoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
@@ -2868,7 +2914,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `open?` | `boolean` | — | 표시 여부 (제어) |
 | `ariaTitle?` | `string` | `'모달'` | 접근성 제목 (스크린리더용). 시각 제목은 children이 담당 |
 | `showClose?` | `boolean` | `false` | 우측 상단 닫기 버튼 |
-| `persistent?` | `boolean` | `false` | true면 백드롭 클릭·ESC로 닫히지 않고 흔들림(shake) 애니메이션 (sd-modal-container persistent) |
+| `persistent?` | `boolean` | `true` | 백드롭 클릭·ESC로 닫히지 않고 흔들림(shake) 애니메이션 (sd-modal-container persistent). **기본값 true** — 모달은 작성 중인 내용을 잃지 않도록 임의 닫힘을 막는 것이 기본이다. 닫기 경로는 X 버튼과 모달 안의 버튼뿐이다. false로 주면 백드롭·ESC 닫기가 열린다. |
 | `width?` | `number \| string` | — | 너비/높이 |
 | `height?` | `number \| string` | — |  |
 | `children?` | `ReactNode` | — |  |
@@ -2967,6 +3013,46 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 
 ---
 
+# SOverlayHeader
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SOverlayHeader
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title?` | `ReactNode` | — | 시각 제목 |
+| `description?` | `ReactNode` | — | 제목 오른쪽 보조 설명 |
+| `showClose?` | `boolean` | `false` | 닫기 버튼 표시 |
+| `reserveCloseSpace?` | `boolean` | `false` | 외부 absolute 닫기 버튼 공간 확보 |
+| `className?` | `string` | — |  |
+| `titleClassName?` | `string` | — |  |
+| `descriptionClassName?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onClose` | `() => void` | 닫기 버튼 클릭 |
+
+## Dependencies
+
+### Used by
+
+ - [SActionModal](../SActionModal)
+ - [SDrawer](../SDrawer)
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+---
+
 # SPage
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -3102,7 +3188,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 
 ### Depends on
 
-- [SButton](../SButton)
+- [SFooter](../SFooter)
 
 ### Graph
 

package/dist/llms.txt

@@ -405,6 +405,24 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
   .onDismissed(() => {});
 ```
 
+#### 3-3-5. 닫기 경로 — `persistent` 는 기본이 `true` 다
+
+모달 3종(`SActionModal` · `SConfirmModal` · `SLoadingModal`)과 `SDrawer` 는 **백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다.
+
+| | 기본 닫기 경로 | 백드롭·ESC |
+| --- | --- | --- |
+| `SActionModal` · `SConfirmModal` · `SLoadingModal` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
+| `SDrawer` | X 버튼, footer 버튼 | 막힘 (흔들림) |
+| `SPopover` · `STooltip` · `SSelect` 등 floating | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
+
+따라서 다음을 지킨다.
+
+- **닫을 수단을 반드시 하나는 둔다.** `SActionModal` 에 `showClose` 도 `button`/`footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다. 백드롭이 더 이상 탈출구가 아니다.
+- **`persistent` 를 `true` 로 직접 주지 않는다.** 기본값이므로 중복이다.
+- **`persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+
+작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭·ESC 를 일괄 차단할 뿐이다. 안내가 필요하면 앱이 자체 dirty 판정 후 `SModal.confirm` 으로 띄운다.
+
 ### 3-4. 테이블 컬럼 정렬
 
 **값의 크기를 비교하는 숫자 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).

package/dist/styles.css

@@ -809,6 +809,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -886,9 +889,6 @@
   .h-\[50px\] {
     height: 50px;
   }
-  .h-\[52px\] {
-    height: 52px;
-  }
   .h-\[56px\] {
     height: 56px;
   }
@@ -1039,6 +1039,9 @@
   .w-\[4px\] {
     width: 4px;
   }
+  .w-\[8px\] {
+    width: 8px;
+  }
   .w-\[9px\] {
     width: 9px;
   }
@@ -1186,9 +1189,15 @@
   .min-w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
     min-width: var(--radix-dropdown-menu-trigger-width);
   }
+  .min-w-px {
+    min-width: 1px;
+  }
   .flex-1 {
     flex: 1;
   }
+  .flex-\[1_0_0\] {
+    flex: 1 0 0;
+  }
   .flex-auto {
     flex: auto;
   }
@@ -1285,6 +1294,9 @@
   .cursor-text {
     cursor: text;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -1495,8 +1507,8 @@
   .gap-\[var\(--cmp-guide-contents-title-gap\)\] {
     gap: var(--cmp-guide-contents-title-gap);
   }
-  .gap-\[var\(--cmp-modal-action-footer-gap\)\] {
-    gap: var(--cmp-modal-action-footer-gap);
+  .gap-\[var\(--cmp-modal-confirm-button-gap\)\] {
+    gap: var(--cmp-modal-confirm-button-gap);
   }
   .gap-\[var\(--cmp-overlay-footer-gap\)\] {
     gap: var(--cmp-overlay-footer-gap);
@@ -2108,6 +2120,9 @@
   .bg-\[var\(--cmp-overlay-footer-bg-default\)\] {
     background-color: var(--cmp-overlay-footer-bg-default);
   }
+  .bg-\[var\(--cmp-overlay-footer-bg-neutral\)\] {
+    background-color: var(--cmp-overlay-footer-bg-neutral);
+  }
   .bg-\[var\(--cmp-overlay-header-bg\)\] {
     background-color: var(--cmp-overlay-header-bg);
   }
@@ -2354,15 +2369,9 @@
   .px-\[var\(--cmp-modal-action-body-paddingX\)\] {
     padding-inline: var(--cmp-modal-action-body-paddingX);
   }
-  .px-\[var\(--cmp-modal-action-footer-paddingX\)\] {
-    padding-inline: var(--cmp-modal-action-footer-paddingX);
-  }
   .px-\[var\(--cmp-overlay-footer-paddingX\)\] {
     padding-inline: var(--cmp-overlay-footer-paddingX);
   }
-  .px-\[var\(--cmp-overlay-header-paddingX\)\] {
-    padding-inline: var(--cmp-overlay-header-paddingX);
-  }
   .px-\[var\(--cmp-pagination-paddingX\)\] {
     padding-inline: var(--cmp-pagination-paddingX);
   }
@@ -2450,9 +2459,6 @@
   .py-\[var\(--cmp-datepicker-calendar-time-paddingY\)\] {
     padding-block: var(--cmp-datepicker-calendar-time-paddingY);
   }
-  .py-\[var\(--cmp-modal-action-footer-paddingY\)\] {
-    padding-block: var(--cmp-modal-action-footer-paddingY);
-  }
   .py-\[var\(--cmp-overlay-footer-paddingY\)\] {
     padding-block: var(--cmp-overlay-footer-paddingY);
   }
@@ -2501,6 +2507,9 @@
   .pr-\[calc\(var\(--cmp-overlay-header-paddingX\)\+20px\)\] {
     padding-right: calc(var(--cmp-overlay-header-paddingX) + 20px);
   }
+  .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
+    padding-right: var(--cmp-overlay-header-paddingX);
+  }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
@@ -2852,9 +2861,6 @@
   .text-\[color\:var\(--cmp-modal-loading-message-color\)\] {
     color: var(--cmp-modal-loading-message-color);
   }
-  .text-\[color\:var\(--cmp-overlay-header-title-color\)\] {
-    color: var(--cmp-overlay-header-title-color);
-  }
   .text-\[color\:var\(--cmp-pagination-item-content-default\)\] {
     color: var(--cmp-pagination-item-content-default);
   }
@@ -3039,6 +3045,10 @@
     --tw-shadow: var(--shadow-overlay);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-spread-md\)\] {
+    --tw-shadow: var(--shadow-spread-md);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "4.3.0",
+  "version": "5.0.1",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [