sellmate-design-system-react 0.6.1 → 0.8.0

package/dist/lib/scrollbar.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+
+exports.SCROLLBAR_CLASS = SCROLLBAR_CLASS;
+exports.SCROLLBAR_TRACK_BG_CLASS = SCROLLBAR_TRACK_BG_CLASS;
+exports.SCROLLBAR_TRACK_BG_WHITE_CLASS = SCROLLBAR_TRACK_BG_WHITE_CLASS;
+exports.SCROLLBAR_TRACK_BORDER_CLASS = SCROLLBAR_TRACK_BORDER_CLASS;
+//# sourceMappingURL=scrollbar.cjs.map
+//# sourceMappingURL=scrollbar.cjs.map

package/dist/lib/scrollbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";;;AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAOK,IAAM,8BAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.cjs","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/lib/scrollbar.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 공용 커스텀 스크롤바 클래스.
+ * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,
+ * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.
+ *
+ * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).
+ * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.
+ */
+/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */
+export declare const SCROLLBAR_CLASS: string;
+/**
+ * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.
+ * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.
+ * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.
+ * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.
+ *
+ * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.
+ */
+export declare const SCROLLBAR_TRACK_BG_CLASS: string;
+/**
+ * background(white): 트랙을 흰색으로 채운다.
+ * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.
+ */
+export declare const SCROLLBAR_TRACK_BG_WHITE_CLASS: string;
+/**
+ * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.
+ * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.
+ * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을
+ * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).
+ * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.
+ */
+export declare const SCROLLBAR_TRACK_BORDER_CLASS: string;

package/dist/lib/scrollbar.js

@@ -0,0 +1,10 @@
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+
+export { SCROLLBAR_CLASS, SCROLLBAR_TRACK_BG_CLASS, SCROLLBAR_TRACK_BG_WHITE_CLASS, SCROLLBAR_TRACK_BORDER_CLASS };
+//# sourceMappingURL=scrollbar.js.map
+//# sourceMappingURL=scrollbar.js.map

package/dist/lib/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAOK,IAAM,8BAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.js","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/styles.css

@@ -656,9 +656,15 @@
   .top-\[var\(--cmp-table-header-height\)\] {
     top: var(--cmp-table-header-height);
   }
+  .top-full {
+    top: 100%;
+  }
   .right-0 {
     right: 0;
   }
+  .right-1\/2 {
+    right: calc(1 / 2 * 100%);
+  }
   .right-12 {
     right: var(--spacing-12);
   }
@@ -710,12 +716,15 @@
   .z-\[2\] {
     z-index: 2;
   }
-  .z-\[4\] {
-    z-index: 4;
-  }
   .z-\[5\] {
     z-index: 5;
   }
+  .z-\[6\] {
+    z-index: 6;
+  }
+  .z-\[7\] {
+    z-index: 7;
+  }
   .z-\[30\] {
     z-index: 30;
   }
@@ -863,6 +872,9 @@
   .h-\[80vh\] {
     height: 80vh;
   }
+  .h-\[240px\] {
+    height: 240px;
+  }
   .h-\[364px\] {
     height: 364px;
   }
@@ -980,6 +992,12 @@
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[280px\] {
+    width: 280px;
+  }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[328px\] {
     width: 328px;
   }
@@ -1004,6 +1022,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1082,6 +1103,10 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1131,9 +1156,6 @@
   .resize-y {
     resize: vertical;
   }
-  .\[scrollbar-width\:auto\] {
-    scrollbar-width: auto;
-  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -1362,9 +1384,21 @@
   .overflow-visible {
     overflow: visible;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-\(--cmp-listBox-radius\) {
     border-radius: var(--cmp-listBox-radius);
   }
@@ -1518,6 +1552,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -1589,6 +1627,9 @@
   .border-grey-30 {
     border-color: var(--color-grey-30);
   }
+  .border-grey-45 {
+    border-color: var(--color-grey-45);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1670,6 +1711,9 @@
   .bg-\[var\(--color-grey-05\)\] {
     background-color: var(--color-grey-05);
   }
+  .bg-\[var\(--color-grey-15\)\] {
+    background-color: var(--color-grey-15);
+  }
   .bg-\[var\(--color-white\)\] {
     background-color: var(--color-white);
   }
@@ -1682,6 +1726,12 @@
   .bg-\[var\(--sys-color-bg-frame\)\] {
     background-color: var(--sys-color-bg-frame);
   }
+  .bg-\[var\(--sys-color-bg-neutralLight\)\] {
+    background-color: var(--sys-color-bg-neutralLight);
+  }
+  .bg-\[var\(--sys-color-bg-screen\)\] {
+    background-color: var(--sys-color-bg-screen);
+  }
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
@@ -1721,6 +1771,9 @@
   .p-0 {
     padding: 0;
   }
+  .p-2 {
+    padding: var(--spacing-2);
+  }
   .p-8 {
     padding: var(--spacing-8);
   }
@@ -1769,6 +1822,9 @@
   .px-\[4px\] {
     padding-inline: 4px;
   }
+  .px-\[6px\] {
+    padding-inline: 6px;
+  }
   .px-\[8px\] {
     padding-inline: 8px;
   }
@@ -1832,6 +1888,9 @@
   .py-1 {
     padding-block: var(--spacing);
   }
+  .py-2 {
+    padding-block: var(--spacing-2);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -1946,6 +2005,9 @@
   .text-24 {
     font-size: var(--text-24);
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -1973,6 +2035,10 @@
     --tw-leading: var(--spacing-24);
     line-height: var(--spacing-24);
   }
+  .leading-\[16px\] {
+    --tw-leading: 16px;
+    line-height: 16px;
+  }
   .leading-\[18px\] {
     --tw-leading: 18px;
     line-height: 18px;
@@ -2164,6 +2230,9 @@
   .text-\[color\:var\(--color-grey-65\)\] {
     color: var(--color-grey-65);
   }
+  .text-\[color\:var\(--color-grey-75\)\] {
+    color: var(--color-grey-75);
+  }
   .text-\[color\:var\(--color-white\)\] {
     color: var(--color-white);
   }
@@ -2881,24 +2950,76 @@
       }
     }
   }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-width\:thin\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-width: thin;
+    }
+  }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-color\:var\(--color-grey-45\)_transparent\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-color: var(--color-grey-45) transparent;
+    }
+  }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-color\:var\(--color-grey-45\)_var\(--color-grey-10\)\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-color: var(--color-grey-45) var(--color-grey-10);
+    }
+  }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-color\:var\(--color-grey-45\)_var\(--color-white\)\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-color: var(--color-grey-45) var(--color-white);
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
     }
   }
-  .\[\&\:\:-webkit-scrollbar\]\:w-\[8px\] {
+  .\[\&\:\:-webkit-scrollbar\]\:h-\[12px\] {
+    &::-webkit-scrollbar {
+      height: 12px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:w-\[12px\] {
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-10\)\] {
+    &::-webkit-scrollbar {
+      background-color: var(--color-grey-10);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-white\)\] {
     &::-webkit-scrollbar {
-      width: 8px;
+      background-color: var(--color-white);
     }
   }
-  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-25\)\] {
+  .\[\&\:\:-webkit-scrollbar\]\:bg-transparent {
     &::-webkit-scrollbar {
-      background-color: var(--color-grey-25);
+      background-color: transparent;
     }
   }
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-\[4px\] {
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full {
     &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
+      border-radius: var(--radius-full);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-2 {
+    &::-webkit-scrollbar-thumb {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-solid {
+    &::-webkit-scrollbar-thumb {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-transparent {
+    &::-webkit-scrollbar-thumb {
+      border-color: transparent;
     }
   }
   .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--color-grey-45\)\] {
@@ -2906,14 +3027,44 @@
       background-color: var(--color-grey-45);
     }
   }
-  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-25\)\] {
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-clip-padding {
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\:horizontal\]\:\[border-top-width\:3px\] {
+    &::-webkit-scrollbar-thumb:horizontal {
+      border-top-width: 3px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\:vertical\]\:\[border-left-width\:3px\] {
+    &::-webkit-scrollbar-thumb:vertical {
+      border-left-width: 3px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-10\)\] {
     &::-webkit-scrollbar-track {
-      background-color: var(--color-grey-25);
+      background-color: var(--color-grey-10);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-white\)\] {
+    &::-webkit-scrollbar-track {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent {
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\:horizontal\]\:\[border-top\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-track:horizontal {
+      border-top: 1px solid var(--sys-color-border-default);
     }
   }
-  .\[\&\:\:-webkit-scrollbar\:horizontal\]\:h-\[8px\] {
-    &::-webkit-scrollbar:horizontal {
-      height: 8px;
+  .\[\&\:\:-webkit-scrollbar-track\:vertical\]\:\[border-left\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-track:vertical {
+      border-left: 1px solid var(--sys-color-border-default);
     }
   }
 }

package/package.json

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