rsuite 6.0.0-canary-20250315 → 6.0.0-canary-2025031915

package/Accordion/styles/index.css

@@ -29,7 +29,8 @@
   --rs-spacing: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-lg: 0.5rem;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/AutoComplete/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Box/styles/index.css

@@ -11,119 +11,119 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
-:where(.rs-box)[style*='--rs-box-bg'] {
-  background: var(--rs-box-bg);
-}
-:where(.rs-box)[style*='--rs-box-color'] {
-  color: var(--rs-box-color);
-}
-:where(.rs-box)[style*='--rs-box-display'] {
-  display: var(--rs-box-display);
-}
-:where(.rs-box)[style*='--rs-box-p'] {
+[data-rs='box'][style*='--rs-box-p'] {
   padding: var(--rs-box-p);
 }
-:where(.rs-box)[style*='--rs-box-pt'] {
+[data-rs='box'][style*='--rs-box-pt'] {
   padding-top: var(--rs-box-pt);
 }
-:where(.rs-box)[style*='--rs-box-pb'] {
+[data-rs='box'][style*='--rs-box-pb'] {
   padding-bottom: var(--rs-box-pb);
 }
-:where(.rs-box)[style*='--rs-box-pl'] {
+[data-rs='box'][style*='--rs-box-pl'] {
   padding-left: var(--rs-box-pl);
 }
-:where(.rs-box)[style*='--rs-box-pr'] {
+[data-rs='box'][style*='--rs-box-pr'] {
   padding-right: var(--rs-box-pr);
 }
-:where(.rs-box)[style*='--rs-box-px'] {
+[data-rs='box'][style*='--rs-box-px'] {
   padding-inline: var(--rs-box-px);
 }
-:where(.rs-box)[style*='--rs-box-py'] {
+[data-rs='box'][style*='--rs-box-py'] {
   padding-block: var(--rs-box-py);
 }
-:where(.rs-box)[style*='--rs-box-m'] {
+[data-rs='box'][style*='--rs-box-m'] {
   margin: var(--rs-box-m);
 }
-:where(.rs-box)[style*='--rs-box-mt'] {
+[data-rs='box'][style*='--rs-box-mt'] {
   margin-top: var(--rs-box-mt);
 }
-:where(.rs-box)[style*='--rs-box-mb'] {
+[data-rs='box'][style*='--rs-box-mb'] {
   margin-bottom: var(--rs-box-mb);
 }
-:where(.rs-box)[style*='--rs-box-ml'] {
+[data-rs='box'][style*='--rs-box-ml'] {
   margin-left: var(--rs-box-ml);
 }
-:where(.rs-box)[style*='--rs-box-mr'] {
+[data-rs='box'][style*='--rs-box-mr'] {
   margin-right: var(--rs-box-mr);
 }
-:where(.rs-box)[style*='--rs-box-mx'] {
+[data-rs='box'][style*='--rs-box-mx'] {
   margin-inline: var(--rs-box-mx);
 }
-:where(.rs-box)[style*='--rs-box-my'] {
+[data-rs='box'][style*='--rs-box-my'] {
   margin-block: var(--rs-box-my);
 }
-:where(.rs-box)[style*='--rs-box-w'] {
+[data-rs='box'][style*='--rs-box-w'] {
   width: var(--rs-box-w);
 }
-:where(.rs-box)[style*='--rs-box-h'] {
+[data-rs='box'][style*='--rs-box-h'] {
   height: var(--rs-box-h);
 }
-:where(.rs-box)[style*='--rs-box-rounded'] {
-  border-radius: var(--rs-box-rounded);
+[data-rs='box'][style*='--rs-box-c'] {
+  color: var(--rs-box-c);
 }
-:where(.rs-box)[style*='--rs-box-border'] {
-  border: var(--rs-box-border);
+[data-rs='box'][style*='--rs-box-bd'] {
+  border: var(--rs-box-bd);
 }
-:where(.rs-box)[style*='--rs-box-shadow'] {
+[data-rs='box'][style*='--rs-box-rounded'] {
+  border-radius: var(--rs-box-rounded);
+}
+[data-rs='box'][style*='--rs-box-shadow'] {
   box-shadow: var(--rs-box-shadow);
 }
+[data-rs='box'][style*='--rs-box-bg'] {
+  background: var(--rs-box-bg);
+}
+[data-rs='box'][style*='--rs-box-display'] {
+  display: var(--rs-box-display);
+}
 @media (max-width: 575px) {
-  :where(.rs-box-visible-from-xs) {
+  [data-visible-from='xs'] {
     display: none !important;
   }
 }
 @media (min-width: 576px) {
-  :where(.rs-box-hidden-from-xs) {
+  [data-hidden-from='xs'] {
     display: none !important;
   }
 }
 @media (max-width: 767px) {
-  :where(.rs-box-visible-from-sm) {
+  [data-visible-from='sm'] {
     display: none !important;
   }
 }
 @media (min-width: 768px) {
-  :where(.rs-box-hidden-from-sm) {
+  [data-hidden-from='sm'] {
     display: none !important;
   }
 }
 @media (max-width: 991px) {
-  :where(.rs-box-visible-from-md) {
+  [data-visible-from='md'] {
     display: none !important;
   }
 }
 @media (min-width: 992px) {
-  :where(.rs-box-hidden-from-md) {
+  [data-hidden-from='md'] {
     display: none !important;
   }
 }
 @media (max-width: 1199px) {
-  :where(.rs-box-visible-from-lg) {
+  [data-visible-from='lg'] {
     display: none !important;
   }
 }
 @media (min-width: 1200px) {
-  :where(.rs-box-hidden-from-lg) {
+  [data-hidden-from='lg'] {
     display: none !important;
   }
 }
 @media (max-width: 1399px) {
-  :where(.rs-box-visible-from-xl) {
+  [data-visible-from='xl'] {
     display: none !important;
   }
 }
 @media (min-width: 1400px) {
-  :where(.rs-box-hidden-from-xl) {
+  [data-hidden-from='xl'] {
     display: none !important;
   }
 }

package/ButtonToolbar/styles/index.css

@@ -132,3 +132,7 @@
 .rs-btn-toolbar {
   line-height: 0;
 }
+.rs-btn-toolbar.rs-stack {
+  --rs-stack-spacing: calc(var(--rs-spacing) * 2);
+  --rs-stack-wrap: wrap;
+}

package/ButtonToolbar/styles/index.less

@@ -9,4 +9,9 @@
 .rs-btn-toolbar {
   // Clear whitespace
   line-height: 0;
+
+  &.rs-stack {
+    --rs-stack-spacing: calc(var(--rs-spacing) * 2);
+    --rs-stack-wrap: wrap;
+  }
 }

package/Card/styles/index.css

@@ -14,7 +14,8 @@
 :root {
   --rs-spacing: 0.25rem;
   --rs-radius-md: 0.375rem;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Cascader/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/CheckPicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/CheckTree/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {
@@ -2258,7 +2259,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-left: 1px solid var(--rs-tree-indent-line-color);
   position: absolute;
   width: 1px;
-  top: -10px;
+  top: -4px;
   inset-inline-start: 12px;
   bottom: -4px;
 }
@@ -2298,7 +2299,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   display: none;
 }
 .rs-check-tree-group {
-  padding-inline-start: 24px;
+  padding-inline-start: 20px;
 }
 .rs-check-tree-node {
   position: relative;

package/CheckTree/styles/index.less

@@ -58,7 +58,7 @@
 }
 
 .rs-check-tree-group {
-  padding-inline-start: 24px;
+  padding-inline-start: 20px;
 }
 
 .rs-check-tree-node {

package/CheckTreePicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {
@@ -2258,7 +2259,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-left: 1px solid var(--rs-tree-indent-line-color);
   position: absolute;
   width: 1px;
-  top: -10px;
+  top: -4px;
   inset-inline-start: 12px;
   bottom: -4px;
 }
@@ -2298,7 +2299,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   display: none;
 }
 .rs-check-tree-group {
-  padding-inline-start: 24px;
+  padding-inline-start: 20px;
 }
 .rs-check-tree-node {
   position: relative;

package/DatePicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/DateRangePicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Drawer/styles/index.css

@@ -14,7 +14,8 @@
 :root {
   --rs-font-size-lg: 1.125rem;
   --rs-spacing: 0.25rem;
-  --rs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Dropdown/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Form/styles/index.css

@@ -20,6 +20,7 @@
   display: flex;
   flex-direction: var(--rs-form-direction);
   gap: var(--rs-form-spacing);
+  align-items: flex-start;
 }
 .rs-form-inline {
   --rs-form-direction: row;

package/Form/styles/index.less

@@ -7,9 +7,11 @@
   --rs-form-spacing: calc(var(--rs-spacing) * 4);
   --rs-form-group-spacing: var(--rs-spacing);
   --rs-form-group-direction: column;
+
   display: flex;
   flex-direction: var(--rs-form-direction);
   gap: var(--rs-form-spacing);
+  align-items: flex-start;
 }
 
 .rs-form-inline {

package/FormGroup/styles/index.css

@@ -23,6 +23,7 @@
   display: flex;
   flex-direction: var(--rs-form-direction);
   gap: var(--rs-form-spacing);
+  align-items: flex-start;
 }
 .rs-form-inline {
   --rs-form-direction: row;

package/InlineEdit/styles/index.css

@@ -13,7 +13,8 @@
 }
 :root {
   --rs-radius-md: 0.375rem;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/InputPicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/List/styles/index.css

@@ -13,7 +13,8 @@
 }
 :root {
   --rs-radius-md: 0.375rem;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Modal/styles/index.css

@@ -17,7 +17,8 @@
   --rs-spacing: 0.25rem;
   --rs-radius-none: 0;
   --rs-radius-md: 0.375rem;
-  --rs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/MultiCascadeTree/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/MultiCascader/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Nav/styles/index.css

@@ -21,9 +21,10 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Navbar/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Notification/styles/index.css

@@ -16,7 +16,8 @@
   --rs-text-line-height-md: calc(1.5 / 1);
   --rs-spacing: 0.25rem;
   --rs-radius-md: 0.375rem;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Pagination/styles/index.css

@@ -21,8 +21,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Panel/styles/index.css

@@ -29,7 +29,8 @@
   --rs-spacing: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-lg: 0.5rem;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/RadioTile/styles/index.css

@@ -70,12 +70,16 @@
   --rs-radio-tile-border-radius: var(--rs-radius-md);
   --rs-radio-tile-padding: calc(var(--rs-spacing) * 2.5);
   --rs-radio-tile-mark-size: 48px;
+  --rs-radio-tile-spacing: calc(var(--rs-spacing) * 1.5);
   border-radius: var(--rs-radio-tile-border-radius);
   overflow: hidden;
   border: 2px solid var(--rs-radio-tile-border);
   padding: var(--rs-radio-tile-padding);
   position: relative;
   cursor: pointer;
+  display: flex;
+  gap: var(--rs-radio-tile-spacing);
+  align-items: center;
 }
 .rs-radio-tile-label {
   font-weight: bold;

package/RadioTile/styles/index.less

@@ -1,10 +1,10 @@
 @import '../../styles/common';
 
 .rs-radio-tile {
-
   --rs-radio-tile-border-radius: var(--rs-radius-md);
   --rs-radio-tile-padding: calc(var(--rs-spacing) * 2.5);
   --rs-radio-tile-mark-size: 48px;
+  --rs-radio-tile-spacing: calc(var(--rs-spacing) * 1.5);
 
   border-radius: var(--rs-radio-tile-border-radius);
   overflow: hidden;
@@ -12,6 +12,9 @@
   padding: var(--rs-radio-tile-padding);
   position: relative;
   cursor: pointer;
+  display: flex;
+  gap: var(--rs-radio-tile-spacing);
+  align-items: center;
 
   &-label {
     font-weight: bold;

package/SelectPicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Sidebar/styles/index.css

@@ -19,6 +19,10 @@
 .rs-container-has-sidebar {
   flex-direction: row;
 }
+.rs-sidebar {
+  --rs-sidebar-width: var(--rs-box-w, 260px);
+  flex: 0 0 var(--rs-sidebar-width);
+}
 .rs-sidebar-collapse {
   transition: flex 0.15s ease-in, width 0.15s ease-in;
   min-width: 0;

package/Sidebar/styles/index.less

@@ -1,7 +1,14 @@
 @import '../../Container/styles/index';
 
+.rs-sidebar {
+  --rs-sidebar-width: var(--rs-box-w, 260px);
+  flex: 0 0 var(--rs-sidebar-width);
+}
+
 .rs-sidebar-collapse {
-  transition: flex @sidenav-collapse-transition-config, width @sidenav-collapse-transition-config;
+  transition:
+    flex @sidenav-collapse-transition-config,
+    width @sidenav-collapse-transition-config;
   // Fixed firefox doesn't apply flex-basis if children width is so large.
   // https://github.com/philipwalton/flexbugs/issues/41#issuecomment-111590394
   min-width: 0;

package/Tabs/styles/index.css

@@ -21,9 +21,10 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/TagInput/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/TagPicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {