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

package/Uploader/styles/index.css

@@ -3,6 +3,23 @@
   * @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-spacing: 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;
@@ -80,6 +97,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);
@@ -87,6 +105,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);
@@ -200,6 +219,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);
@@ -207,6 +227,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);
@@ -319,7 +340,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;
@@ -365,13 +386,27 @@
     --rs-uploader-overlay-bg: rgba(60, 63, 67, 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 {
   display: inline-flex;
@@ -379,59 +414,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);
@@ -466,18 +475,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);
@@ -501,7 +538,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);
@@ -524,7 +560,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);
@@ -551,6 +586,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);
@@ -570,7 +606,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 {
@@ -580,6 +616,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);
@@ -598,6 +635,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);
@@ -634,6 +672,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);
@@ -652,6 +691,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);
@@ -688,6 +728,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);
@@ -706,6 +747,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);
@@ -742,6 +784,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);
@@ -760,6 +803,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);
@@ -796,6 +840,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);
@@ -814,6 +859,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);
@@ -850,6 +896,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);
@@ -868,6 +915,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);
@@ -904,6 +952,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);
@@ -922,6 +971,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);
@@ -954,154 +1004,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%;
 }
@@ -1122,10 +1024,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,
@@ -1162,6 +1064,11 @@
     transform: rotate(360deg);
   }
 }
+.rs-uploader {
+  --rs-uploader-file-item-icon-font-size: 1.375rem;
+  --rs-uploader-file-item-icon-margin: 0.75rem;
+  --rs-uploader-file-item-icon-margin-plus: 1.375rem;
+}
 .rs-uploader-trigger input[type='file'] {
   position: absolute !important;
   clip: rect(1px 1px 1px 1px);
@@ -1181,9 +1088,9 @@
 }
 .rs-uploader-file-item-icon-reupload {
   cursor: pointer;
-  margin-left: 10px;
+  margin-inline-start: 10px;
   color: var(--rs-text-primary);
-  font-size: 12px;
+  font-size: var(--rs-font-size-xs);
 }
 .rs-theme-high-contrast .rs-uploader-file-item:hover .rs-uploader-file-item-title {
   color: var(--rs-uploader-item-hover-text);
@@ -1205,28 +1112,28 @@
   display: inline-flex;
   align-items: center;
   top: 8px;
-  left: 12px;
+  inset-inline-start: 12px;
   width: 20px;
   height: 20px;
   justify-content: center;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   display: block;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
   border: 3px solid var(--rs-loader-ring);
@@ -1271,9 +1178,9 @@
 }
 .rs-uploader-text .rs-uploader-file-item-btn-remove {
   position: absolute;
-  font-size: 14px;
+  font-size: var(--rs-font-size-sm);
   top: 12px;
-  right: 12px;
+  inset-inline-end: 12px;
   color: var(--rs-text-secondary);
   cursor: pointer;
   padding: 0;
@@ -1289,7 +1196,7 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  left: 0;
+  inset-inline-start: 0;
 }
 .rs-uploader-text .rs-uploader-file-item-progress-bar {
   height: 2px;
@@ -1317,68 +1224,41 @@
   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);
-  font-size: 14px;
-  line-height: 20px;
-  padding: 8px 12px;
+  padding-inline: var(--rs-btn-padding-inline);
+  padding-block: var(--rs-btn-padding-block);
   overflow: hidden;
   position: relative;
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
-  border: none;
   width: 66px;
   height: 66px;
   margin: 0;
   padding: 0;
   border: 2px dotted var(--rs-border-primary);
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   margin-top: 10px;
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn {
   transition: none;
-}
-.rs-btn-ghost.rs-uploader-picture .rs-uploader-trigger-btn {
-  padding: 7px 11px;
-}
-.rs-btn-icon.rs-uploader-picture .rs-uploader-trigger-btn {
-  padding: 10px 10px;
-  line-height: 16px;
-}
-.rs-btn-icon.rs-uploader-picture .rs-uploader-trigger-btn > .rs-icon {
-  font-size: 16px;
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn > .rs-icon {
-  padding: 10px 10px;
-  width: 36px;
-  height: 36px;
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-left {
-  padding: 8px 12px 8px 48px;
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-left > .rs-icon {
-  left: 0;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-right {
-  padding: 8px 48px 8px 12px;
-}
-.rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-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-uploader-picture .rs-uploader-trigger-btn:focus-visible {
   outline: 3px solid var(--rs-color-focus-ring);
@@ -1413,6 +1293,34 @@
     /* stylelint-enable */
   }
 }
+.rs-uploader-picture .rs-uploader-trigger-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-uploader-picture .rs-uploader-trigger-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-uploader-picture .rs-uploader-trigger-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-uploader-picture .rs-uploader-trigger-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-uploader-picture .rs-uploader-trigger-btn:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
@@ -1440,7 +1348,7 @@
 }
 .rs-uploader-picture .rs-uploader-trigger,
 .rs-uploader-picture .rs-uploader-file-item {
-  float: left;
+  float: inline-start;
 }
 .rs-uploader-picture .rs-uploader-file-items {
   display: inline;
@@ -1450,10 +1358,10 @@
   height: 66px;
   overflow: hidden;
   background-color: var(--rs-uploader-item-bg);
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   position: relative;
   margin-top: 10px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 .rs-uploader-picture .rs-uploader-file-item-preview {
   position: relative;
@@ -1474,13 +1382,13 @@
   }
 }
 .rs-uploader-picture .rs-uploader-file-item-preview .rs-uploader-file-item-icon {
-  font-size: 22px;
-  margin: 22px;
+  font-size: var(--rs-uploader-file-item-icon-font-size);
+  margin: var(--rs-uploader-file-item-icon-margin-plus);
 }
 .rs-uploader-picture .rs-uploader-file-item-status {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 66px;
   height: 66px;
   text-align: center;
@@ -1507,13 +1415,13 @@
   cursor: pointer;
   position: absolute;
   top: 3px;
-  right: 3px;
+  inset-inline-end: 3px;
   width: 24px;
   height: 24px;
   line-height: 24px;
   text-align: center;
   background-color: var(--rs-uploader-overlay-bg);
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
   visibility: hidden;
   opacity: 0;
   transition: 0.2s opacity;
@@ -1539,29 +1447,29 @@
   background-color: var(--rs-uploader-overlay-bg);
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 2;
   text-align: center;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   display: inline-block;
   position: relative;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   display: block;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
   border: 3px solid var(--rs-loader-ring);
@@ -1576,17 +1484,17 @@
   display: none;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-reupload {
-  margin-left: 0;
+  margin-inline-start: 0;
   display: block;
 }
 .rs-uploader-picture-text .rs-uploader-file-item {
   position: relative;
   height: 50px;
-  padding-left: 50px;
+  padding-inline-start: 50px;
   margin-top: 10px;
-  padding-right: 30px;
+  padding-inline-end: 30px;
   border: 1px solid var(--rs-border-primary);
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   overflow: hidden;
   transition: 0.3s linear background-color;
 }
@@ -1598,7 +1506,7 @@
 }
 .rs-uploader-picture-text .rs-uploader-file-item-preview {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 50px;
   height: 50px;
@@ -1606,7 +1514,8 @@
   text-align: center;
   background-color: var(--rs-border-primary);
   overflow: hidden;
-  border-radius: 6px 0 0 6px;
+  border-top-left-radius: var(--rs-radius-md);
+  border-bottom-left-radius: var(--rs-radius-md);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-preview > img {
   width: 100%;
@@ -1620,8 +1529,8 @@
   }
 }
 .rs-uploader-picture-text .rs-uploader-file-item-preview .rs-uploader-file-item-icon {
-  font-size: 22px;
-  margin: 12px;
+  font-size: var(--rs-uploader-file-item-icon-font-size);
+  margin: var(--rs-uploader-file-item-icon-margin);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-content {
   padding: 5px 12px;
@@ -1643,7 +1552,7 @@
 .rs-uploader-picture-text .rs-uploader-file-item-btn-remove {
   position: absolute;
   top: 0;
-  right: 12px;
+  inset-inline-end: 12px;
   color: var(--rs-text-secondary);
   cursor: pointer;
   height: 50px;
@@ -1660,8 +1569,8 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  left: 0;
-  padding-left: 50px;
+  inset-inline-start: 0;
+  padding-inline-start: 50px;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-progress-bar {
   height: 2px;
@@ -1671,7 +1580,7 @@
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   display: block;
   width: 50px;
   height: 50px;
@@ -1681,24 +1590,24 @@
   line-height: 50px;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   display: inline-block;
   position: relative;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before,
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   display: block;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
   border: 3px solid var(--rs-loader-ring);