rsuite 5.57.0 → 5.58.0

package/TagPicker/styles/index.css

@@ -2908,31 +2908,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-clean {
   top: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn,
 .rs-picker-daterange .rs-picker-toggle.rs-btn {
   padding-right: 36px;
@@ -2977,31 +2952,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-lg {
   padding-left: 15px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 8px 16px;
-  font-size: 16px;
-  line-height: 1.375;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-tag {
-  margin-top: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-lg {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-lg,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-lg {
   padding-right: 42px;
@@ -3078,31 +3028,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-md {
   padding-left: 11px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-md {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-md,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-md {
   padding-right: 36px;
@@ -3181,31 +3106,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-sm {
   padding-left: 9px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 4px 10px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox {
-  padding-bottom: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-tag {
-  margin-top: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 10px;
-  margin-top: 2px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-sm {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-sm,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-sm {
   padding-right: 34px;
@@ -3231,8 +3131,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   font-size: 12px;
   line-height: 20px;
   padding: 2px 8px;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .rs-btn-ghost.rs-picker-toggle.rs-btn-xs {
   padding: 1px 7px;
@@ -3286,41 +3184,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-xs {
   padding-left: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 1px 8px;
-  font-size: 12px;
-  line-height: 1.66666667;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 8px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-xs,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-xs {
   padding-right: 30px;
@@ -3629,15 +3492,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   margin-right: 32px;
   min-height: 34px;
 }
-.rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox {
-  min-height: 40px;
-}
-.rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox {
-  min-height: 28px;
-}
-.rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  min-height: 22px;
-}
 .rs-picker-cleanable .rs-picker-textbox {
   margin-right: 44px;
 }
@@ -3680,6 +3534,35 @@ textarea.rs-picker-search-input {
 .rs-picker-focused .rs-picker-search-input {
   z-index: 6;
 }
+.rs-picker-input-lg .rs-picker-search-input {
+  padding: 8px 16px;
+  font-size: 16px;
+  line-height: 1.375;
+}
+.rs-picker-input-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-input-md .rs-picker-search-input {
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+}
+.rs-picker-input-sm .rs-picker-search-input {
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 1.42857143;
+}
+.rs-picker-input-sm .rs-picker-textbox {
+  min-height: 28px;
+}
+.rs-picker-input-xs .rs-picker-search-input {
+  padding: 1px 8px;
+  font-size: 12px;
+  line-height: 1.66666667;
+}
+.rs-picker-input-xs .rs-picker-textbox {
+  min-height: 22px;
+}
 .rs-picker-tag .rs-picker-toggle {
   left: 0;
   cursor: text;
@@ -3704,10 +3587,6 @@ textarea.rs-picker-search-input {
 .rs-picker-tag.rs-picker-has-value .rs-picker-search-input {
   padding-left: 6px;
 }
-.rs-picker-tag .rs-tag,
-.rs-picker-tag .rs-tag + .rs-tag {
-  margin-left: 6px;
-}
 .rs-picker-tag .rs-picker-search,
 .rs-picker-tag .rs-picker-search-input,
 .rs-picker-tag .rs-picker-search-input > input {
@@ -3729,5 +3608,108 @@ textarea.rs-picker-search-input {
 .rs-plaintext .rs-tag {
   margin: 0;
 }
+.rs-picker-tag-lg .rs-picker-textbox {
+  padding-bottom: 6px;
+}
+.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 16px;
+  margin-top: 6px;
+  font-size: 16px;
+}
+.rs-picker-tag-lg .rs-picker-textbox input {
+  height: 20px;
+}
+.rs-picker-tag-lg .rs-picker-toggle {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
+  margin-top: 6px;
+  margin-left: 6px;
+}
+.rs-picker-tag .rs-picker-textbox,
+.rs-picker-tag-md .rs-picker-textbox {
+  padding-bottom: 5px;
+}
+.rs-picker-tag .rs-picker-textbox .rs-picker-search-input,
+.rs-picker-tag-md .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 12px;
+  margin-top: 5px;
+  font-size: 14px;
+}
+.rs-picker-tag .rs-picker-textbox input,
+.rs-picker-tag-md .rs-picker-textbox input {
+  height: 18px;
+}
+.rs-picker-tag .rs-picker-toggle,
+.rs-picker-tag-md .rs-picker-toggle {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag .rs-picker-tag-list .rs-tag-md,
+.rs-picker-tag-md .rs-picker-tag-list .rs-tag-md {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.rs-picker-tag-sm .rs-picker-textbox {
+  padding-bottom: 2px;
+}
+.rs-picker-tag-sm .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 10px;
+  margin-top: 2px;
+  font-size: 14px;
+}
+.rs-picker-tag-sm .rs-picker-textbox input {
+  height: 18px;
+}
+.rs-picker-tag-sm .rs-picker-toggle {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-sm .rs-picker-textbox {
+  min-height: 28px;
+}
+.rs-picker-tag-sm .rs-picker-tag-list .rs-tag-sm {
+  margin-top: 4px;
+  margin-left: 4px;
+}
+.rs-picker-tag-xs .rs-picker-textbox {
+  padding-bottom: -1px;
+}
+.rs-picker-tag-xs .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 8px;
+  margin-top: -1px;
+  font-size: 12px;
+}
+.rs-picker-tag-xs .rs-picker-textbox input {
+  height: 18px;
+}
+.rs-picker-tag-xs .rs-picker-toggle {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-xs .rs-picker-textbox {
+  min-height: 22px;
+  padding-bottom: 1px;
+}
+.rs-picker-tag-xs .rs-picker-textbox .rs-picker-search-input {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.rs-picker-tag-xs .rs-picker-tag-list .rs-tag-sm {
+  margin-top: 1px;
+  margin-left: 2px;
+}
 
 /*# sourceMappingURL=index.css.map */

package/TagPicker/styles/index.less

@@ -3,6 +3,7 @@
 @import '../../Checkbox/styles/index.less';
 @import '../../internals/Picker/styles/mixin.less';
 @import '../../InputPicker/styles/index.less';
+@import './mixin.less';
 
 .rs-picker-tag {
   .rs-picker-toggle {
@@ -34,11 +35,6 @@
     padding-left: @tag-picker-content-padding-horizontal;
   }
 
-  .rs-tag,
-  .rs-tag + .rs-tag {
-    margin-left: @tag-picker-content-padding-horizontal;
-  }
-
   .rs-picker-search {
     &,
     &-input,
@@ -68,3 +64,59 @@
 .rs-plaintext .rs-tag {
   margin: 0;
 }
+
+// Tag Picker Size
+// --------------------------------------------------
+.rs-picker-tag-lg {
+  .rs-tag-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+  .rs-picker-tag-list .rs-tag-lg {
+    margin-top: 6px;
+    margin-left: 6px;
+  }
+}
+
+// Default size
+.rs-picker-tag,
+.rs-picker-tag-md {
+  .rs-tag-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
+  .rs-picker-tag-list .rs-tag-md {
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+}
+
+.rs-picker-tag-sm {
+  .rs-tag-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
+  .rs-picker-textbox {
+    min-height: 28px;
+  }
+  .rs-picker-tag-list .rs-tag-sm {
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+}
+
+.rs-picker-tag-xs {
+  .rs-tag-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
+
+  .rs-picker-textbox {
+    min-height: 22px;
+    padding-bottom: @padding-y-xs - 1px;
+
+    // Adjust search-input size the same with button
+    .rs-picker-search-input {
+      .padding-vertical(1px);
+    }
+  }
+
+  .rs-picker-tag-list {
+    // Tag does not have `xs` size, and the size needs to be determined through the superior element.
+    .rs-tag-sm {
+      margin-top: 1px;
+      margin-left: 2px;
+    }
+  }
+}

package/TagPicker/styles/mixin.less

@@ -0,0 +1,21 @@
+.rs-tag-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
+  .rs-picker-textbox {
+    padding-bottom: @padding-vertical - 3px;
+
+    .rs-picker-search-input {
+      padding-left: @padding-horizontal;
+      margin-top: @padding-vertical - 3px;
+      font-size: @font-size;
+    }
+
+    input {
+      height: @line-height * @font-size - 2px;
+    }
+  }
+
+  .rs-picker-toggle {
+    padding-top: @padding-vertical - 1px;
+    padding-bottom: @padding-vertical - 1px;
+    box-shadow: none;
+  }
+}

package/Text/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Text",
+  "private": true,
+  "main": "../cjs/Text/index.js",
+  "module": "../esm/Text/index.js",
+  "types": "../esm/Text/index.d.ts"
+}

package/Text/styles/index.css

@@ -0,0 +1,192 @@
+:root,
+.rs-theme-light {
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-800: #575757;
+  --rs-gray-900: #272c36;
+  --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-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-weight-thin: 100;
+  --rs-text-weight-light: 300;
+  --rs-text-weight-medium: 500;
+  --rs-text-weight-semibold: 600;
+  --rs-text-weight-bold: 700;
+  --rs-text-weight-extrabold: 800;
+  --rs-bg-well: var(--rs-gray-50);
+}
+.rs-theme-dark {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --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-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-bg-well: var(--rs-gray-900);
+}
+.rs-theme-high-contrast {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --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-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-bg-well: var(--rs-gray-900);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rs-text {
+  font-family: Apple-System, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+  line-height: 1.42857143;
+  color: #575757;
+  color: var(--rs-text-primary);
+  margin: 0;
+}
+blockquote.rs-text {
+  font-style: italic;
+  padding-left: 1.5rem;
+  border-left: 2px solid #e5e5ea;
+  border-left: 2px solid var(--rs-gray-200);
+}
+kbd.rs-text {
+  background-color: #f7f7fa;
+  background-color: var(--rs-bg-well);
+  border: solid #c8c8c8;
+  -o-border-image: initial;
+     border-image: initial;
+  border-radius: 0.25em;
+  border-width: 1px 1px 2px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 0.875em;
+  padding: 0.2em 0.3em;
+}
+.rs-text.rs-text-muted {
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+}
+.rs-text-left {
+  text-align: left;
+}
+.rs-text-center {
+  text-align: center;
+}
+.rs-text-right {
+  text-align: right;
+}
+.rs-text-justify {
+  text-align: justify;
+}
+.rs-text-uppercase {
+  text-transform: uppercase;
+}
+.rs-text-lowercase {
+  text-transform: lowercase;
+}
+.rs-text-capitalize {
+  text-transform: capitalize;
+}
+.rs-text-thin {
+  font-weight: 100;
+  font-weight: var(--rs-text-weight-thin);
+}
+.rs-text-light {
+  font-weight: 300;
+  font-weight: var(--rs-text-weight-light);
+}
+.rs-text-medium {
+  font-weight: 500;
+  font-weight: var(--rs-text-weight-medium);
+}
+.rs-text-semibold {
+  font-weight: 600;
+  font-weight: var(--rs-text-weight-semibold);
+}
+.rs-text-bold {
+  font-weight: 700;
+  font-weight: var(--rs-text-weight-bold);
+}
+.rs-text-extrabold {
+  font-weight: 800;
+  font-weight: var(--rs-text-weight-extrabold);
+}
+.rs-text-pre-line {
+  white-space: pre-line;
+}
+.rs-text-ellipsis {
+  overflow: hidden;
+}
+@supports (-webkit-line-clamp: 1) {
+  .rs-text-ellipsis {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+}
+@supports not (-webkit-line-clamp: 1) {
+  .rs-text-ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: break-word;
+  }
+}
+.rs-text-red {
+  color: #f44336;
+  color: var(--rs-red-500);
+}
+.rs-text-orange {
+  color: #fa8900;
+  color: var(--rs-orange-500);
+}
+.rs-text-yellow {
+  color: #ffb300;
+  color: var(--rs-yellow-500);
+}
+.rs-text-green {
+  color: #4caf50;
+  color: var(--rs-green-500);
+}
+.rs-text-cyan {
+  color: #00bcd4;
+  color: var(--rs-cyan-500);
+}
+.rs-text-blue {
+  color: #2196f3;
+  color: var(--rs-blue-500);
+}
+.rs-text-violet {
+  color: #673ab7;
+  color: var(--rs-violet-500);
+}
+
+/*# sourceMappingURL=index.css.map */