@chellaa/react 0.2.2 → 0.3.0

package/dist/index.css

@@ -2376,7 +2376,7 @@
     z-index: var(--cl-z-tooltip, 1400);
     max-width: var(--cl-size-tooltip-max, 320px);
     padding: var(--cl-space-1, 4px) var(--cl-space-2, 8px);
-    font-family: var(--cl-font-family-sans, system-ui, -apple-system, sans-serif);
+    font-family: var( --cl-font-family-sans, system-ui, -apple-system, sans-serif );
     font-size: var(--cl-font-size-xs, 12px);
     line-height: var(--cl-line-height-tight, 1.4);
     font-weight: var(--cl-font-weight-medium, 500);
@@ -2384,7 +2384,7 @@
     background-color: var(--cl-color-bg-inverse, #0f172a);
     border: 1px solid var(--cl-color-border-subtle, rgba(255, 255, 255, 0.1));
     border-radius: var(--cl-radius-sm, 4px);
-    box-shadow: var(--cl-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
+    box-shadow: var( --cl-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) );
     pointer-events: auto;
     user-select: none;
     display: inline-flex;
@@ -2392,6 +2392,10 @@
     box-sizing: border-box;
     transition: opacity var(--cl-duration-fast, 150ms) var(--cl-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--cl-duration-fast, 150ms) var(--cl-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
   }
+  .cl-tooltip:not([data-positioned=true]) {
+    opacity: 0;
+    pointer-events: none;
+  }
   .cl-tooltip[data-state=closed] {
     opacity: 0;
     transform: scale(0.96);
@@ -2457,23 +2461,29 @@
     max-width: var(--cl-size-popover-max, 400px);
     width: max-content;
     box-sizing: border-box;
-    font-family: var(--cl-font-family-sans, system-ui, -apple-system, sans-serif);
+    font-family: var( --cl-font-family-sans, system-ui, -apple-system, sans-serif );
     background-color: var(--cl-popover-bg, var(--cl-color-bg-elev, #ffffff));
     color: var(--cl-color-fg-primary, #0f172a);
     border: 1px solid var(--cl-popover-border, var(--cl-color-border-subtle, #e2e8f0));
     border-radius: var(--cl-radius-lg, 8px);
-    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+    box-shadow: var( --cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) );
     outline: none;
     transition: opacity var(--cl-duration-fast, 150ms) var(--cl-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--cl-duration-fast, 150ms) var(--cl-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
   }
+  .cl-popover:not([data-positioned=true]) {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
   .cl-popover[data-state=closed] {
     opacity: 0;
     transform: scale(0.98);
     pointer-events: none;
   }
-  .cl-popover[data-state=open] {
+  .cl-popover[data-state=open][data-positioned=true] {
     opacity: 1;
     transform: scale(1);
+    visibility: visible;
   }
   .cl-popover__header {
     display: flex;
@@ -2554,12 +2564,12 @@
   }
   [data-theme=dark] .cl-popover {
     background-color: var(--cl-popover-bg, var(--cl-color-bg-elev, #1e293b));
-    border-color: var(--cl-popover-border, var(--cl-color-border-subtle, #334155));
+    border-color: var( --cl-popover-border, var(--cl-color-border-subtle, #334155) );
     color: var(--cl-color-fg-primary, #f8fafc);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
   }
   [data-theme=dark] .cl-popover__header {
-    border-bottom-color: var(--cl-popover-border, var(--cl-color-border-subtle, #334155));
+    border-bottom-color: var( --cl-popover-border, var(--cl-color-border-subtle, #334155) );
   }
   [data-theme=dark] .cl-popover__title {
     color: var(--cl-color-fg-primary, #f8fafc);
@@ -2572,7 +2582,7 @@
     color: var(--cl-color-fg-primary, #f8fafc);
   }
   [data-theme=dark] .cl-popover__footer {
-    border-top-color: var(--cl-popover-border, var(--cl-color-border-subtle, #334155));
+    border-top-color: var( --cl-popover-border, var(--cl-color-border-subtle, #334155) );
   }
   @media (max-width: 480px) {
     .cl-popover {
@@ -3052,7 +3062,38 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-  }
+    --cl-accordion-trigger-padding-y: var(--cl-space-3-5, 14px);
+    --cl-accordion-trigger-padding-x: var(--cl-space-4, 16px);
+    --cl-accordion-title-size: var(--cl-font-base, 16px);
+    --cl-accordion-description-size: var(--cl-font-sm, 14px);
+    --cl-accordion-icon-size: 18px;
+    --cl-accordion-content-padding: 0 var(--cl-space-4, 16px) var(--cl-space-4, 16px) var(--cl-space-4, 16px);
+  }
+  .cl-accordion--size-sm {
+    --cl-accordion-trigger-padding-y: var(--cl-space-2, 8px);
+    --cl-accordion-trigger-padding-x: var(--cl-space-3, 12px);
+    --cl-accordion-title-size: var(--cl-font-sm, 14px);
+    --cl-accordion-description-size: var(--cl-font-xs, 12px);
+    --cl-accordion-icon-size: 14px;
+    --cl-accordion-content-padding: 0 var(--cl-space-3, 12px) var(--cl-space-3, 12px) var(--cl-space-3, 12px);
+  }
+  .cl-accordion--size-md {
+    --cl-accordion-trigger-padding-y: var(--cl-space-3-5, 14px);
+    --cl-accordion-trigger-padding-x: var(--cl-space-4, 16px);
+    --cl-accordion-title-size: var(--cl-font-base, 16px);
+    --cl-accordion-description-size: var(--cl-font-sm, 14px);
+    --cl-accordion-icon-size: 18px;
+    --cl-accordion-content-padding: 0 var(--cl-space-4, 16px) var(--cl-space-4, 16px) var(--cl-space-4, 16px);
+  }
+  .cl-accordion--size-lg {
+    --cl-accordion-trigger-padding-y: var(--cl-space-4, 16px);
+    --cl-accordion-trigger-padding-x: var(--cl-space-5, 20px);
+    --cl-accordion-title-size: var(--cl-font-lg, 18px);
+    --cl-accordion-description-size: var(--cl-font-base, 16px);
+    --cl-accordion-icon-size: 20px;
+    --cl-accordion-content-padding: 0 var(--cl-space-5, 20px) var(--cl-space-5, 20px) var(--cl-space-5, 20px);
+  }
+  .cl-accordion--default,
   .cl-accordion--outline {
     background-color: var(--cl-color-bg-canvas, #ffffff);
     border: 1px solid var(--cl-color-border-subtle, #e2e8f0);
@@ -3060,21 +3101,19 @@
     box-shadow: var(--cl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
     overflow: hidden;
   }
+  .cl-accordion--default .cl-accordion__item:not(:last-child),
+  .cl-accordion--outline .cl-accordion__item:not(:last-child) {
+    border-bottom: 1px solid var(--cl-color-border-subtle, #e2e8f0);
+  }
+  .cl-accordion--default .cl-accordion__item[data-state=open],
+  .cl-accordion--outline .cl-accordion__item[data-state=open] {
+    background-color: var(--cl-color-bg-surface, rgba(0, 0, 0, 0.015));
+  }
   .cl-accordion--separated {
     gap: var(--cl-space-3, 12px);
-  }
-  .cl-accordion--flush {
     border: none;
     background: transparent;
-  }
-  .cl-accordion__item {
-    box-sizing: border-box;
-  }
-  .cl-accordion--outline .cl-accordion__item {
-    border-bottom: 1px solid var(--cl-color-border-subtle, #e2e8f0);
-  }
-  .cl-accordion--outline .cl-accordion__item:last-child {
-    border-bottom: none;
+    box-shadow: none;
   }
   .cl-accordion--separated .cl-accordion__item {
     background-color: var(--cl-color-bg-canvas, #ffffff);
@@ -3082,16 +3121,57 @@
     border-radius: var(--cl-rad-lg, 8px);
     box-shadow: var(--cl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
     overflow: hidden;
-    transition: border-color var(--cl-duration-fast, 150ms) ease, box-shadow var(--cl-duration-fast, 150ms) ease;
+    transition:
+      border-color var(--cl-duration-fast, 150ms) ease,
+      box-shadow var(--cl-duration-fast, 150ms) ease,
+      background-color var(--cl-duration-fast, 150ms) ease;
   }
   .cl-accordion--separated .cl-accordion__item:hover:not([data-disabled]) {
     border-color: var(--cl-color-border-default, #cbd5e1);
   }
-  .cl-accordion--flush .cl-accordion__item {
+  .cl-accordion--separated .cl-accordion__item[data-state=open] {
+    border-color: var(--cl-color-primary-subtle, #c7d2fe);
+    box-shadow: var(--cl-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05));
+  }
+  .cl-accordion--borderless,
+  .cl-accordion--flush {
+    border: none;
+    background: transparent;
+    box-shadow: none;
+  }
+  .cl-accordion--borderless .cl-accordion__item:not(:last-child),
+  .cl-accordion--flush .cl-accordion__item:not(:last-child) {
     border-bottom: 1px solid var(--cl-color-border-subtle, #e2e8f0);
   }
-  .cl-accordion--flush .cl-accordion__item:last-child {
-    border-bottom: none;
+  .cl-accordion--filled {
+    gap: var(--cl-space-2, 8px);
+    border: none;
+    background: transparent;
+    box-shadow: none;
+  }
+  .cl-accordion--filled .cl-accordion__item {
+    background-color: var(--cl-color-bg-subtle, #f8fafc);
+    border: 1px solid transparent;
+    border-radius: var(--cl-rad-md, 6px);
+    overflow: hidden;
+    transition:
+      background-color var(--cl-duration-fast, 150ms) ease,
+      border-color var(--cl-duration-fast, 150ms) ease,
+      box-shadow var(--cl-duration-fast, 150ms) ease;
+  }
+  .cl-accordion--filled .cl-accordion__item:hover:not([data-disabled]) {
+    background-color: var(--cl-color-bg-surface, #f1f5f9);
+  }
+  .cl-accordion--filled .cl-accordion__item[data-state=open] {
+    background-color: var(--cl-color-bg-canvas, #ffffff);
+    border-color: var(--cl-color-border-subtle, #e2e8f0);
+    box-shadow: var(--cl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  }
+  .cl-accordion__item {
+    box-sizing: border-box;
+  }
+  .cl-accordion__item--disabled {
+    opacity: 0.5;
   }
   .cl-accordion__header {
     margin: 0;
@@ -3105,39 +3185,90 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: var(--cl-space-4, 16px) var(--cl-space-5, 20px);
+    min-height: 44px;
+    padding: var(--cl-accordion-trigger-padding-y) var(--cl-accordion-trigger-padding-x);
+    gap: var(--cl-space-3, 12px);
     background: transparent;
     border: none;
     cursor: pointer;
     font-family: var(--cl-font-sans, inherit);
-    font-size: var(--cl-font-base, 16px);
-    font-weight: var(--cl-font-weight-medium, 500);
     color: var(--cl-color-fg-primary, #0f172a);
     text-align: left;
     outline: none;
     box-sizing: border-box;
     transition: background-color var(--cl-duration-fast, 150ms) ease, color var(--cl-duration-fast, 150ms) ease;
   }
-  .cl-accordion__trigger:hover:not([disabled]):not([data-disabled]) {
-    background-color: var(--cl-color-bg-surface, rgba(0, 0, 0, 0.02));
+  .cl-accordion--size-sm .cl-accordion__trigger {
+    min-height: 36px;
   }
-  .cl-accordion__trigger[aria-expanded=true],
-  .cl-accordion__trigger[data-state=open] {
-    font-weight: var(--cl-font-weight-semibold, 600);
+  .cl-accordion__trigger:hover:not([disabled]):not([data-disabled]) {
+    background-color: var(--cl-color-bg-surface, rgba(0, 0, 0, 0.025));
   }
   .cl-accordion__trigger:focus-visible {
     outline: 2px solid var(--cl-color-primary-base, #4f46e5);
     outline-offset: -2px;
+    z-index: 1;
   }
   .cl-accordion__trigger:disabled,
   .cl-accordion__trigger[data-disabled] {
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .cl-accordion__trigger--indicator-start {
+    justify-content: flex-start;
+  }
+  .cl-accordion__leading-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--cl-accordion-icon-size);
+    height: var(--cl-accordion-icon-size);
+    font-size: var(--cl-accordion-icon-size);
+    color: var(--cl-color-fg-muted, #64748b);
+  }
+  .cl-accordion__trigger-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: var(--cl-space-0-5, 2px);
+    text-align: left;
+  }
+  .cl-accordion__title {
+    font-size: var(--cl-accordion-title-size);
+    font-weight: var(--cl-font-weight-medium, 500);
+    line-height: 1.4;
+    color: var(--cl-color-fg-primary, #0f172a);
+    word-break: break-word;
+    transition: color var(--cl-duration-fast, 150ms) ease;
+  }
+  .cl-accordion__trigger[aria-expanded=true] .cl-accordion__title,
+  .cl-accordion__trigger[data-state=open] .cl-accordion__title {
+    font-weight: var(--cl-font-weight-semibold, 600);
+    color: var(--cl-color-fg-primary, #0f172a);
+  }
+  .cl-accordion__description {
+    font-size: var(--cl-accordion-description-size);
+    font-weight: var(--cl-font-weight-normal, 400);
+    line-height: 1.4;
+    color: var(--cl-color-fg-secondary, #64748b);
+    word-break: break-word;
+  }
+  .cl-accordion__badge {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+  .cl-accordion__trigger--indicator-start .cl-accordion__badge {
+    margin-left: auto;
+    margin-right: var(--cl-space-2, 8px);
   }
   .cl-accordion__icon {
     flex-shrink: 0;
-    width: 18px;
-    height: 18px;
+    width: var(--cl-accordion-icon-size);
+    height: var(--cl-accordion-icon-size);
     color: var(--cl-color-fg-muted, #64748b);
     transition: transform var(--cl-duration-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1), color var(--cl-duration-fast, 150ms) ease;
   }
@@ -3166,17 +3297,49 @@
   .cl-accordion__inner {
     overflow: hidden;
     min-height: 0;
-    padding: 0 var(--cl-space-5, 20px) var(--cl-space-4, 16px) var(--cl-space-5, 20px);
+    padding: var(--cl-accordion-content-padding);
     color: var(--cl-color-fg-secondary, #475569);
     font-size: var(--cl-font-sm, 14px);
     line-height: 1.6;
     box-sizing: border-box;
   }
+  .cl-accordion__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--cl-space-2, 8px);
+    margin-bottom: var(--cl-space-3, 12px);
+  }
+  .cl-accordion__action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cl-space-1-5, 6px) var(--cl-space-3, 12px);
+    font-family: inherit;
+    font-size: var(--cl-font-xs, 12px);
+    font-weight: var(--cl-font-weight-medium, 500);
+    color: var(--cl-color-fg-secondary, #475569);
+    background-color: var(--cl-color-bg-canvas, #ffffff);
+    border: 1px solid var(--cl-color-border-subtle, #e2e8f0);
+    border-radius: var(--cl-rad-md, 6px);
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: all var(--cl-duration-fast, 150ms) ease;
+  }
+  .cl-accordion__action-btn:hover {
+    background-color: var(--cl-color-bg-subtle, #f8fafc);
+    border-color: var(--cl-color-border-default, #cbd5e1);
+    color: var(--cl-color-fg-primary, #0f172a);
+  }
+  .cl-accordion__action-btn:focus-visible {
+    outline: 2px solid var(--cl-color-primary-base, #4f46e5);
+    outline-offset: 1px;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .cl-accordion__content,
   .cl-accordion__icon,
-  .cl-accordion__trigger {
+  .cl-accordion__trigger,
+  .cl-accordion__item {
     transition-duration: 0.01ms !important;
   }
 }
@@ -3889,8 +4052,8 @@
     padding: var(--cl-space-1-5, 6px) var(--cl-space-4, 16px);
   }
   .cl-combobox__input {
-    flex: 1 1 120px;
-    min-width: 80px;
+    flex: 1 1 60px;
+    min-width: 48px;
     border: none;
     background: transparent;
     padding: var(--cl-space-1, 4px) 0;
@@ -3902,12 +4065,19 @@
     line-height: var(--cl-leading-normal, 1.5);
   }
   .cl-combobox__input::placeholder {
-    color: var(--cl-color-text-muted, #94a3b8);
+    color: var( --cl-combobox-placeholder, var(--cl-color-fg-muted, var(--cl-color-text-muted, #94a3b8)) );
     opacity: 1;
   }
   .cl-combobox__input:disabled {
     cursor: not-allowed;
   }
+  .cl-combobox__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cl-space-1, 4px);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
   .cl-combobox__trigger {
     display: inline-flex;
     align-items: center;
@@ -3954,10 +4124,17 @@
     line-height: 1;
     transition: color var(--cl-motion-fast, 150ms) ease, background-color var(--cl-motion-fast, 150ms) ease;
   }
+  .cl-combobox__control > .cl-combobox__clear {
+    margin-left: auto;
+  }
   .cl-combobox__clear:hover {
     color: var(--cl-color-text-primary, #0f172a);
     background-color: var(--cl-color-bg-muted, #f1f5f9);
   }
+  .cl-combobox__clear:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
   .cl-combobox__spinner {
     display: inline-block;
     width: 14px;
@@ -3978,6 +4155,8 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 4px;
+    flex: 0 1 auto;
+    max-width: 100%;
   }
   .cl-combobox__tag {
     display: inline-flex;
@@ -3992,6 +4171,15 @@
     border: 1px solid var(--cl-color-border-default, #e2e8f0);
     line-height: 1.4;
     box-sizing: border-box;
+    max-width: 100%;
+    min-width: 0;
+  }
+  .cl-combobox__tag > span:first-of-type,
+  .cl-combobox__tag-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
   .cl-combobox__tag-remove {
     display: inline-flex;
@@ -4008,12 +4196,17 @@
     height: 14px;
     line-height: 1;
     font-size: 14px;
+    outline: none;
     transition: color var(--cl-motion-fast, 150ms) ease, background-color var(--cl-motion-fast, 150ms) ease;
   }
   .cl-combobox__tag-remove:hover {
     color: var(--cl-color-error-base, #ef4444);
     background-color: rgba(239, 68, 68, 0.1);
   }
+  .cl-combobox__tag-remove:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
   .cl-combobox__content {
     position: absolute;
     z-index: var(--cl-z-dropdown, 1000);
@@ -4024,13 +4217,16 @@
     background-color: var(--cl-color-bg-canvas, #ffffff);
     border: 1px solid var(--cl-color-border-default, #e2e8f0);
     border-radius: var(--cl-radius-md, 6px);
-    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+    box-shadow: var( --cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) );
     padding: var(--cl-space-1, 4px);
-    margin-top: 4px;
     box-sizing: border-box;
     outline: none;
     overscroll-behavior: contain;
   }
+  .cl-combobox__content:not([data-positioned=true]) {
+    opacity: 0;
+    pointer-events: none;
+  }
   .cl-combobox__group {
     margin: 0;
     padding: 0;
@@ -4251,17 +4447,21 @@
     z-index: var(--cl-z-dropdown, 1000);
     outline: none;
     user-select: none;
-    animation: cl-select-fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
     overscroll-behavior: contain;
   }
+  .cl-select__content:not([data-positioned=true]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .cl-select__content[data-positioned=true] {
+    animation: cl-select-fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  }
   @keyframes cl-select-fade-in {
     from {
       opacity: 0;
-      transform: translateY(-4px);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
     }
   }
   .cl-select__group {
@@ -4309,12 +4509,12 @@
   .cl-select__item[aria-selected=true] {
     font-weight: var(--cl-font-weight-semibold, 600);
     color: var(--cl-select-item-selected-fg, var(--cl-color-primary-base, #4f46e5));
-    background-color: var(--cl-select-item-selected-bg, rgba(99, 102, 241, 0.12));
+    background-color: var(--cl-select-item-selected-bg, var(--cl-color-primary-subtle, rgba(99, 102, 241, 0.08)));
   }
   .cl-select__item[aria-selected=true]:hover:not([aria-disabled=true]):not([data-disabled=true]),
   .cl-select__item[aria-selected=true][data-highlighted=true]:not([aria-disabled=true]):not([data-disabled=true]) {
     color: var(--cl-select-item-selected-fg, var(--cl-color-primary-hover, #4338ca));
-    background-color: var(--cl-select-item-hover-bg, rgba(99, 102, 241, 0.18));
+    background-color: var(--cl-select-item-hover-bg, rgba(99, 102, 241, 0.14));
   }
   .cl-select__item[aria-disabled=true],
   .cl-select__item[data-disabled=true] {
@@ -4796,5 +4996,2738 @@
   }
 }
 
+/* src/components/Spinner/Spinner.styles.css */
+@layer cl-components {
+  .cl-spinner {
+    display: inline-block;
+    vertical-align: middle;
+    animation: cl-spin 0.75s linear infinite;
+    flex-shrink: 0;
+  }
+  .cl-spinner__track {
+    opacity: 0.25;
+  }
+  .cl-spinner__head {
+    stroke-linecap: round;
+  }
+  .cl-spinner--xs {
+    width: 12px;
+    height: 12px;
+  }
+  .cl-spinner--sm {
+    width: 16px;
+    height: 16px;
+  }
+  .cl-spinner--md {
+    width: 24px;
+    height: 24px;
+  }
+  .cl-spinner--lg {
+    width: 32px;
+    height: 32px;
+  }
+  .cl-spinner--xl {
+    width: 48px;
+    height: 48px;
+  }
+  .cl-spinner--primary {
+    color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-spinner--neutral {
+    color: var(--cl-color-text-secondary, #64748b);
+  }
+  .cl-spinner--success {
+    color: var(--cl-color-success-base, #16a34a);
+  }
+  .cl-spinner--danger {
+    color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-spinner--warning {
+    color: var(--cl-color-warning-base, #ca8a04);
+  }
+  @keyframes cl-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-spinner {
+      animation-duration: 2.5s !important;
+    }
+  }
+}
+
+/* src/components/Skeleton/Skeleton.styles.css */
+@layer cl-components {
+  .cl-skeleton {
+    display: block;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    user-select: none;
+    pointer-events: none;
+  }
+  .cl-skeleton--text {
+    height: 1.2em;
+    border-radius: var(--cl-radius-xs, 4px);
+    margin-block: 0.2em;
+  }
+  .cl-skeleton--circular {
+    border-radius: 50%;
+  }
+  .cl-skeleton--rectangular {
+    border-radius: 0;
+  }
+  .cl-skeleton--rounded {
+    border-radius: var(--cl-radius-md, 8px);
+  }
+  .cl-skeleton--pulse {
+    animation: cl-skeleton-pulse 1.5s ease-in-out infinite;
+  }
+  .cl-skeleton--wave {
+    position: relative;
+    overflow: hidden;
+    background:
+      linear-gradient(
+        90deg,
+        var(--cl-color-surface-hover, #f1f5f9) 0%,
+        var(--cl-color-surface-elevated, #ffffff) 50%,
+        var(--cl-color-surface-hover, #f1f5f9) 100%);
+    background-size: 200% 100%;
+    animation: cl-skeleton-wave 1.6s linear infinite;
+  }
+  .cl-skeleton--none {
+    animation: none;
+  }
+  @keyframes cl-skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes cl-skeleton-wave {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-skeleton,
+    .cl-skeleton--pulse,
+    .cl-skeleton--wave {
+      animation: none !important;
+    }
+  }
+}
+
+/* src/components/Progress/Progress.styles.css */
+@layer cl-components {
+  .cl-progress--linear {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 0.75rem;
+  }
+  .cl-progress__track {
+    position: relative;
+    width: 100%;
+    background-color: var(--cl-color-surface-hover, #e2e8f0);
+    overflow: hidden;
+    border-radius: var(--cl-radius-full, 9999px);
+    flex: 1;
+  }
+  .cl-progress__bar {
+    height: 100%;
+    border-radius: inherit;
+    transition: width 0.3s ease;
+  }
+  .cl-progress--linear.cl-progress--xs .cl-progress__track {
+    height: 4px;
+  }
+  .cl-progress--linear.cl-progress--sm .cl-progress__track {
+    height: 8px;
+  }
+  .cl-progress--linear.cl-progress--md .cl-progress__track {
+    height: 12px;
+  }
+  .cl-progress--linear.cl-progress--lg .cl-progress__track {
+    height: 16px;
+  }
+  .cl-progress--primary .cl-progress__bar,
+  .cl-progress--primary .cl-progress__circle-head {
+    background-color: var(--cl-color-primary-base, #4f46e5);
+    stroke: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-progress--success .cl-progress__bar,
+  .cl-progress--success .cl-progress__circle-head {
+    background-color: var(--cl-color-success-base, #16a34a);
+    stroke: var(--cl-color-success-base, #16a34a);
+  }
+  .cl-progress--warning .cl-progress__bar,
+  .cl-progress--warning .cl-progress__circle-head {
+    background-color: var(--cl-color-warning-base, #ca8a04);
+    stroke: var(--cl-color-warning-base, #ca8a04);
+  }
+  .cl-progress--danger .cl-progress__bar,
+  .cl-progress--danger .cl-progress__circle-head {
+    background-color: var(--cl-color-danger-base, #dc2626);
+    stroke: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-progress__bar--striped {
+    background-image:
+      linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent);
+    background-size: 1rem 1rem;
+  }
+  .cl-progress__bar--animated {
+    animation: cl-progress-stripes 1s linear infinite;
+  }
+  @keyframes cl-progress-stripes {
+    from {
+      background-position: 1rem 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+  .cl-progress__bar--indeterminate {
+    width: 100% !important;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    transform-origin: left;
+    animation: cl-progress-linear-indeterminate 1.8s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  @keyframes cl-progress-linear-indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+  .cl-progress--circular {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    vertical-align: middle;
+  }
+  .cl-progress__svg {
+    transform: rotate(-90deg);
+  }
+  .cl-progress__circle-track {
+    stroke: var(--cl-color-surface-hover, #e2e8f0);
+    fill: none;
+  }
+  .cl-progress__circle-head {
+    fill: none;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+  .cl-progress--circular.cl-progress--xs {
+    width: 24px;
+    height: 24px;
+  }
+  .cl-progress--circular.cl-progress--sm {
+    width: 36px;
+    height: 36px;
+  }
+  .cl-progress--circular.cl-progress--md {
+    width: 48px;
+    height: 48px;
+  }
+  .cl-progress--circular.cl-progress--lg {
+    width: 64px;
+    height: 64px;
+  }
+  .cl-progress--circular.cl-progress--indeterminate .cl-progress__svg {
+    animation: cl-progress-circular-rotate 1.4s linear infinite;
+  }
+  .cl-progress--circular.cl-progress--indeterminate .cl-progress__circle-head {
+    animation: cl-progress-circular-dash 1.4s ease-in-out infinite;
+  }
+  @keyframes cl-progress-circular-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes cl-progress-circular-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+  .cl-progress__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--cl-color-text-primary, #1e293b);
+    min-width: 3ch;
+    text-align: right;
+  }
+  .cl-progress__circular-label {
+    position: absolute;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--cl-color-text-primary, #1e293b);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-progress__bar,
+    .cl-progress__circle-head {
+      transition: none !important;
+    }
+    .cl-progress__bar--animated,
+    .cl-progress__bar--indeterminate,
+    .cl-progress--circular.cl-progress--indeterminate .cl-progress__svg,
+    .cl-progress--circular.cl-progress--indeterminate .cl-progress__circle-head {
+      animation: none !important;
+    }
+  }
+}
+
+/* src/components/Calendar/Calendar.styles.css */
+@layer cl-components {
+  .cl-calendar {
+    display: inline-block;
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-lg, 12px);
+    padding: 1rem;
+    box-shadow: var(--cl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+    user-select: none;
+    font-family: inherit;
+    box-sizing: border-box;
+    width: 320px;
+  }
+  .cl-calendar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+  .cl-calendar__title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--cl-color-text-primary, #0f172a);
+    margin: 0;
+  }
+  .cl-calendar__nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .cl-calendar__nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: var(--cl-radius-md, 6px);
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    background-color: transparent;
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+  .cl-calendar__nav-btn:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-calendar__nav-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+  .cl-calendar__nav-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-calendar__grid {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+  .cl-calendar__weekdays tr {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 0.25rem;
+  }
+  .cl-calendar__weekday {
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--cl-color-text-subtle, #94a3b8);
+    padding: 0.25rem 0;
+    text-transform: uppercase;
+  }
+  .cl-calendar__grid tbody {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .cl-calendar__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+  .cl-calendar__cell {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .cl-calendar__day {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--cl-radius-md, 8px);
+    border: 1px solid transparent;
+    background-color: transparent;
+    color: var(--cl-color-text-primary, #0f172a);
+    font-size: 0.875rem;
+    font-weight: 400;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+  .cl-calendar__day:hover:not(.cl-calendar__day--disabled):not(.cl-calendar__day--selected) {
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-calendar__day:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+    z-index: 1;
+  }
+  .cl-calendar__day--today:not(.cl-calendar__day--selected) {
+    font-weight: 600;
+    color: var(--cl-color-primary-base, #4f46e5);
+    border-color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-calendar__day--outside {
+    color: var(--cl-color-text-subtle, #94a3b8);
+  }
+  .cl-calendar__day--selected {
+    background-color: var(--cl-color-primary-base, #4f46e5) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+  }
+  .cl-calendar__cell--in-range {
+    background-color: var(--cl-color-primary-subtle, rgba(99, 102, 241, 0.12));
+  }
+  .cl-calendar__cell--range-start {
+    background:
+      linear-gradient(
+        90deg,
+        transparent 50%,
+        var(--cl-color-primary-subtle, rgba(99, 102, 241, 0.12)) 50%);
+    border-top-left-radius: var(--cl-radius-md, 8px);
+    border-bottom-left-radius: var(--cl-radius-md, 8px);
+  }
+  .cl-calendar__cell--range-end {
+    background:
+      linear-gradient(
+        90deg,
+        var(--cl-color-primary-subtle, rgba(99, 102, 241, 0.12)) 50%,
+        transparent 50%);
+    border-top-right-radius: var(--cl-radius-md, 8px);
+    border-bottom-right-radius: var(--cl-radius-md, 8px);
+  }
+  .cl-calendar__cell--range-start.cl-calendar__cell--range-end {
+    background: transparent;
+  }
+  .cl-calendar__day--range-start,
+  .cl-calendar__day--range-end {
+    background-color: var(--cl-color-primary-base, #4f46e5) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+  }
+  .cl-calendar__day--in-range {
+    background-color: transparent;
+    color: var(--cl-color-text-primary, #0f172a);
+    border-radius: 0;
+  }
+  .cl-calendar__day--disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    background-color: transparent !important;
+  }
+}
+
+/* src/components/DatePicker/DatePicker.styles.css */
+@layer cl-components {
+  .cl-datepicker {
+    display: inline-block;
+    position: relative;
+    width: 260px;
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  .cl-datepicker__control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .cl-datepicker__input {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .cl-datepicker--sm .cl-datepicker__input {
+    height: 32px;
+    padding: 0 2rem 0 2rem;
+    font-size: 0.8125rem;
+  }
+  .cl-datepicker--md .cl-datepicker__input {
+    height: 40px;
+    padding: 0 2.25rem 0 2.25rem;
+    font-size: 0.875rem;
+  }
+  .cl-datepicker--lg .cl-datepicker__input {
+    height: 48px;
+    padding: 0 2.5rem 0 2.5rem;
+    font-size: 1rem;
+  }
+  .cl-datepicker__input:focus {
+    outline: none;
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+  }
+  .cl-datepicker__input:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-datepicker--invalid .cl-datepicker__input {
+    border-color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-datepicker--invalid .cl-datepicker__input:focus {
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+  }
+  .cl-datepicker__icon-btn {
+    position: absolute;
+    left: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    border-radius: var(--cl-radius-sm, 4px);
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+    z-index: 1;
+  }
+  .cl-datepicker__icon-btn:hover:not(:disabled) {
+    color: var(--cl-color-text-primary, #0f172a);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-datepicker__icon-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-datepicker__actions {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .cl-datepicker__clear-btn,
+  .cl-datepicker__toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    border-radius: var(--cl-radius-sm, 4px);
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+  .cl-datepicker__clear-btn:hover,
+  .cl-datepicker__toggle-btn:hover {
+    color: var(--cl-color-text-primary, #0f172a);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-datepicker__clear-btn:focus-visible,
+  .cl-datepicker__toggle-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-datepicker__popover {
+    padding: 0 !important;
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-lg, 12px);
+    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+    z-index: 1000;
+  }
+  .cl-datepicker__popover:not([data-positioned=true]) {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+  .cl-datepicker__popover[data-positioned=true] {
+    animation: cl-datepicker-fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+    visibility: visible;
+  }
+  @keyframes cl-datepicker-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .cl-datepicker__popover .cl-calendar {
+    border: none;
+    box-shadow: none;
+  }
+}
+
+/* src/components/DropdownMenu/DropdownMenu.styles.css */
+@layer cl-components {
+  .cl-dropdown-menu {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+  }
+  .cl-dropdown-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cl-space-2, 8px);
+    cursor: pointer;
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  .cl-dropdown-menu__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--cl-z-index-dropdown, 1000);
+    min-width: 180px;
+    max-width: 320px;
+    box-sizing: border-box;
+    padding: var(--cl-space-1, 4px);
+    background-color: var(--cl-dropdown-menu-bg, var(--cl-color-bg-surface, #ffffff));
+    color: var(--cl-dropdown-menu-color, var(--cl-color-text-primary, #0f172a));
+    border: 1px solid var(--cl-dropdown-menu-border, var(--cl-color-border, #e2e8f0));
+    border-radius: var(--cl-radius-md, 6px);
+    box-shadow: var( --cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) );
+    outline: none;
+    font-family: var( --cl-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );
+    font-size: var(--cl-font-size-sm, 14px);
+    line-height: var(--cl-line-height-normal, 1.5);
+    user-select: none;
+    transform-origin: var(--floating-transform-origin, top);
+    animation: cl-dropdown-menu-enter var(--cl-motion-fast, 150ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-dropdown-menu__content:not([data-positioned=true]) {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
+  @keyframes cl-dropdown-menu-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  .cl-dropdown-menu__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--cl-space-2, 8px);
+    padding: var(--cl-space-1-5, 6px) var(--cl-space-2-5, 10px);
+    border-radius: var(--cl-radius-sm, 4px);
+    font-size: var(--cl-font-size-sm, 14px);
+    color: var(--cl-dropdown-menu-item-color, var(--cl-color-text-primary, #0f172a));
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--cl-motion-fast, 150ms) ease, color var(--cl-motion-fast, 150ms) ease;
+  }
+  .cl-dropdown-menu__item[data-highlighted=true],
+  .cl-dropdown-menu__item:hover:not([aria-disabled=true]):not([data-disabled=true]) {
+    background-color: var( --cl-dropdown-menu-item-hover-bg, var(--cl-color-primary-subtle, #f1f5f9) );
+    color: var( --cl-dropdown-menu-item-hover-color, var(--cl-color-primary-base, #0f172a) );
+  }
+  .cl-dropdown-menu__item--disabled,
+  .cl-dropdown-menu__item[aria-disabled=true],
+  .cl-dropdown-menu__item[data-disabled=true] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .cl-dropdown-menu__item--inset {
+    padding-left: var(--cl-space-7, 28px);
+  }
+  .cl-dropdown-menu__item-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 1;
+    color: var(--cl-color-primary-base, #2563eb);
+    flex-shrink: 0;
+  }
+  .cl-dropdown-menu__separator {
+    height: 1px;
+    margin: var(--cl-space-1, 4px) 0;
+    background-color: var(--cl-color-border, #e2e8f0);
+  }
+  .cl-dropdown-menu__label {
+    padding: var(--cl-space-1-5, 6px) var(--cl-space-2-5, 10px);
+    font-size: var(--cl-font-size-xs, 12px);
+    font-weight: var(--cl-font-weight-semibold, 600);
+    color: var(--cl-color-text-secondary, #64748b);
+    user-select: none;
+  }
+  .cl-dropdown-menu__label--inset {
+    padding-left: var(--cl-space-7, 28px);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-dropdown-menu__content {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* src/components/ContextMenu/ContextMenu.styles.css */
+@layer cl-components {
+  .cl-context-menu {
+    display: contents;
+    box-sizing: border-box;
+  }
+  .cl-context-menu__trigger {
+    display: block;
+    user-select: none;
+    box-sizing: border-box;
+    outline: none;
+  }
+  .cl-context-menu__trigger:focus-visible {
+    outline: 2px solid var(--cl-color-primary-base, #2563eb);
+    outline-offset: 2px;
+  }
+  .cl-context-menu__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--cl-z-index-dropdown, 1000);
+    min-width: 180px;
+    max-width: 320px;
+    box-sizing: border-box;
+    padding: var(--cl-space-1, 4px);
+    background-color: var(--cl-context-menu-bg, var(--cl-color-bg-surface, #ffffff));
+    color: var(--cl-context-menu-color, var(--cl-color-text-primary, #0f172a));
+    border: 1px solid var(--cl-context-menu-border, var(--cl-color-border, #e2e8f0));
+    border-radius: var(--cl-radius-md, 6px);
+    box-shadow: var( --cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) );
+    outline: none;
+    font-family: var( --cl-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );
+    font-size: var(--cl-font-size-sm, 14px);
+    line-height: var(--cl-line-height-normal, 1.5);
+    user-select: none;
+    animation: cl-context-menu-enter var(--cl-motion-fast, 150ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-context-menu__content:not([data-positioned=true]) {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
+  @keyframes cl-context-menu-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-context-menu__content {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* src/components/Drawer/Drawer.styles.css */
+@layer cl-components {
+  .cl-drawer {
+    box-sizing: border-box;
+  }
+  .cl-drawer__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--cl-z-index-modal, 1200);
+    background-color: var(--cl-backdrop-bg, rgba(0, 0, 0, 0.48));
+    animation: cl-drawer-fade-in var(--cl-motion-normal, 240ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-drawer__content {
+    position: fixed;
+    z-index: calc(var(--cl-z-index-modal, 1200) + 1);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: var(--cl-drawer-bg, var(--cl-color-bg-surface, #ffffff));
+    color: var(--cl-drawer-color, var(--cl-color-text-primary, #0f172a));
+    box-shadow: var( --cl-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) );
+    font-family: var( --cl-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );
+    outline: none;
+    overflow: hidden;
+  }
+  .cl-drawer__content[data-placement=right],
+  .cl-drawer__content--right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100vh;
+    border-left: 1px solid var(--cl-color-border, #e2e8f0);
+    animation: cl-drawer-slide-in-right var(--cl-motion-normal, 240ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-drawer__content[data-placement=left],
+  .cl-drawer__content--left {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100vh;
+    border-right: 1px solid var(--cl-color-border, #e2e8f0);
+    animation: cl-drawer-slide-in-left var(--cl-motion-normal, 240ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-drawer__content[data-placement=top],
+  .cl-drawer__content--top {
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    border-bottom: 1px solid var(--cl-color-border, #e2e8f0);
+    animation: cl-drawer-slide-in-top var(--cl-motion-normal, 240ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-drawer__content[data-placement=bottom],
+  .cl-drawer__content--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    border-top: 1px solid var(--cl-color-border, #e2e8f0);
+    animation: cl-drawer-slide-in-bottom var(--cl-motion-normal, 240ms) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cl-drawer__content[data-placement=left][data-size=xs],
+  .cl-drawer__content[data-placement=right][data-size=xs] {
+    width: 280px;
+    max-width: 100vw;
+  }
+  .cl-drawer__content[data-placement=left][data-size=sm],
+  .cl-drawer__content[data-placement=right][data-size=sm] {
+    width: 360px;
+    max-width: 100vw;
+  }
+  .cl-drawer__content[data-placement=left][data-size=md],
+  .cl-drawer__content[data-placement=right][data-size=md] {
+    width: 440px;
+    max-width: 100vw;
+  }
+  .cl-drawer__content[data-placement=left][data-size=lg],
+  .cl-drawer__content[data-placement=right][data-size=lg] {
+    width: 560px;
+    max-width: 100vw;
+  }
+  .cl-drawer__content[data-placement=left][data-size=xl],
+  .cl-drawer__content[data-placement=right][data-size=xl] {
+    width: 720px;
+    max-width: 100vw;
+  }
+  .cl-drawer__content[data-placement=left][data-size=full],
+  .cl-drawer__content[data-placement=right][data-size=full] {
+    width: 100vw;
+  }
+  .cl-drawer__content[data-placement=top][data-size=xs],
+  .cl-drawer__content[data-placement=bottom][data-size=xs] {
+    max-height: 200px;
+  }
+  .cl-drawer__content[data-placement=top][data-size=sm],
+  .cl-drawer__content[data-placement=bottom][data-size=sm] {
+    max-height: 280px;
+  }
+  .cl-drawer__content[data-placement=top][data-size=md],
+  .cl-drawer__content[data-placement=bottom][data-size=md] {
+    max-height: 360px;
+  }
+  .cl-drawer__content[data-placement=top][data-size=lg],
+  .cl-drawer__content[data-placement=bottom][data-size=lg] {
+    max-height: 480px;
+  }
+  .cl-drawer__content[data-placement=top][data-size=xl],
+  .cl-drawer__content[data-placement=bottom][data-size=xl] {
+    max-height: 600px;
+  }
+  .cl-drawer__content[data-placement=top][data-size=full],
+  .cl-drawer__content[data-placement=bottom][data-size=full] {
+    height: 100vh;
+    max-height: 100vh;
+  }
+  .cl-drawer__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cl-space-4, 16px) var(--cl-space-6, 24px);
+    border-bottom: 1px solid var(--cl-color-border, #e2e8f0);
+    flex-shrink: 0;
+  }
+  .cl-drawer__title {
+    margin: 0;
+    font-size: var(--cl-font-size-lg, 18px);
+    font-weight: var(--cl-font-weight-semibold, 600);
+    color: var(--cl-color-text-primary, #0f172a);
+    line-height: var(--cl-line-height-tight, 1.25);
+  }
+  .cl-drawer__description {
+    margin: var(--cl-space-1, 4px) 0 0;
+    font-size: var(--cl-font-size-sm, 14px);
+    color: var(--cl-color-text-secondary, #64748b);
+  }
+  .cl-drawer__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--cl-space-6, 24px);
+    box-sizing: border-box;
+  }
+  .cl-drawer__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--cl-space-3, 12px);
+    padding: var(--cl-space-4, 16px) var(--cl-space-6, 24px);
+    border-top: 1px solid var(--cl-color-border, #e2e8f0);
+    flex-shrink: 0;
+  }
+  .cl-drawer__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: var(--cl-radius-sm, 4px);
+    background: transparent;
+    color: var(--cl-color-text-secondary, #64748b);
+    font-size: var(--cl-font-size-md, 16px);
+    cursor: pointer;
+    transition: background-color var(--cl-motion-fast, 150ms) ease, color var(--cl-motion-fast, 150ms) ease;
+  }
+  .cl-drawer__close:hover {
+    background-color: var(--cl-color-bg-muted, #f1f5f9);
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-drawer__close:focus-visible {
+    outline: 2px solid var(--cl-color-primary-base, #2563eb);
+    outline-offset: 2px;
+  }
+  @keyframes cl-drawer-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes cl-drawer-slide-in-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes cl-drawer-slide-in-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes cl-drawer-slide-in-top {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  @keyframes cl-drawer-slide-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-drawer__overlay,
+    .cl-drawer__content {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* src/components/Link/Link.styles.css */
+@layer cl-components {
+  .cl-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cl-space-1, 4px);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    line-height: inherit;
+    cursor: pointer;
+    transition: color 150ms ease, text-decoration-color 150ms ease;
+    outline: none;
+    border-radius: var(--cl-radius-xs, 2px);
+  }
+  .cl-link:focus-visible {
+    outline: 2px solid var(--cl-color-primary-base, #2563eb);
+    outline-offset: 2px;
+  }
+  .cl-link--color-primary {
+    color: var(--cl-color-primary-base, #2563eb);
+  }
+  .cl-link--color-primary:hover {
+    color: var(--cl-color-primary-hover, #1d4ed8);
+  }
+  .cl-link--color-neutral {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-link--color-neutral:hover {
+    color: var(--cl-color-primary-base, #2563eb);
+  }
+  .cl-link--color-subtle {
+    color: var(--cl-color-text-muted, #64748b);
+  }
+  .cl-link--color-subtle:hover {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-link--underline-always {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .cl-link--underline-hover {
+    text-decoration: none;
+    text-underline-offset: 3px;
+  }
+  .cl-link--underline-hover:hover {
+    text-decoration: underline;
+  }
+  .cl-link--underline-none {
+    text-decoration: none;
+  }
+  .cl-link--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+    text-decoration: none;
+  }
+  .cl-link__external-icon {
+    display: inline-block;
+    flex-shrink: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+  }
+}
+
+/* src/components/Breadcrumbs/Breadcrumbs.styles.css */
+@layer cl-components {
+  .cl-breadcrumb {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .cl-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--cl-space-2, 8px);
+    font-size: var(--cl-font-size-sm, 14px);
+    line-height: var(--cl-line-height-normal, 1.5);
+    color: var(--cl-color-text-muted, #64748b);
+  }
+  .cl-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cl-space-2, 8px);
+  }
+  .cl-breadcrumb__link {
+    color: var(--cl-color-text-muted, #64748b);
+    font-weight: 500;
+    transition: color 150ms ease;
+  }
+  .cl-breadcrumb__link:hover {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-breadcrumb__page {
+    font-weight: 600;
+    color: var(--cl-color-text-primary, #0f172a);
+    cursor: default;
+    user-select: text;
+  }
+  .cl-breadcrumb__separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--cl-color-text-muted, #94a3b8);
+    user-select: none;
+  }
+  .cl-breadcrumb__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--cl-color-text-muted, #64748b);
+    user-select: none;
+  }
+}
+
+/* src/components/DateRangePicker/DateRangePicker.styles.css */
+@layer cl-components {
+  .cl-daterangepicker {
+    display: inline-block;
+    position: relative;
+    width: 320px;
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  .cl-daterangepicker__control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .cl-daterangepicker__input {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    font-family: inherit;
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .cl-daterangepicker--sm .cl-daterangepicker__input {
+    height: 32px;
+    padding: 0 3.25rem 0 2rem;
+    font-size: 0.8125rem;
+  }
+  .cl-daterangepicker--md .cl-daterangepicker__input {
+    height: 40px;
+    padding: 0 3.5rem 0 2.25rem;
+    font-size: 0.875rem;
+  }
+  .cl-daterangepicker--lg .cl-daterangepicker__input {
+    height: 48px;
+    padding: 0 4rem 0 2.5rem;
+    font-size: 1rem;
+  }
+  .cl-daterangepicker__input:focus {
+    outline: none;
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+  }
+  .cl-daterangepicker__input:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-daterangepicker--error .cl-daterangepicker__input {
+    border-color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-daterangepicker--error .cl-daterangepicker__input:focus {
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+  }
+  .cl-daterangepicker__icon-btn {
+    position: absolute;
+    left: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    border-radius: var(--cl-radius-sm, 4px);
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+    z-index: 1;
+  }
+  .cl-daterangepicker__icon-btn:hover:not(:disabled) {
+    color: var(--cl-color-text-primary, #0f172a);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-daterangepicker__icon-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-daterangepicker__actions {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    z-index: 1;
+  }
+  .cl-daterangepicker__clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--cl-radius-full, 9999px);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    color: var(--cl-color-text-subtle, #94a3b8);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+  .cl-daterangepicker__clear-btn:hover {
+    background-color: var(--cl-color-border-default, #e2e8f0);
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-daterangepicker__clear-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-daterangepicker__toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border: none;
+    border-radius: var(--cl-radius-sm, 4px);
+    background: transparent;
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: transform 0.15s ease, color 0.12s ease;
+  }
+  .cl-daterangepicker__toggle-btn:hover:not(:disabled) {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-daterangepicker__toggle-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-daterangepicker--open .cl-daterangepicker__toggle-btn {
+    transform: rotate(180deg);
+  }
+  .cl-daterangepicker__popover {
+    padding: 0;
+    border: none;
+    background: transparent;
+    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    border-radius: var(--cl-radius-lg, 12px);
+    overflow: hidden;
+  }
+}
+
+/* src/components/TimePicker/TimePicker.styles.css */
+@layer cl-components {
+  .cl-timepicker {
+    display: inline-block;
+    position: relative;
+    width: 200px;
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  .cl-timepicker__control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .cl-timepicker__input {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .cl-timepicker--sm .cl-timepicker__input {
+    height: 32px;
+    padding: 0 3.25rem 0 2rem;
+    font-size: 0.8125rem;
+  }
+  .cl-timepicker--md .cl-timepicker__input {
+    height: 40px;
+    padding: 0 3.5rem 0 2.25rem;
+    font-size: 0.875rem;
+  }
+  .cl-timepicker--lg .cl-timepicker__input {
+    height: 48px;
+    padding: 0 4rem 0 2.5rem;
+    font-size: 1rem;
+  }
+  .cl-timepicker__input:focus {
+    outline: none;
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+  }
+  .cl-timepicker__input:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-timepicker--error .cl-timepicker__input {
+    border-color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-timepicker--error .cl-timepicker__input:focus {
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+  }
+  .cl-timepicker__icon-btn {
+    position: absolute;
+    left: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    border-radius: var(--cl-radius-sm, 4px);
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+    z-index: 1;
+  }
+  .cl-timepicker__icon-btn:hover:not(:disabled) {
+    color: var(--cl-color-text-primary, #0f172a);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-timepicker__icon-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-timepicker__actions {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    z-index: 1;
+  }
+  .cl-timepicker__clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--cl-radius-full, 9999px);
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    color: var(--cl-color-text-subtle, #94a3b8);
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+  .cl-timepicker__clear-btn:hover {
+    background-color: var(--cl-color-border-default, #e2e8f0);
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-timepicker__clear-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-timepicker__toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border: none;
+    border-radius: var(--cl-radius-sm, 4px);
+    background: transparent;
+    color: var(--cl-color-text-secondary, #64748b);
+    cursor: pointer;
+    transition: transform 0.15s ease, color 0.12s ease;
+  }
+  .cl-timepicker__toggle-btn:hover:not(:disabled) {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-timepicker__toggle-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+  .cl-timepicker--open .cl-timepicker__toggle-btn {
+    transform: rotate(180deg);
+  }
+  .cl-timepicker__popover {
+    padding: 0;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    border-radius: var(--cl-radius-lg, 12px);
+    overflow: hidden;
+  }
+  .cl-timepicker__columns {
+    display: flex;
+    flex-direction: row;
+    max-height: 220px;
+  }
+  .cl-timepicker__column {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    width: 60px;
+    padding: 4px;
+    box-sizing: border-box;
+    border-right: 1px solid var(--cl-color-border-subtle, #f1f5f9);
+    scrollbar-width: thin;
+  }
+  .cl-timepicker__column:last-child {
+    border-right: none;
+  }
+  .cl-timepicker__column-title {
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--cl-color-text-muted, #94a3b8);
+    padding: 4px 0 6px 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    user-select: none;
+  }
+  .cl-timepicker__option {
+    display: block;
+    width: 100%;
+    padding: 6px 0;
+    text-align: center;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--cl-color-text-primary, #0f172a);
+    background: transparent;
+    border: none;
+    border-radius: var(--cl-radius-sm, 4px);
+    cursor: pointer;
+    box-sizing: border-box;
+    margin-bottom: 2px;
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+  .cl-timepicker__option:hover:not(:disabled):not(.cl-timepicker__option--selected) {
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-timepicker__option--selected {
+    background-color: var(--cl-color-primary-base, #4f46e5) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+  }
+  .cl-timepicker__option:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .cl-timepicker__option:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: -1px;
+  }
+}
+
+/* src/components/MultiSelect/MultiSelect.styles.css */
+@layer cl-components {
+  .cl-multiselect {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: inherit;
+  }
+  .cl-multiselect__control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 40px;
+    padding: 4px 10px;
+    box-sizing: border-box;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    cursor: pointer;
+    user-select: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .cl-multiselect__control:focus,
+  .cl-multiselect__control:focus-visible {
+    outline: none;
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+  }
+  .cl-multiselect--open .cl-multiselect__control {
+    border-color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-multiselect--open .cl-multiselect__arrow {
+    transform: rotate(180deg);
+  }
+  .cl-multiselect--disabled .cl-multiselect__control {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-multiselect--error .cl-multiselect__control {
+    border-color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-multiselect--error .cl-multiselect__control:focus {
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+  }
+  .cl-multiselect--sm .cl-multiselect__control {
+    min-height: 32px;
+    padding: 2px 8px;
+    font-size: var(--cl-font-size-xs, 12px);
+  }
+  .cl-multiselect--md .cl-multiselect__control {
+    min-height: 40px;
+    padding: 4px 10px;
+    font-size: var(--cl-font-size-sm, 14px);
+  }
+  .cl-multiselect--lg .cl-multiselect__control {
+    min-height: 48px;
+    padding: 6px 14px;
+    font-size: var(--cl-font-size-base, 16px);
+  }
+  .cl-multiselect__tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    overflow: hidden;
+  }
+  .cl-multiselect__placeholder {
+    color: var(--cl-color-text-subtle, #94a3b8);
+    font-size: inherit;
+  }
+  .cl-multiselect__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    color: var(--cl-color-text-primary, #0f172a);
+    border: 1px solid var(--cl-color-border-subtle, #e2e8f0);
+    border-radius: var(--cl-radius-sm, 4px);
+    padding: 2px 6px;
+    font-size: 0.8125rem;
+    line-height: 1.25;
+    font-weight: 500;
+  }
+  .cl-multiselect__tag--excess {
+    background-color: var(--cl-color-primary-subtle, #eef2ff);
+    color: var(--cl-color-primary-base, #4f46e5);
+    border-color: transparent;
+  }
+  .cl-multiselect__tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    border: none;
+    background: transparent;
+    color: var(--cl-color-text-muted, #64748b);
+    cursor: pointer;
+    border-radius: var(--cl-radius-full, 9999px);
+    transition: color 0.12s ease;
+  }
+  .cl-multiselect__tag-remove:hover {
+    color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-multiselect__actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+  }
+  .cl-multiselect__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 2px;
+    color: var(--cl-color-text-subtle, #94a3b8);
+    cursor: pointer;
+    border-radius: var(--cl-radius-full, 9999px);
+    transition: color 0.12s ease;
+  }
+  .cl-multiselect__clear:hover {
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-multiselect__arrow {
+    display: inline-flex;
+    align-items: center;
+    color: var(--cl-color-text-secondary, #64748b);
+    transition: transform 0.15s ease;
+  }
+  .cl-multiselect__popover {
+    z-index: 1000;
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    box-shadow: var(--cl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .cl-multiselect__search-wrapper {
+    padding: 8px;
+    border-bottom: 1px solid var(--cl-color-border-subtle, #f1f5f9);
+  }
+  .cl-multiselect__search-input {
+    width: 100%;
+    padding: 6px 10px;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-sm, 4px);
+    background-color: var(--cl-color-surface-base, #ffffff);
+    color: var(--cl-color-text-primary, #0f172a);
+    font-size: 0.875rem;
+    outline: none;
+    box-sizing: border-box;
+  }
+  .cl-multiselect__search-input:focus {
+    border-color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-multiselect__list {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+  .cl-multiselect__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: var(--cl-radius-sm, 4px);
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--cl-color-text-primary, #0f172a);
+    transition: background-color 0.1s ease;
+  }
+  .cl-multiselect__option:hover,
+  .cl-multiselect__option--active {
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+  }
+  .cl-multiselect__option--selected {
+    font-weight: 500;
+  }
+  .cl-multiselect__option--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .cl-multiselect__checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--cl-color-border-default, #cbd5e1);
+    border-radius: 3px;
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    color: #ffffff;
+    flex-shrink: 0;
+  }
+  .cl-multiselect__option--selected .cl-multiselect__checkbox {
+    background-color: var(--cl-color-primary-base, #4f46e5);
+    border-color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-multiselect__option-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .cl-multiselect__option-label {
+    line-height: 1.4;
+  }
+  .cl-multiselect__option-desc {
+    font-size: 0.75rem;
+    color: var(--cl-color-text-muted, #64748b);
+  }
+  .cl-multiselect__empty,
+  .cl-multiselect__loading {
+    padding: 16px;
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--cl-color-text-muted, #64748b);
+  }
+}
+
+/* src/components/DataGrid/DataGrid.styles.css */
+@layer cl-components {
+  .cl-datagrid {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: inherit;
+    border: 1px solid var(--cl-color-border-default, #e2e8f0);
+    border-radius: var(--cl-radius-md, 8px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    overflow: hidden;
+  }
+  .cl-datagrid__container {
+    width: 100%;
+    overflow-x: auto;
+    position: relative;
+    box-sizing: border-box;
+  }
+  .cl-datagrid__container:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: -2px;
+  }
+  .cl-datagrid__table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-align: left;
+    font-size: var(--cl-font-size-sm, 14px);
+    line-height: var(--cl-line-height-normal, 1.5);
+  }
+  .cl-datagrid__thead {
+    background-color: var(--cl-color-surface-hover, #f8fafc);
+    border-bottom: 1px solid var(--cl-color-border-default, #e2e8f0);
+  }
+  .cl-datagrid--sticky-header .cl-datagrid__thead {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+  .cl-datagrid__th {
+    padding: 10px 16px;
+    font-weight: 600;
+    color: var(--cl-color-text-primary, #0f172a);
+    box-sizing: border-box;
+    white-space: nowrap;
+    user-select: none;
+  }
+  .cl-datagrid__th--select,
+  .cl-datagrid__td--select {
+    width: 48px;
+    text-align: center;
+    padding: 10px 12px;
+  }
+  .cl-datagrid__sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: 600;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--cl-radius-sm, 4px);
+    transition: color 0.12s ease;
+  }
+  .cl-datagrid__sort-btn:hover {
+    color: var(--cl-color-primary-base, #4f46e5);
+  }
+  .cl-datagrid__sort-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 2px;
+  }
+  .cl-datagrid__sort-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .cl-datagrid__tr {
+    border-bottom: 1px solid var(--cl-color-border-subtle, #f1f5f9);
+    transition: background-color 0.1s ease;
+  }
+  .cl-datagrid__tr:hover {
+    background-color: var(--cl-color-surface-hover, #f8fafc);
+  }
+  .cl-datagrid__tr--selected {
+    background-color: var(--cl-color-primary-subtle, #eef2ff) !important;
+  }
+  .cl-datagrid__tr--clickable {
+    cursor: pointer;
+  }
+  .cl-datagrid__td {
+    padding: 12px 16px;
+    color: var(--cl-color-text-secondary, #334155);
+    box-sizing: border-box;
+  }
+  .cl-datagrid__th--align-center,
+  .cl-datagrid__td--align-center {
+    text-align: center;
+  }
+  .cl-datagrid__th--align-right,
+  .cl-datagrid__td--align-right {
+    text-align: right;
+  }
+  .cl-datagrid--striped .cl-datagrid__tbody .cl-datagrid__tr:nth-child(even) {
+    background-color: var(--cl-color-surface-hover, #f8fafc);
+  }
+  .cl-datagrid--bordered .cl-datagrid__th,
+  .cl-datagrid--bordered .cl-datagrid__td {
+    border-right: 1px solid var(--cl-color-border-subtle, #f1f5f9);
+  }
+  .cl-datagrid--bordered .cl-datagrid__th:last-child,
+  .cl-datagrid--bordered .cl-datagrid__td:last-child {
+    border-right: none;
+  }
+  .cl-datagrid--sm .cl-datagrid__th {
+    padding: 6px 10px;
+    font-size: var(--cl-font-size-xs, 12px);
+  }
+  .cl-datagrid--sm .cl-datagrid__td {
+    padding: 8px 10px;
+    font-size: var(--cl-font-size-xs, 12px);
+  }
+  .cl-datagrid--md .cl-datagrid__th {
+    padding: 10px 16px;
+    font-size: var(--cl-font-size-sm, 14px);
+  }
+  .cl-datagrid--md .cl-datagrid__td {
+    padding: 12px 16px;
+    font-size: var(--cl-font-size-sm, 14px);
+  }
+  .cl-datagrid--lg .cl-datagrid__th {
+    padding: 14px 20px;
+    font-size: var(--cl-font-size-base, 16px);
+  }
+  .cl-datagrid--lg .cl-datagrid__td {
+    padding: 16px 20px;
+    font-size: var(--cl-font-size-base, 16px);
+  }
+  .cl-datagrid__loading-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 40px;
+    color: var(--cl-color-text-muted, #64748b);
+  }
+  .cl-datagrid__empty-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    color: var(--cl-color-text-muted, #64748b);
+    font-size: 0.875rem;
+  }
+  .cl-datagrid__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 10px 16px;
+    border-top: 1px solid var(--cl-color-border-default, #e2e8f0);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+  }
+}
+
+/* src/components/FileUpload/FileUpload.styles.css */
+@layer cl-components {
+  .cl-fileupload {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: inherit;
+  }
+  .cl-fileupload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 32px 24px;
+    border: 2px dashed var(--cl-color-border-default, #cbd5e1);
+    border-radius: var(--cl-radius-lg, 12px);
+    background-color: var(--cl-color-surface-base, #ffffff);
+    color: var(--cl-color-text-secondary, #475569);
+    text-align: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition:
+      border-color 0.15s ease,
+      background-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+  .cl-fileupload__dropzone:hover {
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    background-color: var(--cl-color-surface-hover, #f8fafc);
+  }
+  .cl-fileupload__dropzone:focus,
+  .cl-fileupload__dropzone:focus-visible {
+    outline: none;
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+  }
+  .cl-fileupload__dropzone--dragging {
+    border-color: var(--cl-color-primary-base, #4f46e5);
+    background-color: var(--cl-color-primary-subtle, #eef2ff);
+  }
+  .cl-fileupload--disabled .cl-fileupload__dropzone {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    border-color: var(--cl-color-border-subtle, #e2e8f0);
+  }
+  .cl-fileupload--error .cl-fileupload__dropzone {
+    border-color: var(--cl-color-danger-base, #dc2626);
+  }
+  .cl-fileupload__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cl-color-primary-base, #4f46e5);
+    margin-bottom: 4px;
+  }
+  .cl-fileupload__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .cl-fileupload__prompt {
+    font-size: var(--cl-font-size-sm, 14px);
+    font-weight: 500;
+    color: var(--cl-color-text-primary, #0f172a);
+  }
+  .cl-fileupload__hint {
+    font-size: var(--cl-font-size-xs, 12px);
+    color: var(--cl-color-text-muted, #64748b);
+  }
+  .cl-fileupload__browse-btn {
+    margin-top: 8px;
+    padding: 6px 14px;
+    font-size: var(--cl-font-size-xs, 12px);
+    font-weight: 600;
+    border-radius: var(--cl-radius-md, 6px);
+    background-color: var(--cl-color-surface-elevated, #ffffff);
+    border: 1px solid var(--cl-color-border-default, #cbd5e1);
+    color: var(--cl-color-text-primary, #0f172a);
+    cursor: pointer;
+    box-shadow: var(--cl-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+    transition: background-color 0.12s ease, border-color 0.12s ease;
+  }
+  .cl-fileupload__browse-btn:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover, #f1f5f9);
+    border-color: var(--cl-color-border-hover, #94a3b8);
+  }
+  .cl-fileupload__errors {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .cl-fileupload__error-item {
+    font-size: var(--cl-font-size-xs, 12px);
+    color: var(--cl-color-danger-base, #dc2626);
+    line-height: 1.4;
+  }
+  .cl-fileupload__list {
+    margin: 12px 0 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .cl-fileupload__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background-color: var(--cl-color-surface-hover, #f8fafc);
+    border: 1px solid var(--cl-color-border-subtle, #e2e8f0);
+    border-radius: var(--cl-radius-md, 6px);
+    font-size: var(--cl-font-size-sm, 14px);
+  }
+  .cl-fileupload__file-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+  }
+  .cl-fileupload__file-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--cl-color-text-muted, #64748b);
+    flex-shrink: 0;
+  }
+  .cl-fileupload__file-name {
+    font-weight: 500;
+    color: var(--cl-color-text-primary, #0f172a);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .cl-fileupload__file-size {
+    color: var(--cl-color-text-muted, #64748b);
+    font-size: var(--cl-font-size-xs, 12px);
+    flex-shrink: 0;
+  }
+  .cl-fileupload__remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    color: var(--cl-color-text-subtle, #94a3b8);
+    cursor: pointer;
+    border-radius: var(--cl-radius-sm, 4px);
+    transition: color 0.12s ease, background-color 0.12s ease;
+  }
+  .cl-fileupload__remove-btn:hover {
+    color: var(--cl-color-danger-base, #dc2626);
+    background-color: rgba(220, 38, 38, 0.08);
+  }
+  .cl-fileupload__remove-btn:focus-visible {
+    outline: 2px solid var(--cl-color-focus-ring, var(--cl-color-primary-base, #4f46e5));
+    outline-offset: 1px;
+  }
+}
+
+/* src/components/Slider/Slider.styles.css */
+@layer cl-components {
+  .cl-slider,
+  .cl-range-slider {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    user-select: none;
+    touch-action: none;
+  }
+  .cl-slider--disabled,
+  .cl-range-slider--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-slider__track-wrapper,
+  .cl-range-slider__track-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+  }
+  .cl-slider--disabled .cl-slider__track-wrapper,
+  .cl-range-slider--disabled .cl-range-slider__track-wrapper {
+    cursor: not-allowed;
+  }
+  .cl-slider--sm .cl-slider__track-wrapper,
+  .cl-range-slider--sm .cl-range-slider__track-wrapper {
+    height: 20px;
+  }
+  .cl-slider--md .cl-slider__track-wrapper,
+  .cl-range-slider--md .cl-range-slider__track-wrapper {
+    height: 24px;
+  }
+  .cl-slider--lg .cl-slider__track-wrapper,
+  .cl-range-slider--lg .cl-range-slider__track-wrapper {
+    height: 32px;
+  }
+  .cl-slider__track,
+  .cl-range-slider__track {
+    position: relative;
+    width: 100%;
+    background-color: var(--cl-color-border-subtle, #e5e7eb);
+    border-radius: var(--cl-rad-full, 9999px);
+    overflow: hidden;
+  }
+  .cl-slider--sm .cl-slider__track,
+  .cl-range-slider--sm .cl-range-slider__track {
+    height: 4px;
+  }
+  .cl-slider--md .cl-slider__track,
+  .cl-range-slider--md .cl-range-slider__track {
+    height: 6px;
+  }
+  .cl-slider--lg .cl-slider__track,
+  .cl-range-slider--lg .cl-range-slider__track {
+    height: 8px;
+  }
+  .cl-slider__filled-track,
+  .cl-range-slider__range {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: var(--cl-rad-full, 9999px);
+    background-color: var(--cl-slider-accent, var(--cl-color-primary-base, #6366f1));
+    transition: background-color var(--cl-duration-fast, 150ms) ease;
+  }
+  .cl-slider--primary,
+  .cl-range-slider--primary {
+    --cl-slider-accent: var(--cl-color-primary-base, #6366f1);
+  }
+  .cl-slider--secondary,
+  .cl-range-slider--secondary {
+    --cl-slider-accent: var(--cl-color-secondary-base, #64748b);
+  }
+  .cl-slider--success,
+  .cl-range-slider--success {
+    --cl-slider-accent: var(--cl-color-success-base, #22c55e);
+  }
+  .cl-slider--warning,
+  .cl-range-slider--warning {
+    --cl-slider-accent: var(--cl-color-warning-base, #f59e0b);
+  }
+  .cl-slider--danger,
+  .cl-range-slider--danger {
+    --cl-slider-accent: var(--cl-color-danger-base, #ef4444);
+  }
+  .cl-slider--invalid,
+  .cl-range-slider--invalid {
+    --cl-slider-accent: var(--cl-color-danger-base, #ef4444);
+  }
+  .cl-slider__thumb,
+  .cl-range-slider__thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    border-radius: var(--cl-rad-full, 9999px);
+    background-color: var(--cl-palette-white, #ffffff);
+    border: 2px solid var(--cl-slider-accent, var(--cl-color-primary-base, #6366f1));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
+    cursor: grab;
+    outline: none;
+    transition:
+      transform var(--cl-duration-fast, 150ms) ease,
+      box-shadow var(--cl-duration-fast, 150ms) ease,
+      border-color var(--cl-duration-fast, 150ms) ease;
+    z-index: 1;
+  }
+  .cl-slider__thumb:active,
+  .cl-range-slider__thumb:active {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(1.15);
+  }
+  .cl-slider--sm .cl-slider__thumb,
+  .cl-range-slider--sm .cl-range-slider__thumb {
+    width: 14px;
+    height: 14px;
+  }
+  .cl-slider--md .cl-slider__thumb,
+  .cl-range-slider--md .cl-range-slider__thumb {
+    width: 18px;
+    height: 18px;
+  }
+  .cl-slider--lg .cl-slider__thumb,
+  .cl-range-slider--lg .cl-range-slider__thumb {
+    width: 24px;
+    height: 24px;
+  }
+  .cl-slider--disabled .cl-slider__thumb,
+  .cl-range-slider--disabled .cl-range-slider__thumb {
+    cursor: not-allowed;
+    border-color: var(--cl-color-border-strong, #9ca3af);
+  }
+  .cl-slider__thumb:focus-visible,
+  .cl-range-slider__thumb:focus-visible {
+    outline: 2px solid var(--cl-slider-accent, var(--cl-color-primary-base, #6366f1));
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--cl-color-focus-ring, rgba(99, 102, 241, 0.25));
+  }
+  .cl-slider__marks-container,
+  .cl-range-slider__marks-container {
+    position: relative;
+    width: 100%;
+    margin-top: var(--cl-space-1, 4px);
+    height: 16px;
+    pointer-events: none;
+  }
+  .cl-slider__mark-point,
+  .cl-range-slider__mark-point {
+    position: absolute;
+    top: -12px;
+    width: 4px;
+    height: 4px;
+    border-radius: var(--cl-rad-full, 9999px);
+    background-color: var(--cl-color-border-strong, #9ca3af);
+    transform: translateX(-50%);
+  }
+  .cl-slider__mark-label,
+  .cl-range-slider__mark-label {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    font-size: var(--cl-font-size-xs, 0.75rem);
+    color: var(--cl-color-fg-muted, #6b7280);
+    white-space: nowrap;
+  }
+}
+
+/* src/components/TreeView/TreeView.styles.css */
+@layer cl-components {
+  .cl-treeview {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    user-select: none;
+    font-family: var(--cl-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+    font-size: var(--cl-font-size-sm, 0.875rem);
+    color: var(--cl-color-text, #111827);
+    line-height: var(--cl-line-height-normal, 1.5);
+  }
+  .cl-treeview__group,
+  .cl-treeview__root-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .cl-treeview__node {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    cursor: pointer;
+  }
+  .cl-treeview__node-content {
+    display: flex;
+    align-items: center;
+    gap: var(--cl-spacing-2, 0.5rem);
+    padding: var(--cl-spacing-1, 0.25rem) var(--cl-spacing-2, 0.5rem);
+    border-radius: var(--cl-radius-sm, 0.25rem);
+    transition: background-color var(--cl-transition-fast, 150ms ease), color var(--cl-transition-fast, 150ms ease);
+    min-height: 2rem;
+  }
+  .cl-treeview__node-content:hover {
+    background-color: var(--cl-color-surface-hover, rgba(0, 0, 0, 0.04));
+  }
+  .cl-treeview__node--selected > .cl-treeview__node-content {
+    background-color: var(--cl-color-primary-light, #eff6ff);
+    color: var(--cl-color-primary-dark, #1d4ed8);
+    font-weight: var(--cl-font-weight-medium, 500);
+  }
+  .cl-treeview__node--focused > .cl-treeview__node-content {
+    box-shadow: 0 0 0 2px var(--cl-color-focus-ring, #3b82f6);
+  }
+  .cl-treeview__node--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-treeview__node--disabled > .cl-treeview__node-content:hover {
+    background-color: transparent;
+  }
+  .cl-treeview__toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--cl-color-text-muted, #6b7280);
+    cursor: pointer;
+    border-radius: var(--cl-radius-xs, 0.125rem);
+    transition: transform var(--cl-transition-fast, 150ms ease), color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-treeview__toggle-btn:hover {
+    color: var(--cl-color-text, #111827);
+  }
+  .cl-treeview__toggle-btn--expanded .cl-treeview__chevron-icon {
+    transform: rotate(90deg);
+  }
+  .cl-treeview__chevron-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-treeview__toggle-placeholder {
+    display: inline-block;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+  .cl-treeview__node-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--cl-color-text-muted, #6b7280);
+  }
+  .cl-treeview__node-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .cl-treeview__empty {
+    padding: var(--cl-spacing-4, 1rem);
+    text-align: center;
+    color: var(--cl-color-text-muted, #6b7280);
+    font-style: italic;
+  }
+  :root[data-theme=dark] .cl-treeview,
+  .dark .cl-treeview {
+    color: var(--cl-color-text-dark, #f9fafb);
+  }
+  :root[data-theme=dark] .cl-treeview__node-content:hover,
+  .dark .cl-treeview__node-content:hover {
+    background-color: var(--cl-color-surface-hover-dark, rgba(255, 255, 255, 0.08));
+  }
+  :root[data-theme=dark] .cl-treeview__node--selected > .cl-treeview__node-content,
+  .dark .cl-treeview__node--selected > .cl-treeview__node-content {
+    background-color: var(--cl-color-primary-dark-mode, #1e3a8a);
+    color: var(--cl-color-primary-text-dark, #93c5fd);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-treeview__node-content,
+    .cl-treeview__toggle-btn,
+    .cl-treeview__chevron-icon {
+      transition: none !important;
+    }
+  }
+}
+
+/* src/components/Stepper/Stepper.styles.css */
+@layer cl-components {
+  .cl-stepper {
+    display: block;
+    width: 100%;
+    font-family: var(--cl-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+    color: var(--cl-color-text, #111827);
+  }
+  .cl-stepper__list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  .cl-stepper--horizontal .cl-stepper__list {
+    flex-direction: row;
+    align-items: center;
+  }
+  .cl-stepper--horizontal .cl-stepper__item {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    position: relative;
+  }
+  .cl-stepper--horizontal .cl-stepper__item:last-child {
+    flex: none;
+  }
+  .cl-stepper--vertical .cl-stepper__list {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .cl-stepper--vertical .cl-stepper__item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    padding-bottom: var(--cl-spacing-6, 1.5rem);
+  }
+  .cl-stepper--vertical .cl-stepper__item:last-child {
+    padding-bottom: 0;
+  }
+  .cl-stepper__trigger,
+  .cl-stepper__trigger-static {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cl-spacing-3, 0.75rem);
+    background: transparent;
+    border: none;
+    padding: var(--cl-spacing-1, 0.25rem) var(--cl-spacing-2, 0.5rem);
+    border-radius: var(--cl-radius-md, 0.375rem);
+    text-align: left;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+  }
+  .cl-stepper__trigger {
+    cursor: pointer;
+    transition: background-color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-stepper__trigger:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover, rgba(0, 0, 0, 0.04));
+  }
+  .cl-stepper__trigger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--cl-color-focus-ring, #3b82f6);
+  }
+  .cl-stepper__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-stepper__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--cl-radius-full, 9999px);
+    font-weight: var(--cl-font-weight-semibold, 600);
+    flex-shrink: 0;
+    transition:
+      background-color var(--cl-transition-fast, 150ms ease),
+      border-color var(--cl-transition-fast, 150ms ease),
+      color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-stepper--sm .cl-stepper__indicator {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--cl-font-size-xs, 0.75rem);
+  }
+  .cl-stepper--sm .cl-stepper__label {
+    font-size: var(--cl-font-size-xs, 0.75rem);
+  }
+  .cl-stepper--md .cl-stepper__indicator {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--cl-font-size-sm, 0.875rem);
+  }
+  .cl-stepper--md .cl-stepper__label {
+    font-size: var(--cl-font-size-sm, 0.875rem);
+  }
+  .cl-stepper--lg .cl-stepper__indicator {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: var(--cl-font-size-md, 1rem);
+  }
+  .cl-stepper--lg .cl-stepper__label {
+    font-size: var(--cl-font-size-md, 1rem);
+  }
+  .cl-stepper__indicator--upcoming {
+    background-color: var(--cl-color-surface, #ffffff);
+    border: 2px solid var(--cl-color-border, #d1d5db);
+    color: var(--cl-color-text-muted, #6b7280);
+  }
+  .cl-stepper__indicator--current {
+    background-color: var(--cl-color-primary, #2563eb);
+    border: 2px solid var(--cl-color-primary, #2563eb);
+    color: #ffffff;
+    box-shadow: 0 0 0 3px var(--cl-color-primary-light, #dbeafe);
+  }
+  .cl-stepper__indicator--completed {
+    background-color: var(--cl-color-success, #10b981);
+    border: 2px solid var(--cl-color-success, #10b981);
+    color: #ffffff;
+  }
+  .cl-stepper__indicator--error {
+    background-color: var(--cl-color-danger, #ef4444);
+    border: 2px solid var(--cl-color-danger, #ef4444);
+    color: #ffffff;
+  }
+  .cl-stepper__indicator--disabled {
+    background-color: var(--cl-color-surface-disabled, #f3f4f6);
+    border: 2px solid var(--cl-color-border-disabled, #e5e7eb);
+    color: var(--cl-color-text-disabled, #9ca3af);
+  }
+  .cl-stepper__status-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cl-stepper__content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .cl-stepper__label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--cl-spacing-1-5, 0.375rem);
+  }
+  .cl-stepper__label {
+    font-weight: var(--cl-font-weight-medium, 500);
+    line-height: var(--cl-line-height-tight, 1.25);
+    white-space: nowrap;
+  }
+  .cl-stepper__item--current .cl-stepper__label {
+    color: var(--cl-color-primary, #2563eb);
+    font-weight: var(--cl-font-weight-semibold, 600);
+  }
+  .cl-stepper__item--error .cl-stepper__label {
+    color: var(--cl-color-danger, #ef4444);
+  }
+  .cl-stepper__optional {
+    font-size: var(--cl-font-size-xs, 0.75rem);
+    color: var(--cl-color-text-muted, #6b7280);
+  }
+  .cl-stepper__description {
+    font-size: var(--cl-font-size-xs, 0.75rem);
+    color: var(--cl-color-text-muted, #6b7280);
+    margin-top: 0.125rem;
+  }
+  .cl-stepper--horizontal .cl-stepper__connector {
+    flex: 1;
+    margin: 0 var(--cl-spacing-3, 0.75rem);
+    min-width: 1.5rem;
+  }
+  .cl-stepper--horizontal .cl-stepper__connector-line {
+    height: 2px;
+    background-color: var(--cl-color-border, #e5e7eb);
+    transition: background-color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-stepper--horizontal .cl-stepper__connector--completed .cl-stepper__connector-line {
+    background-color: var(--cl-color-success, #10b981);
+  }
+  .cl-stepper--vertical .cl-stepper__connector {
+    position: absolute;
+    top: 2.25rem;
+    left: 1.5rem;
+    bottom: 0;
+    width: 2px;
+    transform: translateX(-50%);
+  }
+  .cl-stepper--vertical .cl-stepper__connector-line {
+    width: 2px;
+    height: 100%;
+    background-color: var(--cl-color-border, #e5e7eb);
+    transition: background-color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-stepper--vertical .cl-stepper__connector--completed .cl-stepper__connector-line {
+    background-color: var(--cl-color-success, #10b981);
+  }
+  :root[data-theme=dark] .cl-stepper,
+  .dark .cl-stepper {
+    color: var(--cl-color-text-dark, #f9fafb);
+  }
+  :root[data-theme=dark] .cl-stepper__indicator--upcoming,
+  .dark .cl-stepper__indicator--upcoming {
+    background-color: var(--cl-color-surface-dark, #1f2937);
+    border-color: var(--cl-color-border-dark, #374151);
+    color: var(--cl-color-text-muted-dark, #9ca3af);
+  }
+  :root[data-theme=dark] .cl-stepper__trigger:hover:not(:disabled),
+  .dark .cl-stepper__trigger:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover-dark, rgba(255, 255, 255, 0.08));
+  }
+  :root[data-theme=dark] .cl-stepper__connector-line,
+  .dark .cl-stepper__connector-line {
+    background-color: var(--cl-color-border-dark, #374151);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-stepper__trigger,
+    .cl-stepper__indicator,
+    .cl-stepper__connector-line {
+      transition: none !important;
+    }
+  }
+}
+
+/* src/components/Carousel/Carousel.styles.css */
+@layer cl-components {
+  .cl-carousel {
+    position: relative;
+    width: 100%;
+    outline: none;
+    user-select: none;
+    font-family: var(--cl-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+    color: var(--cl-color-text, #111827);
+  }
+  .cl-carousel:focus-visible {
+    box-shadow: 0 0 0 2px var(--cl-color-focus-ring, #3b82f6);
+    border-radius: var(--cl-radius-lg, 0.5rem);
+  }
+  .cl-carousel--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  .cl-carousel__viewport {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    border-radius: var(--cl-radius-lg, 0.5rem);
+  }
+  .cl-carousel__track {
+    display: flex;
+    width: 100%;
+    transition: transform var(--cl-transition-normal, 300ms ease);
+    will-change: transform;
+  }
+  .cl-carousel__slide {
+    flex: 0 0 100%;
+    width: 100%;
+    min-width: 100%;
+    box-sizing: border-box;
+  }
+  .cl-carousel__slide:not(.cl-carousel__slide--active) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .cl-carousel__controls {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--cl-spacing-3, 0.75rem);
+  }
+  .cl-carousel__arrow-btn,
+  .cl-carousel__autoplay-btn {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--cl-radius-full, 9999px);
+    background-color: var(--cl-color-surface, #ffffff);
+    color: var(--cl-color-text, #111827);
+    border: 1px solid var(--cl-color-border, #e5e7eb);
+    box-shadow: var(--cl-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+    cursor: pointer;
+    transition:
+      background-color var(--cl-transition-fast, 150ms ease),
+      color var(--cl-transition-fast, 150ms ease),
+      transform var(--cl-transition-fast, 150ms ease);
+    padding: 0;
+  }
+  .cl-carousel__arrow-btn:hover:not(:disabled),
+  .cl-carousel__autoplay-btn:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover, #f3f4f6);
+    color: var(--cl-color-primary, #2563eb);
+    transform: scale(1.05);
+  }
+  .cl-carousel__arrow-btn:focus-visible,
+  .cl-carousel__autoplay-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--cl-color-focus-ring, #3b82f6);
+  }
+  .cl-carousel__arrow-btn:disabled,
+  .cl-carousel__autoplay-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    transform: none;
+  }
+  .cl-carousel__arrow-btn svg,
+  .cl-carousel__autoplay-btn svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  .cl-carousel__autoplay-btn {
+    position: absolute;
+    bottom: var(--cl-spacing-3, 0.75rem);
+    right: var(--cl-spacing-3, 0.75rem);
+    width: 2rem;
+    height: 2rem;
+  }
+  .cl-carousel__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cl-spacing-2, 0.5rem);
+    margin-top: var(--cl-spacing-3, 0.75rem);
+  }
+  .cl-carousel__dot-btn {
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--cl-radius-full, 9999px);
+    background-color: var(--cl-color-border, #d1d5db);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: width var(--cl-transition-fast, 150ms ease), background-color var(--cl-transition-fast, 150ms ease);
+  }
+  .cl-carousel__dot-btn:hover:not(:disabled) {
+    background-color: var(--cl-color-text-muted, #9ca3af);
+  }
+  .cl-carousel__dot-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--cl-color-focus-ring, #3b82f6);
+  }
+  .cl-carousel__dot-btn--active {
+    width: 1.5rem;
+    background-color: var(--cl-color-primary, #2563eb);
+  }
+  :root[data-theme=dark] .cl-carousel,
+  .dark .cl-carousel {
+    color: var(--cl-color-text-dark, #f9fafb);
+  }
+  :root[data-theme=dark] .cl-carousel__arrow-btn,
+  .dark .cl-carousel__arrow-btn,
+  :root[data-theme=dark] .cl-carousel__autoplay-btn,
+  .dark .cl-carousel__autoplay-btn {
+    background-color: var(--cl-color-surface-dark, #1f2937);
+    color: var(--cl-color-text-dark, #f9fafb);
+    border-color: var(--cl-color-border-dark, #374151);
+  }
+  :root[data-theme=dark] .cl-carousel__arrow-btn:hover:not(:disabled),
+  .dark .cl-carousel__arrow-btn:hover:not(:disabled),
+  :root[data-theme=dark] .cl-carousel__autoplay-btn:hover:not(:disabled),
+  .dark .cl-carousel__autoplay-btn:hover:not(:disabled) {
+    background-color: var(--cl-color-surface-hover-dark, #374151);
+    color: var(--cl-color-primary-light, #60a5fa);
+  }
+  :root[data-theme=dark] .cl-carousel__dot-btn,
+  .dark .cl-carousel__dot-btn {
+    background-color: var(--cl-color-border-dark, #4b5563);
+  }
+  :root[data-theme=dark] .cl-carousel__dot-btn--active,
+  .dark .cl-carousel__dot-btn--active {
+    background-color: var(--cl-color-primary-light, #60a5fa);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-carousel__track,
+    .cl-carousel__arrow-btn,
+    .cl-carousel__dot-btn {
+      transition: none !important;
+    }
+  }
+}
+
 /* src/styles/index.css */
 /*# sourceMappingURL=index.css.map */