@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/tokens.css

@@ -3306,67 +3306,43 @@
   }
 }
 :where(.radix-themes) {
-  --backdrop-blur-panel: 48px;
-  --backdrop-blur-components: 16px;
-  --backdrop-blur-heavy: 48px;
-  --backdrop-blur-light: 16px;
-  --backdrop-blur-dialog: 32px;
-  --panel-opacity-light: 0.75;
-  --panel-opacity-heavy: 0.75;
-  --surface-opacity-light: 0.5;
-  --surface-opacity-heavy: 0.75;
-  --surface-opacity-dark: 0.25;
-  --dialog-opacity-light: 0.75;
-  --dialog-opacity-heavy: 0.75;
-  --dialog-opacity-dark: 0.75;
-  --panel-mix-percentage: 50%;
-  --surface-mix-percentage: 75%;
-  --dialog-mix-percentage: 50%;
+  --backdrop-blur-components: var(--blur-4);
+  --backdrop-blur-panel: var(--blur-5);
+  --backdrop-blur-dialog: var(--blur-6);
+  --surface-opacity-light: var(--opacity-5);
+  --surface-opacity-heavy: var(--opacity-6);
+  --surface-opacity-dark: var(--opacity-7);
+  --dialog-opacity: var(--opacity-7);
+  --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
+  --panel-opacity: var(--opacity-6);
+  --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
+  --surface-opacity: var(--opacity-5);
+  --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
   --border-width-standard: 1px;
-  --border-width-inset: 1px;
-  --border-width-none: 0px;
   --classic-elevation-offset: -0.02em;
   --classic-active-padding-offset-1: 0.5px;
   --classic-active-padding-offset-2: 1px;
   --classic-shadow-blur-small: 0.15em;
-  --classic-shadow-blur-medium: 0.2em;
-  --classic-shadow-blur-large: 0.4em;
   --classic-border-width: 0.03em;
   --classic-border-width-thick: 0.05em;
-  --classic-border-width-thin: 0.1em;
   --classic-shadow-offset-y: 0.04em;
-  --classic-shadow-offset-negative: -0.1em;
   --classic-word-spacing: -0.1em;
-  --classic-inset-shadow-offset: 0.5px;
-  --classic-inset-shadow-offset-negative: -0.5px;
-  --classic-inset-shadow-blur: 0.5px;
   --classic-elevation-factor-subtle: 3;
   --classic-shadow-factor-light: 1.5;
-  --classic-shadow-factor-medium: 2;
-  --classic-shadow-factor-heavy: 3;
-  --classic-shadow-factor-subtle: 4;
-  --classic-border-factor-half: 2;
-  --classic-border-factor-light: 1.5;
   --classic-border-multiplier-double: 2;
+  --classic-shadow-blur-medium: 0.2em;
+  --classic-shadow-blur-large: 0.4em;
   --classic-shadow-medium-factor-third: 3;
-  --classic-inset-shadow-light: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
-  --classic-inset-shadow-light-hover: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
-  --classic-inset-shadow-light-focus: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a1), 0 0 0 var(--focus-outline-width) var(--focus-8);
   --classic-inset-shadow-dark: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
-  --classic-inset-shadow-dark-hover: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
-  --classic-inset-shadow-dark-focus: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a2), 0 0 0 var(--focus-outline-width) var(--focus-8);
-  --color-mix-percentage-light: 25%;
-  --color-mix-percentage-medium: 50%;
-  --color-mix-percentage-heavy: 75%;
   --trigger-icon-size-default: 9px;
   --trigger-icon-size-1: 10px;
   --trigger-icon-size-2: 11px;
   --trigger-icon-size-3: 11px;
   --trigger-icon-size-4: 12px;
-  --content-icon-size-1: calc(var(--space-3) * 1.175);
-  --content-icon-size-2: var(--space-4);
-  --content-icon-size-3: calc(var(--space-4) * 1.175);
-  --content-icon-size-4: var(--space-5);
+  --content-icon-size-1: calc(var(--space-5) * 0.55);
+  --content-icon-size-2: calc(var(--space-6) * 0.525);
+  --content-icon-size-3: calc(var(--space-7) * 0.5125);
+  --content-icon-size-4: calc(var(--space-8) * 0.5);
   --indicator-icon-size-1: calc(9px * var(--scaling));
   --indicator-icon-size-2: calc(10px * var(--scaling));
   --indicator-icon-size-3: calc(12px * var(--scaling));
@@ -3383,7 +3359,6 @@
   --progress-shine-width-multiplier: 4;
   --progress-gradient-stop-start: 25%;
   --progress-gradient-stop-end: 75%;
-  --progress-border-radius-factor: 3;
   --progress-scale-initial: 0.01;
   --progress-scale-step-1: 0.1;
   --progress-scale-step-2: 0.6;
@@ -3393,29 +3368,32 @@
   --progress-timing-step-2: 30%;
   --progress-timing-step-3: 40%;
   --progress-timing-step-4: 50%;
-  --slider-thumb-hit-area-multiplier: 3;
+  --slider-thumb-hit-area-multiplier: 2;
   --slider-thumb-inset-factor: 0.25;
-  --slider-track-radius-factor: 3;
   --slider-focus-ring-inner: 3px;
   --slider-focus-ring-outer: 5px;
   --slider-classic-inset-offset: 1.5px;
+  --progress-slider-height-1: var(--space-1);
+  --progress-slider-height-2: calc(var(--space-1) * 1.5);
+  --progress-slider-height-3: var(--space-2);
+  --progress-slider-height-4: calc(var(--space-2) * 1.25);
+  --progress-slider-radius-1: var(--radius-1);
+  --progress-slider-radius-2: var(--radius-2);
+  --progress-slider-radius-3: var(--radius-3);
+  --progress-slider-radius-4: var(--radius-4);
   --size-multiplier-small: 0.75;
   --size-multiplier-large: 1.25;
-  --opacity-disabled: 0.5;
-  --opacity-soft-variant: 0.75;
-  --opacity-high-contrast: 0.8;
+  --opacity-disabled: var(--opacity-5);
+  --opacity-soft-variant: var(--opacity-8);
+  --opacity-high-contrast: var(--opacity-8);
   --position-center: 50%;
   --position-full: 100%;
   --position-negative-full: -100%;
   --position-zero: 0%;
-  --transition-backdrop-filter: backdrop-filter var(--duration-2) var(--ease-1);
-  --transition-background-blur: background-color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
-  --transition-transform-progress: transform 120ms;
+  --transition-background-blur: background-color var(--duration-2) var(--ease-1);
   --spacing-multiplier-small: 0.5;
   --spacing-multiplier-medium: 0.75;
   --spacing-multiplier-large: 1.25;
-  --spacing-multiplier-extra-large: 1.5;
-  --spacing-multiplier-double: 2;
   --component-gap-1: var(--space-1);
   --component-gap-2: var(--space-2);
   --component-gap-3: var(--space-3);
@@ -3424,37 +3402,45 @@
   --component-gap-ghost-2: calc(var(--space-1) * 1.5);
   --component-gap-ghost-3: var(--space-2);
   --component-gap-ghost-4: var(--space-2);
-  --font-size-multiplier-badge: 0.8;
-  --font-size-multiplier-kbd: 0.8;
-  --radius-multiplier-compact: 0.35em;
-  --radius-multiplier-standard: 1em;
   --focus-outline-width: 2px;
   --focus-outline-offset: 2px;
   --focus-outline-offset-inset: -1px;
   --padding-ratio-horizontal: 1.5;
-  --padding-ratio-ghost: 0.25;
-  --scale-active: 0.98;
-  --scale-pressed: 0.96;
-  --scale-normal: 1;
-  --backdrop-filter-nested-disabled: none;
-  --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
-  --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
-  --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity-light));
+  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity));
   --color-surface-solid: white;
-  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity-light));
+  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
-  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity-light));
+  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
   --color-transparent: rgb(0 0 0 / 0);
-  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
-  --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --shadow-3: 0 0 0 1px var(--gray-a4), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
+  --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
+  --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
   --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
   --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
   --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+  --blur-factor: 1;
+  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
+  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
+  --blur-3: calc(8px * var(--scaling) * var(--blur-factor));
+  --blur-4: calc(12px * var(--scaling) * var(--blur-factor));
+  --blur-5: calc(16px * var(--scaling) * var(--blur-factor));
+  --blur-6: calc(20px * var(--scaling) * var(--blur-factor));
+  --blur-7: calc(28px * var(--scaling) * var(--blur-factor));
+  --blur-8: calc(36px * var(--scaling) * var(--blur-factor));
+  --blur-9: calc(44px * var(--scaling) * var(--blur-factor));
+  --opacity-factor: 1;
+  --opacity-1: calc(0.1 * var(--opacity-factor));
+  --opacity-2: calc(0.2 * var(--opacity-factor));
+  --opacity-3: calc(0.3 * var(--opacity-factor));
+  --opacity-4: calc(0.4 * var(--opacity-factor));
+  --opacity-5: calc(0.5 * var(--opacity-factor));
+  --opacity-6: calc(0.6 * var(--opacity-factor));
+  --opacity-7: calc(0.7 * var(--opacity-factor));
+  --opacity-8: calc(0.8 * var(--opacity-factor));
+  --opacity-9: calc(0.9 * var(--opacity-factor));
 }
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
@@ -3491,14 +3477,14 @@
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-mix-percentage), transparent);
-  --color-surface-solid: var(--gray-1);
-  --color-surface-translucent: rgba(0, 0, 0, var(--surface-opacity-dark));
+  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-opacity-percentage), transparent);
+  --color-surface-solid: var(--gray-2)  ;
+  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
-  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-mix-percentage), transparent);
-  --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
-  --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-  --shadow-3: 0 0 0 1px var(--gray-a7), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
+  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
+  --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
+  --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
   --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
   --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
   --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
@@ -3559,7 +3545,7 @@
   --backdrop-filter-components: none;
   --backdrop-filter-dialog: none;
 }
-.radix-themes:where([data-panel-background='translucent']) {
+.radix-themes:where([data-panel-background='translucent'], [data-material='translucent']) {
   --color-panel: var(--color-panel-translucent);
   --color-surface: var(--color-surface-translucent);
   --color-dialog: var(--color-dialog-translucent);
@@ -4516,31 +4502,47 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
-  --duration-1: 75ms;
-  --duration-2: 125ms;
-  --duration-3: 175ms;
-  --duration-4: 225ms;
-  --duration-5: 325ms;
+  --duration-1: 50ms;
+  --duration-2: 75ms;
+  --duration-3: 100ms;
+  --duration-4: 150ms;
+  --duration-5: 200ms;
+  --duration-spring-1: 200ms;
+  --duration-spring-2: 250ms;
+  --duration-spring-3: 300ms;
   --ease-1: ease-out;
   --ease-2: ease-in-out;
   --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --transition-fast: var(--duration-2) var(--ease-1);
   --transition-standard: var(--duration-3) var(--ease-2);
   --transition-slow: var(--duration-4) var(--ease-3);
-  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
-  --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
-  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
+  --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
+  --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
+  --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
+  --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-3);
+  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
+  --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
+  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
   --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
-  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
+  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
   --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
   --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color var(--duration-2) var(--ease-1);
-  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
   --transition-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
   --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
   --transition-progress: transform var(--duration-2) var(--ease-1);
+  --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
+  --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
+  --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
+  --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
+  --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
   --font-size-0: calc(10px * var(--scaling));
   --font-size-1: calc(12px * var(--scaling));
   --font-size-2: calc(14px * var(--scaling));
@@ -4551,10 +4553,14 @@
   --font-size-7: calc(28px * var(--scaling));
   --font-size-8: calc(35px * var(--scaling));
   --font-size-9: calc(60px * var(--scaling));
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
   --line-height-0: calc(12px * var(--scaling));
   --line-height-1: calc(16px * var(--scaling));
   --line-height-2: calc(20px * var(--scaling));
@@ -4575,7 +4581,7 @@
   --letter-spacing-7: -0.0075em;
   --letter-spacing-8: -0.01em;
   --letter-spacing-9: -0.025em;
-  --default-font-family: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-family: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --default-font-size: var(--font-size-3);
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -4599,7 +4605,7 @@
   --heading-line-height-7: calc(36px * var(--scaling));
   --heading-line-height-8: calc(40px * var(--scaling));
   --heading-line-height-9: calc(60px * var(--scaling));
-  --code-font-family: var(--font-geist-mono, 'Geist Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-family: var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
   --code-font-weight: inherit;
@@ -4611,7 +4617,7 @@
   --strong-font-family: var(--default-font-family);
   --strong-font-size-adjust: 1;
   --strong-font-style: inherit;
-  --strong-font-weight: var(--font-weight-bold);
+  --strong-font-weight: var(--font-weight-medium);
   --strong-letter-spacing: 0em;
   --em-font-family: 'Times New Roman', 'Times', serif;
   --em-font-size-adjust: 1.18;
@@ -4657,10 +4663,10 @@
   --scaling: 1.1;
 }
 [data-radius] {
-  --radius-1: calc(7px * var(--scaling) * var(--radius-factor));
-  --radius-2: calc(10px * var(--scaling) * var(--radius-factor));
-  --radius-3: calc(12px * var(--scaling) * var(--radius-factor));
-  --radius-4: calc(14px * var(--scaling) * var(--radius-factor));
+  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
   --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
   --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
   --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
@@ -4670,47 +4676,42 @@
 [data-radius='none'] {
   --radius-factor: 0;
   --radius-full: 0px;
-  --radius-thumb: 0.5px;
 }
 [data-radius='small'] {
   --radius-factor: 0.75;
   --radius-full: 0px;
-  --radius-thumb: 0.5px;
 }
 [data-radius='medium'] {
   --radius-factor: 1;
   --radius-full: 0px;
-  --radius-thumb: 9999px;
 }
 [data-radius='large'] {
   --radius-factor: 1.5;
   --radius-full: 0px;
-  --radius-thumb: 9999px;
 }
 [data-radius='full'] {
-  --radius-factor: 1.5;
+  --radius-factor: 2.0;
   --radius-full: 9999px;
-  --radius-thumb: 9999px;
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {
-    --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a4), var(--gray-4) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+    --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
   }
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :is(.dark, .dark-theme),
   :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-    --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+    --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4720,9 +4721,17 @@
     --duration-3: 0ms;
     --duration-4: 0ms;
     --duration-5: 0ms;
+    --duration-spring-1: 0ms;
+    --duration-spring-2: 0ms;
+    --duration-spring-3: 0ms;
     --transition-fast: none;
     --transition-standard: none;
     --transition-slow: none;
+    --transition-spring-fast: none;
+    --transition-spring-standard: none;
+    --transition-spring-slow: none;
+    --transition-spring-bounce: none;
+    --transition-spring-elastic: none;
     --transition-button: none;
     --transition-text-field: none;
     --transition-select: none;
@@ -4735,6 +4744,11 @@
     --transition-radio: none;
     --transition-focus: none;
     --transition-progress: none;
+    --transition-accordion-content: none;
+    --transition-accordion-trigger: none;
+    --transition-accordion-trigger-active: none;
+    --transition-spring-gpu: none;
+    --transition-spring-gpu-fast: none;
   }
 }
 @font-face {
@@ -4891,3 +4905,33 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
+[data-blur='none'] {
+  --blur-factor: 0;
+}
+[data-blur='small'] {
+  --blur-factor: 0.75;
+}
+[data-blur='medium'] {
+  --blur-factor: 1;
+}
+[data-blur='large'] {
+  --blur-factor: 1.5;
+}
+[data-blur='extra'] {
+  --blur-factor: 2.0;
+}
+[data-opacity='none'] {
+  --opacity-factor: 0;
+}
+[data-opacity='subtle'] {
+  --opacity-factor: 0.5;
+}
+[data-opacity='medium'] {
+  --opacity-factor: 1;
+}
+[data-opacity='strong'] {
+  --opacity-factor: 1.5;
+}
+[data-opacity='full'] {
+  --opacity-factor: 2.0;
+}

package/utilities.css

@@ -10864,6 +10864,12 @@
         max-width: var(--max-width-xl);
     }
 }
+.rt-r-weight-thin {
+    font-weight: var(--font-weight-thin);
+}
+.rt-r-weight-extralight {
+    font-weight: var(--font-weight-extralight);
+}
 .rt-r-weight-light {
     font-weight: var(--font-weight-light);
 }
@@ -10873,10 +10879,22 @@
 .rt-r-weight-medium {
     font-weight: var(--font-weight-medium);
 }
+.rt-r-weight-semibold {
+    font-weight: var(--font-weight-semibold);
+}
 .rt-r-weight-bold {
     font-weight: var(--font-weight-bold);
 }
+.rt-r-weight-extrabold {
+    font-weight: var(--font-weight-extrabold);
+}
 @media (min-width: 520px) {
+    .xs\:rt-r-weight-thin {
+        font-weight: var(--font-weight-thin);
+    }
+    .xs\:rt-r-weight-extralight {
+        font-weight: var(--font-weight-extralight);
+    }
     .xs\:rt-r-weight-light {
         font-weight: var(--font-weight-light);
     }
@@ -10886,11 +10904,23 @@
     .xs\:rt-r-weight-medium {
         font-weight: var(--font-weight-medium);
     }
+    .xs\:rt-r-weight-semibold {
+        font-weight: var(--font-weight-semibold);
+    }
     .xs\:rt-r-weight-bold {
         font-weight: var(--font-weight-bold);
     }
+    .xs\:rt-r-weight-extrabold {
+        font-weight: var(--font-weight-extrabold);
+    }
 }
 @media (min-width: 768px) {
+    .sm\:rt-r-weight-thin {
+        font-weight: var(--font-weight-thin);
+    }
+    .sm\:rt-r-weight-extralight {
+        font-weight: var(--font-weight-extralight);
+    }
     .sm\:rt-r-weight-light {
         font-weight: var(--font-weight-light);
     }
@@ -10900,11 +10930,23 @@
     .sm\:rt-r-weight-medium {
         font-weight: var(--font-weight-medium);
     }
+    .sm\:rt-r-weight-semibold {
+        font-weight: var(--font-weight-semibold);
+    }
     .sm\:rt-r-weight-bold {
         font-weight: var(--font-weight-bold);
     }
+    .sm\:rt-r-weight-extrabold {
+        font-weight: var(--font-weight-extrabold);
+    }
 }
 @media (min-width: 1024px) {
+    .md\:rt-r-weight-thin {
+        font-weight: var(--font-weight-thin);
+    }
+    .md\:rt-r-weight-extralight {
+        font-weight: var(--font-weight-extralight);
+    }
     .md\:rt-r-weight-light {
         font-weight: var(--font-weight-light);
     }
@@ -10914,11 +10956,23 @@
     .md\:rt-r-weight-medium {
         font-weight: var(--font-weight-medium);
     }
+    .md\:rt-r-weight-semibold {
+        font-weight: var(--font-weight-semibold);
+    }
     .md\:rt-r-weight-bold {
         font-weight: var(--font-weight-bold);
     }
+    .md\:rt-r-weight-extrabold {
+        font-weight: var(--font-weight-extrabold);
+    }
 }
 @media (min-width: 1280px) {
+    .lg\:rt-r-weight-thin {
+        font-weight: var(--font-weight-thin);
+    }
+    .lg\:rt-r-weight-extralight {
+        font-weight: var(--font-weight-extralight);
+    }
     .lg\:rt-r-weight-light {
         font-weight: var(--font-weight-light);
     }
@@ -10928,11 +10982,23 @@
     .lg\:rt-r-weight-medium {
         font-weight: var(--font-weight-medium);
     }
+    .lg\:rt-r-weight-semibold {
+        font-weight: var(--font-weight-semibold);
+    }
     .lg\:rt-r-weight-bold {
         font-weight: var(--font-weight-bold);
     }
+    .lg\:rt-r-weight-extrabold {
+        font-weight: var(--font-weight-extrabold);
+    }
 }
 @media (min-width: 1640px) {
+    .xl\:rt-r-weight-thin {
+        font-weight: var(--font-weight-thin);
+    }
+    .xl\:rt-r-weight-extralight {
+        font-weight: var(--font-weight-extralight);
+    }
     .xl\:rt-r-weight-light {
         font-weight: var(--font-weight-light);
     }
@@ -10942,9 +11008,15 @@
     .xl\:rt-r-weight-medium {
         font-weight: var(--font-weight-medium);
     }
+    .xl\:rt-r-weight-semibold {
+        font-weight: var(--font-weight-semibold);
+    }
     .xl\:rt-r-weight-bold {
         font-weight: var(--font-weight-bold);
     }
+    .xl\:rt-r-weight-extrabold {
+        font-weight: var(--font-weight-extrabold);
+    }
 }
 .rt-r-lt-normal::before,
 .rt-r-lt-end::before,