@hi-ui/input 4.0.0-alpha.20 → 4.0.0-alpha.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/lib/cjs/Input.js +52 -75
  2. package/lib/cjs/Input.js.map +1 -1
  3. package/lib/cjs/TextArea.js +102 -0
  4. package/lib/cjs/TextArea.js.map +1 -0
  5. package/lib/cjs/index.js +3 -0
  6. package/lib/cjs/index.js.map +1 -1
  7. package/lib/cjs/styles/index.scss.js +1 -1
  8. package/lib/cjs/use-input.js +126 -0
  9. package/lib/cjs/use-input.js.map +1 -0
  10. package/lib/cjs/utils/index.js +192 -0
  11. package/lib/cjs/utils/index.js.map +1 -0
  12. package/lib/esm/Input.js +51 -74
  13. package/lib/esm/Input.js.map +1 -1
  14. package/lib/esm/TextArea.js +81 -0
  15. package/lib/esm/TextArea.js.map +1 -0
  16. package/lib/esm/index.js +1 -0
  17. package/lib/esm/index.js.map +1 -1
  18. package/lib/esm/styles/index.scss.js +1 -1
  19. package/lib/esm/use-input.js +116 -0
  20. package/lib/esm/use-input.js.map +1 -0
  21. package/lib/esm/utils/index.js +176 -0
  22. package/lib/esm/utils/index.js.map +1 -0
  23. package/lib/types/Input.d.ts +3 -3
  24. package/lib/types/MockInput.d.ts +1 -1
  25. package/lib/types/TextArea.d.ts +22 -0
  26. package/lib/types/index.d.ts +1 -0
  27. package/lib/types/use-input.d.ts +78 -0
  28. package/lib/types/utils/index.d.ts +9 -1
  29. package/package.json +12 -10
package/lib/esm/index.js CHANGED
@@ -9,5 +9,6 @@
9
9
  */
10
10
  import './styles/index.scss.js';
11
11
  export { Input, Input as default, onChangeMock } from './Input.js';
12
+ export { TextArea } from './TextArea.js';
12
13
  export { MockInput } from './MockInput.js';
13
14
  //# sourceMappingURL=index.js.map
package/lib/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-mock-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input.disabled {\n cursor: not-allowed; }\n.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n text-align: center;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n visibility: hidden;\n opacity: 0;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-mock-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-mock-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-mock-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\n text-align: center; }\n.hi-v4-mock-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: inline-block;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap; }\n.hi-v4-mock-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--appearance-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-outline:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-mock-input--appearance-unset:not(.disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-filled:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-unset.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n box-sizing: border-box;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input::-webkit-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-moz-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:disabled {\n cursor: not-allowed; }\n.hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n outline: none;\n z-index: auto; }\n.hi-v4-input__inner:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__inner:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__outer {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%;\n vertical-align: middle; }\n.hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n text-align: center;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n visibility: hidden;\n opacity: 0; }\n.hi-v4-input__clear:hover {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-input__inner--suffix .hi-v4-input__clear {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n -webkit-margin-end: var(--hi-v4-spacing-2, 4px);\n margin-inline-end: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: inherit;\n text-align: center; }\n.hi-v4-input__prefix {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__suffix {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n background-color: #f5f7fa;\n background-color: var(--hi-v4-color-gray-50, #f5f7fa);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n white-space: nowrap;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n z-index: 1;\n z-index: var(--hi-v4-zindex-absolute, 1); }\n.hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin-right: -1px; }\n.hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px; }\n.hi-v4-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem; }\n.hi-v4-input--size-sm .hi-v4-input {\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-sm .hi-v4-input__inner,\n .hi-v4-input--size-sm .hi-v4-input__prepend,\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-sm .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem; }\n.hi-v4-input--size-md .hi-v4-input {\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-md .hi-v4-input__inner,\n .hi-v4-input--size-md .hi-v4-input__prepend,\n .hi-v4-input--size-md .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-md .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem; }\n.hi-v4-input--size-lg .hi-v4-input {\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-lg .hi-v4-input__inner,\n .hi-v4-input--size-lg .hi-v4-input__prepend,\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-lg .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid #dfe2e8;\n border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid.hover::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner.disabled, .hi-v4-input--appearance-unset .hi-v4-input__inner.disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
10
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-mock-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input.disabled {\n cursor: not-allowed; }\n.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n text-align: center;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n visibility: hidden;\n opacity: 0;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-mock-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-mock-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-mock-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\n text-align: center; }\n.hi-v4-mock-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: inline-block;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap; }\n.hi-v4-mock-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--appearance-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-outline:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-mock-input--appearance-unset:not(.disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-filled:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-unset.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n box-sizing: border-box;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input::-webkit-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-moz-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:disabled {\n cursor: not-allowed; }\n.hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n outline: none;\n z-index: auto; }\n.hi-v4-input__inner:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__inner:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__outer {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%;\n vertical-align: middle; }\n.hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n text-align: center;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n visibility: hidden;\n opacity: 0; }\n.hi-v4-input__clear:hover {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-input__inner--suffix .hi-v4-input__clear {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n -webkit-margin-end: var(--hi-v4-spacing-2, 4px);\n margin-inline-end: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: inherit;\n text-align: center; }\n.hi-v4-input__prefix {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__suffix {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n background-color: #f5f7fa;\n background-color: var(--hi-v4-color-gray-50, #f5f7fa);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n white-space: nowrap;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n z-index: 1;\n z-index: var(--hi-v4-zindex-absolute, 1); }\n.hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin-right: -1px; }\n.hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px; }\n.hi-v4-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem; }\n.hi-v4-input--size-sm .hi-v4-input {\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-sm .hi-v4-input__inner,\n .hi-v4-input--size-sm .hi-v4-input__prepend,\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-sm .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem; }\n.hi-v4-input--size-md .hi-v4-input {\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-md .hi-v4-input__inner,\n .hi-v4-input--size-md .hi-v4-input__prepend,\n .hi-v4-input--size-md .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-md .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem; }\n.hi-v4-input--size-lg .hi-v4-input {\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-lg .hi-v4-input__inner,\n .hi-v4-input--size-lg .hi-v4-input__prepend,\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-lg .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid #dfe2e8;\n border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid.hover::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner.disabled, .hi-v4-input--appearance-unset .hi-v4-input__inner.disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\ntextarea.hi-v4-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n display: block;\n resize: vertical;\n overflow: auto;\n position: relative;\n width: 100%;\n z-index: auto;\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\ntextarea.hi-v4-input::-webkit-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\ntextarea.hi-v4-input::-moz-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\ntextarea.hi-v4-input::-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\ntextarea.hi-v4-input:-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\ntextarea.hi-v4-input::placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\ntextarea.hi-v4-input:disabled {\n cursor: not-allowed; }\ntextarea.hi-v4-input:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\ntextarea.hi-v4-input:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\ntextarea.hi-v4-input--size-sm {\n height: auto;\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\ntextarea.hi-v4-input--size-md {\n height: auto;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\ntextarea.hi-v4-input--size-lg {\n height: auto;\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\ntextarea.hi-v4-input--appearance-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\ntextarea.hi-v4-input--appearance-outline:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-outline:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-outline:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-outline:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-outline:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\ntextarea.hi-v4-input--appearance-unset {\n border-radius: 0; }\ntextarea.hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\ntextarea.hi-v4-input--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\ntextarea.hi-v4-input--appearance-filled:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-filled:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\ntextarea.hi-v4-input--appearance-filled:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-filled:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-filled:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\ntextarea.hi-v4-input--appearance-underline {\n padding-left: 0;\n padding-right: 0;\n border-radius: 0; }\ntextarea.hi-v4-input--appearance-underline::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid #dfe2e8;\n border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\ntextarea.hi-v4-input--appearance-underline:not(.disabled):hover::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-underline:not(.disabled).focused::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-underline:not(.disabled).invalid::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-underline:not(.disabled).invalid.hover::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-outline.disabled, textarea.hi-v4-input--appearance-unset.disabled, textarea.hi-v4-input--appearance-filled.disabled, textarea.hi-v4-input--appearance-underline.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
package/lib/esm/use-input.js ADDED
@@ -0,0 +1,116 @@
1
+ /** @LICENSE
2
+ * @hi-ui/input
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { useCallback, useState, useMemo } from 'react';
11
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
12
+ import { useLatestCallback } from '@hi-ui/use-latest';
13
+ import { setAttrStatus } from '@hi-ui/dom-utils';
14
+ import { pure, format, formatAmount } from './utils/index.js';
15
+
16
+ var useInput = function useInput(_ref) {
17
+ var name = _ref.name,
18
+ _ref$autoFocus = _ref.autoFocus,
19
+ autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
20
+ _ref$disabled = _ref.disabled,
21
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
22
+ _ref$readOnly = _ref.readOnly,
23
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
24
+ maxLength = _ref.maxLength,
25
+ placeholder = _ref.placeholder,
26
+ _ref$defaultValue = _ref.defaultValue,
27
+ defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
28
+ valueProp = _ref.value,
29
+ onChange = _ref.onChange,
30
+ onFocus = _ref.onFocus,
31
+ onBlur = _ref.onBlur,
32
+ _ref$trimValueOnBlur = _ref.trimValueOnBlur,
33
+ trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
34
+ _ref$type = _ref.type,
35
+ type = _ref$type === void 0 ? 'text' : _ref$type,
36
+ clearElementRef = _ref.clearElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
37
+
38
+ var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
39
+ value = _useUncontrolledState[0],
40
+ tryChangeValue = _useUncontrolledState[1];
41
+
42
+ var handleChange = useCallback(function (evt, trim) {
43
+ if (trim === void 0) {
44
+ trim = false;
45
+ }
46
+
47
+ evt.persist();
48
+ var nextValue = evt.target.value;
49
+ var valueTrue = pure(nextValue, type); // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
50
+
51
+ var value = format(nextValue, type);
52
+
53
+ if (trim) {
54
+ valueTrue = valueTrue.trim();
55
+ value = value.trim();
56
+ }
57
+
58
+ evt.target.value = value;
59
+ tryChangeValue(valueTrue, evt);
60
+ }, [tryChangeValue, type]);
61
+
62
+ var _useState = useState(autoFocus),
63
+ focused = _useState[0],
64
+ setFocused = _useState[1];
65
+
66
+ var handleFocus = useLatestCallback(function (evt) {
67
+ setFocused(true);
68
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
69
+ });
70
+ var handleBlur = useLatestCallback(function (event) {
71
+ var relatedTarget = event.relatedTarget; // 拦截 clear 情况 触发 input 失焦
72
+
73
+ if (clearElementRef.current && clearElementRef.current === relatedTarget) {
74
+ return;
75
+ }
76
+
77
+ setFocused(false); // amount 自动添加小数
78
+
79
+ if (type === 'amount') {
80
+ event.target.value = formatAmount(value, true);
81
+ handleChange(event, trimValueOnBlur);
82
+ } else if (trimValueOnBlur) {
83
+ handleChange(event, true);
84
+ }
85
+
86
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
87
+ });
88
+ var nativeInputProps = useMemo(function () {
89
+ return {
90
+ name: name,
91
+ disabled: disabled,
92
+ readOnly: readOnly,
93
+ autoFocus: autoFocus,
94
+ placeholder: placeholder,
95
+ maxLength: maxLength,
96
+ 'data-focused': setAttrStatus(focused)
97
+ };
98
+ }, [disabled, readOnly, autoFocus, placeholder, maxLength, name, focused]);
99
+ var getInputProps = useCallback(function () {
100
+ return Object.assign(Object.assign({}, nativeInputProps), {
101
+ value: format(value, type),
102
+ onChange: handleChange,
103
+ onFocus: handleFocus,
104
+ onBlur: handleBlur
105
+ });
106
+ }, [value, type, handleChange, handleFocus, handleBlur, nativeInputProps]);
107
+ return {
108
+ focused: focused,
109
+ value: value,
110
+ tryChangeValue: tryChangeValue,
111
+ getInputProps: getInputProps
112
+ };
113
+ };
114
+
115
+ export { useInput };
116
+ //# sourceMappingURL=use-input.js.map
package/lib/esm/use-input.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-input.js","sources":["../../src/use-input.ts"],"sourcesContent":[null],"names":["useInput","name","autoFocus","disabled","readOnly","maxLength","placeholder","defaultValue","valueProp","value","onChange","onFocus","onBlur","trimValueOnBlur","type","clearElementRef","useUncontrolledState","Object","is","tryChangeValue","handleChange","useCallback","evt","trim","persist","nextValue","target","valueTrue","pure","format","useState","focused","setFocused","handleFocus","useLatestCallback","handleBlur","event","relatedTarget","current","formatAmount","nativeInputProps","useMemo","setAttrStatus","getInputProps"],"mappings":"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"}
package/lib/esm/utils/index.js ADDED
@@ -0,0 +1,176 @@
1
+ /** @LICENSE
2
+ * @hi-ui/input
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+
11
+ /**
12
+ * 格式化身份证
13
+ */
14
+ var formatId = function formatId(val) {
15
+ val = val.replace(/[^a-zA-Z0-9]/g, '');
16
+ var len = val.length;
17
+
18
+ if (val === '' || len < 7) {
19
+ return val;
20
+ }
21
+
22
+ if (len < 11) {
23
+ return val.slice(0, 6) + ' ' + val.slice(6, 10);
24
+ } else if (len < 15) {
25
+ return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14);
26
+ } else {
27
+ return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14) + ' ' + val.slice(14, 18);
28
+ }
29
+ };
30
+
31
+ var pureId = function pureId(val) {
32
+ var tmp = val.replace(/[^\d|.]/g, '');
33
+ return tmp.slice(0, 18);
34
+ };
35
+ /**
36
+ * 格式化手机号
37
+ */
38
+
39
+
40
+ var formatTel = function formatTel(val) {
41
+ val = val.replace(/\D/g, '');
42
+ var len = val.length;
43
+
44
+ if (val === '' || len < 4) {
45
+ return val;
46
+ }
47
+
48
+ if (len < 8) {
49
+ return val.slice(0, 3) + ' ' + val.slice(3, 7);
50
+ } else {
51
+ return val.slice(0, 3) + ' ' + val.slice(3, 7) + ' ' + val.slice(7, 11);
52
+ }
53
+ };
54
+
55
+ var pureTel = function pureTel(val) {
56
+ var tmp = val.replace(/[^\d|.]/g, '');
57
+ return tmp.slice(0, 11);
58
+ };
59
+ /**
60
+ * 格式化银行卡号
61
+ */
62
+
63
+
64
+ var formatCard = function formatCard(val) {
65
+ val = val.replace(/\D/g, '');
66
+ var len = val.length;
67
+
68
+ if (val === '' || val.length < 5) {
69
+ return val;
70
+ }
71
+
72
+ if (len < 9) {
73
+ return val.slice(0, 4) + ' ' + val.slice(4, 8);
74
+ } else if (len < 13) {
75
+ return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12);
76
+ } else if (len < 17) {
77
+ return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16);
78
+ } else {
79
+ return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16) + ' ' + val.slice(16, 19);
80
+ }
81
+ };
82
+
83
+ var pureCard = function pureCard(val) {
84
+ var tmp = val.replace(/[^\d|.]/g, '');
85
+ return tmp.slice(0, 19);
86
+ };
87
+ /**
88
+ * 金额自动生成小数
89
+ * @param {string} val 需要处理的值
90
+ */
91
+
92
+
93
+ var formatAmount = function formatAmount(val, fill) {
94
+ if (fill === void 0) {
95
+ fill = false;
96
+ }
97
+
98
+ val = val.replace(/[^\d|.|,]/g, '').replace(/(\.\d*?)(\.|,).*/, function (_, $1) {
99
+ return $1;
100
+ });
101
+
102
+ if (fill) {
103
+ if (!val) return val;
104
+ return val.indexOf('.') > -1 ? val : val + '.00';
105
+ }
106
+
107
+ return val;
108
+ };
109
+
110
+ var pureAmount = function pureAmount(val) {
111
+ var tmp = val.replace(/[^\d|.]/g, '');
112
+ return tmp;
113
+ };
114
+
115
+ var formatEmail = function formatEmail(val) {
116
+ return val.replace(/\W/g, '');
117
+ };
118
+
119
+ var pureEmail = function pureEmail(val) {
120
+ return val;
121
+ };
122
+ /**
123
+ * 输入规则
124
+ */
125
+
126
+
127
+ var format = function format(val, type) {
128
+ switch (type) {
129
+ case 'id':
130
+ return formatId(val);
131
+
132
+ case 'tel':
133
+ return formatTel(val);
134
+
135
+ case 'card':
136
+ return formatCard(val);
137
+
138
+ case 'email':
139
+ return formatEmail(val);
140
+
141
+ case 'amount':
142
+ return formatAmount(val);
143
+
144
+ default:
145
+ return val;
146
+ }
147
+ };
148
+ /**
149
+ * 净化规则
150
+ */
151
+
152
+
153
+ var pure = function pure(val, type) {
154
+ switch (type) {
155
+ case 'id':
156
+ return pureId(val);
157
+
158
+ case 'tel':
159
+ return pureTel(val);
160
+
161
+ case 'card':
162
+ return pureCard(val);
163
+
164
+ case 'email':
165
+ return pureEmail(val);
166
+
167
+ case 'amount':
168
+ return pureAmount(val);
169
+
170
+ default:
171
+ return val;
172
+ }
173
+ };
174
+
175
+ export { format, formatAmount, formatCard, formatEmail, formatId, formatTel, pure, pureAmount, pureCard, pureEmail, pureId, pureTel };
176
+ //# sourceMappingURL=index.js.map
package/lib/esm/utils/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":[null],"names":["formatId","val","replace","len","length","slice","pureId","tmp","formatTel","pureTel","formatCard","pureCard","formatAmount","fill","_","$1","indexOf","pureAmount","formatEmail","pureEmail","format","type","pure"],"mappings":"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"}
package/lib/types/Input.d.ts CHANGED
@@ -32,7 +32,7 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
32
32
  /**
33
33
  * 设置输入框类型，支持原生 input 的 type 属性所有值
34
34
  */
35
- type?: 'text' | 'number' | string;
35
+ type?: 'text' | 'id' | 'tel' | 'card' | 'amount' | 'email' | string;
36
36
  /**
37
37
  * 输入最大长度
38
38
  */
@@ -85,7 +85,7 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
85
85
  /**
86
86
  * 值改变时的回调
87
87
  */
88
- onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
88
+ onChange?: (evt: React.ChangeEvent<HTMLInputElement>, value: string) => void;
89
89
  }
90
90
  /**
91
91
  * 模拟伪装目标事件 target
@@ -96,4 +96,4 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
96
96
  * @param targetValue
97
97
  * @returns
98
98
  */
99
- export declare function onChangeMock(onChange: (event: React.ChangeEvent<HTMLInputElement>) => void, evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, target: HTMLInputElement | null, targetValue: string): void;
99
+ export declare function onChangeMock(onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void, evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, target: HTMLInputElement | null, targetValue: string): void;
package/lib/types/MockInput.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { HiBaseDataItem, HiBaseHTMLFieldProps } from '@hi-ui/core';
3
3
  /**
4
4
  * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
5
5
  */
6
- export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "defaultValue" | "onChange" | "value" | "onSelect" | "title" | "size" | "prefix" | "data" | "disabled" | "placeholder" | "readOnly" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "focused" | "displayRender"> & {
6
+ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "readOnly" | "placeholder" | "defaultValue" | "value" | "onChange" | "type" | "focused" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
7
7
  prefixCls?: string | undefined;
8
8
  role?: string | undefined;
9
9
  } & {
package/lib/types/TextArea.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { HiBaseHTMLFieldProps } from '@hi-ui/core';
3
+ import { UseInputProps } from './use-input';
4
+ /**
5
+ * TODO: What is TextArea
6
+ */
7
+ export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement | null>>;
8
+ export interface TextAreaProps extends HiBaseHTMLFieldProps<'textarea'>, Omit<UseInputProps, 'onFocus' | 'onBlur' | 'onChange'> {
9
+ /**
10
+ * 设置输入框尺寸
11
+ */
12
+ size?: 'sm' | 'md' | 'lg';
13
+ /**
14
+ * 设置展现形式
15
+ * 其中 `underline` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性）
16
+ */
17
+ appearance?: 'outline' | 'unset' | 'filled' | 'underline';
18
+ /**
19
+ * 值改变时回调
20
+ */
21
+ onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
22
+ }
package/lib/types/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import './styles/index.scss';
2
2
  export * from './Input';
3
3
  export { Input as default } from './Input';
4
+ export * from './TextArea';
4
5
  export * from './MockInput';
package/lib/types/use-input.d.ts ADDED
@@ -0,0 +1,78 @@
1
+ import React from 'react';
2
+ export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, trimValueOnBlur, type, clearElementRef, }: UseInputProps) => {
3
+ focused: boolean;
4
+ value: string;
5
+ tryChangeValue: (stateOrFunction: React.SetStateAction<string>, ...args: any[]) => void;
6
+ getInputProps: () => {
7
+ value: string;
8
+ onChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, trim?: any) => void;
9
+ onFocus: (evt: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
10
+ onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
11
+ name: string | undefined;
12
+ disabled: boolean;
13
+ readOnly: boolean;
14
+ autoFocus: boolean;
15
+ placeholder: string | undefined;
16
+ maxLength: number | undefined;
17
+ 'data-focused': "" | undefined;
18
+ };
19
+ };
20
+ export interface UseInputProps {
21
+ /**
22
+ * 开启输入框只读
23
+ */
24
+ readOnly?: boolean;
25
+ /**
26
+ * 是否禁用
27
+ */
28
+ disabled?: boolean;
29
+ /**
30
+ * 开启输入框自动聚焦
31
+ */
32
+ autoFocus?: boolean;
33
+ /**
34
+ * 输入框字段名称
35
+ */
36
+ name?: string;
37
+ /**
38
+ * 设置输入框的值
39
+ */
40
+ value?: string;
41
+ /**
42
+ * 设置输入框的默认值
43
+ */
44
+ defaultValue?: string;
45
+ /**
46
+ * 输入最大长度
47
+ */
48
+ maxLength?: number;
49
+ /**
50
+ * 再失焦时触发对值的 trim onChange 给用户
51
+ */
52
+ trimValueOnBlur?: boolean;
53
+ /**
54
+ * 输入框占位符
55
+ */
56
+ placeholder?: string;
57
+ /**
58
+ * 值改变时的回调
59
+ */
60
+ onChange?: (value: string, evt: React.ChangeEvent<any>) => void;
61
+ /**
62
+ * 输入框聚焦时的回调
63
+ */
64
+ onFocus?: (evt: React.FocusEvent<any>) => void;
65
+ /**
66
+ * 输入框失焦时的回调
67
+ */
68
+ onBlur?: (evt: React.FocusEvent<any>) => void;
69
+ /**
70
+ * 设置输入框类型，支持原生 input 的 type 属性所有值
71
+ */
72
+ type?: 'text' | 'id' | 'tel' | 'card' | 'amount' | 'email' | string;
73
+ /**
74
+ * @private
75
+ */
76
+ clearElementRef?: any;
77
+ }
78
+ export declare type useInputReturn = ReturnType<typeof useInput>;