rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250507

package/NumberInput/styles/index.less

@@ -0,0 +1,74 @@
+@import '../../styles/common.less';
+@import '../../Input/styles/index.less';
+@import '../../InputGroup/styles/index.less';
+@import './mixin.less';
+
+.rs-number-input {
+  --rs-number-input-touchspin-font-size: var(--rs-font-size-xs);
+  --rs-number-input-touchspin-height-xs: calc(calc(@input-height-extra-small - 2px) / 2);
+  --rs-number-input-touchspin-height-sm: calc(calc(@input-height-small - 2px) / 2);
+  --rs-number-input-touchspin-height-md: calc(calc(@input-height-base - 2px) / 2);
+  --rs-number-input-touchspin-height-lg: calc(calc(@input-height-large - 2px) / 2);
+
+  &.rs-input-group {
+    width: auto;
+  }
+
+  @sizes: xs, sm, md, lg;
+
+  each(@sizes, .(@size, @index) {
+    &.rs-input-group-@{size} {
+      @offset: (@index - 1) * 2px;
+
+      --rs-number-input-touchspin-height: var(~'--rs-number-input-touchspin-height-@{size}');
+      --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - @offset);
+    }
+  });
+
+  &-btn-group-vertical {
+    border-left: 1px solid var(--rs-border-secondary);
+    position: relative;
+    width: 20px;
+    flex: 0 0 20px;
+    display: block;
+
+    & > .rs-btn {
+      display: block;
+      float: none;
+      width: 100%;
+      max-width: 100%;
+      position: relative;
+      border: none;
+    }
+  }
+
+  .rs-number-input-touchspin-up,
+  .rs-number-input-touchspin-down {
+    position: relative;
+    border-radius: var(--rs-radius-none);
+    padding: 0;
+    box-shadow: none !important;
+    height: var(--rs-number-input-touchspin-height);
+
+    > .rs-icon {
+      width: 100%;
+      font-size: var(--rs-number-input-touchspin-font-size);
+      color: var(--rs-text-secondary);
+      height: var(--rs-number-input-icon-height);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // Reset Input Number styling
+  // Reference https://stackoverflow.com/questions/26024771/styling-a-input-type-number#answer-40189766
+  input[type='number'] {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      /* stylelint-disable */
+      -webkit-appearance: none;
+    }
+  }
+}

package/Pagination/styles/index.css

@@ -107,8 +107,7 @@
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-overlay: var(--rs-gray-0);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) 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);
@@ -153,7 +152,6 @@
   --rs-listbox-option-selected-text: var(--rs-primary-700);
   --rs-listbox-option-selected-bg: var(--rs-primary-50);
   --rs-listbox-option-disabled-text: var(--rs-gray-400);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
@@ -164,7 +162,6 @@
   :root,
   .rs-theme-light {
     --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
     --rs-loader-ring: rgba(247, 247, 250, 0.8);
     --rs-loader-backdrop: rgba(255, 255, 255, 0.9);
     --rs-loader-ring-inverse: rgba(247, 247, 250, 0.3);
@@ -251,9 +248,8 @@
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-overlay: var(--rs-gray-700);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) 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);
@@ -298,15 +294,13 @@
   --rs-listbox-option-selected-text: var(--rs-primary-500);
   --rs-listbox-option-selected-bg: rgb(from var(--rs-primary-900) r g b / 20%);
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-500);
   --rs-picker-count-bg: var(--rs-primary-700);
   --rs-picker-count-text: #fff;
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --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-backdrop: rgba(15, 19, 26, 0.83);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
@@ -395,8 +389,7 @@
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
   --rs-btn-default-border-color: var(--rs-primary-500);
@@ -442,7 +435,6 @@
   --rs-listbox-option-selected-text: var(--rs-primary-500);
   --rs-listbox-option-selected-bg: transparent;
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-pagination-item-text: var(--rs-gray-50);
   --rs-pagination-item-current-text: var(--rs-primary-500);
   --rs-picker-value: var(--rs-primary-500);
@@ -514,10 +506,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1481,15 +1471,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);
@@ -1574,18 +1561,14 @@
 .rs-theme-high-contrast .rs-input-group {
   transition: none;
 }
-.rs-input-group:not(.rs-input-group-disabled):hover,
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
   border-color: var(--rs-input-focus-border);
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
-.rs-theme-high-contrast .rs-input-group:focus-within {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input-group .rs-input-group {
   outline: none !important;
@@ -1594,7 +1577,7 @@
 .rs-input-group .rs-input-group-btn {
   height: var(--rs-input-group-input-height);
 }
-.rs-input-group .rs-input-number,
+.rs-input-group .rs-number-input,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
 .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
@@ -1744,15 +1727,6 @@
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
-.rs-btn-close:hover,
-.rs-btn-close:focus {
-  color: var(--rs-close-button-hover-color);
-}
-.rs-btn-close:hover svg path,
-.rs-btn-close:focus svg path {
-  stroke: var(--rs-close-button-hover-color);
-  stroke-width: 1;
-}
 .rs-picker[data-variant='subtle'] .picker-subtle-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
@@ -1761,12 +1735,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
   display: none;
@@ -1776,6 +1748,7 @@
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
+  --rs-picker-toggle-border-color: var(--rs-border-primary);
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
@@ -1795,6 +1768,9 @@
 .rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
+.rs-picker[data-disabled='true'] .rs-picker-toggle {
+  pointer-events: none;
+}
 .rs-picker-toggle .rs-picker-toggle-placeholder {
   color: var(--rs-text-secondary);
 }
@@ -1817,13 +1793,14 @@
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker-toggle-active,
 .rs-picker.rs-picker-focused {
-  box-shadow: var(--rs-state-focus-shadow);
+  --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
@@ -1932,12 +1909,13 @@
 }
 [data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
-  border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
+  border-width: var(--rs-picker-toggle-border-width);
+  border-color: var(--rs-picker-toggle-border-color);
+  border-style: solid;
 }
 [data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
 .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
   border-color: var(--rs-input-focus-border);
 }
@@ -1949,12 +1927,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
   display: none;
@@ -2007,12 +1983,7 @@
 .rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-toggle .rs-picker[data-variant='default']:hover,
-:not([data-disabled='true']) .rs-picker-toggle:hover,
-.rs-picker-toggle .rs-picker[data-variant='default']:focus,
-:not([data-disabled='true']) .rs-picker-toggle:focus,
-.rs-picker-toggle .rs-picker[data-variant='default']-active,
-:not([data-disabled='true']) .rs-picker-toggle-active {
+.rs-picker-toggle .rs-picker[data-variant='default']:focus {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker[data-variant='subtle'] .rs-picker-toggle {
@@ -2073,15 +2044,13 @@
   align-items: center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  font-size: var(--rs-font-size-sm);
-  background: inherit;
   color: var(--rs-text-secondary);
   transition: 0.2s color linear;
   cursor: pointer;
 }
+.rs-picker-toggle-indicator .rs-picker-clean:hover {
+  color: var(--rs-text-primary);
+}
 .rs-picker-toggle-indicator .rs-picker-clean.rs-btn-close {
   padding: 0;
 }
@@ -2119,17 +2088,13 @@
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline-offset: 2px;
-}
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item:focus .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus .rs-check-tree-node-text-wrapper {
@@ -2236,17 +2201,13 @@
 .rs-theme-high-contrast .rs-picker-select-menu-item:hover,
 .rs-theme-high-contrast .rs-picker-select-menu-item:focus,
 .rs-theme-high-contrast .rs-picker-select-menu-item.rs-picker-select-menu-item-focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item:hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item.rs-picker-select-menu-item-focus {
-  outline-offset: 2px;
-}
 .rs-picker-select-menu-item.rs-picker-select-menu-item-active {
   font-weight: bold;
   color: var(--rs-listbox-option-selected-text);
@@ -2362,10 +2323,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-pagination-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-pagination-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-pagination-btn:hover {
   color: var(--rs-btn-default-hover-text);

package/PasswordInput/styles/index.css

@@ -60,14 +60,14 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
   }
 }
 .rs-theme-high-contrast {
@@ -132,15 +132,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);

package/PinInput/package.json

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

package/PinInput/styles/index.css

@@ -0,0 +1,212 @@
+:root {
+  --rs-input-font-size-xs: var(--rs-font-size-xs);
+  --rs-input-font-size-sm: var(--rs-font-size-sm);
+  --rs-input-font-size-md: var(--rs-font-size-sm);
+  --rs-input-font-size-lg: var(--rs-font-size-md);
+  --rs-input-line-height-xs: 1.66666667;
+  --rs-input-line-height-sm: 1.42857143;
+  --rs-input-line-height-md: 1.42857143;
+  --rs-input-line-height-lg: 1.375;
+  --rs-input-border-radius: var(--rs-radius-md);
+  --rs-input-padding-block-xs: calc(2px - 1px);
+  --rs-input-padding-block-sm: calc(5px - 1px);
+  --rs-input-padding-block-md: calc(8px - 1px);
+  --rs-input-padding-block-lg: calc(10px - 1px);
+  --rs-input-padding-inline-xs: calc(var(--rs-spacing) - 1px);
+  --rs-input-padding-inline-sm: calc(calc(var(--rs-spacing) * 2) - 1px);
+  --rs-input-padding-inline-md: calc(calc(var(--rs-spacing) * 2.5) - 1px);
+  --rs-input-padding-inline-lg: calc(calc(var(--rs-spacing) * 3) - 1px);
+}
+.rs-input {
+  display: block;
+  width: 100%;
+  color: var(--rs-text-primary);
+  background-color: var(--rs-input-bg);
+  background-image: none;
+  border: 1px solid var(--rs-border-primary);
+  transition: border-color ease-in-out 0.15s;
+  border-radius: var(--rs-input-border-radius);
+  font-size: var(--rs-input-font-size);
+  line-height: var(--rs-input-line-height);
+  padding-block: var(--rs-input-padding-block);
+  padding-inline: var(--rs-input-padding-inline);
+}
+.rs-theme-high-contrast .rs-input {
+  transition: none;
+}
+.rs-input::-moz-placeholder {
+  color: var(--rs-text-secondary);
+}
+.rs-input::placeholder {
+  color: var(--rs-text-secondary);
+}
+.rs-input:focus {
+  border-color: var(--rs-input-focus-border);
+}
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
+}
+.rs-input:disabled {
+  background-color: var(--rs-input-disabled-bg);
+  color: var(--rs-text-disabled);
+}
+.rs-input.rs-input-xs {
+  --rs-input-font-size: var(--rs-input-font-size-xs);
+  --rs-input-line-height: var(--rs-input-line-height-xs);
+  --rs-input-padding-block: var(--rs-input-padding-block-xs);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-xs);
+}
+.rs-input.rs-input-sm {
+  --rs-input-font-size: var(--rs-input-font-size-sm);
+  --rs-input-line-height: var(--rs-input-line-height-sm);
+  --rs-input-padding-block: var(--rs-input-padding-block-sm);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-sm);
+}
+.rs-input.rs-input-md {
+  --rs-input-font-size: var(--rs-input-font-size-md);
+  --rs-input-line-height: var(--rs-input-line-height-md);
+  --rs-input-padding-block: var(--rs-input-padding-block-md);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-md);
+}
+.rs-input.rs-input-lg {
+  --rs-input-font-size: var(--rs-input-font-size-lg);
+  --rs-input-line-height: var(--rs-input-line-height-lg);
+  --rs-input-padding-block: var(--rs-input-padding-block-lg);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
+}
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-md: 1rem;
+  --rs-spacing: 0.25rem;
+  --rs-radius-md: 0.375rem;
+}
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-400: #b6b7b8;
+  --rs-gray-500: #939393;
+  --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
+  --rs-gray-800: #343434;
+  --rs-primary-500: #3498ff;
+  --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-disabled: 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-input-bg: var(--rs-gray-0);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-50);
+}
+@supports not (color: rgb(from white r g b)) {
+  :root,
+  .rs-theme-light {
+    --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
+  }
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-500: #34c3ff;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --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-input-bg: var(--rs-gray-800);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-700);
+}
+@supports not (color: rgb(from white r g b)) {
+  .rs-theme-dark {
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
+  }
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-500: #ffff00;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-border-primary: var(--rs-gray-100);
+  --rs-color-focus-ring: var(--rs-gray-0);
+  --rs-input-bg: var(--rs-gray-800);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-700);
+}
+.rs-pin-input {
+  --rs-pin-input-size-lg: 42px;
+  --rs-pin-input-size-md: 36px;
+  --rs-pin-input-size-sm: 30px;
+  --rs-pin-input-size-xs: 24px;
+  --rs-pin-input-size: var(--rs-pin-input-size-md);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rs-pin-input-segment {
+  text-align: center;
+  width: var(--rs-pin-input-size);
+  caret-color: transparent;
+}
+.rs-pin-input-segment.rs-input-lg {
+  --rs-pin-input-size: var(--rs-pin-input-size-lg);
+}
+.rs-pin-input-segment.rs-input-md {
+  --rs-pin-input-size: var(--rs-pin-input-size-md);
+}
+.rs-pin-input-segment.rs-input-sm {
+  --rs-pin-input-size: var(--rs-pin-input-size-sm);
+}
+.rs-pin-input-segment.rs-input-xs {
+  --rs-pin-input-size: var(--rs-pin-input-size-xs);
+}
+.rs-pin-input-masked {
+  font-family: monospace;
+}
+.rs-pin-input-attached .rs-pin-input-segment:not(:first-child) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rs-pin-input-attached .rs-pin-input-segment:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rs-pin-input-attached .rs-pin-input-segment:focus {
+  z-index: 1;
+  position: relative;
+}