@hi-ui/input 4.0.0-alpha.30 → 4.0.0-alpha.31

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 (11) hide show
  1. package/lib/cjs/index.js +2 -2
  2. package/lib/cjs/styles/index.scss.js +1 -1
  3. package/lib/esm/index.js +1 -1
  4. package/lib/esm/styles/index.scss.js +1 -1
  5. package/lib/types/index.d.ts +1 -1
  6. package/package.json +4 -4
  7. package/lib/cjs/TextArea.js +0 -109
  8. package/lib/cjs/TextArea.js.map +0 -1
  9. package/lib/esm/TextArea.js +0 -88
  10. package/lib/esm/TextArea.js.map +0 -1
  11. package/lib/types/TextArea.d.ts +0 -29
package/lib/cjs/index.js CHANGED
@@ -17,13 +17,13 @@ require('./styles/index.scss.js');
17
17
 
18
18
  var Input = require('./Input.js');
19
19
 
20
- var TextArea = require('./TextArea.js');
20
+ var useInput = require('./use-input.js');
21
21
 
22
22
  var MockInput = require('./MockInput.js');
23
23
 
24
24
  exports.Input = Input.Input;
25
25
  exports["default"] = Input.Input;
26
26
  exports.onChangeMock = Input.onChangeMock;
27
- exports.TextArea = TextArea.TextArea;
27
+ exports.useInput = useInput.useInput;
28
28
  exports.MockInput = MockInput.MockInput;
29
29
  //# sourceMappingURL=index.js.map
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- 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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line: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-line.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-line.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 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-line .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-line .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-line .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-line .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-line .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-line .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-line .hi-v4-input__prepend,\n .hi-v4-input--appearance-line .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-line .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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\ntextarea.hi-v4-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-line: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-line.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";
15
+ 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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line: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-line.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-line.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 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-line .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-line .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-line .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-line .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-line .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-line .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-line .hi-v4-input__prepend,\n .hi-v4-input--appearance-line .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-line .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";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/index.js CHANGED
@@ -9,6 +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
+ export { useInput } from './use-input.js';
13
13
  export { MockInput } from './MockInput.js';
14
14
  //# sourceMappingURL=index.js.map
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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line: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-line.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-line.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 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-line .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-line .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-line .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-line .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-line .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-line .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-line .hi-v4-input__prepend,\n .hi-v4-input--appearance-line .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-line .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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\ntextarea.hi-v4-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\ntextarea.hi-v4-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\ntextarea.hi-v4-input--appearance-line: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-line.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";
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-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-line:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-line: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-line:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-line: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-line.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-line.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 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-line .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-line .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-line .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-line .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-line .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-line .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-line .hi-v4-input__prepend,\n .hi-v4-input--appearance-line .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-line .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";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
package/lib/types/index.d.ts CHANGED
@@ -1,5 +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
+ export * from './use-input';
5
5
  export * from './MockInput';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
3
- "version": "4.0.0-alpha.30",
3
+ "version": "4.0.0-alpha.31",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,11 +44,11 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^4.0.0-alpha.3",
47
- "@hi-ui/core": "^4.0.0-alpha.18",
47
+ "@hi-ui/core": "^4.0.0-alpha.19",
48
48
  "@hi-ui/core-css": "^4.0.0-alpha.13",
49
49
  "@hi-ui/dom-utils": "^4.0.0-alpha.7",
50
50
  "@hi-ui/env": "^4.0.0-alpha.5",
51
- "@hi-ui/icons": "^4.0.0-alpha.26",
51
+ "@hi-ui/icons": "^4.0.0-alpha.27",
52
52
  "@hi-ui/use-latest": "^4.0.0-alpha.5",
53
53
  "@hi-ui/use-merge-refs": "^4.0.0-alpha.5",
54
54
  "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.13"
@@ -62,5 +62,5 @@
62
62
  "react": "^17.0.1",
63
63
  "react-dom": "^17.0.1"
64
64
  },
65
- "gitHead": "f001a9fe152b0f84d1a88b8782c38e1527020070"
65
+ "gitHead": "0cb16ec0a4791192b3e5eee1a320a83f5db7459b"
66
66
  }
package/lib/cjs/TextArea.js DELETED
@@ -1,109 +0,0 @@
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
- 'use strict';
11
-
12
- var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
- Object.defineProperty(exports, '__esModule', {
15
- value: true
16
- });
17
-
18
- var tslib = require('tslib');
19
-
20
- var React = require('react');
21
-
22
- var classname = require('@hi-ui/classname');
23
-
24
- var env = require('@hi-ui/env');
25
-
26
- var useInput = require('./use-input.js');
27
-
28
- var useLatest = require('@hi-ui/use-latest');
29
-
30
- function _interopDefaultLegacy(e) {
31
- return e && _typeof(e) === 'object' && 'default' in e ? e : {
32
- 'default': e
33
- };
34
- }
35
-
36
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
37
-
38
- var _prefix = classname.getPrefixCls('input');
39
- /**
40
- * 动态文本域输入框
41
- *
42
- * @TODO:
43
- * 1. 支持带数字展示
44
- * 2. 支持自适应行高大小
45
- * 3. 支持清空按钮
46
- * 4. 支持最大最小行支持
47
- * 5. 手动聚焦支持额外配置
48
- */
49
-
50
-
51
- var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
52
- var _a$prefixCls = _a.prefixCls,
53
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
54
- className = _a.className,
55
- _a$size = _a.size,
56
- size = _a$size === void 0 ? 'md' : _a$size,
57
- _a$appearance = _a.appearance,
58
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
59
- _a$invalid = _a.invalid,
60
- invalid = _a$invalid === void 0 ? false : _a$invalid,
61
- name = _a.name,
62
- autoFocus = _a.autoFocus,
63
- disabled = _a.disabled,
64
- readOnly = _a.readOnly,
65
- maxLength = _a.maxLength,
66
- placeholder = _a.placeholder,
67
- defaultValue = _a.defaultValue,
68
- valueProp = _a.value,
69
- onChange = _a.onChange,
70
- onFocus = _a.onFocus,
71
- onBlur = _a.onBlur,
72
- trimValueOnBlur = _a.trimValueOnBlur,
73
- nativeProps = tslib.__rest(_a, ["prefixCls", "className", "style", "size", "appearance", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "trimValueOnBlur"]);
74
-
75
- var proxyOnChange = useLatest.useLatestCallback(function (_, evt) {
76
- onChange === null || onChange === void 0 ? void 0 : onChange(evt);
77
- });
78
-
79
- var _useInput = useInput.useInput({
80
- name: name,
81
- autoFocus: autoFocus,
82
- disabled: disabled,
83
- readOnly: readOnly,
84
- maxLength: maxLength,
85
- placeholder: placeholder,
86
- defaultValue: defaultValue,
87
- value: valueProp,
88
- onChange: proxyOnChange,
89
- onFocus: onFocus,
90
- onBlur: onBlur,
91
- trimValueOnBlur: trimValueOnBlur
92
- }),
93
- focused = _useInput.focused,
94
- getInputProps = _useInput.getInputProps;
95
-
96
- var cls = classname.cx(prefixCls, className, disabled && 'disabled', readOnly && 'readonly', focused && "focused", invalid && 'invalid', prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
97
- return /*#__PURE__*/React__default['default'].createElement("textarea", Object.assign({
98
- ref: ref,
99
- className: cls,
100
- autoComplete: "off"
101
- }, getInputProps(), nativeProps));
102
- });
103
-
104
- if (env.__DEV__) {
105
- TextArea.displayName = 'TextArea';
106
- }
107
-
108
- exports.TextArea = TextArea;
109
- //# sourceMappingURL=TextArea.js.map
package/lib/cjs/TextArea.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../src/TextArea.tsx"],"sourcesContent":[null],"names":["_prefix","getPrefixCls","TextArea","forwardRef","_a","ref","prefixCls","className","size","appearance","invalid","name","autoFocus","disabled","readOnly","maxLength","placeholder","defaultValue","valueProp","value","onChange","onFocus","onBlur","trimValueOnBlur","nativeProps","proxyOnChange","useLatestCallback","_","evt","useInput","focused","getInputProps","cls","cx","React","autoComplete","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,OAAO,GAAGC,sBAAAA,CAAa,OAAbA,CAAhB;AAEA;;;;;;;;;;;;IAUaC,QAAQ,gBAAGC,gBAAAA,CACtB,UACEC,EADF,EAuBEC,GAvBF;wBAEIC;MAAAA,sCAAYN;MACZO,eAAAA;mBAEAC;MAAAA,4BAAO;yBACPC;MAAAA,wCAAa;sBACbC;MAAAA,kCAAU;MAEVC,UAAAA;MACAC,eAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,kBAAAA;MACOC,eAAPC;MACAC,cAAAA;MACAC,aAAAA;MACAC,YAAAA;MACAC,qBAAAA;MACGC,+BApBL,YAAA,aAAA,SAAA,QAAA,cAAA,WAAA,QAAA,aAAA,YAAA,YAAA,aAAA,eAAA,gBAAA,SAAA,YAAA,WAAA,UAAA,mBAAA;;MAwBMC,aAAa,GAAGC,2BAAAA,CAAkB,UAACC,CAAD,EAAIC,GAAJ;AACtCR,IAAAA,QAAQ,SAARA,IAAAA,QAAQ,WAARA,SAAAA,GAAAA,QAAQ,CAAGQ,GAAH,CAARR;AADqC,GAAjBM;;kBAIaG,iBAAAA,CAAS;AAC1ClB,IAAAA,IAAI,EAAJA,IAD0C;AAE1CC,IAAAA,SAAS,EAATA,SAF0C;AAG1CC,IAAAA,QAAQ,EAARA,QAH0C;AAI1CC,IAAAA,QAAQ,EAARA,QAJ0C;AAK1CC,IAAAA,SAAS,EAATA,SAL0C;AAM1CC,IAAAA,WAAW,EAAXA,WAN0C;AAO1CC,IAAAA,YAAY,EAAZA,YAP0C;AAQ1CE,IAAAA,KAAK,EAAED,SARmC;AAS1CE,IAAAA,QAAQ,EAAEK,aATgC;AAU1CJ,IAAAA,OAAO,EAAPA,OAV0C;AAW1CC,IAAAA,MAAM,EAANA,MAX0C;AAY1CC,IAAAA,eAAe,EAAfA;AAZ0C,GAATM;MAA3BC,OAAR,aAAQA;MAASC,aAAjB,aAAiBA;;MAeXC,GAAG,GAAGC,YAAAA,CACV3B,SADU2B,EAEV1B,SAFU0B,EAGVpB,QAAQ,IAAI,UAHFoB,EAIVnB,QAAQ,IAAI,UAJFmB,EAKVH,OAAO,aALGG,EAMVvB,OAAO,IAAI,SANDuB,EAOP3B,SAPS,kBAOTA,GAAyBG,UAPlBwB,EAQP3B,SARS,YAQTA,GAAmBE,IARZyB;sBAYVC,yBAAAA,cAAAA,WAAAA;AACE7B,IAAAA,GAAG,EAAEA;AACLE,IAAAA,SAAS,EAAEyB;AACXG,IAAAA,YAAY,EAAC;KACTJ,aAAa,IACbP,YALNU;AAzD4B,CAAV/B;;AAsFxB,IAAIiC,WAAJ,EAAa;AACXlC,EAAAA,QAAQ,CAACmC,WAATnC,GAAuB,UAAvBA;;;"}
package/lib/esm/TextArea.js DELETED
@@ -1,88 +0,0 @@
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 { __rest } from 'tslib';
11
- import React, { forwardRef } from 'react';
12
- import { getPrefixCls, cx } from '@hi-ui/classname';
13
- import { __DEV__ } from '@hi-ui/env';
14
- import { useInput } from './use-input.js';
15
- import { useLatestCallback } from '@hi-ui/use-latest';
16
-
17
- var _prefix = getPrefixCls('input');
18
- /**
19
- * 动态文本域输入框
20
- *
21
- * @TODO:
22
- * 1. 支持带数字展示
23
- * 2. 支持自适应行高大小
24
- * 3. 支持清空按钮
25
- * 4. 支持最大最小行支持
26
- * 5. 手动聚焦支持额外配置
27
- */
28
-
29
-
30
- var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
31
- var _a$prefixCls = _a.prefixCls,
32
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
33
- className = _a.className,
34
- _a$size = _a.size,
35
- size = _a$size === void 0 ? 'md' : _a$size,
36
- _a$appearance = _a.appearance,
37
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
38
- _a$invalid = _a.invalid,
39
- invalid = _a$invalid === void 0 ? false : _a$invalid,
40
- name = _a.name,
41
- autoFocus = _a.autoFocus,
42
- disabled = _a.disabled,
43
- readOnly = _a.readOnly,
44
- maxLength = _a.maxLength,
45
- placeholder = _a.placeholder,
46
- defaultValue = _a.defaultValue,
47
- valueProp = _a.value,
48
- onChange = _a.onChange,
49
- onFocus = _a.onFocus,
50
- onBlur = _a.onBlur,
51
- trimValueOnBlur = _a.trimValueOnBlur,
52
- nativeProps = __rest(_a, ["prefixCls", "className", "style", "size", "appearance", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "trimValueOnBlur"]);
53
-
54
- var proxyOnChange = useLatestCallback(function (_, evt) {
55
- onChange === null || onChange === void 0 ? void 0 : onChange(evt);
56
- });
57
-
58
- var _useInput = useInput({
59
- name: name,
60
- autoFocus: autoFocus,
61
- disabled: disabled,
62
- readOnly: readOnly,
63
- maxLength: maxLength,
64
- placeholder: placeholder,
65
- defaultValue: defaultValue,
66
- value: valueProp,
67
- onChange: proxyOnChange,
68
- onFocus: onFocus,
69
- onBlur: onBlur,
70
- trimValueOnBlur: trimValueOnBlur
71
- }),
72
- focused = _useInput.focused,
73
- getInputProps = _useInput.getInputProps;
74
-
75
- var cls = cx(prefixCls, className, disabled && 'disabled', readOnly && 'readonly', focused && "focused", invalid && 'invalid', prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
76
- return /*#__PURE__*/React.createElement("textarea", Object.assign({
77
- ref: ref,
78
- className: cls,
79
- autoComplete: "off"
80
- }, getInputProps(), nativeProps));
81
- });
82
-
83
- if (__DEV__) {
84
- TextArea.displayName = 'TextArea';
85
- }
86
-
87
- export { TextArea };
88
- //# sourceMappingURL=TextArea.js.map
package/lib/esm/TextArea.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../src/TextArea.tsx"],"sourcesContent":[null],"names":["_prefix","getPrefixCls","TextArea","forwardRef","_a","ref","prefixCls","className","size","appearance","invalid","name","autoFocus","disabled","readOnly","maxLength","placeholder","defaultValue","valueProp","value","onChange","onFocus","onBlur","trimValueOnBlur","nativeProps","proxyOnChange","useLatestCallback","_","evt","useInput","focused","getInputProps","cls","cx","React","autoComplete","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;AAQA,IAAMA,OAAO,GAAGC,YAAY,CAAC,OAAD,CAA5B;AAEA;;;;;;;;;;;;IAUaC,QAAQ,gBAAGC,UAAU,CAChC,UACEC,EADF,EAuBEC,GAvBF;wBAEIC;MAAAA,sCAAYN;MACZO,eAAAA;mBAEAC;MAAAA,4BAAO;yBACPC;MAAAA,wCAAa;sBACbC;MAAAA,kCAAU;MAEVC,UAAAA;MACAC,eAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,kBAAAA;MACOC,eAAPC;MACAC,cAAAA;MACAC,aAAAA;MACAC,YAAAA;MACAC,qBAAAA;MACGC,yBApBL,YAAA,aAAA,SAAA,QAAA,cAAA,WAAA,QAAA,aAAA,YAAA,YAAA,aAAA,eAAA,gBAAA,SAAA,YAAA,WAAA,UAAA,mBAAA;;MAwBMC,aAAa,GAAGC,iBAAiB,CAAC,UAACC,CAAD,EAAIC,GAAJ;AACtCR,IAAAA,QAAQ,SAARA,IAAAA,QAAQ,WAARA,SAAAA,GAAAA,QAAQ,CAAGQ,GAAH,CAARR;AADqC,GAAA;;kBAIJS,QAAQ,CAAC;AAC1ClB,IAAAA,IAAI,EAAJA,IAD0C;AAE1CC,IAAAA,SAAS,EAATA,SAF0C;AAG1CC,IAAAA,QAAQ,EAARA,QAH0C;AAI1CC,IAAAA,QAAQ,EAARA,QAJ0C;AAK1CC,IAAAA,SAAS,EAATA,SAL0C;AAM1CC,IAAAA,WAAW,EAAXA,WAN0C;AAO1CC,IAAAA,YAAY,EAAZA,YAP0C;AAQ1CE,IAAAA,KAAK,EAAED,SARmC;AAS1CE,IAAAA,QAAQ,EAAEK,aATgC;AAU1CJ,IAAAA,OAAO,EAAPA,OAV0C;AAW1CC,IAAAA,MAAM,EAANA,MAX0C;AAY1CC,IAAAA,eAAe,EAAfA;AAZ0C,GAAD;MAAnCO,OAAR,aAAQA;MAASC,aAAjB,aAAiBA;;MAeXC,GAAG,GAAGC,EAAE,CACZ3B,SADY,EAEZC,SAFY,EAGZM,QAAQ,IAAI,UAHA,EAIZC,QAAQ,IAAI,UAJA,EAKZgB,OAAO,aALK,EAMZpB,OAAO,IAAI,SANC,EAOTJ,SAPS,kBAOTA,GAAyBG,UAPhB,EAQTH,SARS,YAQTA,GAAmBE,IARV;sBAYZ0B,mBAAAA,WAAAA;AACE7B,IAAAA,GAAG,EAAEA;AACLE,IAAAA,SAAS,EAAEyB;AACXG,IAAAA,YAAY,EAAC;KACTJ,aAAa,IACbP,YALNU;AAzD4B,CAAA;;AAsFlC,IAAIE,OAAJ,EAAa;AACXlC,EAAAA,QAAQ,CAACmC,WAATnC,GAAuB,UAAvBA;;;"}
package/lib/types/TextArea.d.ts DELETED
@@ -1,29 +0,0 @@
1
- import React from 'react';
2
- import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core';
3
- import { UseInputProps } from './use-input';
4
- /**
5
- * 动态文本域输入框
6
- *
7
- * @TODO:
8
- * 1. 支持带数字展示
9
- * 2. 支持自适应行高大小
10
- * 3. 支持清空按钮
11
- * 4. 支持最大最小行支持
12
- * 5. 手动聚焦支持额外配置
13
- */
14
- export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement | null>>;
15
- export interface TextAreaProps extends HiBaseHTMLFieldProps<'textarea'>, Omit<UseInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'type'> {
16
- /**
17
- * 设置输入框尺寸
18
- */
19
- size?: 'sm' | 'md' | 'lg';
20
- /**
21
- * 设置展现形式
22
- * 其中 `underline` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性）
23
- */
24
- appearance?: HiBaseAppearanceEnum | 'underline';
25
- /**
26
- * 值改变时回调
27
- */
28
- onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
29
- }