rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/Stat/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-font-size-2xl: 1.5rem;
+  --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;
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -13,6 +33,7 @@
   --rs-gray-400: #b6b7b8;
   --rs-gray-500: #939393;
   --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
   --rs-gray-800: #343434;
   --rs-gray-900: #121212;
   --rs-primary-100: #cce9ff;
@@ -87,6 +108,7 @@
   --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);
@@ -94,6 +116,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);
@@ -142,6 +165,7 @@
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-100: #ccf3ff;
@@ -216,6 +240,7 @@
   --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);
@@ -223,6 +248,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);
@@ -270,6 +296,7 @@
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-100: #fffbc2;
@@ -344,7 +371,7 @@
   --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;
@@ -391,13 +418,31 @@
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
   }
 }
-/* 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-icon-size-xs: 0.75rem;
+  --rs-btn-icon-size-sm: 1rem;
+  --rs-btn-icon-size-md: 1rem;
+  --rs-btn-icon-size-lg: 1.25rem;
 }
 .rs-btn {
   display: inline-flex;
@@ -405,59 +450,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);
@@ -492,18 +511,50 @@
     /* 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-icon-size: var(--rs-btn-icon-size-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-icon-size: var(--rs-btn-icon-size-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-icon-size: var(--rs-btn-icon-size-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-icon-size: var(--rs-btn-icon-size-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);
@@ -527,7 +578,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);
@@ -550,7 +600,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);
@@ -577,6 +626,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);
@@ -596,7 +646,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 {
@@ -606,6 +656,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);
@@ -627,6 +678,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);
@@ -666,6 +718,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);
@@ -687,6 +740,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);
@@ -726,6 +780,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);
@@ -747,6 +802,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);
@@ -786,6 +842,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);
@@ -807,6 +864,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);
@@ -846,6 +904,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);
@@ -867,6 +926,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);
@@ -906,6 +966,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);
@@ -927,6 +988,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);
@@ -966,6 +1028,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);
@@ -987,6 +1050,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);
@@ -1022,154 +1086,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%;
 }
@@ -1190,10 +1106,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,
@@ -1230,15 +1146,42 @@
     transform: rotate(360deg);
   }
 }
+.rs-btn-icon {
+  padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
+  line-height: var(--rs-btn-icon-size);
+}
 .rs-btn-icon > .rs-icon {
+  font-size: var(--rs-btn-icon-size);
   vertical-align: bottom;
 }
+.rs-btn-icon:not(.rs-btn-icon-with-text) {
+  width: var(--rs-btn-size);
+}
+.rs-btn-icon.rs-btn-icon-circle {
+  border-radius: var(--rs-radius-full);
+}
 .rs-btn-icon-with-text > .rs-icon {
   position: absolute;
   top: 0;
   display: block;
   background-color: var(--rs-iconbtn-addon);
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
+  width: var(--rs-btn-size);
+  height: var(--rs-btn-size);
+  padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
+}
+.rs-btn-icon-with-text.rs-btn-icon-placement-left {
+  padding-inline-start: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
+}
+.rs-btn-icon-with-text.rs-btn-icon-placement-left > .rs-icon {
+  inset-inline-start: 0;
+  border-right-width: 1px;
+}
+.rs-btn-icon-with-text.rs-btn-icon-placement-right {
+  padding-inline-end: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
+}
+.rs-btn-icon-with-text.rs-btn-icon-placement-right > .rs-icon {
+  inset-inline-end: 0;
 }
 .rs-btn-icon-with-text:hover > .rs-icon {
   background-color: var(--rs-iconbtn-activated-addon);
@@ -1273,23 +1216,31 @@
 .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-.rs-btn-icon-circle {
-  border-radius: 50% !important;
-}
 /* rtl:begin:ignore */
 /* rtl:end:ignore */
 .rs-tooltip {
+  --rs-tooltip-border-radius: var(--rs-radius-sm);
+  --rs-tooltip-padding-block: 4px;
+  --rs-tooltip-padding-inline: 10px;
+  --rs-tooltip-z-index: 1070;
+  --rs-tooltip-max-width: 250px;
+  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
+  --rs-tooltip-position-x: var(--rs-position-x);
+  --rs-tooltip-position-y: var(--rs-position-y);
+  --rs-tooltip-opacity: var(--rs-opacity, 0);
   position: absolute;
-  z-index: 1070;
+  top: var(--rs-tooltip-position-y);
+  left: var(--rs-tooltip-position-x) /* rtl:ignore */;
+  z-index: var(--rs-tooltip-z-index);
   display: block;
-  font-size: 12px;
-  opacity: 0;
-  line-height: 1.66666667;
-  max-width: 250px;
-  padding: 2px 10px;
+  font-size: var(--rs-font-size-xs);
+  opacity: var(--rs-tooltip-opacity);
+  line-height: var(--rs-tooltip-line-height);
+  max-width: var(--rs-tooltip-max-width);
+  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
   color: var(--rs-tooltip-text);
   background-color: var(--rs-tooltip-bg);
-  border-radius: 4px;
+  border-radius: var(--rs-tooltip-border-radius);
   overflow-wrap: break-word;
 }
 .rs-tooltip.rs-anim-fade {
@@ -1318,180 +1269,174 @@
 .rs-theme-high-contrast .rs-tooltip-arrow::before {
   display: block;
 }
-.rs-tooltip[class*='placement-top'] {
+.rs-tooltip:where([data-placement*='top']) {
   margin-top: -8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-top'].rs-anim-in {
+.rs-tooltip:where([data-placement*='top']).rs-anim-in {
   transform: translate(0, -2px);
 }
-.rs-tooltip[class*='placement-top']::after {
+.rs-tooltip:where([data-placement*='top'])::after {
   bottom: -6px;
   margin-left: -6px;
   border-width: 6px 6px 0;
   border-top-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-top']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='top'])::before {
   bottom: -7px;
   margin-left: -7px;
   border-width: 7px 7px 0;
   border-top-color: var(--rs-tooltip-border);
 }
-.rs-tooltip[class*='placement-bottom'] {
+.rs-tooltip:where([data-placement*='bottom']) {
   margin-top: 8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-bottom'].rs-anim-in {
+.rs-tooltip:where([data-placement*='bottom']).rs-anim-in {
   transform: translate(0, 2px);
 }
-.rs-tooltip[class*='placement-bottom']::after {
+.rs-tooltip:where([data-placement*='bottom'])::after {
   top: -6px;
   margin-left: -6px;
   border-width: 0 6px 6px;
   border-bottom-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-bottom']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='bottom'])::before {
   top: -7px;
   margin-left: -7px;
   border-width: 0 7px 7px;
   border-bottom-color: var(--rs-tooltip-border);
 }
+.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::before,
+.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::after {
+  left: 50%;
+}
+.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::before,
+.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::after {
+  left: 10px;
+}
+.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::before {
+  right: 3px;
+}
+.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::after {
+  right: 4px;
+}
+.rs-tooltip:where([data-placement='left'], [data-placement='right'])::before,
+.rs-tooltip:where([data-placement='left'], [data-placement='right'])::after {
+  top: 50%;
+}
+.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::before,
+.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::after {
+  top: 10px;
+}
+.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::before {
+  bottom: 3px;
+}
+.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::after {
+  bottom: 4px;
+}
 /* rtl:begin:ignore */
-.rs-tooltip[class*='placement-right'] {
+.rs-tooltip:where([data-placement*='right']) {
   margin-left: 8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-right'].rs-anim-in {
+.rs-tooltip:where([data-placement*='right']).rs-anim-in {
   transform: translate(2px, 0);
 }
-.rs-tooltip[class*='placement-right']::after {
+.rs-tooltip:where([data-placement*='right'])::after {
   left: -6px;
   margin-top: -6px;
   border-width: 6px 6px 6px 0;
   border-right-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-right']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='right'])::before {
   left: -7px;
   margin-top: -7px;
   border-width: 7px 7px 7px 0;
   border-right-color: var(--rs-tooltip-border);
 }
-.rs-tooltip[class*='placement-left'] {
+.rs-tooltip:where([data-placement*='left']) {
   margin-left: -8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-left'].rs-anim-in {
+.rs-tooltip:where([data-placement*='left']).rs-anim-in {
   transform: translate(-2px, 0);
 }
-.rs-tooltip[class*='placement-left']::after {
+.rs-tooltip:where([data-placement*='left'])::after {
   right: -6px;
   margin-top: -6px;
   border-width: 6px 0 6px 6px;
   border-left-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-left']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='left'])::before {
   right: -7px;
   margin-top: -7px;
   border-width: 7px 0 7px 7px;
   border-left-color: var(--rs-tooltip-border);
 }
 /* rtl:end:ignore */
-.rs-tooltip.placement-bottom::before,
-.rs-tooltip.placement-top::before,
-.rs-tooltip.placement-bottom::after,
-.rs-tooltip.placement-top::after {
-  left: 50%;
-}
-.rs-tooltip.placement-bottom-start::before,
-.rs-tooltip.placement-top-start::before,
-.rs-tooltip.placement-bottom-start::after,
-.rs-tooltip.placement-top-start::after {
-  left: 10px;
-}
-.rs-tooltip.placement-bottom-end::before,
-.rs-tooltip.placement-top-end::before {
-  right: 3px;
-}
-.rs-tooltip.placement-bottom-end::after,
-.rs-tooltip.placement-top-end::after {
-  right: 4px;
-}
-.rs-tooltip.placement-right::before,
-.rs-tooltip.placement-left::before,
-.rs-tooltip.placement-right::after,
-.rs-tooltip.placement-left::after {
-  top: 50%;
-}
-.rs-tooltip.placement-right-start::before,
-.rs-tooltip.placement-left-start::before,
-.rs-tooltip.placement-right-start::after,
-.rs-tooltip.placement-left-start::after {
-  top: 10px;
-}
-.rs-tooltip.placement-right-end::before,
-.rs-tooltip.placement-left-end::before {
-  bottom: 3px;
-}
-.rs-tooltip.placement-right-end::after,
-.rs-tooltip.placement-left-end::after {
-  bottom: 4px;
-}
 .rs-stat {
+  --rs-stat-icon-size: 50px;
+  --rs-stat-border-radius: var(--rs-radius-md);
+  --rs-stat-spacing: calc(var(--rs-spacing) * 2.5);
+  --rs-stat-value-font-size: var(--rs-font-size-2xl);
+  --rs-stat-value-unit-font-size: var(--rs-font-size-xs);
+  --rs-stat-trend-font-size: var(--rs-font-size-xs);
   display: flex;
-  gap: 10px;
+  gap: var(--rs-stat-spacing);
   align-items: center;
 }
 .rs-stat-icon {
-  width: 50px;
-  height: 50px;
+  width: var(--rs-stat-icon-size);
+  height: var(--rs-stat-icon-size);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--rs-stat-border-radius);
 }
 .rs-stat-body {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: calc(var(--rs-spacing) * 2);
   width: 100%;
   margin: 0;
 }
 .rs-stat-bordered {
   border: 1px solid var(--rs-border-primary);
   background-color: var(--rs-stat-body-bg);
-  border-radius: 6px;
+  border-radius: var(--rs-stat-border-radius);
   padding: 16px;
 }
 .rs-stat-label {
-  font-weight: 100;
+  font-weight: 400;
   display: inline-flex;
   align-items: center;
   color: var(--rs-text-secondary);
-  gap: 6px;
+  gap: calc(var(--rs-spacing) * 1.5);
 }
 .rs-stat-label-uppercase {
   text-transform: uppercase;
 }
 .rs-stat-value {
   display: flex;
-  gap: 4px;
+  gap: var(--rs-spacing);
   align-items: baseline;
-  font-size: 24px;
+  font-size: var(--rs-stat-value-font-size);
   font-weight: 600;
   line-height: 1;
   margin: 0;
 }
 .rs-stat-value-unit {
-  font-size: 12px;
+  font-size: var(--rs-stat-value-unit-font-size);
   font-weight: 400;
 }
 .rs-stat-trend {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  border-radius: 4px;
+  gap: calc(var(--rs-spacing) / 2);
+  border-radius: var(--rs-radius-sm);
   font-weight: 600;
-  font-size: 12px;
+  font-size: var(--rs-stat-trend-font-size);
   line-height: 1;
 }
 .rs-stat-trend-up {