sellmate-design-system-react 0.1.7 → 0.1.9

package/dist/lib/floating-anim.cjs

@@ -3,12 +3,20 @@
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
   "data-[state=closed]:data-[side=top]:animate-floating-out-top",
   "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
   "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
   "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
   "data-[state=closed]:data-[side=left]:animate-floating-out-left",
   "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 

package/dist/lib/floating-anim.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/floating-anim.ts"],"names":[],"mappings":";;;AAOO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG","file":"floating-anim.cjs","sourcesContent":["/**\n * Radix Floating(SPopover/STooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n"]}
+{"version":3,"sources":["../../src/lib/floating-anim.ts"],"names":[],"mappings":";;;AAWO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,mEAAA;AAAA,EACA,mEAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,yEAAA;AAAA,EACA,yEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,qEAAA;AAAA,EACA,qEAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA,uEAAA;AAAA,EACA,uEAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG","file":"floating-anim.cjs","sourcesContent":["/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n"]}

package/dist/lib/floating-anim.d.ts

@@ -1,8 +1,12 @@
 /**
- * Radix Floating(SPopover/STooltip) Content 의 placement 방향별 슬라이드+페이드.
+ * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.
  * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.
  * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)
  *
  * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.
+ *
+ * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,
+ * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.
+ * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.
  */
 export declare const FLOATING_SLIDE_ANIM: string;

package/dist/lib/floating-anim.js

@@ -1,12 +1,20 @@
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
   "data-[state=closed]:data-[side=top]:animate-floating-out-top",
   "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
   "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
   "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
   "data-[state=closed]:data-[side=left]:animate-floating-out-left",
   "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 

package/dist/lib/floating-anim.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/floating-anim.ts"],"names":[],"mappings":";AAOO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG","file":"floating-anim.js","sourcesContent":["/**\n * Radix Floating(SPopover/STooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n"]}
+{"version":3,"sources":["../../src/lib/floating-anim.ts"],"names":[],"mappings":";AAWO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,mEAAA;AAAA,EACA,mEAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,yEAAA;AAAA,EACA,yEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,qEAAA;AAAA,EACA,qEAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA,uEAAA;AAAA,EACA,uEAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG","file":"floating-anim.js","sourcesContent":["/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n"]}

package/dist/styles.css

@@ -40,6 +40,7 @@
     --color-grey-80: #555555;
     --color-grey-05: #F9F9F9;
     --color-red-75: #E30000;
+    --color-border-accentLight: #93C4FF;
     --color-red-strong: #FB4444;
     --color-green-strong: #00973C;
     --color-blue-strong: #0075FF;
@@ -60,6 +61,7 @@
     --text-14: 14px;
     --text-16: 16px;
     --text-24: 24px;
+    --font-base: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
@@ -497,9 +499,6 @@
   .h-\[var\(--cmp-table-header-height\)\] {
     height: var(--cmp-table-header-height);
   }
-  .h-\[var\(--cmp-table-keyValue-height\)\] {
-    height: var(--cmp-table-keyValue-height);
-  }
   .h-auto {
     height: auto;
   }
@@ -851,8 +850,11 @@
   .gap-\[var\(--cmp-modal-action-footer-gap\)\] {
     gap: var(--cmp-modal-action-footer-gap);
   }
-  .gap-\[var\(--cmp-modal-action-header-gap\)\] {
-    gap: var(--cmp-modal-action-header-gap);
+  .gap-\[var\(--cmp-overlay-footer-gap\)\] {
+    gap: var(--cmp-overlay-footer-gap);
+  }
+  .gap-\[var\(--cmp-overlay-header-gap\)\] {
+    gap: var(--cmp-overlay-header-gap);
   }
   .gap-\[var\(--cmp-pagination-gap\)\] {
     gap: var(--cmp-pagination-gap);
@@ -860,6 +862,9 @@
   .gap-\[var\(--cmp-pagination-move-gap\)\] {
     gap: var(--cmp-pagination-move-gap);
   }
+  .gap-\[var\(--cmp-pagination-simple-gap\)\] {
+    gap: var(--cmp-pagination-simple-gap);
+  }
   .gap-\[var\(--cmp-popover-contents-gap\)\] {
     gap: var(--cmp-popover-contents-gap);
   }
@@ -869,8 +874,8 @@
   .gap-\[var\(--cmp-popover-title-gap\)\] {
     gap: var(--cmp-popover-title-gap);
   }
-  .gap-\[var\(--cmp-popup-footer-gap\)\] {
-    gap: var(--cmp-popup-footer-gap);
+  .gap-\[var\(--cmp-progress-circular-gap\)\] {
+    gap: var(--cmp-progress-circular-gap);
   }
   .gap-\[var\(--cmp-table-header-gap\)\] {
     gap: var(--cmp-table-header-gap);
@@ -940,9 +945,6 @@
   .rounded-\[var\(--cmp-datepicker-calendar-radius\)\] {
     border-radius: var(--cmp-datepicker-calendar-radius);
   }
-  .rounded-\[var\(--cmp-filepicker-sm-radius\)\] {
-    border-radius: var(--cmp-filepicker-sm-radius);
-  }
   .rounded-\[var\(--cmp-guide-button-radius\)\] {
     border-radius: var(--cmp-guide-button-radius);
   }
@@ -1066,15 +1068,15 @@
   .border-\[color\:var\(--cb-border\)\] {
     border-color: var(--cb-border);
   }
+  .border-\[color\:var\(--cmp-checkbox-border-disabled\)\] {
+    border-color: var(--cmp-checkbox-border-disabled);
+  }
   .border-\[color\:var\(--cmp-checkbox-checked-bg-default\)\] {
     border-color: var(--cmp-checkbox-checked-bg-default);
   }
   .border-\[color\:var\(--cmp-checkbox-unchecked-border-default\)\] {
     border-color: var(--cmp-checkbox-unchecked-border-default);
   }
-  .border-\[color\:var\(--cmp-filepicker-border-default\)\] {
-    border-color: var(--cmp-filepicker-border-default);
-  }
   .border-\[color\:var\(--cmp-listItem-depth1-border-color\)\] {
     border-color: var(--cmp-listItem-depth1-border-color);
   }
@@ -1120,6 +1122,9 @@
   .bg-\[var\(--cb-bg\)\] {
     background-color: var(--cb-bg);
   }
+  .bg-\[var\(--cmp-checkbox-bg-disabled\)\] {
+    background-color: var(--cmp-checkbox-bg-disabled);
+  }
   .bg-\[var\(--cmp-checkbox-checked-bg-default\)\] {
     background-color: var(--cmp-checkbox-checked-bg-default);
   }
@@ -1135,15 +1140,15 @@
   .bg-\[var\(--cmp-datepicker-calendar-range-divider\)\] {
     background-color: var(--cmp-datepicker-calendar-range-divider);
   }
-  .bg-\[var\(--cmp-filepicker-bg-default\)\] {
-    background-color: var(--cmp-filepicker-bg-default);
-  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
   .bg-\[var\(--cmp-listItem-depth1-bg-default\)\] {
     background-color: var(--cmp-listItem-depth1-bg-default);
   }
+  .bg-\[var\(--cmp-listItem-depth1-bg-disabled\)\] {
+    background-color: var(--cmp-listItem-depth1-bg-disabled);
+  }
   .bg-\[var\(--cmp-listItem-depth2-middle-bg\)\] {
     background-color: var(--cmp-listItem-depth2-middle-bg);
   }
@@ -1225,6 +1230,9 @@
   .p-\[2px\] {
     padding: 2px;
   }
+  .p-\[8px\] {
+    padding: 8px;
+  }
   .p-\[12px\] {
     padding: 12px;
   }
@@ -1234,9 +1242,6 @@
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
-  .p-\[var\(--cmp-table-keyValue-body-padding\)\] {
-    padding: var(--cmp-table-keyValue-body-padding);
-  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -1255,6 +1260,9 @@
   .px-16 {
     padding-inline: var(--spacing-16);
   }
+  .px-\[4px\] {
+    padding-inline: 4px;
+  }
   .px-\[8px\] {
     padding-inline: 8px;
   }
@@ -1285,18 +1293,21 @@
   .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-pagination-paddingX\)\] {
     padding-inline: var(--cmp-pagination-paddingX);
   }
   .px-\[var\(--cmp-popover-paddingX\)\] {
     padding-inline: var(--cmp-popover-paddingX);
   }
-  .px-\[var\(--cmp-popup-footer-paddingX\)\] {
-    padding-inline: var(--cmp-popup-footer-paddingX);
-  }
   .px-\[var\(--cmp-table-header-paddingX\)\] {
     padding-inline: var(--cmp-table-header-paddingX);
   }
+  .px-\[var\(--cmp-table-keyValue-body-paddingX-default\)\] {
+    padding-inline: var(--cmp-table-keyValue-body-paddingX-default);
+  }
   .px-\[var\(--cmp-table-keyValue-search-paddingX\)\] {
     padding-inline: var(--cmp-table-keyValue-search-paddingX);
   }
@@ -1342,18 +1353,15 @@
   .py-\[var\(--cmp-modal-action-footer-paddingY\)\] {
     padding-block: var(--cmp-modal-action-footer-paddingY);
   }
-  .py-\[var\(--cmp-modal-action-header-paddingY\)\] {
-    padding-block: var(--cmp-modal-action-header-paddingY);
+  .py-\[var\(--cmp-overlay-footer-paddingY\)\] {
+    padding-block: var(--cmp-overlay-footer-paddingY);
+  }
+  .py-\[var\(--cmp-overlay-header-paddingY\)\] {
+    padding-block: var(--cmp-overlay-header-paddingY);
   }
   .py-\[var\(--cmp-popover-paddingY\)\] {
     padding-block: var(--cmp-popover-paddingY);
   }
-  .py-\[var\(--cmp-popup-footer-paddingY\)\] {
-    padding-block: var(--cmp-popup-footer-paddingY);
-  }
-  .py-\[var\(--cmp-table-keyValue-body-padding\)\] {
-    padding-block: var(--cmp-table-keyValue-body-padding);
-  }
   .pt-16 {
     padding-top: var(--spacing-16);
   }
@@ -1363,8 +1371,8 @@
   .pr-\[12px\] {
     padding-right: 12px;
   }
-  .pr-\[calc\(var\(--cmp-modal-action-header-paddingX\)\+20px\)\] {
-    padding-right: calc(var(--cmp-modal-action-header-paddingX) + 20px);
+  .pr-\[calc\(var\(--cmp-overlay-header-paddingX\)\+20px\)\] {
+    padding-right: calc(var(--cmp-overlay-header-paddingX) + 20px);
   }
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
@@ -1375,8 +1383,8 @@
   .pl-\[32px\] {
     padding-left: 32px;
   }
-  .pl-\[var\(--cmp-modal-action-header-paddingX\)\] {
-    padding-left: var(--cmp-modal-action-header-paddingX);
+  .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
+    padding-left: var(--cmp-overlay-header-paddingX);
   }
   .text-center {
     text-align: center;
@@ -1384,6 +1392,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -1456,6 +1467,10 @@
     --tw-leading: 30px;
     line-height: 30px;
   }
+  .leading-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
+    --tw-leading: var(--cmp-datepicker-calendar-day-circle-size);
+    line-height: var(--cmp-datepicker-calendar-day-circle-size);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1542,6 +1557,9 @@
   .text-\[color\:var\(--cmp-datepicker-calendar-week-color\)\] {
     color: var(--cmp-datepicker-calendar-week-color);
   }
+  .text-\[color\:var\(--cmp-filepicker-text-placeholder\)\] {
+    color: var(--cmp-filepicker-text-placeholder);
+  }
   .text-\[color\:var\(--cmp-guide-contents-typography-color\)\] {
     color: var(--cmp-guide-contents-typography-color);
   }
@@ -1554,9 +1572,6 @@
   .text-\[color\:var\(--cmp-listItem-content-selected\)\] {
     color: var(--cmp-listItem-content-selected);
   }
-  .text-\[color\:var\(--cmp-modal-action-title-color\)\] {
-    color: var(--cmp-modal-action-title-color);
-  }
   .text-\[color\:var\(--cmp-modal-confirm-message-color\)\] {
     color: var(--cmp-modal-confirm-message-color);
   }
@@ -1566,6 +1581,9 @@
   .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);
   }
@@ -1653,9 +1671,6 @@
   .opacity-60 {
     opacity: 60%;
   }
-  .opacity-70 {
-    opacity: 70%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1784,6 +1799,13 @@
       }
     }
   }
+  .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
+    &:is(:where(.group\/filepicker):hover *) {
+      @media (hover: hover) {
+        color: var(--cmp-filepicker-text-default);
+      }
+    }
+  }
   .group-data-\[active-item\]\:border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
     &:is(:where(.group)[data-active-item] *) {
       border-color: var(--cmp-checkbox-checked-border-inverse);
@@ -1950,6 +1972,13 @@
       }
     }
   }
+  .hover\:border-\[var\(--color-border-accentLight\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-accentLight);
+      }
+    }
+  }
   .hover\:\!bg-\[var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2062,13 +2091,6 @@
       }
     }
   }
-  .hover\:opacity-100 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
   .hover\:shadow-\[0px_0px_4px_0px_\#0071ff66\] {
     &:hover {
       @media (hover: hover) {
@@ -2130,6 +2152,11 @@
       color: var(--cmp-button-text-disabled);
     }
   }
+  .data-\[enter\]\:animate-floating-in-bottom {
+    &[data-enter] {
+      animation: var(--animate-floating-in-bottom);
+    }
+  }
   .data-\[highlighted\]\:bg-\[var\(--sys-color-bg-accent\)\] {
     &[data-highlighted] {
       background-color: var(--sys-color-bg-accent);
@@ -2140,6 +2167,11 @@
       color: var(--sys-color-fg-inverse);
     }
   }
+  .data-\[leave\]\:animate-floating-out-bottom {
+    &[data-leave] {
+      animation: var(--animate-floating-out-bottom);
+    }
+  }
   .data-\[state\=checked\]\:translate-x-\[12px\] {
     &[data-state="checked"] {
       --tw-translate-x: 12px;
@@ -2184,6 +2216,62 @@
       }
     }
   }
+  .data-\[state\=delayed-open\]\:data-\[side\=bottom\]\:animate-floating-in-bottom {
+    &[data-state="delayed-open"] {
+      &[data-side="bottom"] {
+        animation: var(--animate-floating-in-bottom);
+      }
+    }
+  }
+  .data-\[state\=delayed-open\]\:data-\[side\=left\]\:animate-floating-in-left {
+    &[data-state="delayed-open"] {
+      &[data-side="left"] {
+        animation: var(--animate-floating-in-left);
+      }
+    }
+  }
+  .data-\[state\=delayed-open\]\:data-\[side\=right\]\:animate-floating-in-right {
+    &[data-state="delayed-open"] {
+      &[data-side="right"] {
+        animation: var(--animate-floating-in-right);
+      }
+    }
+  }
+  .data-\[state\=delayed-open\]\:data-\[side\=top\]\:animate-floating-in-top {
+    &[data-state="delayed-open"] {
+      &[data-side="top"] {
+        animation: var(--animate-floating-in-top);
+      }
+    }
+  }
+  .data-\[state\=instant-open\]\:data-\[side\=bottom\]\:animate-floating-in-bottom {
+    &[data-state="instant-open"] {
+      &[data-side="bottom"] {
+        animation: var(--animate-floating-in-bottom);
+      }
+    }
+  }
+  .data-\[state\=instant-open\]\:data-\[side\=left\]\:animate-floating-in-left {
+    &[data-state="instant-open"] {
+      &[data-side="left"] {
+        animation: var(--animate-floating-in-left);
+      }
+    }
+  }
+  .data-\[state\=instant-open\]\:data-\[side\=right\]\:animate-floating-in-right {
+    &[data-state="instant-open"] {
+      &[data-side="right"] {
+        animation: var(--animate-floating-in-right);
+      }
+    }
+  }
+  .data-\[state\=instant-open\]\:data-\[side\=top\]\:animate-floating-in-top {
+    &[data-state="instant-open"] {
+      &[data-side="top"] {
+        animation: var(--animate-floating-in-top);
+      }
+    }
+  }
   .data-\[state\=open\]\:animate-modal-in {
     &[data-state="open"] {
       animation: var(--animate-modal-in);
@@ -2271,9 +2359,14 @@
   --sys-space-feedback-md-gap: 8px;
   --sys-space-feedback-lg-paddingX: 16px;
   --sys-space-feedback-lg-gap: 12px;
-  --sys-space-stack-gap-tight: 2px;
-  --sys-space-stack-gap-normal: 4px;
-  --sys-space-stack-gap-relaxed: 8px;
+  --sys-space-stack-gap-text-tight: 2px;
+  --sys-space-stack-gap-text-normal: 4px;
+  --sys-space-stack-gap-text-relaxed: 8px;
+  --sys-space-stack-gap-element-tight: 4px;
+  --sys-space-stack-gap-element-normal: 8px;
+  --sys-space-stack-gap-element-relaxed: 12px;
+  --sys-space-stack-gap-element-wide: 16px;
+  --sys-space-stack-gap-element-spacious: 24px;
   --sys-space-field-sm-paddingX: 12px;
   --sys-space-field-sm-paddingY: 4px;
   --sys-space-field-sm-container-gap: 8px;
@@ -2421,6 +2514,8 @@
   --cmp-button-danger-outline-bg-hover: #FCEFEF;
   --cmp-button-danger-outline-border: #E30000;
   --cmp-button-danger-outline-content: #E30000;
+  --cmp-button-group-gap-normal: 8px;
+  --cmp-button-group-gap-wide: 12px;
   --cmp-ghostButton-xxs-size: 16px;
   --cmp-ghostButton-xxs-icon: 12px;
   --cmp-ghostButton-xs-size: 24px;
@@ -2444,6 +2539,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
+  --cmp-ghostButton-group-gap: 4px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -2454,6 +2550,9 @@
   --cmp-textLink-icon-disabled: #BBBBBB;
   --cmp-textLink-lg-gap: 8px;
   --cmp-textLink-lg-icon: 20px;
+  --cmp-textLink-group-horizontal-normal: 16px;
+  --cmp-textLink-group-horizontal-wide: 24px;
+  --cmp-textLink-group-vertical-normal: 4px;
   --cmp-switch-width: 32px;
   --cmp-switch-height: 20px;
   --cmp-switch-paddingXY: 2px;
@@ -2481,6 +2580,7 @@
   --cmp-toggle-content-hover: #FFFFFF;
   --cmp-toggle-content-select: #0075FF;
   --cmp-toggle-content-disabled: #888888;
+  --cmp-toggle-group-gap: 8px;
   --cmp-checkbox-size: 16px;
   --cmp-checkbox-radius: 2px;
   --cmp-checkbox-borderWidth: 1px;
@@ -2580,10 +2680,10 @@
   --cmp-select-text-disabled: #888888;
   --cmp-field-label-sm-height: 28px;
   --cmp-field-label-sm-gap: 6px;
-  --cmp-field-label-sm-icon: 12px;
+  --cmp-field-label-sm-icon: 16px;
   --cmp-field-label-md-height: 36px;
   --cmp-field-label-md-gap: 8px;
-  --cmp-field-label-md-icon: 12px;
+  --cmp-field-label-md-icon: 16px;
   --cmp-field-addonLabel-height: 28px;
   --cmp-field-addonLabel-gap: 6px;
   --cmp-field-addonLabel-paddingX: 12px;
@@ -2647,6 +2747,7 @@
   --cmp-numberInput-stepper-bg-disabled: #EEEEEE;
   --cmp-numberInput-stepper-icon-default: #0075FF;
   --cmp-numberInput-stepper-icon-disabled: #BBBBBB;
+  --cmp-numberInput-stepper-border-default: #93C4FF;
   --cmp-chipInput-sm-minHeight: 36px;
   --cmp-chipInput-sm-paddingX: 12px;
   --cmp-chipInput-sm-paddingY: 6px;
@@ -2839,6 +2940,16 @@
   --cmp-toast-info-icon: #0075FF;
   --cmp-toast-info-text: #222222;
   --cmp-toast-info-textLink: #555555;
+  --cmp-overlay-header-bg: #FFFFFF;
+  --cmp-overlay-header-paddingX: 24px;
+  --cmp-overlay-header-paddingY: 20px;
+  --cmp-overlay-header-gap: 12px;
+  --cmp-overlay-header-title-color: #033F59;
+  --cmp-overlay-footer-bg-default: #FFFFFF;
+  --cmp-overlay-footer-bg-neutral: #F6F6F6;
+  --cmp-overlay-footer-paddingX: 20px;
+  --cmp-overlay-footer-paddingY: 8px;
+  --cmp-overlay-footer-gap: 16px;
   --cmp-modal-radius: 8px;
   --cmp-modal-confirm-paddingX: 32px;
   --cmp-modal-confirm-paddingY: 40px;
@@ -2852,10 +2963,6 @@
   --cmp-modal-confirm-positive-icon: #0075FF;
   --cmp-modal-confirm-negative-icon: #E30000;
   --cmp-modal-bg: #FFFFFF;
-  --cmp-modal-action-header-paddingX: 24px;
-  --cmp-modal-action-header-paddingY: 20px;
-  --cmp-modal-action-header-gap: 12px;
-  --cmp-modal-action-title-color: #033F59;
   --cmp-modal-action-body-paddingX: 20px;
   --cmp-modal-action-body-paddingBottom: 20px;
   --cmp-modal-action-footer-paddingX: 20px;
@@ -2872,14 +2979,11 @@
   --cmp-popup-header-bg-inverse: #FFFFFF;
   --cmp-popup-header-title-default: #FFFFFF;
   --cmp-popup-header-title-inverse: #004290;
-  --cmp-popup-footer-bg: #FFFFFF;
-  --cmp-popup-footer-paddingX: 20px;
-  --cmp-popup-footer-paddingY: 8px;
-  --cmp-popup-footer-gap: 16px;
+  --cmp-popup-header-paddingX: 16px;
+  --cmp-popup-header-paddingY: 12px;
   --cmp-popup-bg: #EEEEEE;
-  --cmp-spinner-size: 80px;
-  --cmp-spinner-color-track: #EEEEEE;
-  --cmp-spinner-color-arc: #2D8DFF;
+  --cmp-drawer-bg: #F6F6F6;
+  --cmp-drawer-body-border: #E1E1E1;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -2916,6 +3020,8 @@
   --cmp-progress-success-color: #12B553;
   --cmp-progress-error-color: #FB4444;
   --cmp-progress-bar-text: #FFFFFF;
+  --cmp-progress-inverse-color: #FFFFFF;
+  --cmp-progress-inverse-opacity: 40%;
   --cmp-table-header-height: 36px;
   --cmp-table-header-paddingX: 16px;
   --cmp-table-header-gap: 4px;
@@ -2926,8 +3032,8 @@
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
   --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX: 16px;
-  --cmp-table-body-frame-padding: 8px;
+  --cmp-table-body-paddingX-default: 16px;
+  --cmp-table-body-paddingX-frame: 8px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -2937,7 +3043,9 @@
   --cmp-table-bar-count-total: #066D9B;
   --cmp-table-bar-count-null: #888888;
   --cmp-table-radius: 8px;
-  --cmp-table-keyValue-body-padding: 8px;
+  --cmp-table-keyValue-body-paddingY: 8px;
+  --cmp-table-keyValue-body-paddingX-default: 8px;
+  --cmp-table-keyValue-body-paddingX-wide: 16px;
   --cmp-table-keyValue-height: 44px;
   --cmp-table-keyValue-search-paddingX: 32px;
   --cmp-table-keyValue-search-bg: #F9F9F9;
@@ -2955,6 +3063,7 @@
   --cmp-pagination-item-content-default: #555555;
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
+  --cmp-pagination-simple-gap: 8px;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;