rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/Dropdown/styles/index.css

@@ -3,6 +3,26 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-md: 1rem;
+  --rs-text-line-height-xs: calc(1 / 0.75);
+  --rs-spacing: 0.25rem;
+  --rs-radius-sm: 0.25rem;
+  --rs-radius-md: 0.375rem;
+  --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-none: 0 0 #0000;
+  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -17,7 +37,6 @@
   --rs-gray-800: #343434;
   --rs-gray-900: #121212;
   --rs-primary-50: #f2faff;
-  --rs-primary-100: #cce9ff;
   --rs-primary-200: #a6d7ff;
   --rs-primary-400: #59afff;
   --rs-primary-500: #3498ff;
@@ -76,11 +95,12 @@
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-disabled: var(--rs-gray-600);
-  --rs-border-primary: var(--rs-gray-200);
+  --rs-border-secondary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-0);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-50);
   --rs-btn-default-text: var(--rs-gray-800);
+  --rs-btn-default-border-color: var(--rs-gray-200);
   --rs-btn-default-hover-bg: var(--rs-gray-200);
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
@@ -88,6 +108,7 @@
   --rs-btn-default-disabled-text: var(--rs-gray-600);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-0);
+  --rs-btn-primary-border-color: var(--rs-primary-600);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
   --rs-btn-primary-active-bg: var(--rs-primary-700);
   --rs-btn-subtle-text: var(--rs-gray-800);
@@ -105,16 +126,15 @@
   --rs-btn-link-text: var(--rs-primary-700);
   --rs-btn-link-hover-text: var(--rs-primary-800);
   --rs-btn-link-active-text: var(--rs-primary-900);
+  --rs-divider-border: var(--rs-gray-200);
   --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 80%);
   --rs-loader-rotor: var(--rs-gray-500);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-loader-rotor-inverse: var(--rs-gray-0);
-  --rs-dropdown-divider: var(--rs-gray-200);
-  --rs-dropdown-item-bg-active: var(--rs-primary-50);
-  --rs-dropdown-item-text-active: var(--rs-primary-700);
+  --rs-menuitem-bg-active: var(--rs-primary-50);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
-  --rs-menuitem-active-bg: rgb(from var(--rs-primary-100) r g b / 50%);
+  --rs-menuitem-text-active: var(--rs-primary-700);
+  --rs-menuitem-active-bg: var(--rs-gray-100);
   --rs-menuitem-active-text: var(--rs-primary-700);
 }
 @supports not (color: rgb(from white r g b)) {
@@ -123,7 +143,6 @@
     --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
     --rs-loader-ring: rgba(247, 247, 250, 0.8);
     --rs-loader-ring-inverse: rgba(247, 247, 250, 0.3);
-    --rs-menuitem-active-bg: rgba(204, 233, 255, 0.5);
   }
 }
 .rs-theme-dark {
@@ -139,7 +158,6 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-50: #f2fcff;
-  --rs-primary-100: #ccf3ff;
   --rs-primary-200: #a6e9ff;
   --rs-primary-400: #59d0ff;
   --rs-primary-500: #34c3ff;
@@ -198,11 +216,12 @@
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-disabled: var(--rs-gray-400);
-  --rs-border-primary: var(--rs-gray-600);
+  --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-700);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-600);
   --rs-btn-default-text: var(--rs-gray-50);
+  --rs-btn-default-border-color: var(--rs-gray-700);
   --rs-btn-default-hover-bg: var(--rs-gray-500);
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-0);
@@ -210,6 +229,7 @@
   --rs-btn-default-disabled-text: var(--rs-gray-400);
   --rs-btn-primary-bg: var(--rs-primary-700);
   --rs-btn-primary-text: var(--rs-gray-0);
+  --rs-btn-primary-border-color: var(--rs-primary-800);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
   --rs-btn-primary-active-bg: var(--rs-primary-400);
   --rs-btn-subtle-text: var(--rs-gray-200);
@@ -227,15 +247,14 @@
   --rs-btn-link-text: var(--rs-primary-500);
   --rs-btn-link-hover-text: var(--rs-primary-400);
   --rs-btn-link-active-text: var(--rs-primary-200);
+  --rs-divider-border: var(--rs-gray-600);
   --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-loader-rotor: var(--rs-gray-0);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 80%);
   --rs-loader-rotor-inverse: var(--rs-gray-500);
-  --rs-dropdown-divider: var(--rs-gray-600);
-  --rs-dropdown-item-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-dropdown-item-text-active: var(--rs-primary-500);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 3px rgba(0, 0, 0, 0.24);
+  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active: var(--rs-primary-500);
   --rs-menuitem-active-bg: var(--rs-gray-600);
   --rs-menuitem-active-text: currentColor;
 }
@@ -244,7 +263,7 @@
     --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
-    --rs-dropdown-item-bg-active: rgba(0, 97, 153, 0.2);
+    --rs-menuitem-bg-active: rgba(0, 97, 153, 0.2);
   }
 }
 .rs-theme-high-contrast {
@@ -260,7 +279,6 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-50: #fffef2;
-  --rs-primary-100: #fffbc2;
   --rs-primary-200: #fffa91;
   --rs-primary-400: #fffc30;
   --rs-primary-500: #ffff00;
@@ -319,12 +337,12 @@
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-disabled: var(--rs-gray-400);
-  --rs-border-primary: var(--rs-gray-100);
+  --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
-  --rs-btn-default-border: 1px solid var(--rs-primary-500);
+  --rs-btn-default-border-color: var(--rs-primary-500);
   --rs-btn-default-hover-bg: transparent;
   --rs-btn-default-hover-text: var(--rs-primary-400);
   --rs-btn-default-active-bg: transparent;
@@ -351,15 +369,14 @@
   --rs-btn-link-text: var(--rs-primary-500);
   --rs-btn-link-hover-text: var(--rs-primary-400);
   --rs-btn-link-active-text: var(--rs-primary-200);
+  --rs-divider-border: var(--rs-gray-600);
   --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-loader-rotor: var(--rs-gray-0);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 80%);
   --rs-loader-rotor-inverse: var(--rs-gray-500);
-  --rs-dropdown-divider: var(--rs-gray-600);
-  --rs-dropdown-item-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-dropdown-item-text-active: var(--rs-primary-500);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 3px rgba(0, 0, 0, 0.24);
+  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active: var(--rs-primary-500);
   --rs-menuitem-active-bg: transparent;
   --rs-menuitem-active-text: var(--rs-primary-500);
 }
@@ -367,16 +384,30 @@
   .rs-theme-high-contrast {
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
-    --rs-dropdown-item-bg-active: rgba(143, 153, 0, 0.2);
+    --rs-menuitem-bg-active: rgba(143, 153, 0, 0.2);
   }
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
+:root {
+  --rs-btn-size-xs: 1.5rem;
+  --rs-btn-size-sm: 1.875rem;
+  --rs-btn-size-md: 2.25rem;
+  --rs-btn-size-lg: 2.625rem;
+  --rs-btn-font-size-xs: var(--rs-font-size-xs);
+  --rs-btn-font-size-sm: var(--rs-font-size-sm);
+  --rs-btn-font-size-md: var(--rs-font-size-sm);
+  --rs-btn-font-size-lg: var(--rs-font-size-md);
+  --rs-btn-line-height-xs: 1.25rem;
+  --rs-btn-line-height-sm: 1.25rem;
+  --rs-btn-line-height-md: 1.25rem;
+  --rs-btn-line-height-lg: 1.375rem;
+  --rs-btn-padding-inline-xs: calc(var(--rs-spacing) * 2);
+  --rs-btn-padding-inline-sm: calc(var(--rs-spacing) * 2.5);
+  --rs-btn-padding-inline-md: calc(var(--rs-spacing) * 3);
+  --rs-btn-padding-inline-lg: calc(var(--rs-spacing) * 3.5);
+  --rs-btn-padding-block-xs: calc(var(--rs-spacing) / 2);
+  --rs-btn-padding-block-sm: calc(var(--rs-spacing) * 1.25);
+  --rs-btn-padding-block-md: calc(var(--rs-spacing) * 2);
+  --rs-btn-padding-block-lg: calc(var(--rs-spacing) * 2.5);
 }
 .rs-btn {
   display: inline-flex;
@@ -384,59 +415,33 @@
   justify-content: center;
   margin-bottom: 0;
   font-weight: normal;
+  font-size: var(--rs-btn-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-btn-line-height, 1.25rem);
+  height: var(--rs-btn-size, 2.25rem);
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   white-space: nowrap;
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
-  border: var(--rs-btn-default-border, none);
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--rs-btn-default-border-color, none);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   text-decoration: none;
   color: var(--rs-btn-default-text);
   background-color: var(--rs-btn-default-bg);
-  border-radius: 6px;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 8px 12px;
+  border-radius: var(--rs-radius-md);
+  padding-inline: var(--rs-btn-padding-inline);
+  padding-block: var(--rs-btn-padding-block);
   overflow: hidden;
   position: relative;
 }
 .rs-theme-high-contrast .rs-btn {
   transition: none;
-}
-.rs-btn-ghost.rs-btn {
-  padding: 7px 11px;
-}
-.rs-btn-icon.rs-btn {
-  padding: 10px 10px;
-  line-height: 16px;
-}
-.rs-btn-icon.rs-btn > .rs-icon {
-  font-size: 16px;
-}
-.rs-btn-icon-with-text.rs-btn {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-btn > .rs-icon {
-  padding: 10px 10px;
-  width: 36px;
-  height: 36px;
-}
-.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left {
-  padding: 8px 12px 8px 48px;
-}
-.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-right {
-  padding: 8px 48px 8px 12px;
-}
-.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-right > .rs-icon {
-  right: 0;
-  border-left: var(--rs-btn-default-border, none);
+  border-width: 1px;
+  border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
   outline: 3px solid var(--rs-color-focus-ring);
@@ -471,18 +476,46 @@
     /* stylelint-enable */
   }
 }
+.rs-btn.rs-btn-lg {
+  --rs-btn-size: var(--rs-btn-size-lg);
+  --rs-btn-font-size: var(--rs-btn-font-size-lg);
+  --rs-btn-line-height: var(--rs-btn-line-height-lg);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-lg);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-lg);
+}
+.rs-btn.rs-btn-md {
+  --rs-btn-size: var(--rs-btn-size-md);
+  --rs-btn-font-size: var(--rs-btn-font-size-md);
+  --rs-btn-line-height: var(--rs-btn-line-height-md);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-md);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-md);
+}
+.rs-btn.rs-btn-sm {
+  --rs-btn-size: var(--rs-btn-size-sm);
+  --rs-btn-font-size: var(--rs-btn-font-size-sm);
+  --rs-btn-line-height: var(--rs-btn-line-height-sm);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-sm);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-sm);
+}
+.rs-btn.rs-btn-xs {
+  --rs-btn-size: var(--rs-btn-size-xs);
+  --rs-btn-font-size: var(--rs-btn-font-size-xs);
+  --rs-btn-line-height: var(--rs-btn-line-height-xs);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-xs);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-xs);
+}
 .rs-btn-start-icon {
   line-height: 0;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 .rs-btn-end-icon {
   line-height: 0;
-  margin-left: 5px;
+  margin-inline-start: 5px;
 }
 .rs-btn-primary {
   color: var(--rs-btn-primary-text);
   background-color: var(--rs-btn-primary-bg);
-  border: none;
+  border-color: var(--rs-btn-primary-border-color);
 }
 .rs-btn-primary:hover {
   color: var(--rs-btn-primary-text);
@@ -506,7 +539,6 @@
 .rs-btn-subtle {
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
-  border: none;
 }
 .rs-btn-subtle:hover {
   color: var(--rs-btn-subtle-hover-text);
@@ -529,7 +561,6 @@
 .rs-btn-link {
   color: var(--rs-btn-link-text);
   background-color: transparent;
-  border: none;
 }
 .rs-btn-link:hover {
   color: var(--rs-btn-link-hover-text);
@@ -556,6 +587,7 @@
   color: var(--rs-btn-ghost-text);
   background-color: transparent;
   border: 1px solid var(--rs-btn-ghost-border);
+  padding-inline: calc(var(--rs-btn-padding-inline) - 1px);
 }
 .rs-btn-ghost:hover {
   color: var(--rs-btn-ghost-hover-text);
@@ -575,7 +607,7 @@
   background-color: transparent;
   opacity: 0.3;
   border-color: var(--rs-btn-ghost-border);
-  box-shadow: none;
+  box-shadow: var(--rs-shadow-none);
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
@@ -585,6 +617,7 @@
   --rs-btn-primary-bg: var(--rs-red-500);
   --rs-btn-primary-hover-bg: var(--rs-red-700);
   --rs-btn-primary-active-bg: var(--rs-red-800);
+  --rs-btn-primary-border-color: var(--rs-red-700);
   --rs-btn-subtle-hover-bg: var(--rs-red-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-red-600);
@@ -603,6 +636,7 @@
   --rs-btn-primary-bg: var(--rs-red-700);
   --rs-btn-primary-hover-bg: var(--rs-red-500);
   --rs-btn-primary-active-bg: var(--rs-red-400);
+  --rs-btn-primary-border-color: var(--rs-red-800);
   --rs-btn-subtle-hover-bg: var(--rs-red-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-red-400);
@@ -639,6 +673,7 @@
   --rs-btn-primary-bg: var(--rs-orange-500);
   --rs-btn-primary-hover-bg: var(--rs-orange-700);
   --rs-btn-primary-active-bg: var(--rs-orange-800);
+  --rs-btn-primary-border-color: var(--rs-orange-700);
   --rs-btn-subtle-hover-bg: var(--rs-orange-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-orange-600);
@@ -657,6 +692,7 @@
   --rs-btn-primary-bg: var(--rs-orange-700);
   --rs-btn-primary-hover-bg: var(--rs-orange-500);
   --rs-btn-primary-active-bg: var(--rs-orange-400);
+  --rs-btn-primary-border-color: var(--rs-orange-800);
   --rs-btn-subtle-hover-bg: var(--rs-orange-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-orange-400);
@@ -693,6 +729,7 @@
   --rs-btn-primary-bg: var(--rs-yellow-500);
   --rs-btn-primary-hover-bg: var(--rs-yellow-700);
   --rs-btn-primary-active-bg: var(--rs-yellow-800);
+  --rs-btn-primary-border-color: var(--rs-yellow-700);
   --rs-btn-subtle-hover-bg: var(--rs-yellow-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-yellow-600);
@@ -711,6 +748,7 @@
   --rs-btn-primary-bg: var(--rs-yellow-700);
   --rs-btn-primary-hover-bg: var(--rs-yellow-500);
   --rs-btn-primary-active-bg: var(--rs-yellow-400);
+  --rs-btn-primary-border-color: var(--rs-yellow-800);
   --rs-btn-subtle-hover-bg: var(--rs-yellow-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-yellow-400);
@@ -747,6 +785,7 @@
   --rs-btn-primary-bg: var(--rs-green-500);
   --rs-btn-primary-hover-bg: var(--rs-green-700);
   --rs-btn-primary-active-bg: var(--rs-green-800);
+  --rs-btn-primary-border-color: var(--rs-green-700);
   --rs-btn-subtle-hover-bg: var(--rs-green-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-green-600);
@@ -765,6 +804,7 @@
   --rs-btn-primary-bg: var(--rs-green-700);
   --rs-btn-primary-hover-bg: var(--rs-green-500);
   --rs-btn-primary-active-bg: var(--rs-green-400);
+  --rs-btn-primary-border-color: var(--rs-green-800);
   --rs-btn-subtle-hover-bg: var(--rs-green-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-green-400);
@@ -801,6 +841,7 @@
   --rs-btn-primary-bg: var(--rs-cyan-500);
   --rs-btn-primary-hover-bg: var(--rs-cyan-700);
   --rs-btn-primary-active-bg: var(--rs-cyan-800);
+  --rs-btn-primary-border-color: var(--rs-cyan-700);
   --rs-btn-subtle-hover-bg: var(--rs-cyan-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-cyan-600);
@@ -819,6 +860,7 @@
   --rs-btn-primary-bg: var(--rs-cyan-700);
   --rs-btn-primary-hover-bg: var(--rs-cyan-500);
   --rs-btn-primary-active-bg: var(--rs-cyan-400);
+  --rs-btn-primary-border-color: var(--rs-cyan-800);
   --rs-btn-subtle-hover-bg: var(--rs-cyan-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-cyan-400);
@@ -855,6 +897,7 @@
   --rs-btn-primary-bg: var(--rs-blue-500);
   --rs-btn-primary-hover-bg: var(--rs-blue-700);
   --rs-btn-primary-active-bg: var(--rs-blue-800);
+  --rs-btn-primary-border-color: var(--rs-blue-700);
   --rs-btn-subtle-hover-bg: var(--rs-blue-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-blue-600);
@@ -873,6 +916,7 @@
   --rs-btn-primary-bg: var(--rs-blue-700);
   --rs-btn-primary-hover-bg: var(--rs-blue-500);
   --rs-btn-primary-active-bg: var(--rs-blue-400);
+  --rs-btn-primary-border-color: var(--rs-blue-800);
   --rs-btn-subtle-hover-bg: var(--rs-blue-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-blue-400);
@@ -909,6 +953,7 @@
   --rs-btn-primary-bg: var(--rs-violet-500);
   --rs-btn-primary-hover-bg: var(--rs-violet-700);
   --rs-btn-primary-active-bg: var(--rs-violet-800);
+  --rs-btn-primary-border-color: var(--rs-violet-700);
   --rs-btn-subtle-hover-bg: var(--rs-violet-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-violet-600);
@@ -927,6 +972,7 @@
   --rs-btn-primary-bg: var(--rs-violet-700);
   --rs-btn-primary-hover-bg: var(--rs-violet-500);
   --rs-btn-primary-active-bg: var(--rs-violet-400);
+  --rs-btn-primary-border-color: var(--rs-violet-800);
   --rs-btn-subtle-hover-bg: var(--rs-violet-600);
   --rs-btn-subtle-hover-text: #fff;
   --rs-btn-subtle-active-bg: var(--rs-violet-400);
@@ -959,154 +1005,6 @@
   --rs-btn-link-hover-text: var(--rs-violet-400);
   --rs-btn-link-active-text: var(--rs-violet-200);
 }
-.rs-btn-lg {
-  font-size: 16px;
-  line-height: 22px;
-  padding: 10px 16px;
-}
-.rs-btn-ghost.rs-btn-lg {
-  padding: 9px 15px;
-}
-.rs-btn-icon.rs-btn-lg {
-  padding: 11px 11px;
-  line-height: 20px;
-}
-.rs-btn-icon.rs-btn-lg > .rs-icon {
-  font-size: 20px;
-}
-.rs-btn-icon-with-text.rs-btn-lg {
-  line-height: 22px;
-}
-.rs-btn-icon-with-text.rs-btn-lg > .rs-icon {
-  padding: 11px 11px;
-  width: 42px;
-  height: 42px;
-}
-.rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-left {
-  padding: 10px 16px 10px 58px;
-}
-.rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-right {
-  padding: 10px 58px 10px 16px;
-}
-.rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-right > .rs-icon {
-  right: 0;
-  border-left: var(--rs-btn-default-border, none);
-}
-.rs-btn-md {
-  font-size: 14px;
-  line-height: 20px;
-  padding: 8px 12px;
-}
-.rs-btn-ghost.rs-btn-md {
-  padding: 7px 11px;
-}
-.rs-btn-icon.rs-btn-md {
-  padding: 10px 10px;
-  line-height: 16px;
-}
-.rs-btn-icon.rs-btn-md > .rs-icon {
-  font-size: 16px;
-}
-.rs-btn-icon-with-text.rs-btn-md {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-btn-md > .rs-icon {
-  padding: 10px 10px;
-  width: 36px;
-  height: 36px;
-}
-.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-left {
-  padding: 8px 12px 8px 48px;
-}
-.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-right {
-  padding: 8px 48px 8px 12px;
-}
-.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-right > .rs-icon {
-  right: 0;
-  border-left: var(--rs-btn-default-border, none);
-}
-.rs-btn-sm {
-  font-size: 14px;
-  line-height: 20px;
-  padding: 5px 10px;
-}
-.rs-btn-ghost.rs-btn-sm {
-  padding: 4px 9px;
-}
-.rs-btn-icon.rs-btn-sm {
-  padding: 7px 7px;
-  line-height: 16px;
-}
-.rs-btn-icon.rs-btn-sm > .rs-icon {
-  font-size: 16px;
-}
-.rs-btn-icon-with-text.rs-btn-sm {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-btn-sm > .rs-icon {
-  padding: 7px 7px;
-  width: 30px;
-  height: 30px;
-}
-.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left {
-  padding: 5px 10px 5px 40px;
-}
-.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-right {
-  padding: 5px 40px 5px 10px;
-}
-.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-right > .rs-icon {
-  right: 0;
-  border-left: var(--rs-btn-default-border, none);
-}
-.rs-btn-xs {
-  font-size: 12px;
-  line-height: 20px;
-  padding: 2px 8px;
-}
-.rs-btn-ghost.rs-btn-xs {
-  padding: 1px 7px;
-}
-.rs-btn-icon.rs-btn-xs {
-  padding: 6px 6px;
-  line-height: 12px;
-}
-.rs-btn-icon.rs-btn-xs > .rs-icon {
-  font-size: 12px;
-}
-.rs-btn-icon-with-text.rs-btn-xs {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-btn-xs > .rs-icon {
-  padding: 6px 6px;
-  width: 24px;
-  height: 24px;
-}
-.rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-left {
-  padding: 2px 8px 2px 32px;
-}
-.rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-right {
-  padding: 2px 32px 2px 8px;
-}
-.rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-right > .rs-icon {
-  right: 0;
-  border-left: var(--rs-btn-default-border, none);
-}
 .rs-btn-block {
   width: 100%;
 }
@@ -1127,10 +1025,10 @@
   height: 18px;
   margin: auto;
   top: 0;
-  right: 0;
   bottom: 0;
-  left: 0;
-  border-radius: 50%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  border-radius: var(--rs-radius-full);
   z-index: 1;
 }
 .rs-btn-xs.rs-btn-loading > .rs-btn-spin::before,
@@ -1167,17 +1065,9 @@
     transform: rotate(360deg);
   }
 }
-.rs-dropdown-toggle-caret {
-  display: flex;
-  align-items: center;
-  margin-left: 2px;
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  height: 20px;
-  font-size: 12px;
-}
 .rs-dropdown {
+  --rs-dropdown-divider-color: var(--rs-divider-border);
+  --rs-dropdown-shadow: var(--rs-shadow-md);
   position: relative;
   display: inline-block;
   vertical-align: middle;
@@ -1212,51 +1102,30 @@
 .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn .rs-ripple-pond {
   display: none !important;
 }
-.rs-dropdown-toggle.rs-btn-lg {
-  padding-right: 36px !important;
-}
-.rs-dropdown-toggle.rs-btn-lg .rs-dropdown-toggle-caret {
-  top: 10px;
-  right: 16px;
-  font-size: 14px;
-}
-.rs-dropdown-toggle.rs-btn-sm {
-  padding-right: 30px !important;
-}
-.rs-dropdown-toggle.rs-btn-sm .rs-dropdown-toggle-caret {
-  top: 5px;
-  right: 10px;
-  font-size: 10px;
-}
-.rs-dropdown-toggle.rs-btn-xs {
-  padding-right: 28px !important;
-}
-.rs-dropdown-toggle.rs-btn-xs .rs-dropdown-toggle-caret {
-  top: 2px;
-  right: 8px;
-  font-size: 8px;
-}
 .rs-dropdown-toggle,
 .rs-dropdown-toggle.rs-btn {
   position: relative;
   z-index: 5;
-  padding-right: 32px;
-  display: inline-block;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: calc(var(--rs-spacing) * 1.5);
 }
 .rs-dropdown-toggle.rs-dropdown-toggle-no-caret {
-  padding-right: 12px;
+  padding-inline-end: 12px;
 }
 .rs-dropdown-menu {
+  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
+  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
+  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);
   margin: 0;
   list-style: none;
-  font-size: 14px;
-  text-align: left;
+  font-size: var(--rs-font-size-sm);
+  text-align: start;
   background-color: var(--rs-bg-overlay);
-  border-radius: 6px;
-  padding: 6px 0;
+  border-radius: var(--rs-radius-md);
+  padding: var(--rs-menu-padding);
   outline: 0;
 }
 .rs-dropdown-menu:focus-visible {
@@ -1268,12 +1137,12 @@
 .rs-dropdown .rs-dropdown-menu {
   position: absolute;
   z-index: 6;
-  float: left;
+  float: inline-start;
   box-shadow: var(--rs-dropdown-shadow);
   outline: none;
 }
 .rs-theme-high-contrast .rs-dropdown .rs-dropdown-menu {
-  border: 1px solid var(--rs-border-primary);
+  border: 1px solid var(--rs-border-secondary);
 }
 .rs-dropdown-menu[hidden] {
   display: none;
@@ -1282,12 +1151,14 @@
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 6px;
-  padding: 8px 12px;
+  gap: var(--rs-menuitem-spacing);
+  padding-inline: var(--rs-menuitem-padding-inline);
+  padding-block: var(--rs-menuitem-padding-block);
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
   color: var(--rs-text-primary);
+  border-radius: var(--rs-radius-sm);
   white-space: nowrap;
   cursor: pointer;
   text-decoration: none;
@@ -1299,10 +1170,12 @@
 }
 .rs-dropdown-item-content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 .rs-dropdown-item .rs-dropdown-item-shortcut {
-  margin-inline-start: 20px;
   border: none;
+  line-height: var(--rs-text-line-height-xs);
 }
 .rs-dropdown-item > .rs-icon {
   width: 14px;
@@ -1315,13 +1188,13 @@
 .rs-dropdown-item.rs-dropdown-item-active,
 .rs-dropdown-item.rs-dropdown-item-active:hover,
 .rs-dropdown-item.rs-dropdown-item-active:focus {
-  color: var(--rs-dropdown-item-text-active);
-  background-color: var(--rs-dropdown-item-bg-active);
+  color: var(--rs-menuitem-text-active);
+  background-color: var(--rs-menuitem-bg-active);
 }
 .rs-dropdown-item.rs-dropdown-item-active .rs-text,
 .rs-dropdown-item.rs-dropdown-item-active:hover .rs-text,
 .rs-dropdown-item.rs-dropdown-item-active:focus .rs-text {
-  color: var(--rs-dropdown-item-text-active);
+  color: var(--rs-menuitem-text-active);
 }
 .rs-dropdown-item:focus-visible,
 .rs-dropdown-item.rs-dropdown-item-focus {
@@ -1339,7 +1212,6 @@
 .rs-dropdown-item-disabled {
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: var(--rs-text-disabled);
@@ -1352,9 +1224,9 @@
 }
 .rs-dropdown-item-divider {
   height: 1px;
-  margin: 6px 0;
+  margin-block: var(--rs-menuitem-divider-margin-block);
   overflow: hidden;
-  background-color: var(--rs-dropdown-divider);
+  background-color: var(--rs-dropdown-divider-color);
 }
 .rs-dropdown-item-submenu {
   position: relative;
@@ -1377,24 +1249,24 @@
 }
 .rs-dropdown-item-submenu.rs-dropdown-item > .rs-dropdown-menu {
   position: absolute;
-  top: -6px;
+  top: 0;
 }
 .rs-dropdown-item.rs-dropdown-item-submenu {
   padding: 0;
 }
 .rs-dropdown-item.rs-dropdown-item-submenu .rs-dropdown-item-toggle {
   padding: 8px 12px;
-  padding-right: 27px;
+  padding-inline-end: 27px;
 }
 .rs-dropdown-item.rs-dropdown-item-submenu .rs-dropdown-menu-toggle-icon {
-  right: 9px;
+  inset-inline-end: 9px;
 }
 .rs-dropdown-item-submenu .rs-dropdown-menu {
-  left: 100%;
+  inset-inline-start: 100%;
 }
 .rs-dropdown-item-submenu .rs-dropdown-menu[data-direction='start'] {
-  left: unset;
-  right: 100%;
+  inset-inline-start: unset;
+  inset-inline-end: 100%;
 }
 .rs-dropdown-item-submenu.rs-dropdown-item-open > .rs-dropdown-menu {
   display: table;
@@ -1403,7 +1275,7 @@
 }
 .rs-dropdown-menu > .rs-dropdown-menu-item-focus {
   outline: 0;
-  background-color: var(--rs-dropdown-item-bg-active);
+  background-color: var(--rs-menuitem-bg-active);
 }
 .rs-dropdown-menu > .rs-dropdown-menu-item-focus:hover,
 .rs-dropdown-menu > .rs-dropdown-menu-item-focus:focus {
@@ -1418,48 +1290,49 @@
 .rs-dropdown-open > .rs-dropdown-menu {
   animation-play-state: running;
 }
-.rs-dropdown-open.rs-dropdown-placement-top-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-top-end > .rs-dropdown-menu {
+.rs-dropdown-open > a {
+  outline: 0;
+}
+.rs-dropdown-open[data-placement="top-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="top-end"] > .rs-dropdown-menu {
   bottom: 100%;
 }
-.rs-dropdown-open.rs-dropdown-placement-left-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-left-end > .rs-dropdown-menu {
-  right: 100%;
+.rs-dropdown-open[data-placement="bottom-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="bottom-end"] > .rs-dropdown-menu {
+  top: 100%;
 }
-.rs-dropdown-open.rs-dropdown-placement-right-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-right-end > .rs-dropdown-menu {
-  left: 100%;
+.rs-dropdown-open[data-placement="left-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="left-end"] > .rs-dropdown-menu {
+  inset-inline-end: 100%;
 }
-.rs-dropdown-open.rs-dropdown-placement-bottom-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-bottom-end > .rs-dropdown-menu {
-  top: 100%;
+.rs-dropdown-open[data-placement="right-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="right-end"] > .rs-dropdown-menu {
+  inset-inline-start: 100%;
 }
-.rs-dropdown-open.rs-dropdown-placement-top-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-bottom-start > .rs-dropdown-menu {
-  left: 0;
+.rs-dropdown-open[data-placement="top-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="bottom-start"] > .rs-dropdown-menu {
+  inset-inline-start: 0;
 }
-.rs-dropdown-open.rs-dropdown-placement-top-end > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-bottom-end > .rs-dropdown-menu {
-  right: 0;
+.rs-dropdown-open[data-placement="top-end"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="bottom-end"] > .rs-dropdown-menu {
+  inset-inline-end: 0;
 }
-.rs-dropdown-open.rs-dropdown-placement-left-start > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-right-start > .rs-dropdown-menu {
+.rs-dropdown-open[data-placement="left-start"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="right-start"] > .rs-dropdown-menu {
   top: 0;
 }
-.rs-dropdown-open.rs-dropdown-placement-right-end > .rs-dropdown-menu,
-.rs-dropdown-open.rs-dropdown-placement-left-end > .rs-dropdown-menu {
+.rs-dropdown-open[data-placement="left-end"] > .rs-dropdown-menu,
+.rs-dropdown-open[data-placement="right-end"] > .rs-dropdown-menu {
   bottom: 0;
 }
-.rs-dropdown-open > a {
-  outline: 0;
-}
 .rs-dropdown-header {
   display: block;
   padding: 8px 12px;
   line-height: 1.42857143;
   color: var(--rs-dropdown-header-text);
-  border-bottom: 1px solid var(--rs-border-primary);
+  border-bottom: 1px solid var(--rs-dropdown-divider-color);
   white-space: nowrap;
+  margin-bottom: 2px;
 }
 @keyframes slideUpIn {
   0% {