@techsio/ui-kit 0.45.0 → 0.47.0

package/src/tokens/figma/light/variables.css

@@ -1,6 +1,6 @@
 /*
  * Design tokens exported from Figma
- * Exported at: 2026-08-28T10:50:48.929Z
+ * Exported at: 2026-09-24T06:56:20.869Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {
@@ -201,6 +201,20 @@
   --color-carousel-trigger-bg-hover: var(--color-fill-hover);
   --color-carousel-trigger-fg-base: var(--color-fg-primary);
   --color-carousel-trigger-fg-hover: var(--color-fg-primary);
+  --color-cascade-select-bg-disabled: var(--color-bg-disabled);
+  --color-cascade-select-border-disabled: var(--color-border-disabled);
+  --color-cascade-select-border-error: var(--color-bg-danger-base);
+  --color-cascade-select-border-success: var(--color-bg-success);
+  --color-cascade-select-border-warning: var(--color-bg-warning-base);
+  --color-cascade-select-fg-disabled: var(--color-fg-disabled);
+  --color-cascade-select-placeholder: var(--color-form-control-fg-placeholder);
+  --color-cascade-select-ring: var(--color-form-control-ring);
+  --color-cascade-select-trigger-bg-hover: var(--color-form-control-bg-hover);
+  --color-cascade-select-trigger-border: var(--color-form-control-border);
+  --color-cascade-select-trigger-border-focus: var(--color-form-control-border-focus);
+  --color-cascade-select-trigger-border-hover: var(--color-form-control-border-hover);
+  --color-cascade-select-trigger-fg-base: var(--color-fg-primary);
+  --color-cascade-select-trigger-fg-hover: var(--color-fg-accent-primary);
   --color-checkbox-bg-base: var(--color-bg-disabled);
   --color-checkbox-bg-checked: var(--color-bg-success);
   --color-checkbox-bg-disabled: var(--color-bg-disabled);
@@ -251,6 +265,17 @@
   --color-combobox-trigger-fg-base: var(--color-fg-primary);
   --color-combobox-trigger-fg-hover: var(--color-bg-primary-base);
   --color-combobox-warning-fg: var(--color-fg-accent-warning);
+  --color-command-bg: var(--color-popup-bg);
+  --color-command-border: var(--color-popup-border);
+  --color-command-empty-fg: var(--color-popup-item-fg-muted);
+  --color-command-fg: var(--color-popup-item-fg);
+  --color-command-foreground: var(--color-popup-item-fg);
+  --color-command-group-label-fg: var(--color-popup-item-fg-muted);
+  --color-command-highlight: var(--color-popup-item-bg-hover);
+  --color-command-item-bg-highlighted: var(--color-popup-item-bg-hover);
+  --color-command-item-fg-disabled: var(--color-popup-item-fg-disabled);
+  --color-command-muted: var(--color-popup-item-fg-muted);
+  --color-command-surface: var(--color-popup-bg);
   --color-danger: var(--color-danger-400);
   --color-danger-100: oklch(0.936 0.031 17.717);
   --color-danger-200: oklch(0.885 0.059 18.334);
@@ -269,6 +294,98 @@
   --color-danger-light-active: var(--color-bg-light-danger-active);
   --color-danger-light-disabled: var(--color-bg-disabled);
   --color-danger-light-hover: var(--color-bg-light-danger-hover);
+  --color-data-table-bg: var(--color-table-bg);
+  --color-data-table-border: var(--color-table-border);
+  --color-data-table-drag-handle-fg: var(--color-fg-secondary);
+  --color-data-table-editor-error-fg: var(--color-fg-status-error);
+  --color-data-table-empty-fg: var(--color-fg-secondary);
+  --color-data-table-expander-fg: var(--color-fg-secondary);
+  --color-data-table-filter-icon-fg: var(--color-fg-secondary);
+  --color-data-table-filter-row-bg: var(--color-table-header-bg);
+  --color-data-table-footer-bg: var(--color-table-footer-bg);
+  --color-data-table-header-bg: var(--color-table-header-bg);
+  --color-data-table-pagination-bg: var(--color-table-header-bg);
+  --color-data-table-pagination-fg: var(--color-table-header-fg);
+  --color-data-table-pinned-cell-bg: var(--color-table-bg);
+  --color-data-table-resize-handle-bg: var(--color-table-border);
+  --color-data-table-row-bg-hover: var(--color-table-row-bg-hover);
+  --color-data-table-row-bg-nested: var(--color-fill-active);
+  --color-data-table-row-bg-selected: var(--color-table-row-bg-selected);
+  --color-data-table-row-bg-striped-primary: var(--color-table-row-striped-primary);
+  --color-data-table-row-bg-striped-secondary: var(--color-table-row-striped-secondary);
+  --color-data-table-sort-icon-fg: var(--color-fg-secondary);
+  --color-data-table-sort-icon-fg-active: var(--color-fg-accent-primary);
+  --color-data-table-toolbar-bg: var(--color-table-header-bg);
+  --color-data-table-toolbar-fg: var(--color-table-header-fg);
+  --color-date-picker-accent: var(--color-bg-primary-base);
+  --color-date-picker-accent-foreground: var(--color-fg-light);
+  --color-date-picker-accent-hover: var(--color-bg-primary-hover);
+  --color-date-picker-border: var(--color-form-control-border);
+  --color-date-picker-border-hover: var(--color-form-control-border-hover);
+  --color-date-picker-content-bg: var(--color-date-picker-surface);
+  --color-date-picker-content-border: var(--color-date-picker-border);
+  --color-date-picker-content-fg: var(--color-date-picker-text);
+  --color-date-picker-control-bg: var(--color-date-picker-fill);
+  --color-date-picker-control-bg-disabled: var(--color-form-control-bg-disabled);
+  --color-date-picker-control-bg-focus: var(--color-date-picker-fill-active);
+  --color-date-picker-control-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-control-bg-readonly: var(--color-date-picker-fill);
+  --color-date-picker-control-border: var(--color-date-picker-border);
+  --color-date-picker-control-border-disabled: var(--color-form-control-border-disabled);
+  --color-date-picker-control-border-error: var(--color-date-picker-error);
+  --color-date-picker-control-border-error-focus: var(--color-date-picker-error-focus);
+  --color-date-picker-control-border-error-hover: var(--color-date-picker-error-hover);
+  --color-date-picker-control-border-focus: var(--color-date-picker-focus);
+  --color-date-picker-control-border-hover: var(--color-date-picker-border-hover);
+  --color-date-picker-control-fg: var(--color-date-picker-text);
+  --color-date-picker-control-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-control-ring: var(--color-date-picker-ring);
+  --color-date-picker-day-bg: var(--color-date-picker-transparent);
+  --color-date-picker-day-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-day-bg-selected: var(--color-date-picker-accent);
+  --color-date-picker-day-bg-selected-hover: var(--color-date-picker-accent-hover);
+  --color-date-picker-day-border: var(--color-date-picker-transparent);
+  --color-date-picker-day-fg: var(--color-date-picker-text);
+  --color-date-picker-day-fg-selected: var(--color-date-picker-accent-foreground);
+  --color-date-picker-day-fg-unavailable: var(--color-date-picker-disabled);
+  --color-date-picker-day-ring: var(--color-date-picker-ring);
+  --color-date-picker-day-today-border: var(--color-date-picker-accent);
+  --color-date-picker-disabled: var(--color-form-control-fg-disabled);
+  --color-date-picker-error: var(--color-danger);
+  --color-date-picker-error-focus: var(--color-border-danger-focus);
+  --color-date-picker-error-hover: var(--color-border-danger-hover);
+  --color-date-picker-fill: var(--color-form-control-bg);
+  --color-date-picker-fill-active: var(--color-form-control-bg-focus);
+  --color-date-picker-fill-hover: var(--color-form-control-bg-hover);
+  --color-date-picker-focus: var(--color-form-control-border-focus);
+  --color-date-picker-footer-border: var(--color-date-picker-border);
+  --color-date-picker-label-fg: var(--color-date-picker-text);
+  --color-date-picker-month-divider-border: var(--color-date-picker-border);
+  --color-date-picker-navigation-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-navigation-fg: var(--color-date-picker-text);
+  --color-date-picker-navigation-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-navigation-ring: var(--color-date-picker-ring);
+  --color-date-picker-placeholder: var(--color-form-control-fg-placeholder);
+  --color-date-picker-range-separator-fg: var(--color-date-picker-text-muted);
+  --color-date-picker-ring: var(--color-form-control-ring);
+  --color-date-picker-segment-bg-focus: var(--color-date-picker-fill-hover);
+  --color-date-picker-segment-fg-placeholder: var(--color-date-picker-placeholder);
+  --color-date-picker-surface: var(--color-fill-overlay);
+  --color-date-picker-text: var(--color-fg-primary);
+  --color-date-picker-text-muted: var(--color-fg-secondary);
+  --color-date-picker-time-bg: var(--color-date-picker-fill);
+  --color-date-picker-time-border: var(--color-date-picker-border);
+  --color-date-picker-time-fg: var(--color-date-picker-text);
+  --color-date-picker-time-label-fg: var(--color-date-picker-text);
+  --color-date-picker-time-ring: var(--color-date-picker-ring);
+  --color-date-picker-transparent: var(--color-bg-transparent);
+  --color-date-picker-trigger-bg: var(--color-date-picker-fill);
+  --color-date-picker-trigger-bg-active: var(--color-date-picker-fill-active);
+  --color-date-picker-trigger-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-trigger-fg: var(--color-date-picker-text);
+  --color-date-picker-trigger-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-trigger-ring: var(--color-date-picker-ring);
+  --color-date-picker-weekday-fg: var(--color-date-picker-text);
   --color-dialog-backdrop-bg-modal: var(--color-bg-scrim);
   --color-dialog-backdrop-bg-modeless: var(--color-transparent);
   --color-dialog-close-trigger-fg: var(--color-fg-primary);
@@ -278,6 +395,20 @@
   --color-dialog-description-fg: var(--color-fg-primary);
   --color-dialog-ring: var(--color-ring-default);
   --color-dialog-title-fg: var(--color-fg-primary);
+  --color-drawer-backdrop-bg: var(--color-drawer-overlay);
+  --color-drawer-border: var(--color-border-primary);
+  --color-drawer-content-bg: var(--color-drawer-surface);
+  --color-drawer-content-border: var(--color-drawer-border);
+  --color-drawer-content-fg: var(--color-drawer-foreground);
+  --color-drawer-description-fg: var(--color-drawer-muted-foreground);
+  --color-drawer-focus: var(--color-primary);
+  --color-drawer-foreground: var(--color-fg-primary);
+  --color-drawer-grabber-bg: var(--color-drawer-border);
+  --color-drawer-muted-foreground: var(--color-fg-secondary);
+  --color-drawer-overlay: var(--color-bg-scrim);
+  --color-drawer-ring: var(--color-drawer-focus);
+  --color-drawer-surface: var(--color-fill-surface);
+  --color-drawer-title-fg: var(--color-drawer-foreground);
   --color-fg-accent-danger: var(--color-danger-600);
   --color-fg-accent-primary: oklch(0.507 0.063 255.385);
   --color-fg-accent-secondary: oklch(0.447 0.076 49.767);
@@ -297,9 +428,40 @@
   --color-fg-primary: var(--color-slate-950);
   --color-fg-reverse: var(--color-white);
   --color-fg-secondary: oklch(0.494 0.037 261.595);
-  --color-fg-status-error: var(--color-danger-600);
+  --color-fg-status-error: var(--color-danger-700);
   --color-fg-status-success: var(--color-success-700);
   --color-fg-status-warning: var(--color-warning-500);
+  --color-file-upload-accent: var(--color-primary);
+  --color-file-upload-accent-subtle: var(--color-primary-light);
+  --color-file-upload-content: var(--color-fg-primary);
+  --color-file-upload-danger: var(--color-danger);
+  --color-file-upload-disabled-content: var(--color-fg-disabled);
+  --color-file-upload-disabled-outline: var(--color-border-disabled);
+  --color-file-upload-disabled-surface: var(--color-bg-disabled);
+  --color-file-upload-dropzone-bg: var(--color-file-upload-surface);
+  --color-file-upload-dropzone-bg-disabled: var(--color-file-upload-disabled-surface);
+  --color-file-upload-dropzone-bg-dragging: var(--color-file-upload-accent-subtle);
+  --color-file-upload-dropzone-bg-hover: var(--color-file-upload-surface-hover);
+  --color-file-upload-dropzone-border: var(--color-file-upload-outline);
+  --color-file-upload-dropzone-border-disabled: var(--color-file-upload-disabled-outline);
+  --color-file-upload-dropzone-border-dragging: var(--color-file-upload-accent);
+  --color-file-upload-dropzone-border-invalid: var(--color-file-upload-danger);
+  --color-file-upload-focus: var(--color-ring-default);
+  --color-file-upload-focus-border: var(--color-file-upload-focus);
+  --color-file-upload-item-bg: var(--color-file-upload-item-surface);
+  --color-file-upload-item-bg-rejected: var(--color-file-upload-item-surface);
+  --color-file-upload-item-border: var(--color-file-upload-outline);
+  --color-file-upload-item-border-rejected: var(--color-file-upload-danger);
+  --color-file-upload-item-fg-disabled: var(--color-file-upload-disabled-content);
+  --color-file-upload-item-name-fg: var(--color-file-upload-content);
+  --color-file-upload-item-preview-fg: var(--color-file-upload-content);
+  --color-file-upload-item-size-fg: var(--color-file-upload-content);
+  --color-file-upload-item-surface: var(--color-base);
+  --color-file-upload-label-fg: var(--color-file-upload-content);
+  --color-file-upload-label-fg-disabled: var(--color-file-upload-disabled-content);
+  --color-file-upload-outline: var(--color-border-primary);
+  --color-file-upload-surface: var(--color-fill-surface);
+  --color-file-upload-surface-hover: var(--color-fill-hover);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);
   --color-fill-borderless-active: var(--color-fill-active);
@@ -353,6 +515,13 @@
   --color-header-nav-item-bg: var(--color-bg-transparent);
   --color-header-nav-item-bg-hover: var(--color-bg-transparent);
   --color-highlight: var(--color-fill-highlight);
+  --color-hotkeys-key-bg: var(--color-fill-surface);
+  --color-hotkeys-key-border: var(--color-border-primary);
+  --color-hotkeys-key-fg: var(--color-fg-secondary);
+  --color-hotkeys-outline: var(--color-border-primary);
+  --color-hotkeys-separator-fg: var(--color-fg-secondary);
+  --color-hotkeys-surface: var(--color-fill-surface);
+  --color-hotkeys-text: var(--color-fg-secondary);
   --color-icon-control-bg-active: var(--color-fill-active);
   --color-icon-control-bg-danger-active: var(--color-bg-light-danger-active);
   --color-icon-control-bg-danger-hover: var(--color-bg-light-danger-base);
@@ -667,6 +836,31 @@
   --color-shadow-1: oklch(0.145 0 0);
   --color-shadow-2: oklch(0.145 0 0);
   --color-shadow-3: oklch(0.145 0 0);
+  --color-sidebar-base: var(--color-base);
+  --color-sidebar-border: var(--color-border-primary);
+  --color-sidebar-focus: var(--color-primary);
+  --color-sidebar-foreground: var(--color-fg-primary);
+  --color-sidebar-group-label-fg: var(--color-sidebar-muted-foreground);
+  --color-sidebar-inset-bg: var(--color-sidebar-base);
+  --color-sidebar-inset-fg: var(--color-sidebar-foreground);
+  --color-sidebar-interactive: var(--color-fill-overlay);
+  --color-sidebar-muted-foreground: var(--color-fg-secondary);
+  --color-sidebar-pane-border: var(--color-sidebar-border);
+  --color-sidebar-panel-bg: var(--color-sidebar-surface);
+  --color-sidebar-panel-border: var(--color-sidebar-border);
+  --color-sidebar-panel-fg: var(--color-sidebar-foreground);
+  --color-sidebar-rail-bg-hover: var(--color-sidebar-interactive);
+  --color-sidebar-rail-fg: var(--color-sidebar-muted-foreground);
+  --color-sidebar-rail-indicator-bg: var(--color-sidebar-border);
+  --color-sidebar-ring: var(--color-sidebar-focus);
+  --color-sidebar-root-bg: var(--color-sidebar-base);
+  --color-sidebar-root-fg: var(--color-sidebar-foreground);
+  --color-sidebar-separator-bg: var(--color-sidebar-border);
+  --color-sidebar-surface: var(--color-fill-surface);
+  --color-sidebar-trigger-bg-active: var(--color-sidebar-interactive);
+  --color-sidebar-trigger-bg-base: var(--color-transparent);
+  --color-sidebar-trigger-bg-hover: var(--color-sidebar-interactive);
+  --color-sidebar-trigger-fg: var(--color-sidebar-foreground);
   --color-skeleton-bg-primary: var(--color-fill-overlay);
   --color-skeleton-bg-secondary: var(--color-fill-surface);
   --color-sky-300: oklch(0.828 0.101 230.318);
@@ -759,6 +953,7 @@
   --color-table-row-bg: var(--color-bg-transparent);
   --color-table-row-bg-hover: var(--color-fill-hover);
   --color-table-row-bg-selected: var(--color-fill-selected);
+  --color-table-row-fg-selected: var(--color-white);
   --color-table-row-striped-primary: var(--color-fill-base);
   --color-table-row-striped-secondary: var(--color-bg-transparent);
   --color-tabs-bg: var(--color-fill-surface);
@@ -836,6 +1031,18 @@
   --color-tooltip-bg: var(--color-fill-overlay);
   --color-tooltip-border-outline: var(--color-border-primary);
   --color-tooltip-fg: var(--color-fg-primary);
+  --color-tour-arrow: var(--color-tour-surface);
+  --color-tour-backdrop: var(--color-tour-scrim);
+  --color-tour-bg: var(--color-tour-surface);
+  --color-tour-border: var(--color-tour-outline);
+  --color-tour-description: var(--color-tour-text);
+  --color-tour-fg: var(--color-tour-text);
+  --color-tour-outline: var(--color-border-primary);
+  --color-tour-progress: var(--color-tour-text);
+  --color-tour-scrim: var(--color-bg-scrim);
+  --color-tour-spotlight: var(--color-tour-text);
+  --color-tour-surface: var(--color-fill-surface);
+  --color-tour-text: var(--color-fg-primary);
   --color-transparent: oklch(0 0 0 / 0);
   --color-tree-view-bg: var(--color-fill-base);
   --color-tree-view-fg-base: var(--color-fg-primary);
@@ -891,12 +1098,19 @@
   --font-weight-badge-sm: var(--font-weight-light);
   --font-weight-badge-xl: var(--font-weight-bold);
   --font-weight-bold: 700;
+  --font-weight-command-group-label: var(--font-weight-medium);
+  --font-weight-date-picker-view: var(--font-weight-medium);
+  --font-weight-date-picker-weekday: var(--font-weight-medium);
   --font-weight-dialog-title: var(--font-weight-semibold);
+  --font-weight-drawer-title: var(--font-weight-semibold);
   --font-weight-extra-light: 200;
+  --font-weight-file-upload-item-name: var(--font-weight-medium);
+  --font-weight-file-upload-label: var(--font-weight-medium);
   --font-weight-footer-link: var(--font-weight-normal);
   --font-weight-footer-title: var(--font-weight-semibold);
   --font-weight-header-nav: var(--font-weight-medium);
   --font-weight-header-nav-active: var(--font-weight-semibold);
+  --font-weight-hotkeys: var(--font-weight-medium);
   --font-weight-label: var(--font-weight-bold);
   --font-weight-light: 300;
   --font-weight-link: var(--font-weight-medium);
@@ -909,10 +1123,12 @@
   --font-weight-radio-card-addon: var(--font-weight-medium);
   --font-weight-radio-card-item: var(--font-weight-medium);
   --font-weight-semibold: 600;
+  --font-weight-sidebar-group-label: var(--font-weight-semibold);
   --font-weight-table-caption: var(--font-weight-normal);
   --font-weight-table-footer: var(--font-weight-medium);
   --font-weight-table-header: var(--font-weight-semibold);
   --font-weight-toast-title: var(--font-weight-medium);
+  --font-weight-tour-title: var(--font-weight-semibold);
   --font-weight-tree-view-label: var(--font-weight-medium);
   /* Measures */
   --aspect-card: 3 / 2;
@@ -935,12 +1151,23 @@
   --border-width-checkbox: var(--border-sm);
   --border-width-checkbox-error: var(--border-md);
   --border-width-combobox: var(--border-width-form-control);
+  --border-width-command: var(--border-width-popup);
+  --border-width-data-table: var(--border-table-width);
+  --border-width-date-picker-content: var(--border-sm);
+  --border-width-date-picker-control: var(--border-width-form-control);
+  --border-width-date-picker-day: var(--border-sm);
+  --border-width-date-picker-time: var(--border-width-form-control);
   --border-width-dialog: var(--border-sm);
+  --border-width-drawer: var(--border-sm);
+  --border-width-file-upload-dropzone: var(--border-md);
+  --border-width-file-upload-focus: var(--default-ring-width);
+  --border-width-file-upload-item: var(--border-sm);
   --border-width-form-control: var(--border-md);
+  --border-width-hotkeys-key: var(--border-sm);
   --border-width-input: var(--border-width-form-control);
   --border-width-input-validation: var(--border-lg);
   --border-width-numeric-input: var(--border-width-input);
-  --border-width-pagination: var(--border-sm);
+  --border-width-pagination: var(--border-width-form-control);
   --border-width-popup: var(--border-sm);
   --border-width-product-card: var(--border-sm);
   --border-width-radio-card: var(--border-sm);
@@ -950,6 +1177,7 @@
   --border-width-search-form: var(--border-width-form-control);
   --border-width-select: var(--border-width-form-control);
   --border-width-select-validation: var(--border-lg);
+  --border-width-sidebar: var(--border-sm);
   --border-width-slider: var(--border-sm);
   --border-width-slider-error: var(--border-lg);
   --border-width-steps-content: var(--border-sm);
@@ -960,6 +1188,7 @@
   --border-width-textarea-validation: var(--border-width-input-validation);
   --border-width-toast: var(--border-sm);
   --border-width-tooltip: var(--size-1);
+  --border-width-tour: var(--border-sm);
   --breakpoint-2xl: 96rem;
   --breakpoint-lg: 64rem;
   --breakpoint-md: 48rem;
@@ -977,6 +1206,7 @@
   --container-4xl: var(--dimension-container-4xl);
   --container-5xl: var(--dimension-container-5xl);
   --container-6xl: var(--dimension-container-6xl);
+  --container-cascade-select-column: var(--container-3xs);
   --container-dialog-center-max-h: var(--size-800);
   --container-dialog-center-max-w: var(--container-2xl);
   --container-dialog-lg: var(--container-lg);
@@ -984,13 +1214,20 @@
   --container-dialog-sm: var(--container-sm);
   --container-dialog-xl: var(--container-xl);
   --container-dialog-xs: var(--container-xs);
+  --container-drawer-lg: var(--container-lg);
+  --container-drawer-md: var(--container-md);
+  --container-drawer-sm: var(--container-sm);
+  --container-drawer-xl: var(--container-xl);
+  --container-drawer-xs: var(--container-xs);
   --container-footer-max: var(--container-max-w);
   --container-header-desktop: var(--dimension-768);
   --container-lg: var(--dimension-container-lg);
   --container-max-w: var(--dimension-container-max-w);
   --container-md: var(--dimension-container-md);
   --container-prose: 65ch;
+  --container-sidebar-mobile: var(--container-2xs);
   --container-sm: var(--dimension-container-sm);
+  --container-tour: var(--container-sm);
   --container-xl: var(--dimension-container-xl);
   --container-xs: var(--dimension-container-xs);
   --default-ring-offset: 0.13rem;
@@ -1109,6 +1346,32 @@
   --duration-skeleton-normal: var(--duration-normal);
   --duration-skeleton-slow: var(--duration-slow);
   --duration-slow: 3ms;
+  --gap-date-picker-calendar: var(--spacing-100);
+  --gap-date-picker-control: var(--spacing-100);
+  --gap-date-picker-footer: var(--spacing-100);
+  --gap-date-picker-indicator: var(--spacing-50);
+  --gap-date-picker-root: var(--spacing-form-field);
+  --gap-date-picker-time: var(--spacing-100);
+  --gap-file-upload-dropzone: var(--spacing-file-upload-comfortable);
+  --gap-file-upload-item: var(--spacing-file-upload-content-gap);
+  --gap-file-upload-item-group: var(--spacing-file-upload-content-gap);
+  --gap-file-upload-root: var(--spacing-file-upload-comfortable);
+  --height-date-picker-control-lg: var(--height-form-control-lg);
+  --height-date-picker-control-md: var(--height-form-control-md);
+  --height-date-picker-control-sm: var(--height-form-control-sm);
+  --height-date-picker-day-lg: var(--size-date-picker-day-lg);
+  --height-date-picker-day-md: var(--size-date-picker-day-md);
+  --height-date-picker-day-sm: var(--size-date-picker-day-sm);
+  --height-date-picker-day-timed: var(--size-date-picker-day-timed);
+  --height-date-picker-time-field: var(--height-form-control-sm);
+  --height-drawer-grabber-length: var(--dimension-40);
+  --height-drawer-grabber-thickness: var(--dimension-4);
+  --height-drawer-lg: var(--container-lg);
+  --height-drawer-md: var(--container-md);
+  --height-drawer-sm: var(--container-sm);
+  --height-drawer-swipe-area: var(--dimension-16);
+  --height-drawer-xl: var(--container-xl);
+  --height-drawer-xs: var(--container-xs);
   --height-footer-divider: var(--border-md);
   --height-form-control-lg: var(--dimension-70);
   --height-form-control-md: var(--size-44);
@@ -1118,8 +1381,10 @@
   --height-numeric-input-md: var(--height-form-control-md);
   --height-numeric-input-sm: var(--height-form-control-sm);
   --height-pagination-lg: var(--dimension-48);
-  --height-pagination-md: var(--dimension-40);
-  --height-pagination-sm: var(--dimension-32);
+  --height-pagination-md: var(--height-form-control-md);
+  --height-pagination-sm: var(--height-form-control-sm);
+  --height-sidebar-rail-indicator: var(--dimension-32);
+  --height-sidebar-separator: var(--dimension-1);
   --height-skeleton-text-line: var(--size-16);
   --line-height-24: 1.5rem;
   --line-height-30: 1.88rem;
@@ -1133,11 +1398,19 @@
   --offset-shadow-1: 0px 1px 3px 0px;
   --offset-shadow-2: 0px 5px 6px 0px;
   --offset-shadow-3: 1px 1px 20px 0px;
+  --opacity-date-picker-disabled: var(--opacity-disabled);
+  --opacity-date-picker-outside: var(--opacity-disabled);
   --opacity-disabled: 60%;
   --opacity-disabled-placeholder: 30%;
   --opacity-placeholder: 60%;
   --opacity-text-secondary: 70%;
   --opacity-tree-view-indent: 100%;
+  --outline-drawer-focus-offset: var(--default-ring-offset);
+  --outline-drawer-focus-style: var(--default-ring-style);
+  --outline-drawer-focus-width: var(--default-ring-width);
+  --outline-sidebar-focus-offset: var(--default-ring-offset);
+  --outline-sidebar-focus-style: var(--default-ring-style);
+  --outline-sidebar-focus-width: var(--default-ring-width);
   --padding-accordion-content-x-lg: var(--dimension-30);
   --padding-accordion-content-x-md: var(--dimension-16);
   --padding-accordion-content-x-sm: var(--dimension-6);
@@ -1165,9 +1438,42 @@
   --padding-button-y-md: var(--dimension-6);
   --padding-button-y-sm: var(--dimension-4);
   --padding-carousel-control: var(--dimension-6);
+  --padding-cascade-select-md: var(--spacing-150);
+  --padding-cascade-select-sm: var(--spacing-100);
+  --padding-command: var(--spacing-150);
+  --padding-command-empty: var(--dimension-24);
+  --padding-command-item-x: var(--padding-popup-item-x-md);
+  --padding-command-item-y: var(--padding-popup-item-y-md);
+  --padding-command-list: var(--padding-popup-viewport);
+  --padding-data-table-detail: var(--spacing-300);
+  --padding-data-table-empty: var(--spacing-700);
+  --padding-data-table-filter-cell-x: var(--spacing-200);
+  --padding-data-table-filter-cell-y: var(--spacing-100);
+  --padding-data-table-pagination-x: var(--spacing-300);
+  --padding-data-table-pagination-y: var(--spacing-200);
+  --padding-data-table-toolbar-x: var(--spacing-300);
+  --padding-data-table-toolbar-y: var(--spacing-200);
+  --padding-date-picker-calendar-cell: var(--spacing-100);
+  --padding-date-picker-content: var(--dimension-16);
+  --padding-date-picker-content-timed: var(--dimension-10);
+  --padding-date-picker-footer: var(--dimension-10);
+  --padding-date-picker-range-separator: var(--spacing-100);
+  --padding-date-picker-segment: var(--spacing-50);
+  --padding-date-picker-segments-lg: var(--spacing-200);
+  --padding-date-picker-segments-md: var(--spacing-150);
+  --padding-date-picker-segments-sm: var(--spacing-100);
+  --padding-date-picker-time: var(--dimension-10);
+  --padding-date-picker-time-input: var(--spacing-50);
   --padding-dialog-actions-top: var(--dimension-10);
   --padding-dialog-close-trigger: var(--dimension-10);
   --padding-dialog-content: var(--dimension-40);
+  --padding-drawer-body: var(--dimension-24);
+  --padding-drawer-footer: var(--dimension-24);
+  --padding-drawer-grabber: var(--dimension-8);
+  --padding-drawer-header: var(--dimension-24);
+  --padding-file-upload-dropzone-x: var(--spacing-file-upload-comfortable);
+  --padding-file-upload-dropzone-y: var(--spacing-file-upload-content-gap);
+  --padding-file-upload-item: var(--spacing-file-upload-content-gap);
   --padding-footer-bottom: var(--dimension-24);
   --padding-footer-bottom-lg: var(--dimension-36);
   --padding-footer-bottom-md: var(--dimension-24);
@@ -1182,6 +1488,8 @@
   --padding-header-item-lg: var(--dimension-16);
   --padding-header-item-md: var(--dimension-10);
   --padding-header-item-sm: var(--dimension-6);
+  --padding-hotkeys-key-x: var(--spacing-100);
+  --padding-hotkeys-key-y: var(--spacing-50);
   --padding-input-lg: var(--spacing-200);
   --padding-input-md: var(--spacing-150);
   --padding-input-sm: var(--spacing-100);
@@ -1224,6 +1532,11 @@
   --padding-select-trigger-x-sm: var(--dimension-6);
   --padding-select-trigger-y-md: var(--dimension-10);
   --padding-select-trigger-y-sm: var(--dimension-6);
+  --padding-sidebar-content: var(--dimension-12);
+  --padding-sidebar-content-compact: var(--dimension-8);
+  --padding-sidebar-group-label: var(--dimension-8);
+  --padding-sidebar-section: var(--dimension-16);
+  --padding-sidebar-section-compact: var(--dimension-8);
   --padding-steps-trigger-x: var(--dimension-10);
   --padding-steps-trigger-y: var(--dimension-8);
   --padding-table-caption-lg: var(--dimension-16);
@@ -1257,6 +1570,8 @@
   --padding-tooltip-y-lg: var(--dimension-20);
   --padding-tooltip-y-md: var(--dimension-16);
   --padding-tooltip-y-sm: var(--dimension-10);
+  --padding-tour: var(--dimension-20);
+  --padding-tour-actions: var(--dimension-6);
   --radius-2xl: 2rem;
   --radius-accordion: var(--radius-sm);
   --radius-badge: var(--radius-sm);
@@ -1266,16 +1581,32 @@
   --radius-button-sm: var(--radius-sm);
   --radius-carousel: var(--radius-sm);
   --radius-carousel-indicator: var(--radius-full);
+  --radius-cascade-select-md: var(--radius-form-control-md);
+  --radius-cascade-select-sm: var(--radius-form-control-sm);
   --radius-checkbox: var(--radius-sm);
   --radius-checkbox-indeterminate: var(--radius-sm);
   --radius-combobox: var(--radius-form-control);
   --radius-combobox-lg: var(--radius-form-control-lg);
   --radius-combobox-md: var(--radius-form-control-md);
   --radius-combobox-sm: var(--radius-form-control-sm);
+  --radius-command: var(--radius-popup);
+  --radius-command-item: var(--radius-popup-item);
+  --radius-data-table: var(--radius-table);
+  --radius-date-picker-content: var(--radius-popover);
+  --radius-date-picker-control-lg: var(--radius-form-control-lg);
+  --radius-date-picker-control-md: var(--radius-form-control-md);
+  --radius-date-picker-control-sm: var(--radius-form-control-sm);
+  --radius-date-picker-day: var(--radius-button-sm);
+  --radius-date-picker-time: var(--radius-form-control-sm);
   --radius-dialog-close-trigger: var(--radius-full);
   --radius-dialog-content-center: var(--radius-sm);
   --radius-dialog-content-edge: var(--radius-none);
   --radius-dialog-content-side: var(--radius-none);
+  --radius-drawer-content: var(--radius-md);
+  --radius-drawer-grabber: var(--radius-full);
+  --radius-file-upload-dropzone: var(--radius-md);
+  --radius-file-upload-item: var(--radius-md);
+  --radius-file-upload-item-preview: var(--radius-sm);
   --radius-footer: var(--radius-none);
   --radius-form-control: var(--radius-md);
   --radius-form-control-lg: var(--radius-lg);
@@ -1283,6 +1614,7 @@
   --radius-form-control-sm: var(--radius-sm);
   --radius-full: 62.44rem;
   --radius-gallery-trigger: var(--radius-sm);
+  --radius-hotkeys-key: var(--radius-sm);
   --radius-icon-control: var(--radius-sm);
   --radius-input: var(--radius-form-control);
   --radius-input-lg: var(--radius-form-control-lg);
@@ -1323,6 +1655,7 @@
   --radius-select-lg: var(--radius-form-control-lg);
   --radius-select-md: var(--radius-form-control-md);
   --radius-select-sm: var(--radius-form-control-sm);
+  --radius-sidebar-rail: var(--radius-full);
   --radius-skeleton-text: var(--radius-sm);
   --radius-slider-thumb: var(--radius-full);
   --radius-slider-track: var(--radius-full);
@@ -1343,6 +1676,7 @@
   --radius-textarea-sm: var(--radius-form-control-sm);
   --radius-toast-root: var(--radius-sm);
   --radius-tooltip: var(--radius-md);
+  --radius-tour: var(--radius-sm);
   --radius-tree-view: var(--radius-none);
   --radius-xs: 0.25rem;
   --ring-offset: 0.13rem;
@@ -1351,7 +1685,10 @@
   --shadow-accordion-content-sm: var(--shadow-sm);
   --shadow-accordion-root-md: var(--shadow-xl);
   --shadow-accordion-root-sm: var(--shadow-primary);
+  --shadow-data-table-outline: var(--shadow-table-outline);
+  --shadow-date-picker-content: var(--shadow-popover);
   --shadow-dialog-content: var(--shadow-primary);
+  --shadow-drawer-content: var(--shadow-xl);
   --shadow-gallery-trigger: var(--shadow-sm);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -1364,6 +1701,7 @@
   --shadow-slider-thumb: var(--shadow-sm);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-table-outline: var(--shadow-sm);
+  --shadow-tour: var(--shadow-primary);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --size-1: 0.06rem;
   --size-12: 0.75rem;
@@ -1394,6 +1732,13 @@
   --size-combobox-lg: var(--size-form-control-lg);
   --size-combobox-md: var(--size-form-control-md);
   --size-combobox-sm: var(--size-form-control-sm);
+  --size-data-table-resize-handle: var(--spacing-100);
+  --size-date-picker-day-lg: var(--dimension-36);
+  --size-date-picker-day-md: var(--dimension-32);
+  --size-date-picker-day-sm: var(--dimension-28);
+  --size-date-picker-day-timed: var(--dimension-28);
+  --size-date-picker-navigation: var(--size-icon-control-md);
+  --size-date-picker-segment: var(--dimension-24);
   --size-dialog-content-max-width: var(--dimension-container-2xl);
   --size-dialog-x-lg: var(--dimension-container-lg);
   --size-dialog-x-md: var(--dimension-container-md);
@@ -1455,8 +1800,10 @@
   --spacing-150: 0.63rem;
   --spacing-200: 0.88rem;
   --spacing-250: 1.25rem;
+  --spacing-300: 1.5rem;
   --spacing-400: 2.13rem;
   --spacing-50: 0.13rem;
+  --spacing-700: 4rem;
   --spacing-breadcrumb-item: var(--dimension-10);
   --spacing-breadcrumb-lg: var(--dimension-16);
   --spacing-breadcrumb-link-lg: var(--spacing-200);
@@ -1475,6 +1822,8 @@
   --spacing-carousel-indicator: var(--dimension-6);
   --spacing-carousel-trigger-right: var(--dimension-6);
   --spacing-carousel-trigger-top: var(--dimension-6);
+  --spacing-cascade-select: var(--spacing-form-field);
+  --spacing-cascade-select-right: var(--dimension-40);
   --spacing-combobox-clear-right: var(--dimension-18);
   --spacing-combobox-item-padding-x: var(--padding-popup-item-x-md);
   --spacing-combobox-item-padding-y-lg: var(--dimension-4);
@@ -1483,9 +1832,28 @@
   --spacing-combobox-lg: var(--dimension-16);
   --spacing-combobox-md: var(--dimension-10);
   --spacing-combobox-sm: var(--dimension-6);
+  --spacing-command-gap: var(--spacing-100);
+  --spacing-command-item-gap: var(--spacing-popup-item-md);
+  --spacing-command-list-max: var(--container-xs);
+  --spacing-data-table-editor: var(--spacing-50);
+  --spacing-data-table-filter-control: var(--spacing-100);
+  --spacing-data-table-pagination: var(--size-16);
+  --spacing-data-table-toolbar: var(--spacing-200);
+  --spacing-date-picker-enter-offset: var(--spacing-50);
   --spacing-dialog-actions: var(--dimension-6);
   --spacing-dialog-close-trigger-offset: var(--dimension-20);
   --spacing-dialog-content: var(--dimension-20);
+  --spacing-drawer-bleed: var(--dimension-48);
+  --spacing-drawer-footer: var(--dimension-10);
+  --spacing-drawer-header: var(--dimension-8);
+  --spacing-drawer-indent-offset: var(--dimension-8);
+  --spacing-file-upload-comfortable: var(--spacing-250);
+  --spacing-file-upload-content-gap: var(--spacing-150);
+  --spacing-file-upload-dropzone-base: var(--container-2xs);
+  --spacing-file-upload-dropzone-min-height: var(--spacing-file-upload-dropzone-base);
+  --spacing-file-upload-focus-offset: var(--default-ring-offset);
+  --spacing-file-upload-item-preview: var(--spacing-file-upload-item-preview-base);
+  --spacing-file-upload-item-preview-base: var(--dimension-40);
   --spacing-footer-container-lg: var(--dimension-44);
   --spacing-footer-container-md: var(--dimension-36);
   --spacing-footer-container-sm: var(--dimension-24);
@@ -1511,6 +1879,7 @@
   --spacing-header-nav-lg: var(--dimension-36);
   --spacing-header-nav-md: var(--dimension-24);
   --spacing-header-nav-sm: var(--dimension-16);
+  --spacing-hotkeys-gap: var(--spacing-50);
   --spacing-label: var(--size-4);
   --spacing-menu-item: var(--spacing-popup-item-md);
   --spacing-menu-separator-margin: var(--spacing-popup-item-md);
@@ -1519,7 +1888,7 @@
   --spacing-numeric-input-lg: var(--dimension-0);
   --spacing-numeric-input-md: var(--dimension-0);
   --spacing-numeric-input-sm: var(--dimension-0);
-  --spacing-pagination-list: var(--dimension-16);
+  --spacing-pagination-list: var(--size-4);
   --spacing-phone-input: var(--spacing-form-field);
   --spacing-phone-input-country-value: var(--dimension-8);
   --spacing-phone-input-item: var(--dimension-10);
@@ -1570,6 +1939,13 @@
   --spacing-select: var(--spacing-form-field);
   --spacing-select-content: var(--dimension-40);
   --spacing-select-right: var(--dimension-40);
+  --spacing-sidebar-content: var(--dimension-16);
+  --spacing-sidebar-group: var(--dimension-8);
+  --spacing-sidebar-group-content: var(--dimension-4);
+  --spacing-sidebar-menu: var(--dimension-4);
+  --spacing-sidebar-offset: var(--dimension-0);
+  --spacing-sidebar-rail: var(--dimension-0);
+  --spacing-sidebar-section: var(--dimension-8);
   --spacing-skeleton-lg: var(--dimension-16);
   --spacing-skeleton-md: var(--dimension-10);
   --spacing-skeleton-sm: var(--dimension-6);
@@ -1609,6 +1985,12 @@
   --spacing-toast-content: var(--dimension-16);
   --spacing-toast-description: var(--dimension-6);
   --spacing-tooltip-arrow: var(--dimension-10);
+  --spacing-tour-actions: var(--dimension-6);
+  --spacing-tour-arrow: var(--dimension-10);
+  --spacing-tour-close: var(--dimension-10);
+  --spacing-tour-content: var(--dimension-10);
+  --spacing-tour-title: var(--dimension-30);
+  --spacing-tour-viewport: var(--dimension-16);
   --spacing-tree-view-icon: var(--dimension-10);
   --spacing-tree-view-indent-per-level: var(--dimension-6);
   --spacing-tree-view-indent-width: var(--size-1);
@@ -1650,6 +2032,18 @@
   --text-button-md: var(--text-md);
   --text-button-sm: var(--text-sm);
   --text-carousel-trigger: var(--text-md);
+  --text-cascade-select-item-lg: var(--text-lg);
+  --text-cascade-select-item-md: var(--text-md);
+  --text-cascade-select-item-sm: var(--text-sm);
+  --text-cascade-select-item-xs: var(--text-xs);
+  --text-cascade-select-trigger-lg: var(--text-lg);
+  --text-cascade-select-trigger-md: var(--text-md);
+  --text-cascade-select-trigger-sm: var(--text-sm);
+  --text-cascade-select-trigger-xs: var(--text-xs);
+  --text-cascade-select-value-lg: var(--text-lg);
+  --text-cascade-select-value-md: var(--text-md);
+  --text-cascade-select-value-sm: var(--text-sm);
+  --text-cascade-select-value-xs: var(--text-xs);
   --text-combobox-item-lg: var(--text-lg);
   --text-combobox-item-md: var(--text-md);
   --text-combobox-item-sm: var(--text-sm);
@@ -1657,8 +2051,23 @@
   --text-combobox-md: var(--text-md);
   --text-combobox-sm: var(--text-sm);
   --text-combobox-trigger: var(--text-lg);
+  --text-command-md: var(--text-sm);
+  --text-data-table-sm: var(--text-table-sm);
+  --text-date-picker-content-lg: var(--text-sm);
+  --text-date-picker-content-md: var(--text-sm);
+  --text-date-picker-content-sm: var(--text-xs);
+  --text-date-picker-lg: var(--text-lg);
+  --text-date-picker-md: var(--text-md);
+  --text-date-picker-sm: var(--text-sm);
+  --text-date-picker-time-label: var(--text-xs);
+  --text-date-picker-weekday: var(--text-xs);
   --text-dialog-description: var(--text-md);
   --text-dialog-title: var(--text-xl);
+  --text-drawer-description: var(--text-sm);
+  --text-drawer-title: var(--text-md);
+  --text-file-upload-item: var(--text-md);
+  --text-file-upload-item-size: var(--text-md);
+  --text-file-upload-label: var(--text-sm);
   --text-footer-lg: var(--text-md);
   --text-footer-link-lg: var(--text-lg);
   --text-footer-link-md: var(--text-md);
@@ -1677,6 +2086,7 @@
   --text-header-lg: var(--text-lg);
   --text-header-md: var(--text-md);
   --text-header-sm: var(--text-sm);
+  --text-hotkeys-sm: var(--text-xs);
   --text-icon-2xl: var(--text-2xl);
   --text-icon-control-lg: var(--text-icon-lg);
   --text-icon-control-md: var(--text-icon-md);
@@ -1709,6 +2119,9 @@
   --text-numeric-input-sm: var(--text-sm);
   --text-pagination-lg: var(--text-md);
   --text-pagination-md: var(--text-sm);
+  --text-pagination-nav-lg: var(--text-lg);
+  --text-pagination-nav-md: var(--text-md);
+  --text-pagination-nav-sm: var(--text-sm);
   --text-pagination-sm: var(--text-xs);
   --text-phone-input-country-flag: var(--text-xs);
   --text-phone-input-lg: var(--text-lg);
@@ -1758,6 +2171,7 @@
   --text-select-value-md: var(--text-md);
   --text-select-value-sm: var(--text-sm);
   --text-select-value-xs: var(--text-xs);
+  --text-sidebar-group-label: var(--text-xs);
   --text-slider-value: var(--text-sm);
   --text-slider-value-size: var(--text-sm);
   --text-sm: 0.88rem;
@@ -1802,6 +2216,9 @@
   --text-tooltip-lg: var(--text-md);
   --text-tooltip-md: var(--text-sm);
   --text-tooltip-sm: var(--text-xs);
+  --text-tour-body: var(--text-base);
+  --text-tour-progress: var(--text-base);
+  --text-tour-title: var(--text-lg);
   --text-tree-view-icon-lg: var(--text-icon-lg);
   --text-tree-view-icon-md: var(--text-icon-md);
   --text-tree-view-icon-sm: var(--text-icon-sm);
@@ -1817,6 +2234,10 @@
   --text-xs: 0.75rem;
   --text-xs-max: var(--text-xs);
   --text-xs-min: 0.75rem;
+  --width-date-picker-time-field: var(--dimension-40);
+  --width-drawer-grabber-length: var(--dimension-40);
+  --width-drawer-grabber-thickness: var(--dimension-4);
+  --width-drawer-swipe-area: var(--dimension-16);
   --width-full: 100%;
   --width-header-max: var(--width-full);
   --width-numeric-input-lg: var(--size-44);
@@ -1824,4 +2245,8 @@
   --width-numeric-input-sm: var(--size-36);
   --width-product-card-image-max: var(--size-192);
   --width-product-card-image-min: var(--size-128);
+  --width-sidebar-expanded: var(--container-3xs);
+  --width-sidebar-icon: var(--dimension-56);
+  --width-sidebar-rail: var(--dimension-12);
+  --width-sidebar-rail-indicator: var(--dimension-2);
 }