@hi-ui/input 4.0.9 → 4.0.11

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/lib/esm/Input.js CHANGED
@@ -14,120 +14,101 @@ 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
16
  import { useInput } from './use-input.js';
17
-
18
17
  var _prefix = getPrefixCls('input');
19
18
  /**
20
19
  * 输入框
21
- *
22
- * @TODO:
23
- * 1. size api 确认
24
- * 2. 修改类名结构
25
- * 3. 支持带数字展示
26
- * 4. InputGroup 模式支持
27
- * 5. 手动聚焦支持额外配置
28
20
  */
29
-
30
-
31
21
  var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
32
22
  var _a$prefixCls = _a.prefixCls,
33
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
34
- _a$role = _a.role,
35
- role = _a$role === void 0 ? 'input' : _a$role,
36
- className = _a.className,
37
- style = _a.style,
38
- _a$size = _a.size,
39
- size = _a$size === void 0 ? 'md' : _a$size,
40
- _a$appearance = _a.appearance,
41
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
42
- prepend = _a.prepend,
43
- append = _a.append,
44
- prefix = _a.prefix,
45
- suffix = _a.suffix,
46
- _a$clearableTrigger = _a.clearableTrigger,
47
- clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
48
- _a$clearable = _a.clearable,
49
- clearable = _a$clearable === void 0 ? false : _a$clearable,
50
- _a$invalid = _a.invalid,
51
- invalid = _a$invalid === void 0 ? false : _a$invalid,
52
- name = _a.name,
53
- autoFocus = _a.autoFocus,
54
- disabled = _a.disabled,
55
- readOnly = _a.readOnly,
56
- maxLength = _a.maxLength,
57
- placeholder = _a.placeholder,
58
- defaultValue = _a.defaultValue,
59
- valueProp = _a.value,
60
- onChange = _a.onChange,
61
- onFocus = _a.onFocus,
62
- onBlur = _a.onBlur,
63
- onKeyDown = _a.onKeyDown,
64
- trimValueOnBlur = _a.trimValueOnBlur,
65
- onClear = _a.onClear,
66
- type = _a.type,
67
- containerRef = _a.containerRef,
68
- 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"]); // @TODO: 临时方案,后面迁移至 InputGroup
69
-
70
-
23
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
24
+ _a$role = _a.role,
25
+ role = _a$role === void 0 ? 'input' : _a$role,
26
+ className = _a.className,
27
+ style = _a.style,
28
+ _a$size = _a.size,
29
+ size = _a$size === void 0 ? 'md' : _a$size,
30
+ _a$appearance = _a.appearance,
31
+ appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
32
+ prepend = _a.prepend,
33
+ append = _a.append,
34
+ prefix = _a.prefix,
35
+ suffix = _a.suffix,
36
+ _a$clearableTrigger = _a.clearableTrigger,
37
+ clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
38
+ _a$clearable = _a.clearable,
39
+ clearable = _a$clearable === void 0 ? false : _a$clearable,
40
+ _a$invalid = _a.invalid,
41
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
42
+ name = _a.name,
43
+ autoFocus = _a.autoFocus,
44
+ disabled = _a.disabled,
45
+ readOnly = _a.readOnly,
46
+ maxLength = _a.maxLength,
47
+ placeholder = _a.placeholder,
48
+ defaultValue = _a.defaultValue,
49
+ valueProp = _a.value,
50
+ onChange = _a.onChange,
51
+ onFocus = _a.onFocus,
52
+ onBlur = _a.onBlur,
53
+ onKeyDown = _a.onKeyDown,
54
+ trimValueOnBlur = _a.trimValueOnBlur,
55
+ onClear = _a.onClear,
56
+ type = _a.type,
57
+ containerRef = _a.containerRef,
58
+ 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"]);
59
+ // @TODO: 临时方案,后面迁移至 InputGroup
71
60
  var _useMemo = useMemo(function () {
72
- var shouldUnset = [false, false]; // @ts-ignore
73
- // @ts-ignore
74
-
75
- if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
76
- shouldUnset[0] = true;
77
- } // @ts-ignore
78
- // @ts-ignore
79
-
80
-
81
- if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
82
- shouldUnset[1] = true;
83
- }
84
-
85
- return shouldUnset;
86
- }, [prepend, append]),
87
- unsetPrepend = _useMemo[0],
88
- unsetAppend = _useMemo[1];
89
-
61
+ var shouldUnset = [false, false];
62
+ // @ts-ignore
63
+ // @ts-ignore
64
+ if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
65
+ shouldUnset[0] = true;
66
+ }
67
+ // @ts-ignore
68
+ // @ts-ignore
69
+ if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
70
+ shouldUnset[1] = true;
71
+ }
72
+ return shouldUnset;
73
+ }, [prepend, append]),
74
+ unsetPrepend = _useMemo[0],
75
+ unsetAppend = _useMemo[1];
90
76
  var inputElementRef = useRef(null);
91
77
  var proxyOnChange = useCallback(function (value, evt) {
92
78
  if (!onChange) return;
93
79
  onChangeMock(onChange, evt, inputElementRef.current, value);
94
80
  }, [onChange]);
95
81
  var clearElementRef = useRef(null);
96
-
97
82
  var _useInput = useInput({
98
- clearElementRef: clearElementRef,
99
- inputElementRef: inputElementRef,
100
- name: name,
101
- autoFocus: autoFocus,
102
- disabled: disabled,
103
- readOnly: readOnly,
104
- maxLength: maxLength,
105
- placeholder: placeholder,
106
- defaultValue: defaultValue,
107
- value: valueProp,
108
- onChange: proxyOnChange,
109
- onFocus: onFocus,
110
- onBlur: onBlur,
111
- onKeyDown: onKeyDown,
112
- trimValueOnBlur: trimValueOnBlur,
113
- type: type
114
- }),
115
- tryChangeValue = _useInput.tryChangeValue,
116
- focused = _useInput.focused,
117
- value = _useInput.value,
118
- getInputProps = _useInput.getInputProps;
119
-
83
+ clearElementRef: clearElementRef,
84
+ inputElementRef: inputElementRef,
85
+ name: name,
86
+ autoFocus: autoFocus,
87
+ disabled: disabled,
88
+ readOnly: readOnly,
89
+ maxLength: maxLength,
90
+ placeholder: placeholder,
91
+ defaultValue: defaultValue,
92
+ value: valueProp,
93
+ onChange: proxyOnChange,
94
+ onFocus: onFocus,
95
+ onBlur: onBlur,
96
+ onKeyDown: onKeyDown,
97
+ trimValueOnBlur: trimValueOnBlur,
98
+ type: type
99
+ }),
100
+ tryChangeValue = _useInput.tryChangeValue,
101
+ focused = _useInput.focused,
102
+ value = _useInput.value,
103
+ getInputProps = _useInput.getInputProps;
120
104
  var focus = useCallback(function () {
121
105
  var _a;
122
-
123
106
  (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
124
107
  }, []);
125
-
126
108
  var _useState = useState(false),
127
- hover = _useState[0],
128
- setHover = _useState[1]; // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清楚
129
-
130
-
109
+ hover = _useState[0],
110
+ setHover = _useState[1];
111
+ // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清楚
131
112
  var showClearableIcon = clearable && !!value && !disabled;
132
113
  var mergedRef = useMergeRefs(ref, inputElementRef);
133
114
  var cls = cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
@@ -170,7 +151,6 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
170
151
  className: prefixCls + "__append"
171
152
  }, append) : null));
172
153
  });
173
-
174
154
  if (__DEV__) {
175
155
  Input.displayName = 'Input';
176
156
  }
@@ -183,11 +163,9 @@ if (__DEV__) {
183
163
  * @param targetValue
184
164
  * @returns
185
165
  */
186
-
187
-
188
166
  function onChangeMock(onChange, evt, target, targetValue) {
189
- var event = evt; // 点击 clearIcon 或者 失焦 trim 时,都会代理 onChange 的事件对象 target 指向 input.target
190
-
167
+ var event = evt;
168
+ // 点击 clearIcon 或者 失焦 trim 时,都会代理 onChange 的事件对象 target 指向 input.target
191
169
  if (evt.type !== 'change') {
192
170
  if (!target) return;
193
171
  var originalTargetValue = target.value;
@@ -195,13 +173,11 @@ function onChangeMock(onChange, evt, target, targetValue) {
195
173
  event.target = target;
196
174
  event.currentTarget = target;
197
175
  target.value = targetValue;
198
- onChange(event, targetValue); // 重置为之前值
199
-
176
+ onChange(event, targetValue);
177
+ // 重置为之前值
200
178
  target.value = originalTargetValue;
201
179
  return;
202
180
  }
203
-
204
181
  onChange(event, targetValue);
205
182
  }
206
-
207
183
  export { Input, onChangeMock };
@@ -14,54 +14,49 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { CloseCircleFilled } from '@hi-ui/icons';
16
16
  var _role = 'mock-input';
17
-
18
17
  var _prefix = getPrefixCls(_role);
19
-
20
18
  var NOOP_VALUE = '';
21
19
  var NOOP_ARRAY = [];
22
20
  /**
23
21
  * 支持自定义渲染输入框内容,暂时仅供内部 Picker 类组件使用,不对外提供
24
22
  */
25
-
26
23
  var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
27
24
  var _a$prefixCls = _a.prefixCls,
28
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
29
- _a$role = _a.role,
30
- role = _a$role === void 0 ? _role : _a$role,
31
- className = _a.className,
32
- _a$data = _a.data,
33
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
34
- _a$defaultValue = _a.defaultValue,
35
- defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
36
- valueProp = _a.value,
37
- onChange = _a.onChange,
38
- placeholder = _a.placeholder,
39
- _a$disabled = _a.disabled,
40
- disabled = _a$disabled === void 0 ? false : _a$disabled,
41
- _a$clearable = _a.clearable,
42
- clearable = _a$clearable === void 0 ? false : _a$clearable,
43
- _a$focused = _a.focused,
44
- focused = _a$focused === void 0 ? false : _a$focused,
45
- _a$invalid = _a.invalid,
46
- invalid = _a$invalid === void 0 ? false : _a$invalid,
47
- _a$readOnly = _a.readOnly,
48
- readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
49
- _a$size = _a.size,
50
- size = _a$size === void 0 ? 'md' : _a$size,
51
- _a$appearance = _a.appearance,
52
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
53
- _a$clearableTrigger = _a.clearableTrigger,
54
- clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
55
- displayRender = _a.displayRender,
56
- suffix = _a.suffix,
57
- _onMouseOver = _a.onMouseOver,
58
- _onMouseLeave = _a.onMouseLeave,
59
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
60
-
25
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
26
+ _a$role = _a.role,
27
+ role = _a$role === void 0 ? _role : _a$role,
28
+ className = _a.className,
29
+ _a$data = _a.data,
30
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
31
+ _a$defaultValue = _a.defaultValue,
32
+ defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
33
+ valueProp = _a.value,
34
+ onChange = _a.onChange,
35
+ placeholder = _a.placeholder,
36
+ _a$disabled = _a.disabled,
37
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
38
+ _a$clearable = _a.clearable,
39
+ clearable = _a$clearable === void 0 ? false : _a$clearable,
40
+ _a$focused = _a.focused,
41
+ focused = _a$focused === void 0 ? false : _a$focused,
42
+ _a$invalid = _a.invalid,
43
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
44
+ _a$readOnly = _a.readOnly,
45
+ readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
46
+ _a$size = _a.size,
47
+ size = _a$size === void 0 ? 'md' : _a$size,
48
+ _a$appearance = _a.appearance,
49
+ appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
50
+ _a$clearableTrigger = _a.clearableTrigger,
51
+ clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
52
+ displayRender = _a.displayRender,
53
+ suffix = _a.suffix,
54
+ _onMouseOver = _a.onMouseOver,
55
+ _onMouseLeave = _a.onMouseLeave,
56
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
61
57
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
62
- value = _useUncontrolledState[0],
63
- tryChangeValue = _useUncontrolledState[1];
64
-
58
+ value = _useUncontrolledState[0],
59
+ tryChangeValue = _useUncontrolledState[1];
65
60
  var displayItem = useMemo(function () {
66
61
  if (value === '') return null;
67
62
  var displayItem = data.find(function (item) {
@@ -71,11 +66,9 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
71
66
  }, [value, data]);
72
67
  var displayValue = useMemo(function () {
73
68
  if (!displayItem) return '';
74
-
75
69
  if (displayRender) {
76
70
  return displayRender(displayItem);
77
71
  }
78
-
79
72
  return displayItem.title;
80
73
  }, [displayItem, displayRender]);
81
74
  var handleClear = useCallback(function (evt) {
@@ -83,17 +76,15 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
83
76
  evt.stopPropagation();
84
77
  tryChangeValue(NOOP_VALUE, displayItem);
85
78
  }, [tryChangeValue, disabled, displayItem]);
86
-
87
79
  var _useState = useState(false),
88
- hover = _useState[0],
89
- setHover = _useState[1];
90
-
80
+ hover = _useState[0],
81
+ setHover = _useState[1];
91
82
  var trySetHover = useCallback(function (hovered) {
92
83
  if (disabled) return;
93
84
  setHover(hovered);
94
85
  }, [disabled]);
95
- var hasValue = !!displayValue; // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清除
96
-
86
+ var hasValue = !!displayValue;
87
+ // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清除
97
88
  var showClearableIcon = useMemo(function () {
98
89
  return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
99
90
  }, [clearable, hasValue, disabled, clearableTrigger, hover]);
@@ -123,9 +114,7 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
123
114
  onClick: handleClear
124
115
  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null);
125
116
  });
126
-
127
117
  if (__DEV__) {
128
118
  MockInput.displayName = 'MockInput';
129
119
  }
130
-
131
120
  export { MockInput };
@@ -7,9 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from 'inject-head-style';
11
- var css_248z = ".hi-v4-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-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-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-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input.disabled {cursor: not-allowed; }.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-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-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-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-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1; }.hi-v4-mock-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-v4-color-gray-400, #c9ced6);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center; }.hi-v4-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-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%; }.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%; }.hi-v4-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-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input__text:disabled {cursor: not-allowed; }.hi-v4-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-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto; }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-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-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0; }.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1; }.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px); }.hi-v4-input__prefix, .hi-v4-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-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center; }.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-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-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1); }.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px; }.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px; }.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-unset:not(.hi-v4-input__inner--disabled) .hi-v4-input__inner:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-underline .hi-v4-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-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: transparent; }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0; }";
12
-
10
+ import __styleInject__ from 'style-inject';
11
+ var css_248z = ".hi-v4-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-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-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-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input.disabled {cursor: not-allowed;}.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v4-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-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-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-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v4-mock-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-v4-color-gray-400, #b5bcc7);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center;}.hi-v4-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-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v4-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-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input__text:disabled {cursor: not-allowed;}.hi-v4-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-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-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-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1;}.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-input__prefix, .hi-v4-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-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center;}.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-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-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1);}.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;}.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;}.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);}.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);}.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-unset:not(.hi-v4-input__inner--disabled) .hi-v4-input__inner:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-underline .hi-v4-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-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: transparent;}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
13
12
  __styleInject__(css_248z);
14
-
15
13
  export { css_248z as default };
@@ -10,58 +10,50 @@
10
10
  import { useState, useRef, useCallback } from 'react';
11
11
  import { isNullish } from '@hi-ui/type-assertion';
12
12
  var defaultSeparator = ' ';
13
-
14
13
  var useInputCursor = function useInputCursor(_ref) {
15
14
  var inputElementRef = _ref.inputElementRef,
16
- value = _ref.value,
17
- formatter = _ref.formatter,
18
- _ref$separator = _ref.separator,
19
- separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
20
-
15
+ value = _ref.value,
16
+ formatter = _ref.formatter,
17
+ _ref$separator = _ref.separator,
18
+ separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
21
19
  var _useState = useState(0),
22
- position = _useState[0],
23
- setPosition = _useState[1];
24
-
25
- var startPositionRef = useRef(0); // 记录值变化前的位置
26
-
20
+ position = _useState[0],
21
+ setPosition = _useState[1];
22
+ var startPositionRef = useRef(0);
23
+ // 记录值变化前的位置
27
24
  var handleOnKeyDown = useCallback(function () {
28
25
  var _a, _b;
29
-
30
26
  startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
31
27
  }, [inputElementRef]);
32
28
  var handleChange = useCallback(function (evt) {
33
29
  var _a, _b;
34
-
35
30
  if (isNullish(value)) {
36
31
  return;
37
32
  }
38
-
39
- var val = evt.target.value; // 处理后的字符串
40
-
41
- var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
42
-
43
- var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
44
-
33
+ var val = evt.target.value;
34
+ // 处理后的字符串
35
+ var str = typeof formatter === 'function' ? formatter(val) : val;
36
+ // 光标变化后的位置
37
+ var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
38
+ // 字符串添加
45
39
  if (str.length > value.length) {
46
40
  // 值变化的长度
47
- var len = str.length - value.length; // 取出变化的值
48
-
49
- var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
50
-
41
+ var len = str.length - value.length;
42
+ // 取出变化的值
43
+ var addStr = str.substring(startPositionRef.current, startPositionRef.current + len);
44
+ // 光标应该移动的格数
51
45
  var step = getSeparatorNum(addStr, separator);
52
46
  setPosition(endPosition + step);
53
- } // 字符串删除
54
-
55
-
47
+ }
48
+ // 字符串删除
56
49
  if (str.length < value.length) {
57
50
  if (str.charAt(endPosition - 1) === separator) {
58
51
  setPosition(endPosition - 1);
59
52
  } else {
60
53
  setPosition(endPosition);
61
54
  }
62
- } // 没有变化
63
-
64
-
55
+ }
56
+ // 没有变化
65
57
  if (str.length === value.length) {
66
58
  if (str.charAt(startPositionRef.current) === separator) {
67
59
  setPosition(endPosition + 1);
@@ -81,22 +73,16 @@ var useInputCursor = function useInputCursor(_ref) {
81
73
  * @param str
82
74
  * @returns
83
75
  */
84
-
85
-
86
76
  var getSeparatorNum = function getSeparatorNum(str, separator) {
87
77
  if (separator === void 0) {
88
78
  separator = defaultSeparator;
89
79
  }
90
-
91
80
  var index = str.indexOf(separator);
92
81
  var num = 0;
93
-
94
82
  while (index !== -1) {
95
83
  index = str.indexOf(separator, index + 1);
96
84
  num++;
97
85
  }
98
-
99
86
  return num;
100
87
  };
101
-
102
88
  export { useInputCursor };