rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

package/Uploader/styles/index.css

@@ -88,7 +88,7 @@ body{
   --rs-text-primary:var(--rs-gray-800);
   --rs-text-secondary:var(--rs-gray-600);
   --rs-border-primary:var(--rs-gray-200);
-  --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-focus-ring-color: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);
@@ -129,7 +129,7 @@ body{
 }
 @supports not (color: rgb(from white r g b)){
   :root{
-    --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
+    --rs-focus-ring-color: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);
   }
@@ -210,7 +210,6 @@ body{
   --rs-text-primary:var(--rs-gray-50);
   --rs-text-secondary:var(--rs-gray-200);
   --rs-border-primary:var(--rs-gray-600);
-  --rs-color-focus-ring:0 0 0 2px 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);
@@ -252,7 +251,6 @@ body{
 @supports not (color: rgb(from white r g b)){
   [data-theme=dark],
   .rs-theme-dark{
-    --rs-color-focus-ring:0 0 0 2px 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);
   }
@@ -333,7 +331,7 @@ body{
   --rs-text-primary:var(--rs-gray-50);
   --rs-text-secondary:var(--rs-gray-200);
   --rs-border-primary:var(--rs-gray-100);
-  --rs-color-focus-ring:var(--rs-gray-0);
+  --rs-focus-ring-color:var(--rs-gray-0);
   --rs-btn-default-bg:transparent;
   --rs-btn-default-text:var(--rs-primary-500);
   --rs-btn-default-border-color:var(--rs-primary-500);
@@ -541,7 +539,7 @@ body{
   border-color:var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible, .rs-uploader-picture .rs-uploader-trigger-btn:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-btn:hover, .rs-uploader-picture .rs-uploader-trigger-btn:hover{
@@ -549,16 +547,16 @@ body{
   background-color:var(--rs-btn-default-hover-bg);
   text-decoration:none;
 }
-.rs-btn:active, .rs-uploader-picture .rs-uploader-trigger-btn:active, .rs-btn.rs-btn-active, .rs-uploader-picture .rs-btn-active.rs-uploader-trigger-btn{
+.rs-btn:active, .rs-uploader-picture .rs-uploader-trigger-btn:active, .rs-btn.rs-btn[data-active=true], .rs-uploader-picture [data-active=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-default-active-text);
   background-color:var(--rs-btn-default-active-bg);
 }
-.rs-btn:disabled, .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-btn.rs-btn-disabled, .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn{
+.rs-btn:disabled, .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-btn.rs-btn[data-disabled=true], .rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn{
   cursor:var(--rs-cursor-disabled);
   color:var(--rs-btn-default-disabled-text);
   background-color:var(--rs-btn-default-disabled-bg);
 }
-[data-theme=high-contrast] .rs-btn:disabled, [data-theme=high-contrast] .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] .rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast .rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn-disabled, [data-theme=high-contrast] .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] .rs-btn-disabled.rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn.rs-btn-disabled, .rs-theme-high-contrast .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast .rs-btn-disabled.rs-uploader-trigger-btn{
+[data-theme=high-contrast] .rs-btn:disabled, [data-theme=high-contrast] .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] .rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast .rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn[data-disabled=true], [data-theme=high-contrast] .rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-disabled=true].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn.rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-disabled=true].rs-uploader-trigger-btn{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 .rs-btn, .rs-uploader-picture .rs-uploader-trigger-btn{
@@ -571,28 +569,35 @@ body{
             mask-image:radial-gradient(white, black);
   }
 }
-.rs-btn.rs-btn-lg, .rs-uploader-picture .rs-btn-lg.rs-uploader-trigger-btn{
+.rs-btn, .rs-uploader-picture .rs-uploader-trigger-btn{
+  --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[data-size=lg], .rs-uploader-picture [data-size=lg].rs-uploader-trigger-btn{
   --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-uploader-picture .rs-btn-md.rs-uploader-trigger-btn{
+.rs-btn[data-size=md], .rs-uploader-picture [data-size=md].rs-uploader-trigger-btn{
   --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-uploader-picture .rs-btn-sm.rs-uploader-trigger-btn{
+.rs-btn[data-size=sm], .rs-uploader-picture [data-size=sm].rs-uploader-trigger-btn{
   --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-uploader-picture .rs-btn-xs.rs-uploader-trigger-btn{
+.rs-btn[data-size=xs], .rs-uploader-picture [data-size=xs].rs-uploader-trigger-btn{
   --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);
@@ -610,101 +615,125 @@ body{
   margin-inline-start:var(--rs-btn-icon-gap);
 }
 
-.rs-btn-primary{
+.rs-btn[data-appearance=primary], .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   border-color:var(--rs-btn-primary-border-color);
 }
-.rs-btn-primary:hover{
+.rs-btn[data-appearance=primary]:hover, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn:hover{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-hover-bg);
 }
-.rs-btn-primary:active, .rs-btn-primary.rs-btn-active{
+.rs-btn[data-appearance=primary]:active, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn:active, .rs-btn[data-appearance=primary].rs-btn[data-active=true], .rs-uploader-picture [data-appearance=primary][data-active=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-active-bg);
 }
-.rs-btn-primary:disabled, .rs-btn-primary.rs-btn-disabled{
+.rs-btn[data-appearance=primary]:disabled, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn:disabled, .rs-btn[data-appearance=primary].rs-btn[data-disabled=true], .rs-uploader-picture [data-appearance=primary][data-disabled=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   opacity:0.3;
 }
-[data-theme=high-contrast] .rs-btn-primary:disabled, .rs-theme-high-contrast .rs-btn-primary:disabled, [data-theme=high-contrast] .rs-btn-primary.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary]:disabled, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary].rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=primary]:disabled, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary].rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=primary].rs-btn[data-disabled=true], [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary][data-disabled=true].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-appearance=primary].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary][data-disabled=true].rs-uploader-trigger-btn{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-subtle, .rs-uploader-picture .rs-uploader-trigger-btn{
+.rs-btn[data-appearance=subtle],
+.rs-btn-subtle,
+.rs-uploader-picture .rs-uploader-trigger-btn{
   color:var(--rs-btn-subtle-text);
   background-color:transparent;
 }
-.rs-btn-subtle:hover, .rs-uploader-picture .rs-uploader-trigger-btn:hover{
+.rs-btn[data-appearance=subtle]:hover,
+.rs-btn-subtle:hover,
+.rs-uploader-picture .rs-uploader-trigger-btn:hover{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.rs-btn-subtle:active, .rs-uploader-picture .rs-uploader-trigger-btn:active, .rs-btn-subtle.rs-btn-active, .rs-uploader-picture .rs-btn-active.rs-uploader-trigger-btn{
+.rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
+.rs-btn-subtle:active,
+.rs-uploader-picture .rs-uploader-trigger-btn:active,
+.rs-btn-subtle.rs-btn[data-active=true],
+.rs-uploader-picture [data-active=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-subtle-active-text);
   background-color:var(--rs-btn-subtle-active-bg);
 }
-.rs-btn-subtle:disabled, .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-btn-subtle.rs-btn-disabled, .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn{
+.rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+.rs-btn-subtle:disabled,
+.rs-uploader-picture .rs-uploader-trigger-btn:disabled,
+.rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-[data-theme=high-contrast] .rs-btn-subtle:disabled, [data-theme=high-contrast] .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] .rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn-subtle:disabled, .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast .rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn-subtle.rs-btn-disabled, [data-theme=high-contrast] .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] .rs-btn-disabled.rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled, .rs-theme-high-contrast .rs-uploader-picture .rs-btn-disabled.rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast .rs-btn-disabled.rs-uploader-trigger-btn{
+[data-theme=high-contrast] .rs-btn[data-appearance=subtle]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=subtle]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+[data-theme=high-contrast] .rs-btn-subtle:disabled,
+[data-theme=high-contrast] .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
+.rs-uploader-picture [data-theme=high-contrast] .rs-uploader-trigger-btn:disabled,
+.rs-theme-high-contrast .rs-btn-subtle:disabled,
+.rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
+.rs-uploader-picture .rs-theme-high-contrast .rs-uploader-trigger-btn:disabled,
+[data-theme=high-contrast] .rs-btn-subtle.rs-btn[data-disabled=true],
+[data-theme=high-contrast] .rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn,
+.rs-uploader-picture [data-theme=high-contrast] [data-disabled=true].rs-uploader-trigger-btn,
+.rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-theme-high-contrast .rs-uploader-picture [data-disabled=true].rs-uploader-trigger-btn,
+.rs-uploader-picture .rs-theme-high-contrast [data-disabled=true].rs-uploader-trigger-btn{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-link{
+.rs-btn[data-appearance=link], .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn{
   color:var(--rs-btn-link-text);
   background-color:transparent;
 }
-.rs-btn-link:hover{
+.rs-btn[data-appearance=link]:hover, .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn:hover{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   -webkit-text-decoration:var(--rs-link-hover-decoration);
           text-decoration:var(--rs-link-hover-decoration);
 }
-.rs-btn-link:active, .rs-btn-link.rs-btn-active{
+.rs-btn[data-appearance=link]:active, .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn:active, .rs-btn[data-appearance=link].rs-btn[data-active=true], .rs-uploader-picture [data-appearance=link][data-active=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-link-active-text);
   background-color:transparent;
 }
-.rs-btn-link:disabled, .rs-btn-link.rs-btn-disabled{
+.rs-btn[data-appearance=link]:disabled, .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn:disabled, .rs-btn[data-appearance=link].rs-btn[data-disabled=true], .rs-uploader-picture [data-appearance=link][data-disabled=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   text-decoration:none;
   opacity:0.3;
 }
-[data-theme=high-contrast] .rs-btn-link:disabled, .rs-theme-high-contrast .rs-btn-link:disabled, [data-theme=high-contrast] .rs-btn-link.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=link]:disabled, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=link].rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=link]:disabled, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=link].rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=link].rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=link].rs-btn[data-disabled=true], [data-theme=high-contrast] .rs-uploader-picture [data-appearance=link][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=link][data-disabled=true].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-appearance=link].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-uploader-picture [data-appearance=link][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=link][data-disabled=true].rs-uploader-trigger-btn{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-ghost{
+.rs-btn[data-appearance=ghost], .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   border:var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
   padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
 }
-.rs-btn-ghost:hover{
+.rs-btn[data-appearance=ghost]:hover, .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn:hover{
   color:var(--rs-btn-ghost-hover-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-hover-border);
   box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
 }
-.rs-btn-ghost:active, .rs-btn-ghost.rs-btn-active{
+.rs-btn[data-appearance=ghost]:active, .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn:active, .rs-btn[data-appearance=ghost].rs-btn[data-active=true], .rs-uploader-picture [data-appearance=ghost][data-active=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-ghost-active-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-active-border);
 }
-.rs-btn-ghost:disabled, .rs-btn-ghost.rs-btn-disabled{
+.rs-btn[data-appearance=ghost]:disabled, .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn:disabled, .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true], .rs-uploader-picture [data-appearance=ghost][data-disabled=true].rs-uploader-trigger-btn{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   opacity:0.3;
   border-color:var(--rs-btn-ghost-border);
   box-shadow:var(--rs-shadow-none);
 }
-[data-theme=high-contrast] .rs-btn-ghost:disabled, .rs-theme-high-contrast .rs-btn-ghost:disabled, [data-theme=high-contrast] .rs-btn-ghost.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=ghost]:disabled, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn:disabled, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=ghost].rs-uploader-trigger-btn:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=ghost]:disabled, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=ghost].rs-uploader-trigger-btn:disabled, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=ghost].rs-uploader-trigger-btn:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true], [data-theme=high-contrast] .rs-uploader-picture [data-appearance=ghost][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=ghost][data-disabled=true].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-uploader-picture [data-appearance=ghost][data-disabled=true].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=ghost][data-disabled=true].rs-uploader-trigger-btn{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-red{
+.rs-btn[data-color=red], .rs-uploader-picture [data-color=red].rs-uploader-trigger-btn{
   --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);
@@ -723,7 +752,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-800);
   --rs-btn-link-active-text:var(--rs-red-900);
 }
-[data-theme=dark] .rs-btn-red, .rs-theme-dark .rs-btn-red{
+[data-theme=dark] .rs-btn[data-color=red], [data-theme=dark] .rs-uploader-picture [data-color=red].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=red].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=red], .rs-theme-dark .rs-uploader-picture [data-color=red].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=red].rs-uploader-trigger-btn{
   --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);
@@ -742,7 +771,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-400);
   --rs-btn-link-active-text:var(--rs-red-200);
 }
-[data-theme=high-contrast] .rs-btn-red, .rs-theme-high-contrast .rs-btn-red{
+[data-theme=high-contrast] .rs-btn[data-color=red], [data-theme=high-contrast] .rs-uploader-picture [data-color=red].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=red].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=red], .rs-theme-high-contrast .rs-uploader-picture [data-color=red].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=red].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-red-700);
   --rs-btn-primary-hover-bg:var(--rs-red-600);
   --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -761,7 +790,7 @@ body{
   --rs-btn-link-active-text:var(--rs-red-200);
 }
 
-.rs-btn-orange{
+.rs-btn[data-color=orange], .rs-uploader-picture [data-color=orange].rs-uploader-trigger-btn{
   --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);
@@ -780,7 +809,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-800);
   --rs-btn-link-active-text:var(--rs-orange-900);
 }
-[data-theme=dark] .rs-btn-orange, .rs-theme-dark .rs-btn-orange{
+[data-theme=dark] .rs-btn[data-color=orange], [data-theme=dark] .rs-uploader-picture [data-color=orange].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=orange].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=orange], .rs-theme-dark .rs-uploader-picture [data-color=orange].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=orange].rs-uploader-trigger-btn{
   --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);
@@ -799,7 +828,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-400);
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
-[data-theme=high-contrast] .rs-btn-orange, .rs-theme-high-contrast .rs-btn-orange{
+[data-theme=high-contrast] .rs-btn[data-color=orange], [data-theme=high-contrast] .rs-uploader-picture [data-color=orange].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=orange].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=orange], .rs-theme-high-contrast .rs-uploader-picture [data-color=orange].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=orange].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-orange-700);
   --rs-btn-primary-hover-bg:var(--rs-orange-600);
   --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -818,7 +847,7 @@ body{
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
 
-.rs-btn-yellow{
+.rs-btn[data-color=yellow], .rs-uploader-picture [data-color=yellow].rs-uploader-trigger-btn{
   --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);
@@ -837,7 +866,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-800);
   --rs-btn-link-active-text:var(--rs-yellow-900);
 }
-[data-theme=dark] .rs-btn-yellow, .rs-theme-dark .rs-btn-yellow{
+[data-theme=dark] .rs-btn[data-color=yellow], [data-theme=dark] .rs-uploader-picture [data-color=yellow].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=yellow].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=yellow], .rs-theme-dark .rs-uploader-picture [data-color=yellow].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=yellow].rs-uploader-trigger-btn{
   --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);
@@ -856,7 +885,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-400);
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
-[data-theme=high-contrast] .rs-btn-yellow, .rs-theme-high-contrast .rs-btn-yellow{
+[data-theme=high-contrast] .rs-btn[data-color=yellow], [data-theme=high-contrast] .rs-uploader-picture [data-color=yellow].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=yellow].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=yellow], .rs-theme-high-contrast .rs-uploader-picture [data-color=yellow].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=yellow].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-yellow-700);
   --rs-btn-primary-hover-bg:var(--rs-yellow-600);
   --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -875,7 +904,7 @@ body{
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
 
-.rs-btn-green{
+.rs-btn[data-color=green], .rs-uploader-picture [data-color=green].rs-uploader-trigger-btn{
   --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);
@@ -894,7 +923,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-800);
   --rs-btn-link-active-text:var(--rs-green-900);
 }
-[data-theme=dark] .rs-btn-green, .rs-theme-dark .rs-btn-green{
+[data-theme=dark] .rs-btn[data-color=green], [data-theme=dark] .rs-uploader-picture [data-color=green].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=green].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=green], .rs-theme-dark .rs-uploader-picture [data-color=green].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=green].rs-uploader-trigger-btn{
   --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);
@@ -913,7 +942,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-400);
   --rs-btn-link-active-text:var(--rs-green-200);
 }
-[data-theme=high-contrast] .rs-btn-green, .rs-theme-high-contrast .rs-btn-green{
+[data-theme=high-contrast] .rs-btn[data-color=green], [data-theme=high-contrast] .rs-uploader-picture [data-color=green].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=green].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=green], .rs-theme-high-contrast .rs-uploader-picture [data-color=green].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=green].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-green-700);
   --rs-btn-primary-hover-bg:var(--rs-green-600);
   --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -932,7 +961,7 @@ body{
   --rs-btn-link-active-text:var(--rs-green-200);
 }
 
-.rs-btn-cyan{
+.rs-btn[data-color=cyan], .rs-uploader-picture [data-color=cyan].rs-uploader-trigger-btn{
   --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);
@@ -951,7 +980,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-800);
   --rs-btn-link-active-text:var(--rs-cyan-900);
 }
-[data-theme=dark] .rs-btn-cyan, .rs-theme-dark .rs-btn-cyan{
+[data-theme=dark] .rs-btn[data-color=cyan], [data-theme=dark] .rs-uploader-picture [data-color=cyan].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=cyan].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=cyan], .rs-theme-dark .rs-uploader-picture [data-color=cyan].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=cyan].rs-uploader-trigger-btn{
   --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);
@@ -970,7 +999,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-400);
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
-[data-theme=high-contrast] .rs-btn-cyan, .rs-theme-high-contrast .rs-btn-cyan{
+[data-theme=high-contrast] .rs-btn[data-color=cyan], [data-theme=high-contrast] .rs-uploader-picture [data-color=cyan].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=cyan].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=cyan], .rs-theme-high-contrast .rs-uploader-picture [data-color=cyan].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=cyan].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-cyan-700);
   --rs-btn-primary-hover-bg:var(--rs-cyan-600);
   --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -989,7 +1018,7 @@ body{
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
 
-.rs-btn-blue{
+.rs-btn[data-color=blue], .rs-uploader-picture [data-color=blue].rs-uploader-trigger-btn{
   --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);
@@ -1008,7 +1037,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-800);
   --rs-btn-link-active-text:var(--rs-blue-900);
 }
-[data-theme=dark] .rs-btn-blue, .rs-theme-dark .rs-btn-blue{
+[data-theme=dark] .rs-btn[data-color=blue], [data-theme=dark] .rs-uploader-picture [data-color=blue].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=blue].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=blue], .rs-theme-dark .rs-uploader-picture [data-color=blue].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=blue].rs-uploader-trigger-btn{
   --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);
@@ -1027,7 +1056,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-400);
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
-[data-theme=high-contrast] .rs-btn-blue, .rs-theme-high-contrast .rs-btn-blue{
+[data-theme=high-contrast] .rs-btn[data-color=blue], [data-theme=high-contrast] .rs-uploader-picture [data-color=blue].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=blue].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=blue], .rs-theme-high-contrast .rs-uploader-picture [data-color=blue].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=blue].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-blue-700);
   --rs-btn-primary-hover-bg:var(--rs-blue-600);
   --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1046,7 +1075,7 @@ body{
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
 
-.rs-btn-violet{
+.rs-btn[data-color=violet], .rs-uploader-picture [data-color=violet].rs-uploader-trigger-btn{
   --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);
@@ -1065,7 +1094,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-800);
   --rs-btn-link-active-text:var(--rs-violet-900);
 }
-[data-theme=dark] .rs-btn-violet, .rs-theme-dark .rs-btn-violet{
+[data-theme=dark] .rs-btn[data-color=violet], [data-theme=dark] .rs-uploader-picture [data-color=violet].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=dark] [data-color=violet].rs-uploader-trigger-btn, .rs-theme-dark .rs-btn[data-color=violet], .rs-theme-dark .rs-uploader-picture [data-color=violet].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-dark [data-color=violet].rs-uploader-trigger-btn{
   --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);
@@ -1084,7 +1113,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-400);
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
-[data-theme=high-contrast] .rs-btn-violet, .rs-theme-high-contrast .rs-btn-violet{
+[data-theme=high-contrast] .rs-btn[data-color=violet], [data-theme=high-contrast] .rs-uploader-picture [data-color=violet].rs-uploader-trigger-btn, .rs-uploader-picture [data-theme=high-contrast] [data-color=violet].rs-uploader-trigger-btn, .rs-theme-high-contrast .rs-btn[data-color=violet], .rs-theme-high-contrast .rs-uploader-picture [data-color=violet].rs-uploader-trigger-btn, .rs-uploader-picture .rs-theme-high-contrast [data-color=violet].rs-uploader-trigger-btn{
   --rs-btn-primary-bg:var(--rs-violet-700);
   --rs-btn-primary-hover-bg:var(--rs-violet-600);
   --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1103,20 +1132,20 @@ body{
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
 
-.rs-btn-block{
+.rs-btn[data-block=true], .rs-uploader-picture [data-block=true].rs-uploader-trigger-btn{
   width:100%;
 }
-.rs-btn-block + .rs-btn-block{
+.rs-btn[data-block=true] + .rs-btn[data-block=true], .rs-uploader-picture [data-block=true].rs-uploader-trigger-btn + .rs-btn[data-block=true], .rs-uploader-picture .rs-btn[data-block=true] + [data-block=true].rs-uploader-trigger-btn, .rs-uploader-picture [data-block=true].rs-uploader-trigger-btn + [data-block=true].rs-uploader-trigger-btn{
   margin-top:5px;
 }
 
-.rs-btn-loading{
+.rs-btn[data-loading=true], .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn{
   color:transparent !important;
   position:relative;
   cursor:default;
   pointer-events:none;
 }
-.rs-btn-loading > .rs-btn-spin::before, .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after{
   content:"";
   position:absolute;
   width:var(--rs-btn-loading-spin-default-diameter);
@@ -1129,29 +1158,29 @@ body{
   border-radius:var(--rs-radius-full);
   z-index:1;
 }
-.rs-btn-xs .rs-btn-loading > .rs-btn-spin::before, .rs-btn-xs .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture [data-size=xs].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-size=xs] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture .rs-btn[data-size=xs] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture [data-size=xs].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture [data-size=xs].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-btn[data-size=xs] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture .rs-btn[data-size=xs] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture [data-size=xs].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after{
   width:var(--rs-btn-loading-spin-xs-diameter);
   height:var(--rs-btn-loading-spin-xs-diameter);
 }
-.rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before{
   border:var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before{
   border-color:rgba(248, 247, 250, 0.3);
 }
-[data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, [data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture [data-theme=high-contrast] .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture .rs-theme-high-contrast .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::before{
   border-color:var(--rs-loader-ring-inverse);
 }
-.rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after{
   border-width:var(--rs-btn-loading-spin-ring-wide);
   border-color:var(--rs-loader-rotor) transparent transparent;
   border-style:solid;
   animation:buttonSpin 0.6s infinite linear;
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after{
   border-top-color:#fff;
 }
-[data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, [data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture [data-theme=high-contrast] .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, [data-theme=high-contrast] .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture [data-theme=high-contrast] [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary].rs-uploader-trigger-btn .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-uploader-picture [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture .rs-theme-high-contrast .rs-btn[data-appearance=primary] [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-theme-high-contrast .rs-uploader-picture [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after, .rs-uploader-picture .rs-theme-high-contrast [data-appearance=primary].rs-uploader-trigger-btn [data-loading=true].rs-uploader-trigger-btn > .rs-btn-spin::after{
   border-top-color:var(--rs-loader-rotor-inverse);
 }
 @keyframes buttonSpin{

package/cjs/Badge/Badge.js

@@ -6,7 +6,6 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -46,30 +45,36 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
     var _String;
     return ((_String = String(content)) === null || _String === void 0 ? void 0 : _String.length) === 1;
   }, [content]);
-  const classes = merge(className, withPrefix((0, _utils.isPresetColor)(color) && color, shape, {
-    compact,
-    outline,
-    'one-char': isOneChar,
-    hidden: invisible,
-    wrapper: children,
-    independent: !children,
-    [(0, _kebabCase.default)(placement)]: children
+  const classes = merge(className, withPrefix({
+    wrapper: children
   }));
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createOffsetStyles)(offset, '--rs-badge-offset'), (0, _utils.createColorVariables)(color, '--rs-badge-bg')), [style, offset, color]);
+  const dataAttributes = (0, _react.useMemo)(() => {
+    return {
+      ['data-color']: (0, _utils.isPresetColor)(color) ? color : undefined,
+      ['data-shape']: shape,
+      ['data-compact']: compact,
+      ['data-one-char']: isOneChar,
+      ['data-outline']: outline,
+      ['data-hidden']: invisible,
+      ['data-independent']: !children,
+      ['data-placement']: children ? placement : undefined
+    };
+  }, [color, shape, compact, isOneChar, outline, invisible, children, placement]);
   if (!children) {
     return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
       as: as,
       ref: ref,
       className: classes,
       style: styles
-    }, rest), text);
+    }, dataAttributes, rest), text);
   }
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes,
     style: styles
-  }, rest), children, /*#__PURE__*/_react.default.createElement("div", {
+  }, dataAttributes, rest), children, /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')
   }, text));
 });

package/cjs/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { BoxProps } from '../internals/Box';
+import { StyledBoxProps } from '../internals/StyledBox';
 import type { BreadcrumbLocale } from '../locales';
-export interface BreadcrumbProps extends BoxProps {
+export interface BreadcrumbProps extends Omit<StyledBoxProps, 'name'> {
     /**
      * The separator between each breadcrumb item.
      */

package/cjs/Button/Button.js

@@ -50,12 +50,7 @@ const Button = (0, _utils.forwardRef)((props, ref) => {
     prefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(appearance, color, size, {
-    active,
-    disabled,
-    loading,
-    block
-  }));
+  const classes = merge(className, withPrefix());
   const buttonContent = (0, _react.useMemo)(() => {
     const spin = /*#__PURE__*/_react.default.createElement("span", {
       className: prefix`spin`
@@ -86,7 +81,14 @@ const Button = (0, _utils.forwardRef)((props, ref) => {
     as: buttonAs,
     ref: ref,
     className: classes,
-    onClick: handleClick
+    onClick: handleClick,
+    "data-appearance": appearance,
+    "data-color": color,
+    "data-size": size,
+    "data-block": block,
+    "data-active": active || undefined,
+    "data-disabled": disabled,
+    "data-loading": loading
   }, uncertainProps, rest), buttonContent);
 });
 Button.displayName = 'Button';

package/cjs/ButtonGroup/ButtonGroup.js

@@ -37,12 +37,7 @@ const ButtonGroup = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    block,
-    divided,
-    vertical,
-    justified
-  }));
+  const classes = merge(className, withPrefix());
   const contextValue = (0, _react.useMemo)(() => ({
     size,
     disabled
@@ -54,7 +49,12 @@ const ButtonGroup = (0, _utils.forwardRef)((props, ref) => {
   }, rest, {
     role: role,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": size,
+    "data-block": block,
+    "data-vertical": vertical,
+    "data-justified": justified,
+    "data-divided": divided
   }), children));
 });
 ButtonGroup.displayName = 'ButtonGroup';