@casinogate/ui 1.6.2 → 1.7.0

package/dist/assets/css/root.css

@@ -9,12 +9,18 @@
       "Courier New", monospace;
     --cgui-color-black: #000;
     --cgui-spacing: 0.25rem;
+    --cgui-text-xs: 0.75rem;
+    --cgui-text-xs--line-height: calc(1 / 0.75);
     --cgui-text-sm: 0.875rem;
     --cgui-text-sm--line-height: calc(1.25 / 0.875);
+    --cgui-text-base: 1rem;
+    --cgui-text-base--line-height: calc(1.5 / 1);
     --cgui-text-lg: 1.125rem;
     --cgui-text-lg--line-height: calc(1.75 / 1.125);
     --cgui-font-weight-normal: 400;
     --cgui-font-weight-medium: 500;
+    --cgui-font-weight-semibold: 600;
+    --cgui-leading-relaxed: 1.625;
     --cgui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --cgui-animate-spin: spin 1s linear infinite;
     --cgui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -215,8 +221,8 @@
   .cgui\:left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .cgui\:z-\(--cg-ui-z-index-popover\) {
-    z-index: var(--cg-ui-z-index-popover);
+  .cgui\:z-\(--cg-ui-z-index-dropdown\) {
+    z-index: var(--cg-ui-z-index-dropdown);
   }
   .cgui\:z-\(--cg-ui-z-index-select\) {
     z-index: var(--cg-ui-z-index-select);
@@ -230,12 +236,21 @@
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
+  .cgui\:mx-1 {
+    margin-inline: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:mx-auto {
     margin-inline: auto;
   }
+  .cgui\:my-1 {
+    margin-block: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:my-4 {
     margin-block: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:ms-auto {
+    margin-inline-start: auto;
+  }
   .cgui\:mt-4 {
     margin-top: calc(var(--cgui-spacing) * 4);
   }
@@ -311,10 +326,6 @@
     width: calc(var(--cgui-spacing) * 14);
     height: calc(var(--cgui-spacing) * 14);
   }
-  .cgui\:size-40 {
-    width: calc(var(--cgui-spacing) * 40);
-    height: calc(var(--cgui-spacing) * 40);
-  }
   .cgui\:size-full {
     width: 100%;
     height: 100%;
@@ -361,18 +372,21 @@
   .cgui\:h-10 {
     height: calc(var(--cgui-spacing) * 10);
   }
+  .cgui\:h-10\.5 {
+    height: calc(var(--cgui-spacing) * 10.5);
+  }
   .cgui\:h-11 {
     height: calc(var(--cgui-spacing) * 11);
   }
   .cgui\:h-12 {
     height: calc(var(--cgui-spacing) * 12);
   }
-  .cgui\:h-14 {
-    height: calc(var(--cgui-spacing) * 14);
-  }
   .cgui\:h-20 {
     height: calc(var(--cgui-spacing) * 20);
   }
+  .cgui\:h-24 {
+    height: calc(var(--cgui-spacing) * 24);
+  }
   .cgui\:h-30 {
     height: calc(var(--cgui-spacing) * 30);
   }
@@ -388,6 +402,12 @@
   .cgui\:h-full {
     height: 100%;
   }
+  .cgui\:h-px {
+    height: 1px;
+  }
+  .cgui\:max-h-\(--bits-dropdown-menu-content-available-height\) {
+    max-height: var(--bits-dropdown-menu-content-available-height);
+  }
   .cgui\:max-h-\(--bits-select-content-available-height\) {
     max-height: var(--bits-select-content-available-height);
   }
@@ -436,6 +456,15 @@
   .cgui\:w-40 {
     width: calc(var(--cgui-spacing) * 40);
   }
+  .cgui\:w-48 {
+    width: calc(var(--cgui-spacing) * 48);
+  }
+  .cgui\:w-70 {
+    width: calc(var(--cgui-spacing) * 70);
+  }
+  .cgui\:w-\[420px\] {
+    width: 420px;
+  }
   .cgui\:w-auto {
     width: auto;
   }
@@ -445,6 +474,9 @@
   .cgui\:w-full {
     width: 100%;
   }
+  .cgui\:w-px {
+    width: 1px;
+  }
   .cgui\:w-screen {
     width: 100vw;
   }
@@ -472,15 +504,30 @@
   .cgui\:max-w-200 {
     max-width: calc(var(--cgui-spacing) * 200);
   }
+  .cgui\:max-w-\[90vw\] {
+    max-width: 90vw;
+  }
+  .cgui\:min-w-\(--bits-dropdown-menu-anchor-width\) {
+    min-width: var(--bits-dropdown-menu-anchor-width);
+  }
+  .cgui\:min-w-\(--bits-popover-anchor-width\) {
+    min-width: var(--bits-popover-anchor-width);
+  }
   .cgui\:min-w-\(--bits-select-anchor-width\) {
     min-width: var(--bits-select-anchor-width);
   }
   .cgui\:min-w-0 {
     min-width: calc(var(--cgui-spacing) * 0);
   }
+  .cgui\:min-w-35 {
+    min-width: calc(var(--cgui-spacing) * 35);
+  }
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
+  .cgui\:min-w-64 {
+    min-width: calc(var(--cgui-spacing) * 64);
+  }
   .cgui\:min-w-fit {
     min-width: fit-content;
   }
@@ -496,6 +543,12 @@
   .cgui\:grow {
     flex-grow: 1;
   }
+  .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--bits-dropdown-menu-content-transform-origin);
+  }
+  .cgui\:origin-\(--bits-popover-content-transform-origin\) {
+    transform-origin: var(--bits-popover-content-transform-origin);
+  }
   .cgui\:origin-\(--bits-select-content-transform-origin\) {
     transform-origin: var(--bits-select-content-transform-origin);
   }
@@ -586,11 +639,14 @@
   .cgui\:gap-2\.5 {
     gap: calc(var(--cgui-spacing) * 2.5);
   }
+  .cgui\:gap-3 {
+    gap: calc(var(--cgui-spacing) * 3);
+  }
   .cgui\:gap-4 {
     gap: calc(var(--cgui-spacing) * 4);
   }
-  .cgui\:gap-12 {
-    gap: calc(var(--cgui-spacing) * 12);
+  .cgui\:gap-16 {
+    gap: calc(var(--cgui-spacing) * 16);
   }
   .cgui\:space-y-1 {
     :where(& > :not(:last-child)) {
@@ -599,6 +655,20 @@
       margin-block-end: calc(calc(var(--cgui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .cgui\:space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--cgui-spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--cgui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .cgui\:space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--cgui-spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--cgui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .cgui\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -660,6 +730,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .cgui\:border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .cgui\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -672,6 +746,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .cgui\:border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .cgui\:border-none {
     --tw-border-style: none;
     border-style: none;
@@ -775,6 +853,12 @@
   .cgui\:bg-surface-lightest {
     background-color: var(--cg-ui-palette-neutral-10);
   }
+  .cgui\:bg-surface-lightest\/50 {
+    background-color: var(--cg-ui-palette-neutral-10);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 50%, transparent);
+    }
+  }
   .cgui\:bg-surface-primary {
     background-color: var(--cg-ui-palette-primary-80);
   }
@@ -823,6 +907,9 @@
   .cgui\:p-1 {
     padding: calc(var(--cgui-spacing) * 1);
   }
+  .cgui\:p-1\.5 {
+    padding: calc(var(--cgui-spacing) * 1.5);
+  }
   .cgui\:p-2 {
     padding: calc(var(--cgui-spacing) * 2);
   }
@@ -871,6 +958,12 @@
   .cgui\:py-4 {
     padding-block: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:py-5 {
+    padding-block: calc(var(--cgui-spacing) * 5);
+  }
+  .cgui\:pt-2 {
+    padding-top: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:pt-4 {
     padding-top: calc(var(--cgui-spacing) * 4);
   }
@@ -910,6 +1003,10 @@
   .cgui\:align-middle {
     vertical-align: middle;
   }
+  .cgui\:text-base {
+    font-size: var(--cgui-text-base);
+    line-height: var(--tw-leading, var(--cgui-text-base--line-height));
+  }
   .cgui\:text-body {
     font-size: var(--cg-ui-fz-body);
     line-height: var(--tw-leading, var(--cg-ui-lh-body));
@@ -926,6 +1023,10 @@
     font-size: var(--cg-ui-fz-caption-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
   }
+  .cgui\:text-heading {
+    font-size: var(--cg-ui-fz-heading);
+    line-height: var(--tw-leading, var(--cg-ui-lh-heading));
+  }
   .cgui\:text-heading-2 {
     font-size: var(--cg-ui-fz-heading-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
@@ -938,10 +1039,18 @@
     font-size: var(--cgui-text-sm);
     line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
   }
+  .cgui\:text-xs {
+    font-size: var(--cgui-text-xs);
+    line-height: var(--tw-leading, var(--cgui-text-xs--line-height));
+  }
   .cgui\:leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
+  .cgui\:leading-relaxed {
+    --tw-leading: var(--cgui-leading-relaxed);
+    line-height: var(--cgui-leading-relaxed);
+  }
   .cgui\:font-medium {
     --tw-font-weight: var(--cgui-font-weight-medium);
     font-weight: var(--cgui-font-weight-medium);
@@ -950,6 +1059,10 @@
     --tw-font-weight: var(--cgui-font-weight-normal);
     font-weight: var(--cgui-font-weight-normal);
   }
+  .cgui\:font-semibold {
+    --tw-font-weight: var(--cgui-font-weight-semibold);
+    font-weight: var(--cgui-font-weight-semibold);
+  }
   .cgui\:whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1020,6 +1133,10 @@
     --tw-shadow: var(--cg-ui-shadow-dialog);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-dropdown {
+    --tw-shadow: var(--cg-ui-shadow-dropdown);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1036,6 +1153,10 @@
     --tw-shadow: var(--cg-ui-shadow-select);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-toast {
     --tw-shadow: var(--cg-ui-shadow-toast);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1051,6 +1172,11 @@
   .cgui\:outline-stroke-focus {
     outline-color: var(--cg-ui-palette-primary-60);
   }
+  .cgui\:transition-\[background-color\,color\] {
+    transition-property: background-color,color;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
@@ -1061,11 +1187,20 @@
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .cgui\:duration-250 {
     --tw-duration: 250ms;
     transition-duration: 250ms;
@@ -1238,6 +1373,13 @@
       }
     }
   }
+  .cgui\:hover\:bg-surface-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-palette-neutral-01);
+      }
+    }
+  }
   .cgui\:hover\:bg-surface-primary-active {
     &:hover {
       @media (hover: hover) {
@@ -1329,6 +1471,11 @@
       --tw-ring-color: var(--cg-ui-palette-system-error-100);
     }
   }
+  .cgui\:data-highlighted\:bg-surface-lightest {
+    &[data-highlighted] {
+      background-color: var(--cg-ui-palette-neutral-10);
+    }
+  }
   .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
     &[data-active=""] {
       background-color: var(--cg-ui-palette-neutral-0);
@@ -1415,14 +1562,9 @@
       background-color: var(--cg-ui-palette-neutral-10);
     }
   }
-  .cgui\:data-\[orientation\=horizontal\]\:h-px {
-    &[data-orientation="horizontal"] {
-      height: 1px;
-    }
-  }
-  .cgui\:data-\[orientation\=horizontal\]\:w-full {
-    &[data-orientation="horizontal"] {
-      width: 100%;
+  .cgui\:data-\[inset\]\:ps-8 {
+    &[data-inset] {
+      padding-inline-start: calc(var(--cgui-spacing) * 8);
     }
   }
   .cgui\:data-\[orientation\=vertical\]\:h-auto {
@@ -1430,16 +1572,6 @@
       height: auto;
     }
   }
-  .cgui\:data-\[orientation\=vertical\]\:h-full {
-    &[data-orientation="vertical"] {
-      height: 100%;
-    }
-  }
-  .cgui\:data-\[orientation\=vertical\]\:w-px {
-    &[data-orientation="vertical"] {
-      width: 1px;
-    }
-  }
   .cgui\:data-\[placeholder\]\:text-fg-regular {
     &[data-placeholder] {
       color: var(--cg-ui-palette-neutral-50);
@@ -1482,6 +1614,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .cgui\:data-\[side\=left\]\:slide-in-from-end-2 {
+    &[data-side="left"] {
+      &:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing));
+      }
+      &:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+      }
+    }
+  }
   .cgui\:data-\[side\=left\]\:slide-in-from-right-2 {
     &[data-side="left"] {
       --tw-enter-translate-x: calc(2*var(--spacing));
@@ -1493,6 +1635,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .cgui\:data-\[side\=right\]\:slide-in-from-start-2 {
+    &[data-side="right"] {
+      &:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+      }
+      &:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing));
+      }
+    }
+  }
   .cgui\:data-\[side\=right\]\:slide-in-from-left-2 {
     &[data-side="right"] {
       --tw-enter-translate-x: calc(2*var(--spacing)*-1);
@@ -1712,6 +1864,17 @@
       flex-shrink: 0;
     }
   }
+  .cgui\:\[\&_svg\]\:text-icon-regular {
+    & svg {
+      color: var(--cg-ui-palette-neutral-50);
+    }
+  }
+  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4\.5 {
+    & svg:not([class*="size-"]) {
+      width: calc(var(--cgui-spacing) * 4.5);
+      height: calc(var(--cgui-spacing) * 4.5);
+    }
+  }
   .cgui\:\[\&_tr\]\:h-10 {
     & tr {
       height: calc(var(--cgui-spacing) * 10);
@@ -1966,12 +2129,14 @@
   --cg-ui-number-xxl: 40;
   --cg-ui-number-2xxl: 48;
   --cg-ui-number-max: 360;
+  --cg-ui-shadow-base: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
-  --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
-  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  --cg-ui-shadow-popover: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-select: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);

package/dist/assets/css/theme.css

@@ -123,6 +123,7 @@
   --shadow-popover: var(--cg-ui-shadow-popover);
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
+  --shadow-dropdown: var(--cg-ui-shadow-dropdown);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);
@@ -199,12 +200,14 @@
   --cg-ui-number-max: 360;
 
   /* Shadows */
+  --cg-ui-shadow-base: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
-  --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
-  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  --cg-ui-shadow-popover: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-select: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;

package/dist/components/breadcrumb/styles.d.ts

@@ -3,24 +3,24 @@ import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -32,13 +32,13 @@ export declare const breadcrumbVariants: import("tailwind-variants").TVReturnTyp
     page: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/components/button/button.component.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buttonVariants } from './styles.js';
   import type { ButtonProps } from './types.js';
+  import { Spinner } from '../spinner/index.js';
   import { cn } from '../../internal/utils/common.js';
   import { Button, useId } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -38,7 +39,7 @@
 
   {#if loading}
     <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={variants.chevron()}>
-      <!-- <AnimatedLoaderIcon width={18} height={18} /> -->
+      <Spinner size={18} />
     </span>
   {/if}
 

package/dist/components/button/styles.js

@@ -49,16 +49,16 @@ export const buttonVariants = tv({
         },
         size: {
             xs: {
-                root: 'cgui:h-7.5',
+                root: 'cgui:h-7.5 cgui:px-2.5 cgui:text-body',
             },
             sm: {
-                root: 'cgui:h-8',
+                root: 'cgui:h-8 cgui:px-3 cgui:text-body',
             },
             md: {
-                root: 'cgui:h-8.5',
+                root: 'cgui:h-9 cgui:px-4 cgui:text-body',
             },
             lg: {
-                root: 'cgui:h-14',
+                root: 'cgui:h-10.5 cgui:px-4 cgui:text-heading-2',
             },
         },
         w: {

package/dist/components/collapsible/styles.d.ts

@@ -73,34 +73,34 @@ export declare const CollapsibleStylesContext: Context<ReadableBox<{
     root: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     trigger: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     icon: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     content: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
 } & {
     root: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     trigger: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     icon: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     content: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
 } & {}>>;