rsuite 5.55.0 → 5.56.0

package/Checkbox/styles/index.css

@@ -9,6 +9,13 @@
   --rs-gray-800: #575757;
   --rs-gray-900: #272c36;
   --rs-primary-500: #3498ff;
+  --rs-red-500: #f44336;
+  --rs-orange-500: #fa8900;
+  --rs-yellow-500: #ffb300;
+  --rs-green-500: #4caf50;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #2196f3;
+  --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-400);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-checkbox-icon: #fff;
@@ -32,6 +39,13 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #34c3ff;
+  --rs-red-500: #f04f43;
+  --rs-orange-500: #ff9800;
+  --rs-yellow-500: #ffc757;
+  --rs-green-500: #58b15b;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #1499ef;
+  --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-500);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-checkbox-icon: var(--rs-gray-800);
@@ -54,6 +68,13 @@
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #ffff00;
+  --rs-red-500: #bd1732;
+  --rs-orange-500: #ff9800;
+  --rs-yellow-500: #ffc757;
+  --rs-green-500: #0d822c;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #1499ef;
+  --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-500);
   --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-checkbox-icon: var(--rs-gray-800);
@@ -123,17 +144,16 @@
   position: relative;
 }
 /* rtl:begin:ignore */
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper::after,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   display: block;
 }
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control .rs-checkbox-inner::after {
   opacity: 0;
   -webkit-transform: rotate(45deg) scale(0);
           transform: rotate(45deg) scale(0);
@@ -142,12 +162,12 @@
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46), -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::after {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border: solid #fff;
   border: solid var(--rs-checkbox-icon);
   width: 6px;
@@ -156,12 +176,12 @@
   margin-left: 5px;
   opacity: 1;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg) scale(1);
           transform: rotate(45deg) scale(1);
 }
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 0 2px;
   -webkit-transform: rotate(0deg) scale(1);
           transform: rotate(0deg) scale(1);
@@ -171,7 +191,7 @@
 }
 /* rtl:end:ignore */
 /* stylelint-disable-next-line */
-.rs-checkbox-wrapper {
+.rs-checkbox-control {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -179,18 +199,22 @@
   left: 10px;
   top: 10px;
 }
-.rs-checkbox-wrapper [type='checkbox'] {
-  width: 0;
-  height: 0;
+.rs-checkbox-control [type='checkbox'] {
+  position: absolute;
   opacity: 0;
+  z-index: 1;
+  top: -10px;
+  right: -10px;
+  bottom: -10px;
+  left: -10px;
 }
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   width: 16px;
   height: 16px;
 }
-.rs-checkbox-wrapper::before {
+.rs-checkbox-control::before {
   border: 1px solid #3498ff;
   border: 1px solid var(--rs-checkbox-checked-bg);
   background-color: transparent;
@@ -204,23 +228,17 @@
   transition: transform 0.2s linear, opacity 0.2s linear;
   transition: transform 0.2s linear, opacity 0.2s linear, -webkit-transform 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper::before {
+.rs-theme-high-contrast .rs-checkbox-control::before {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper::before {
+.rs-checkbox-checked .rs-checkbox-control::before {
   -webkit-transform: scale(1.5);
           transform: scale(1.5);
   opacity: 0;
   visibility: visible;
 }
-.rs-checkbox-wrapper::after {
-  top: -10px;
-  right: -10px;
-  bottom: -10px;
-  left: -10px;
-}
-.rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-control .rs-checkbox-inner::before {
   border: 1px solid #d9d9d9;
   border: 1px solid var(--rs-checkbox-border);
   background-color: transparent;
@@ -230,34 +248,139 @@
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::before {
   -webkit-transition: none;
   transition: none;
 }
-label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
+label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #f7f7fa;
   border-color: var(--rs-checkbox-disabled-bg);
   background-color: #f7f7fa;
   background-color: var(--rs-checkbox-disabled-bg);
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
   background-color: #3498ff;
   background-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.3;
 }
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.5;
 }
+.rs-checkbox-red .rs-checkbox-control::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red label:hover .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-red.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+  background-color: #f44336;
+  background-color: var(--rs-red-500);
+}
+.rs-checkbox-orange .rs-checkbox-control::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange label:hover .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-orange.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+  background-color: #fa8900;
+  background-color: var(--rs-orange-500);
+}
+.rs-checkbox-yellow .rs-checkbox-control::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow label:hover .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-yellow.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+  background-color: #ffb300;
+  background-color: var(--rs-yellow-500);
+}
+.rs-checkbox-green .rs-checkbox-control::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green label:hover .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-green.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+  background-color: #4caf50;
+  background-color: var(--rs-green-500);
+}
+.rs-checkbox-cyan .rs-checkbox-control::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan label:hover .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-cyan.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+  background-color: #00bcd4;
+  background-color: var(--rs-cyan-500);
+}
+.rs-checkbox-blue .rs-checkbox-control::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue label:hover .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-blue.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+  background-color: #2196f3;
+  background-color: var(--rs-blue-500);
+}
+.rs-checkbox-violet .rs-checkbox-control::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet label:hover .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-violet.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+  background-color: #673ab7;
+  background-color: var(--rs-violet-500);
+}
 
 /*# sourceMappingURL=index.css.map */

package/Checkbox/styles/index.less

@@ -19,9 +19,8 @@
 }
 
 /* rtl:begin:ignore */
-.rs-checkbox-wrapper {
+.rs-checkbox-control {
   &::before,
-  &::after,
   .rs-checkbox-inner::before,
   .rs-checkbox-inner::after {
     content: '';
@@ -69,7 +68,7 @@
 /* rtl:end:ignore */
 
 /* stylelint-disable-next-line */ // For RTL Scope
-.rs-checkbox-wrapper {
+.rs-checkbox-control {
   position: absolute;
   width: @checkbox-width-height;
   height: @checkbox-width-height;
@@ -78,9 +77,15 @@
   top: @checkbox-sense-width;
 
   [type='checkbox'] {
-    width: 0;
-    height: 0;
+    position: absolute;
     opacity: 0;
+    z-index: 1;
+
+    // Sense area(Can be clicked)
+    top: -@checkbox-sense-width;
+    right: -@checkbox-sense-width;
+    bottom: -@checkbox-sense-width;
+    left: -@checkbox-sense-width;
   }
 
   &::before,
@@ -110,14 +115,6 @@
     }
   }
 
-  // Sense area(Can be clicked)
-  &::after {
-    top: -@checkbox-sense-width;
-    right: -@checkbox-sense-width;
-    bottom: -@checkbox-sense-width;
-    left: -@checkbox-sense-width;
-  }
-
   // Out border
   .rs-checkbox-inner::before {
     .checkbox-inner-wrap(var(--rs-checkbox-border));
@@ -153,3 +150,25 @@
     }
   }
 }
+
+each(@spectrum, .(@color) {
+  .rs-checkbox-@{color} {
+    .rs-checkbox-control::before{
+      border-color: var(~'--rs-@{color}-500');
+    }
+
+    label:hover{
+      .rs-checkbox-inner::before {
+        border-color: var(~'--rs-@{color}-500');
+      }
+    }
+
+    &.rs-checkbox-checked,
+    &.rs-checkbox-indeterminate  {
+      .rs-checkbox-inner::before{
+        border-color: var(~'--rs-@{color}-500');
+        background-color:var(~'--rs-@{color}-500');
+      }
+    }
+  }
+});

package/DatePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -3950,11 +3953,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-stack {
@@ -3995,6 +3998,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4034,7 +4040,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4108,7 +4113,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 

package/DatePicker/styles/index.less

@@ -65,6 +65,10 @@
   // The padding used when show week numbers.
   @calendar-padding-x-condensed: 12px;
 
+  &&-date {
+    padding: 0;
+  }
+
   .rs-picker-toolbar {
     max-width: 100%;
 
@@ -118,7 +122,6 @@
       }
     }
 
-    .rs-calendar-month-dropdown-cell-content,
     .rs-calendar-table-cell-content {
       width: @calendar-in-menu-content-side-length;
       height: @calendar-in-menu-content-side-length;
@@ -159,7 +162,7 @@
     }
 
     .rs-calendar-time-dropdown-column > ul {
-      height: 214px;
+      height: 198px;
       padding-bottom: 184px;
     }
   }

package/DateRangePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -3950,11 +3953,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-picker-toolbar {
@@ -3990,6 +3993,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4029,7 +4035,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4103,7 +4108,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 .rs-stack {
@@ -4124,35 +4129,38 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-daterange > .rs-input-group.rs-input-group-inside .rs-input {
   padding-right: 0;
 }
-.rs-picker-daterange-menu .rs-calendar {
+.rs-picker-popup.rs-picker-popup-daterange {
+  padding: 0;
+}
+.rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-daterange-menu .rs-calendar:first-child {
+.rs-picker-popup .rs-calendar:first-child {
   border-right: 1px solid #e5e5ea;
   border-right: 1px solid var(--rs-border-primary);
 }
-.rs-picker-daterange-menu .rs-calendar-header {
+.rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;
 }
-.rs-picker-daterange-menu .rs-calendar-header-month-toolbar {
+.rs-picker-popup .rs-calendar-header-month-toolbar {
   float: none;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown {
+.rs-picker-popup .rs-calendar-month-dropdown {
   z-index: 1;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown-list {
+.rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
   max-width: 255px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-calendar-single .rs-calendar {
+.rs-picker-popup .rs-picker-daterange-calendar-single .rs-calendar {
   border: 0;
   display: block;
   margin: auto;

package/DateRangePicker/styles/index.less

@@ -30,7 +30,11 @@
 // Date range Picker
 // ----------------------
 
-.rs-picker-daterange-menu {
+.rs-picker-popup {
+  &&-daterange {
+    padding: 0;
+  }
+
   .rs-calendar {
     display: inline-block;
     height: 274px;

package/InputPicker/styles/index.css

@@ -3278,11 +3278,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-picker-input {

package/Message/styles/index.css

@@ -436,7 +436,7 @@
   left: 0;
   width: 100%;
   border-radius: 0;
-  z-index: 1090;
+  z-index: 3;
 }
 .rs-message-success {
   background-color: #fff;