@hi-ui/input 5.0.0-canary.9 → 5.0.0-experimental.1
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.
- package/CHANGELOG.md +53 -90
- package/lib/cjs/Input.js +6 -2
- package/lib/cjs/MockInput.js +4 -2
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/Input.js +6 -2
- package/lib/esm/MockInput.js +4 -2
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/MockInput.d.ts +28 -20
- package/lib/types/types.d.ts +2 -2
- package/lib/types/use-input-cursor.d.ts +1 -1
- package/lib/types/use-input.d.ts +1 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,107 +1,70 @@
|
|
|
1
1
|
# @hi-ui/input
|
|
2
2
|
|
|
3
|
-
## 5.0.0-
|
|
3
|
+
## 5.0.0-experimental.1
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
|
|
8
|
+
- 900c6c2f0: style: 统一修改表单类组件 filled 背景色为 g100 (5.0)
|
|
9
|
+
- 发布 hiui experimental 版本
|
|
8
10
|
|
|
9
|
-
## 5.0.0-
|
|
10
|
-
|
|
11
|
-
### Minor Changes
|
|
12
|
-
|
|
13
|
-
- ab2d5625d: feat(input&number-input): add styles and classNames api (5.0)
|
|
14
|
-
|
|
15
|
-
## 5.0.0-canary.7
|
|
16
|
-
|
|
17
|
-
### Patch Changes
|
|
18
|
-
|
|
19
|
-
- chore: rebase master (5.0)
|
|
20
|
-
- Updated dependencies
|
|
21
|
-
- @hi-ui/core@5.0.0-canary.2
|
|
22
|
-
- @hi-ui/use-latest@5.0.0-canary.2
|
|
23
|
-
- @hi-ui/use-merge-refs@5.0.0-canary.2
|
|
24
|
-
- @hi-ui/use-uncontrolled-state@5.0.0-canary.2
|
|
25
|
-
- @hi-ui/icons@5.0.0-canary.2
|
|
26
|
-
- @hi-ui/classname@5.0.0-canary.2
|
|
27
|
-
- @hi-ui/dom-utils@5.0.0-canary.2
|
|
28
|
-
- @hi-ui/env@5.0.0-canary.2
|
|
29
|
-
- @hi-ui/func-utils@5.0.0-canary.2
|
|
30
|
-
- @hi-ui/type-assertion@5.0.0-canary.2
|
|
31
|
-
|
|
32
|
-
## 5.0.0-canary.6
|
|
33
|
-
|
|
34
|
-
### Patch Changes
|
|
35
|
-
|
|
36
|
-
- 4b09e728b: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
|
|
37
|
-
- Updated dependencies [4b09e728b]
|
|
38
|
-
- @hi-ui/core@5.0.0-canary.1
|
|
39
|
-
- @hi-ui/use-latest@5.0.0-canary.1
|
|
40
|
-
- @hi-ui/use-merge-refs@5.0.0-canary.1
|
|
41
|
-
- @hi-ui/use-uncontrolled-state@5.0.0-canary.1
|
|
42
|
-
- @hi-ui/icons@5.0.0-canary.1
|
|
43
|
-
- @hi-ui/classname@5.0.0-canary.1
|
|
44
|
-
- @hi-ui/dom-utils@5.0.0-canary.1
|
|
45
|
-
- @hi-ui/env@5.0.0-canary.1
|
|
46
|
-
- @hi-ui/func-utils@5.0.0-canary.1
|
|
47
|
-
- @hi-ui/type-assertion@5.0.0-canary.1
|
|
48
|
-
|
|
49
|
-
## 5.0.0-canary.5
|
|
50
|
-
|
|
51
|
-
### Patch Changes
|
|
52
|
-
|
|
53
|
-
- 40f819417: fix: 修复 UI 问题 (5.0)
|
|
54
|
-
|
|
55
|
-
## 5.0.0-canary.4
|
|
56
|
-
|
|
57
|
-
### Patch Changes
|
|
58
|
-
|
|
59
|
-
- 0c5923439: style: 修改样式问题 (5.0)
|
|
60
|
-
|
|
61
|
-
## 5.0.0-canary.3
|
|
62
|
-
|
|
63
|
-
### Patch Changes
|
|
64
|
-
|
|
65
|
-
- b98def710: chore: 优化 Input 和 TagInput label 显示逻辑 (5.0)
|
|
66
|
-
|
|
67
|
-
## 5.0.0-canary.2
|
|
68
|
-
|
|
69
|
-
### Minor Changes
|
|
70
|
-
|
|
71
|
-
- 6c4bf35af: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
|
|
72
|
-
|
|
73
|
-
## 5.0.0-canary.1
|
|
74
|
-
|
|
75
|
-
### Patch Changes
|
|
76
|
-
|
|
77
|
-
- 3903bd4ff: fix: 修复 5.0 UI 问题 (5.0)
|
|
78
|
-
|
|
79
|
-
## 5.0.0-canary.0
|
|
11
|
+
## 5.0.0-experimental.0
|
|
80
12
|
|
|
81
13
|
### Major Changes
|
|
82
14
|
|
|
83
|
-
-
|
|
15
|
+
- 8f3aa85e4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
|
|
84
16
|
|
|
85
17
|
### Minor Changes
|
|
86
18
|
|
|
87
|
-
-
|
|
19
|
+
- da2e63a14: feat(input&number-input): add styles and classNames api (5.0)
|
|
20
|
+
- f1ab51725: <br>
|
|
88
21
|
- feat(picker): 下拉选择类组件增加 xs 尺寸 (5.0)
|
|
89
22
|
- feat(input): 输入框组件增加 xs 尺寸 (5.0)
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
-
|
|
99
|
-
-
|
|
100
|
-
-
|
|
101
|
-
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
23
|
+
- 6dca7795c: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
|
|
24
|
+
- 77d969c2e: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
|
|
25
|
+
- 58ad82e94: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- 1662753e0: style: fix ui bug (5.0)
|
|
30
|
+
- 41552be0b: <br>
|
|
31
|
+
- style(time-picker): 为占位符增加溢出处理和文本省略样式 (5.0)
|
|
32
|
+
- style(tag-input): 为占位符增加溢出处理和文本省略样式 (5.0)
|
|
33
|
+
- style(input): 增加溢出处理和文本省略样式 (5.0)
|
|
34
|
+
- style(number-input): 增加溢出处理和文本省略样式 (5.0)
|
|
35
|
+
- 9b34d99bc: fix: 修复 5.0 UI 问题 (5.0)
|
|
36
|
+
- f4fc0ef30: style: 修改样式问题 (5.0)
|
|
37
|
+
- ec4c7faa2: fix(input): 使用 cx 函数优化样式类名的拼接 (5.0)
|
|
38
|
+
- 29cae09ea: style: 修改 appearance 为 unset 和 borderless 模式的样式 (5.0)
|
|
39
|
+
- be5a59325: style: 修改样式问题 (5.0)
|
|
40
|
+
- 79ea480f3: feat(global-context): 增加 size api 全局配置 (5.0)
|
|
41
|
+
- 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
|
|
42
|
+
- 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
|
|
43
|
+
- 7f3abee55: style: fix ui bug (5.0)
|
|
44
|
+
- 6fcda9bf2: chore: 优化 Input 和 TagInput label 显示逻辑 (5.0)
|
|
45
|
+
- 99801c2d1: fix: 修复 UI 问题 (5.0)
|
|
46
|
+
- Updated dependencies [1662753e0]
|
|
47
|
+
- Updated dependencies [122d1d859]
|
|
48
|
+
- Updated dependencies [8c0ee78f0]
|
|
49
|
+
- Updated dependencies [8f3aa85e4]
|
|
50
|
+
- Updated dependencies [fd4c20bbd]
|
|
51
|
+
- Updated dependencies [79ea480f3]
|
|
52
|
+
- Updated dependencies [976ec929d]
|
|
53
|
+
- Updated dependencies [f1ab51725]
|
|
54
|
+
- Updated dependencies [e42e2badf]
|
|
55
|
+
- Updated dependencies [33da3144e]
|
|
56
|
+
- Updated dependencies [58ad82e94]
|
|
57
|
+
- Updated dependencies [a0f0c9d6b]
|
|
58
|
+
- @hi-ui/icons@5.0.0-experimental.0
|
|
59
|
+
- @hi-ui/core@5.0.0-experimental.0
|
|
60
|
+
- @hi-ui/use-latest@5.0.0-experimental.0
|
|
61
|
+
- @hi-ui/use-merge-refs@5.0.0-experimental.0
|
|
62
|
+
- @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
|
|
63
|
+
- @hi-ui/classname@5.0.0-experimental.0
|
|
64
|
+
- @hi-ui/dom-utils@5.0.0-experimental.0
|
|
65
|
+
- @hi-ui/env@5.0.0-experimental.0
|
|
66
|
+
- @hi-ui/func-utils@5.0.0-experimental.0
|
|
67
|
+
- @hi-ui/type-assertion@5.0.0-experimental.0
|
|
105
68
|
|
|
106
69
|
## 4.4.0
|
|
107
70
|
|
package/lib/cjs/Input.js
CHANGED
|
@@ -19,6 +19,7 @@ var classname = require('@hi-ui/classname');
|
|
|
19
19
|
var env = require('@hi-ui/env');
|
|
20
20
|
var useMergeRefs = require('@hi-ui/use-merge-refs');
|
|
21
21
|
var icons = require('@hi-ui/icons');
|
|
22
|
+
var core = require('@hi-ui/core');
|
|
22
23
|
var useInput = require('./use-input.js');
|
|
23
24
|
function _interopDefaultCompat(e) {
|
|
24
25
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
@@ -31,14 +32,14 @@ var _prefix = classname.getPrefixCls('input');
|
|
|
31
32
|
* 输入框
|
|
32
33
|
*/
|
|
33
34
|
var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
35
|
+
var _b;
|
|
34
36
|
var _a$prefixCls = _a.prefixCls,
|
|
35
37
|
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
36
38
|
_a$role = _a.role,
|
|
37
39
|
role = _a$role === void 0 ? 'input' : _a$role,
|
|
38
40
|
className = _a.className,
|
|
39
41
|
style = _a.style,
|
|
40
|
-
|
|
41
|
-
size = _a$size === void 0 ? 'md' : _a$size,
|
|
42
|
+
sizeProp = _a.size,
|
|
42
43
|
_a$appearance = _a.appearance,
|
|
43
44
|
appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
|
|
44
45
|
prepend = _a.prepend,
|
|
@@ -71,6 +72,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
71
72
|
styles = _a.styles,
|
|
72
73
|
classNames = _a.classNames,
|
|
73
74
|
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef", "waitCompositionEnd", "styles", "classNames"]);
|
|
75
|
+
var _useGlobalContext = core.useGlobalContext(),
|
|
76
|
+
globalSize = _useGlobalContext.size;
|
|
77
|
+
var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
|
|
74
78
|
// @TODO: 临时方案,后面迁移至 InputGroup
|
|
75
79
|
var _useMemo = React.useMemo(function () {
|
|
76
80
|
var shouldUnset = [false, false];
|
package/lib/cjs/MockInput.js
CHANGED
|
@@ -70,7 +70,9 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
70
70
|
_onMouseLeave = _a.onMouseLeave,
|
|
71
71
|
onClear = _a.onClear,
|
|
72
72
|
label = _a.label,
|
|
73
|
-
|
|
73
|
+
_a$showIndicator = _a.showIndicator,
|
|
74
|
+
showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
|
|
75
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "onClear", "label", "showIndicator"]);
|
|
74
76
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
|
|
75
77
|
value = _useUncontrolledState[0],
|
|
76
78
|
tryChangeValue = _useUncontrolledState[1];
|
|
@@ -141,7 +143,7 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
141
143
|
tabIndex: -1,
|
|
142
144
|
className: classname.cx(prefixCls + "__clear", 'active'),
|
|
143
145
|
onClick: handleClear
|
|
144
|
-
}, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : suffix[0])) : null);
|
|
146
|
+
}, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : showIndicator ? suffix[0] : null)) : null);
|
|
145
147
|
});
|
|
146
148
|
if (env.__DEV__) {
|
|
147
149
|
MockInput.displayName = 'MockInput';
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v5-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-700, #1a1d26);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input.disabled {cursor: not-allowed !important;}.hi-v5-mock-input__suffix {padding-left: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-mock-input__placeholder, .hi-v5-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v5-text-size-md, 0.875rem);text-align: center;color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v5-mock-input__prefix, .hi-v5-mock-input__suffix, .hi-v5-mock-input__secondary-suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-400, #abadb2);font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;}.hi-v5-mock-input__prefix {margin-right: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-mock-input--size-xs.hi-v5-mock-input {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 1px calc(var(--hi-v5-spacing-4, 8px) - 1px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-md.hi-v5-mock-input {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-contained {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: none;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input {width: auto;}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label {-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value, .hi-v5-mock-input--appearance-contained:not(.disabled):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__suffix {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear:hover, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-unset.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-contained.disabled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v5-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v5-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text:disabled {cursor: not-allowed;}.hi-v5-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v5-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input__clear.hi-v5-input__clear--active {visibility: visible;opacity: 1;}.hi-v5-input__inner--suffix .hi-v5-input__clear {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-input__prefix, .hi-v5-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-input__prefix {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__suffix {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__prepend, .hi-v5-input__append {position: relative;color: var(--hi-v5-color-gray-700, #1a1d26);background-color: var(--hi-v5-color-gray-50, #f2f4f7);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v5-spacing-6, 12px) - 1px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v5-zindex-absolute, 1);}.hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;}.hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;}.hi-v5-input--size-xs {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-xs .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-xs .hi-v5-input__inner,.hi-v5-input--size-xs .hi-v5-input__prepend,.hi-v5-input--size-xs .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-xs .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-xs .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-sm {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-sm .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-sm .hi-v5-input__inner,.hi-v5-input--size-sm .hi-v5-input__prepend,.hi-v5-input--size-sm .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-sm .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-sm .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-md {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-input--size-md .hi-v5-input__text {padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-md .hi-v5-input__inner,.hi-v5-input--size-md .hi-v5-input__prepend,.hi-v5-input--size-md .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-md .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-md .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-lg {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-input--size-lg .hi-v5-input__text {padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-lg .hi-v5-input__inner,.hi-v5-input--size-lg .hi-v5-input__prepend,.hi-v5-input--size-lg .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-lg .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-lg .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__prepend,.hi-v5-input--appearance-line .hi-v5-input__append {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-input--appearance-unset .hi-v5-input__text {padding-left: 0;padding-right: 0;}.hi-v5-input--appearance-unset.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--prefix .hi-v5-input__text {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--suffix .hi-v5-input__text {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-unset:not(.hi-v5-input__inner--disabled) .hi-v5-input__inner:hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-input--appearance-filled .hi-v5-input__inner {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__text {padding-left: 0;padding-right: 0;}.hi-v5-input--appearance-underline.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--prefix .hi-v5-input__text {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--suffix .hi-v5-input__text {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-underline .hi-v5-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v5-color-gray-300, #dbdde0);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused::after {border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid::after {border-bottom-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);background-color: transparent;}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__outer--prepend .hi-v5-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend {border: none;padding: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-button {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--append .hi-v5-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append {border: none;padding: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
|
|
15
|
+
var css_248z = ".hi-v5-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-800, #1a1d26);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input.disabled {cursor: not-allowed !important;}.hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input__suffix:has(> *) {padding-left: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input__placeholder, .hi-v5-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;color: var(--hi-v5-color-gray-700, #60636b);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v5-mock-input__prefix, .hi-v5-mock-input__suffix, .hi-v5-mock-input__secondary-suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-500, #babcc2);font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;}.hi-v5-mock-input__prefix {-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-mock-input--size-xs.hi-v5-mock-input {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-xs.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 1px calc(var(--hi-v5-spacing-4, 8px) - 1px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-md.hi-v5-mock-input {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-md.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled):hover, .hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-borderless {border: none;}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-contained {background-color: var(--hi-v5-color-gray-100, #f2f4f7);border: none;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input {width: auto;}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label {-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value, .hi-v5-mock-input--appearance-contained:not(.disabled):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__suffix {color: var(--hi-v5-color-primary-700, var(--hi-v5-color-brandblue-700, #0c2ba6));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear {color: var(--hi-v5-color-primary-700, var(--hi-v5-color-brandblue-700, #0c2ba6));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear:hover, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__value {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__placeholder, .hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__placeholder, .hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-unset.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-contained.disabled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v5-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v5-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text:disabled {cursor: not-allowed;}.hi-v5-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-600, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v5-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input__clear.hi-v5-input__clear--active {visibility: visible;opacity: 1;}.hi-v5-input__inner--suffix .hi-v5-input__clear {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-input__prefix, .hi-v5-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;font-size: inherit;text-align: center;}.hi-v5-input__prefix {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__suffix {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__prepend, .hi-v5-input__append {position: relative;color: var(--hi-v5-color-gray-800, #1a1d26);background-color: var(--hi-v5-color-gray-100, #f2f4f7);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v5-spacing-6, 12px) - 1px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v5-zindex-absolute, 1);}.hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;-webkit-margin-end: -1px;margin-inline-end: -1px;}.hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;-webkit-margin-start: -1px;margin-inline-start: -1px;}.hi-v5-input--size-xs {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-xs .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-xs .hi-v5-input__inner,.hi-v5-input--size-xs .hi-v5-input__prepend,.hi-v5-input--size-xs .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-xs .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-xs .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-sm {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-sm .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-sm .hi-v5-input__inner,.hi-v5-input--size-sm .hi-v5-input__prepend,.hi-v5-input--size-sm .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-sm .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-sm .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-md {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-input--size-md .hi-v5-input__text {padding: var(--hi-v5-spacing-2, 4px) calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-md .hi-v5-input__inner,.hi-v5-input--size-md .hi-v5-input__prepend,.hi-v5-input--size-md .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-md .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-md .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-lg {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-input--size-lg .hi-v5-input__text {padding: calc(var(--hi-v5-spacing-4, 8px) - 1px) calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-lg .hi-v5-input__inner,.hi-v5-input--size-lg .hi-v5-input__prepend,.hi-v5-input--size-lg .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-lg .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-lg .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__prepend,.hi-v5-input--appearance-line .hi-v5-input__append {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-input--appearance-unset.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--prefix .hi-v5-input__text {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--suffix .hi-v5-input__text {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-unset:not(.hi-v5-input__inner--disabled) .hi-v5-input__inner:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-filled .hi-v5-input__inner {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__text {-webkit-padding-start: 0;padding-inline-start: 0;-webkit-padding-end: 0;padding-inline-end: 0;}.hi-v5-input--appearance-underline.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--prefix .hi-v5-input__text {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--suffix .hi-v5-input__text {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-underline .hi-v5-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;inset-block-end: 0;inset-inline-start: -1px;inset-inline-end: -1px;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover::after {border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused::after {border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid::after {border-block-end-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid.hover::after {border-block-end-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-borderless .hi-v5-input__text {-webkit-padding-start: 0;padding-inline-start: 0;-webkit-padding-end: 0;padding-inline-end: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-600, #91959e);background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-600, #91959e);background-color: transparent;}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__outer--prepend .hi-v5-input__inner {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend {border: none;padding: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-mock-input {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-button {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--append .hi-v5-input__inner {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append {border: none;padding: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-mock-input {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-button {border-start-start-radius: 0;border-end-start-radius: 0;}";
|
|
16
16
|
var __styleInject__ = require('@hi-ui/style-inject')["default"];
|
|
17
17
|
__styleInject__(css_248z);
|
|
18
18
|
exports["default"] = css_248z;
|
package/lib/esm/Input.js
CHANGED
|
@@ -13,20 +13,21 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useMergeRefs } from '@hi-ui/use-merge-refs';
|
|
15
15
|
import { CloseCircleFilled } from '@hi-ui/icons';
|
|
16
|
+
import { useGlobalContext } from '@hi-ui/core';
|
|
16
17
|
import { useInput } from './use-input.js';
|
|
17
18
|
var _prefix = getPrefixCls('input');
|
|
18
19
|
/**
|
|
19
20
|
* 输入框
|
|
20
21
|
*/
|
|
21
22
|
var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
23
|
+
var _b;
|
|
22
24
|
var _a$prefixCls = _a.prefixCls,
|
|
23
25
|
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
24
26
|
_a$role = _a.role,
|
|
25
27
|
role = _a$role === void 0 ? 'input' : _a$role,
|
|
26
28
|
className = _a.className,
|
|
27
29
|
style = _a.style,
|
|
28
|
-
|
|
29
|
-
size = _a$size === void 0 ? 'md' : _a$size,
|
|
30
|
+
sizeProp = _a.size,
|
|
30
31
|
_a$appearance = _a.appearance,
|
|
31
32
|
appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
|
|
32
33
|
prepend = _a.prepend,
|
|
@@ -59,6 +60,9 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
59
60
|
styles = _a.styles,
|
|
60
61
|
classNames = _a.classNames,
|
|
61
62
|
rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef", "waitCompositionEnd", "styles", "classNames"]);
|
|
63
|
+
var _useGlobalContext = useGlobalContext(),
|
|
64
|
+
globalSize = _useGlobalContext.size;
|
|
65
|
+
var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
|
|
62
66
|
// @TODO: 临时方案,后面迁移至 InputGroup
|
|
63
67
|
var _useMemo = useMemo(function () {
|
|
64
68
|
var shouldUnset = [false, false];
|
package/lib/esm/MockInput.js
CHANGED
|
@@ -58,7 +58,9 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
58
58
|
_onMouseLeave = _a.onMouseLeave,
|
|
59
59
|
onClear = _a.onClear,
|
|
60
60
|
label = _a.label,
|
|
61
|
-
|
|
61
|
+
_a$showIndicator = _a.showIndicator,
|
|
62
|
+
showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
|
|
63
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "onClear", "label", "showIndicator"]);
|
|
62
64
|
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
|
|
63
65
|
value = _useUncontrolledState[0],
|
|
64
66
|
tryChangeValue = _useUncontrolledState[1];
|
|
@@ -129,7 +131,7 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
129
131
|
tabIndex: -1,
|
|
130
132
|
className: cx(prefixCls + "__clear", 'active'),
|
|
131
133
|
onClick: handleClear
|
|
132
|
-
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : suffix[0])) : null);
|
|
134
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : showIndicator ? suffix[0] : null)) : null);
|
|
133
135
|
});
|
|
134
136
|
if (__DEV__) {
|
|
135
137
|
MockInput.displayName = 'MockInput';
|
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from '@hi-ui/style-inject';
|
|
11
|
-
var css_248z = ".hi-v5-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-700, #1a1d26);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input.disabled {cursor: not-allowed !important;}.hi-v5-mock-input__suffix {padding-left: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-mock-input__placeholder, .hi-v5-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v5-text-size-md, 0.875rem);text-align: center;color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v5-mock-input__prefix, .hi-v5-mock-input__suffix, .hi-v5-mock-input__secondary-suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-400, #abadb2);font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;}.hi-v5-mock-input__prefix {margin-right: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-mock-input--size-xs.hi-v5-mock-input {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 1px calc(var(--hi-v5-spacing-4, 8px) - 1px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-md.hi-v5-mock-input {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v5-border-radius-lg, 6px);padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-contained {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: none;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input {width: auto;}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label {-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value, .hi-v5-mock-input--appearance-contained:not(.disabled):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__suffix {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear:hover, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-unset.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__placeholder,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-contained.disabled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v5-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v5-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__text:disabled {cursor: not-allowed;}.hi-v5-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v5-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input__clear.hi-v5-input__clear--active {visibility: visible;opacity: 1;}.hi-v5-input__inner--suffix .hi-v5-input__clear {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-input__prefix, .hi-v5-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-700, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-input__prefix {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__suffix {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__prepend, .hi-v5-input__append {position: relative;color: var(--hi-v5-color-gray-700, #1a1d26);background-color: var(--hi-v5-color-gray-50, #f2f4f7);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v5-spacing-6, 12px) - 1px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v5-zindex-absolute, 1);}.hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;}.hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;}.hi-v5-input--size-xs {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-xs .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-xs .hi-v5-input__inner,.hi-v5-input--size-xs .hi-v5-input__prepend,.hi-v5-input--size-xs .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-xs .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-xs .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-sm {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-sm .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-sm .hi-v5-input__inner,.hi-v5-input--size-sm .hi-v5-input__prepend,.hi-v5-input--size-sm .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-sm .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-sm .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-md {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-input--size-md .hi-v5-input__text {padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-md .hi-v5-input__inner,.hi-v5-input--size-md .hi-v5-input__prepend,.hi-v5-input--size-md .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-md .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-md .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--size-lg {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-input--size-lg .hi-v5-input__text {padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-lg .hi-v5-input__inner,.hi-v5-input--size-lg .hi-v5-input__prepend,.hi-v5-input--size-lg .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-lg .hi-v5-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input--size-lg .hi-v5-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__prepend,.hi-v5-input--appearance-line .hi-v5-input__append {border-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-input--appearance-unset .hi-v5-input__text {padding-left: 0;padding-right: 0;}.hi-v5-input--appearance-unset.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--prefix .hi-v5-input__text {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--suffix .hi-v5-input__text {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-unset:not(.hi-v5-input__inner--disabled) .hi-v5-input__inner:hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-input--appearance-filled .hi-v5-input__inner {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__text {padding-left: 0;padding-right: 0;}.hi-v5-input--appearance-underline.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--prefix .hi-v5-input__text {padding-left: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--suffix .hi-v5-input__text {padding-right: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-underline .hi-v5-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v5-color-gray-300, #dbdde0);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused::after {border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid::after {border-bottom-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);background-color: transparent;}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-input__outer--prepend .hi-v5-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend {border: none;padding: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-button {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--append .hi-v5-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append {border: none;padding: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
|
|
11
|
+
var css_248z = ".hi-v5-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-800, #1a1d26);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-mock-input.disabled {cursor: not-allowed !important;}.hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input__suffix:has(> *) {padding-left: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input__placeholder, .hi-v5-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;color: var(--hi-v5-color-gray-700, #60636b);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v5-mock-input__prefix, .hi-v5-mock-input__suffix, .hi-v5-mock-input__secondary-suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-500, #babcc2);font-size: var(--hi-v5-text-size-lg, 1rem);text-align: center;}.hi-v5-mock-input__prefix {-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-mock-input--size-xs.hi-v5-mock-input {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-xs.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 1px calc(var(--hi-v5-spacing-4, 8px) - 1px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-sm.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-md.hi-v5-mock-input {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-md.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 4px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-mock-input--size-lg.hi-v5-mock-input:not(.hi-v5-mock-input--appearance-borderless) {padding: 7px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-line.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled):hover, .hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-borderless {border: none;}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-filled.hi-v5-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-mock-input--appearance-contained {background-color: var(--hi-v5-color-gray-100, #f2f4f7);border: none;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input {width: auto;}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-mock-input--appearance-contained .hi-v5-mock-input__label {-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value, .hi-v5-mock-input--appearance-contained:not(.disabled):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__value,.hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__suffix {color: var(--hi-v5-color-primary-700, var(--hi-v5-color-brandblue-700, #0c2ba6));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear {color: var(--hi-v5-color-primary-700, var(--hi-v5-color-brandblue-700, #0c2ba6));}.hi-v5-mock-input--appearance-contained.hi-v5-mock-input--has-value .hi-v5-mock-input__clear:hover, .hi-v5-mock-input--appearance-contained:not(.disabled):hover .hi-v5-mock-input__clear:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__label,.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__value {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-contained.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__placeholder, .hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__placeholder, .hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-line.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-unset.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-unset.disabled .hi-v5-mock-input__suffix, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input,.hi-v5-mock-input--appearance-filled.disabled .hi-v5-mock-input__suffix {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-mock-input--appearance-line.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-filled.disabled.hi-v5-mock-input, .hi-v5-mock-input--appearance-contained.disabled.hi-v5-mock-input {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v5-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v5-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__text:disabled {cursor: not-allowed;}.hi-v5-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);background-color: var(--hi-v5-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {z-index: calc(var(--hi-v5-zindex-absolute, 1) + 1);}.hi-v5-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-600, #91959e);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v5-input__clear:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input__clear.hi-v5-input__clear--active {visibility: visible;opacity: 1;}.hi-v5-input__inner--suffix .hi-v5-input__clear {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-input__prefix, .hi-v5-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;font-size: inherit;text-align: center;}.hi-v5-input__prefix {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__suffix {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input__prepend, .hi-v5-input__append {position: relative;color: var(--hi-v5-color-gray-800, #1a1d26);background-color: var(--hi-v5-color-gray-100, #f2f4f7);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v5-spacing-6, 12px) - 1px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v5-zindex-absolute, 1);}.hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;-webkit-margin-end: -1px;margin-inline-end: -1px;}.hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;-webkit-margin-start: -1px;margin-inline-start: -1px;}.hi-v5-input--size-xs {height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-xs .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-xs .hi-v5-input__inner,.hi-v5-input--size-xs .hi-v5-input__prepend,.hi-v5-input--size-xs .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-xs .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-xs .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-sm {height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-input--size-sm .hi-v5-input__text {padding: 1px calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-sm .hi-v5-input__inner,.hi-v5-input--size-sm .hi-v5-input__prepend,.hi-v5-input--size-sm .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-sm .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-sm .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-md {height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-input--size-md .hi-v5-input__text {padding: var(--hi-v5-spacing-2, 4px) calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-md .hi-v5-input__inner,.hi-v5-input--size-md .hi-v5-input__prepend,.hi-v5-input--size-md .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-md .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-md .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--size-lg {height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-input--size-lg .hi-v5-input__text {padding: calc(var(--hi-v5-spacing-4, 8px) - 1px) calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--size-lg .hi-v5-input__inner,.hi-v5-input--size-lg .hi-v5-input__prepend,.hi-v5-input--size-lg .hi-v5-input__append {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-input--size-lg .hi-v5-input__prepend {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input--size-lg .hi-v5-input__append {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-line .hi-v5-input__prepend,.hi-v5-input--appearance-line .hi-v5-input__append {border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-input--appearance-unset.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--prefix .hi-v5-input__text {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-unset .hi-v5-input__inner--suffix .hi-v5-input__text {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-unset .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-unset:not(.hi-v5-input__inner--disabled) .hi-v5-input__inner:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-filled .hi-v5-input__inner {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover {background-color: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-filled .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__text {-webkit-padding-start: 0;padding-inline-start: 0;-webkit-padding-end: 0;padding-inline-end: 0;}.hi-v5-input--appearance-underline.hi-v5-input__outer--prepend .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--prefix .hi-v5-input__text {-webkit-padding-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-start: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline.hi-v5-input__outer--append .hi-v5-input__text,.hi-v5-input--appearance-underline .hi-v5-input__inner--suffix .hi-v5-input__text {-webkit-padding-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);padding-inline-end: calc(var(--hi-v5-spacing-6, 12px) - 1px);}.hi-v5-input--appearance-underline .hi-v5-input__inner {border-radius: 0;}.hi-v5-input--appearance-underline .hi-v5-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;inset-block-end: 0;inset-inline-start: -1px;inset-inline-end: -1px;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled):hover::after {border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--focused::after {border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid::after {border-block-end-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-underline .hi-v5-input__inner:not(.hi-v5-input__inner--disabled).hi-v5-input__inner--invalid.hover::after {border-block-end-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-input--appearance-borderless .hi-v5-input__text {-webkit-padding-start: 0;padding-inline-start: 0;-webkit-padding-end: 0;padding-inline-end: 0;}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-600, #91959e);background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-input--appearance-line .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-filled .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled {color: var(--hi-v5-color-gray-600, #91959e);background-color: transparent;}.hi-v5-input--appearance-unset .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text, .hi-v5-input--appearance-underline .hi-v5-input__inner.hi-v5-input__inner--disabled .hi-v5-input__text {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-input__outer--prepend .hi-v5-input__inner {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend {border: none;padding: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-mock-input {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--prepend-unset .hi-v5-input__prepend .hi-v5-button {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--append .hi-v5-input__inner {border-start-end-radius: 0;border-end-end-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append {border: none;padding: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-mock-input {border-start-start-radius: 0;border-end-start-radius: 0;}.hi-v5-input__outer--append-unset .hi-v5-input__append .hi-v5-button {border-start-start-radius: 0;border-end-start-radius: 0;}";
|
|
12
12
|
__styleInject__(css_248z);
|
|
13
13
|
export { css_248z as default };
|
package/lib/types/MockInput.d.ts
CHANGED
|
@@ -3,46 +3,46 @@ import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from
|
|
|
3
3
|
/**
|
|
4
4
|
* 支持自定义渲染输入框内容,暂时仅供内部 Picker 类组件使用,不对外提供
|
|
5
5
|
*/
|
|
6
|
-
export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "
|
|
7
|
-
prefixCls?: string
|
|
8
|
-
role?: string
|
|
6
|
+
export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "size" | "onSelect" | "title" | "prefix" | "data" | "label" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "onClear" | "displayRender" | "showIndicator"> & {
|
|
7
|
+
prefixCls?: string;
|
|
8
|
+
role?: string;
|
|
9
9
|
} & {
|
|
10
10
|
/**
|
|
11
11
|
* 设置当前多选值
|
|
12
12
|
*/
|
|
13
|
-
value?: React.ReactText
|
|
13
|
+
value?: React.ReactText;
|
|
14
14
|
/**
|
|
15
15
|
* 设置当前多选值默认值
|
|
16
16
|
*/
|
|
17
|
-
defaultValue?: React.ReactText
|
|
17
|
+
defaultValue?: React.ReactText;
|
|
18
18
|
/**
|
|
19
19
|
* 多选值改变时的回调
|
|
20
20
|
*/
|
|
21
|
-
onChange?: (
|
|
21
|
+
onChange?: (value: React.ReactText, item: any) => void;
|
|
22
22
|
/**
|
|
23
23
|
* 是否可清空
|
|
24
24
|
*/
|
|
25
|
-
clearable?: boolean
|
|
25
|
+
clearable?: boolean;
|
|
26
26
|
/**
|
|
27
27
|
* 清除按钮展示的触发形态
|
|
28
28
|
*/
|
|
29
|
-
clearableTrigger?: "always" | "hover"
|
|
29
|
+
clearableTrigger?: "always" | "hover";
|
|
30
30
|
/**
|
|
31
31
|
* 点击关闭按钮时触发
|
|
32
32
|
*/
|
|
33
|
-
onClear?: (
|
|
33
|
+
onClear?: () => void;
|
|
34
34
|
/**
|
|
35
35
|
* 是否禁止使用
|
|
36
36
|
*/
|
|
37
|
-
disabled?: boolean
|
|
37
|
+
disabled?: boolean;
|
|
38
38
|
/**
|
|
39
39
|
* 自定义选择后触发器所展示的内容
|
|
40
40
|
*/
|
|
41
|
-
displayRender?: (
|
|
41
|
+
displayRender?: (item: MockInputDataItem) => React.ReactNode;
|
|
42
42
|
/**
|
|
43
43
|
* 输入框占位符
|
|
44
44
|
*/
|
|
45
|
-
placeholder?: string
|
|
45
|
+
placeholder?: string;
|
|
46
46
|
/**
|
|
47
47
|
* 输入框前置内容
|
|
48
48
|
*/
|
|
@@ -54,23 +54,23 @@ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.
|
|
|
54
54
|
/**
|
|
55
55
|
* 点击 Input 时触发回调
|
|
56
56
|
*/
|
|
57
|
-
onClick?: (
|
|
57
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
58
58
|
/**
|
|
59
59
|
* 展示数据源
|
|
60
60
|
*/
|
|
61
|
-
data?: MockInputDataItem[]
|
|
61
|
+
data?: MockInputDataItem[];
|
|
62
62
|
/**
|
|
63
63
|
* 是否聚焦
|
|
64
64
|
*/
|
|
65
|
-
focused?: boolean
|
|
65
|
+
focused?: boolean;
|
|
66
66
|
/**
|
|
67
67
|
* 开启输入框只读
|
|
68
68
|
*/
|
|
69
|
-
readOnly?: boolean
|
|
69
|
+
readOnly?: boolean;
|
|
70
70
|
/**
|
|
71
71
|
* 设置展现形式
|
|
72
72
|
*/
|
|
73
|
-
appearance?: HiBaseAppearanceEnum | "contained"
|
|
73
|
+
appearance?: HiBaseAppearanceEnum | "contained";
|
|
74
74
|
/**
|
|
75
75
|
* 设置输入框 label 内容,仅在 appearance 为 contained 时生效
|
|
76
76
|
*/
|
|
@@ -78,9 +78,13 @@ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.
|
|
|
78
78
|
/**
|
|
79
79
|
* 设置输入框尺寸
|
|
80
80
|
*/
|
|
81
|
-
size?: "xs" | "sm" | "md" | "lg"
|
|
81
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
82
|
+
/**
|
|
83
|
+
* 是否展示箭头
|
|
84
|
+
*/
|
|
85
|
+
showIndicator?: boolean;
|
|
82
86
|
} & {
|
|
83
|
-
invalid?: boolean
|
|
87
|
+
invalid?: boolean;
|
|
84
88
|
} & React.RefAttributes<HTMLDivElement | null>>;
|
|
85
89
|
export interface MockInputDataItem extends HiBaseDataItem {
|
|
86
90
|
/**
|
|
@@ -92,7 +96,7 @@ export interface MockInputDataItem extends HiBaseDataItem {
|
|
|
92
96
|
*/
|
|
93
97
|
title: React.ReactNode;
|
|
94
98
|
}
|
|
95
|
-
export
|
|
99
|
+
export type MockInputProps = HiBaseHTMLFieldProps<'div', {
|
|
96
100
|
/**
|
|
97
101
|
* 设置当前多选值
|
|
98
102
|
*/
|
|
@@ -165,4 +169,8 @@ export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
|
|
|
165
169
|
* 设置输入框尺寸
|
|
166
170
|
*/
|
|
167
171
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
172
|
+
/**
|
|
173
|
+
* 是否展示箭头
|
|
174
|
+
*/
|
|
175
|
+
showIndicator?: boolean;
|
|
168
176
|
}>;
|
package/lib/types/types.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { HiBaseAppearanceEnum } from '@hi-ui/core';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
2
|
+
export type InputAppearanceEnum = HiBaseAppearanceEnum | 'underline';
|
|
3
|
+
export type InputTypeEnum = 'text' | 'id' | 'tel' | 'card' | 'amount' | 'email' | 'password' | 'number';
|
package/lib/types/use-input.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/input",
|
|
3
|
-
"version": "5.0.0-
|
|
3
|
+
"version": "5.0.0-experimental.1",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -44,24 +44,24 @@
|
|
|
44
44
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@hi-ui/classname": "^5.0.0-
|
|
48
|
-
"@hi-ui/dom-utils": "^5.0.0-
|
|
49
|
-
"@hi-ui/env": "^5.0.0-
|
|
50
|
-
"@hi-ui/func-utils": "^5.0.0-
|
|
51
|
-
"@hi-ui/icons": "^5.0.0-
|
|
52
|
-
"@hi-ui/type-assertion": "^5.0.0-
|
|
53
|
-
"@hi-ui/use-latest": "^5.0.0-
|
|
54
|
-
"@hi-ui/use-merge-refs": "^5.0.0-
|
|
55
|
-
"@hi-ui/use-uncontrolled-state": "^5.0.0-
|
|
47
|
+
"@hi-ui/classname": "^5.0.0-experimental.0",
|
|
48
|
+
"@hi-ui/dom-utils": "^5.0.0-experimental.0",
|
|
49
|
+
"@hi-ui/env": "^5.0.0-experimental.0",
|
|
50
|
+
"@hi-ui/func-utils": "^5.0.0-experimental.0",
|
|
51
|
+
"@hi-ui/icons": "^5.0.0-experimental.0",
|
|
52
|
+
"@hi-ui/type-assertion": "^5.0.0-experimental.0",
|
|
53
|
+
"@hi-ui/use-latest": "^5.0.0-experimental.0",
|
|
54
|
+
"@hi-ui/use-merge-refs": "^5.0.0-experimental.0",
|
|
55
|
+
"@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@hi-ui/core": ">=5.0.0-
|
|
58
|
+
"@hi-ui/core": ">=5.0.0-experimental.0",
|
|
59
59
|
"react": ">=16.8.6",
|
|
60
60
|
"react-dom": ">=16.8.6"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@hi-ui/core": "^5.0.0-
|
|
64
|
-
"@hi-ui/core-css": "^5.0.0-
|
|
63
|
+
"@hi-ui/core": "^5.0.0-experimental.0",
|
|
64
|
+
"@hi-ui/core-css": "^5.0.0-experimental.1",
|
|
65
65
|
"react": "^17.0.1",
|
|
66
66
|
"react-dom": "^17.0.1"
|
|
67
67
|
}
|