@hi-ui/input 4.3.0 → 5.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +51 -0
  2. package/lib/cjs/Input.js +19 -12
  3. package/lib/cjs/MockInput.js +15 -6
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/Input.js +19 -12
  6. package/lib/esm/MockInput.js +15 -6
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/Input.d.ts +22 -2
  9. package/lib/types/MockInput.d.ts +29 -5
  10. package/package.json +14 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,56 @@
1
1
  # @hi-ui/input
2
2
 
3
+ ## 5.0.0-alpha.0
4
+
5
+ ### Major Changes
6
+
7
+ - 1b05b44a4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
8
+
9
+ ### Minor Changes
10
+
11
+ - 7bda04e64: feat(input&number-input): add styles and classNames api (5.0)
12
+ - 77ed66eac: <br>
13
+ - feat(picker): 下拉选择类组件增加 xs 尺寸 (5.0)
14
+ - feat(input): 输入框组件增加 xs 尺寸 (5.0)
15
+ - 632dbda3a: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
16
+ - 1b51c1bbe: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
17
+ - 6eac4b78b: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
18
+
19
+ ### Patch Changes
20
+
21
+ - ddd2acc79: <br>
22
+ - style(time-picker): 为占位符增加溢出处理和文本省略样式 (5.0)
23
+ - style(tag-input): 为占位符增加溢出处理和文本省略样式 (5.0)
24
+ - style(input): 增加溢出处理和文本省略样式 (5.0)
25
+ - style(number-input): 增加溢出处理和文本省略样式 (5.0)
26
+ - 5de7a848b: fix: 修复 5.0 UI 问题 (5.0)
27
+ - 0cd15438e: style: 修改样式问题 (5.0)
28
+ - eb69f0baa: fix(input): 使用 cx 函数优化样式类名的拼接 (5.0)
29
+ - a01771e8d: style: 修改 appearance 为 unset 和 borderless 模式的样式 (5.0)
30
+ - 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
31
+ - 6ebf40f96: chore: 优化 Input 和 TagInput label 显示逻辑 (5.0)
32
+ - c125e4c48: fix: 修复 UI 问题 (5.0)
33
+ - Updated dependencies [1b05b44a4]
34
+ - Updated dependencies [77ed66eac]
35
+ - Updated dependencies [61d132802]
36
+ - Updated dependencies [6eac4b78b]
37
+ - @hi-ui/core@5.0.0-alpha.0
38
+ - @hi-ui/use-latest@5.0.0-alpha.0
39
+ - @hi-ui/use-merge-refs@5.0.0-alpha.0
40
+ - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
41
+ - @hi-ui/icons@5.0.0-alpha.0
42
+ - @hi-ui/classname@5.0.0-alpha.0
43
+ - @hi-ui/dom-utils@5.0.0-alpha.0
44
+ - @hi-ui/env@5.0.0-alpha.0
45
+ - @hi-ui/func-utils@5.0.0-alpha.0
46
+ - @hi-ui/type-assertion@5.0.0-alpha.0
47
+
48
+ ## 4.4.0
49
+
50
+ ### Minor Changes
51
+
52
+ - [#3172](https://github.com/XiaoMi/hiui/pull/3172) [`a883d8e19`](https://github.com/XiaoMi/hiui/commit/a883d8e197446ef0e7cefcc5cc44d21ed1d0807f) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(mock-input): 增加 onClear 参数 (#3171)
53
+
3
54
  ## 4.3.0
4
55
 
5
56
  ### Minor Changes
package/lib/cjs/Input.js CHANGED
@@ -68,7 +68,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
68
68
  type = _a.type,
69
69
  containerRef = _a.containerRef,
70
70
  waitCompositionEnd = _a.waitCompositionEnd,
71
- 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"]);
71
+ styles = _a.styles,
72
+ classNames = _a.classNames,
73
+ 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"]);
72
74
  // @TODO: 临时方案，后面迁移至 InputGroup
73
75
  var _useMemo = React.useMemo(function () {
74
76
  var shouldUnset = [false, false];
@@ -134,9 +136,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
134
136
  ref: containerRef
135
137
  }, /*#__PURE__*/React__default["default"].createElement("div", {
136
138
  className: outerCls
137
- }, prepend ? /*#__PURE__*/React__default["default"].createElement("div", {
138
- className: prefixCls + "__prepend"
139
- }, prepend) : null, /*#__PURE__*/React__default["default"].createElement("div", {
139
+ }, prepend ? ( /*#__PURE__*/React__default["default"].createElement("div", {
140
+ className: classname.cx(prefixCls + "__prepend", classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
141
+ style: styles === null || styles === void 0 ? void 0 : styles.prepend
142
+ }, prepend)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
140
143
  className: classname.cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid"),
141
144
  onMouseOver: function onMouseOver(e) {
142
145
  setHover(true);
@@ -144,13 +147,16 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
144
147
  onMouseLeave: function onMouseLeave(e) {
145
148
  setHover(false);
146
149
  }
147
- }, prefix ? /*#__PURE__*/React__default["default"].createElement("span", {
148
- className: prefixCls + "__prefix"
149
- }, prefix) : null, /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
150
+ }, prefix ? ( /*#__PURE__*/React__default["default"].createElement("span", {
151
+ className: classname.cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
152
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
153
+ }, prefix)) : null, /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
150
154
  ref: mergedRef,
151
- className: prefixCls + "__text"
155
+ className: classname.cx(prefixCls + "__text", classNames === null || classNames === void 0 ? void 0 : classNames.input),
156
+ style: styles === null || styles === void 0 ? void 0 : styles.input
152
157
  }, getInputProps(), rest)), suffix || showClearableIcon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
153
- className: prefixCls + "__suffix"
158
+ className: classname.cx(prefixCls + "__suffix", classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
159
+ style: styles === null || styles === void 0 ? void 0 : styles.suffix
154
160
  }, showClearableIcon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
155
161
  ref: clearElementRef,
156
162
  className: classname.cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
@@ -161,9 +167,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
161
167
  onClear === null || onClear === void 0 ? void 0 : onClear();
162
168
  focus();
163
169
  }
164
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : null, suffix)) : null), append ? /*#__PURE__*/React__default["default"].createElement("div", {
165
- className: prefixCls + "__append"
166
- }, append) : null));
170
+ }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : null, suffix)) : null), append ? ( /*#__PURE__*/React__default["default"].createElement("div", {
171
+ className: classname.cx(prefixCls + "__append", classNames === null || classNames === void 0 ? void 0 : classNames.append),
172
+ style: styles === null || styles === void 0 ? void 0 : styles.append
173
+ }, append)) : null));
167
174
  });
168
175
  if (env.__DEV__) {
169
176
  Input.displayName = 'Input';
package/lib/cjs/MockInput.js CHANGED
@@ -20,6 +20,7 @@ var env = require('@hi-ui/env');
20
20
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
21
21
  var icons = require('@hi-ui/icons');
22
22
  var typeAssertion = require('@hi-ui/type-assertion');
23
+ var useLatest = require('@hi-ui/use-latest');
23
24
  function _interopDefaultCompat(e) {
24
25
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
25
26
  'default': e
@@ -67,7 +68,11 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
67
68
  suffixProp = _a.suffix,
68
69
  _onMouseOver = _a.onMouseOver,
69
70
  _onMouseLeave = _a.onMouseLeave,
70
- 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"]);
71
+ onClear = _a.onClear,
72
+ label = _a.label,
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"]);
71
76
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
72
77
  value = _useUncontrolledState[0],
73
78
  tryChangeValue = _useUncontrolledState[1];
@@ -88,11 +93,13 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
88
93
  }
89
94
  return displayItem.title;
90
95
  }, [displayItem, displayRender]);
96
+ var onClearLatest = useLatest.useLatestCallback(onClear);
91
97
  var handleClear = React.useCallback(function (evt) {
92
98
  if (disabled) return;
93
99
  evt.stopPropagation();
94
100
  tryChangeValue(NOOP_VALUE, displayItem);
95
- }, [tryChangeValue, disabled, displayItem]);
101
+ onClearLatest === null || onClearLatest === void 0 ? void 0 : onClearLatest();
102
+ }, [tryChangeValue, disabled, displayItem, onClearLatest]);
96
103
  var _useState = React.useState(false),
97
104
  hover = _useState[0],
98
105
  setHover = _useState[1];
@@ -106,7 +113,7 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
106
113
  var showClearableIcon = React.useMemo(function () {
107
114
  return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
108
115
  }, [clearable, hasValue, disabled, clearableTrigger, hover]);
109
- var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
116
+ var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, hasValue && prefixCls + "--has-value", focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
110
117
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
111
118
  ref: ref,
112
119
  role: role,
@@ -121,9 +128,11 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
121
128
  }
122
129
  }, rest), prefix ? /*#__PURE__*/React__default["default"].createElement("span", {
123
130
  className: prefixCls + "__prefix"
124
- }, prefix) : null, hasValue ? ( /*#__PURE__*/React__default["default"].createElement("span", {
131
+ }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React__default["default"].createElement("span", {
132
+ className: prefixCls + "__label"
133
+ }, label, hasValue && '：')) : null, hasValue ? ( /*#__PURE__*/React__default["default"].createElement("span", {
125
134
  className: prefixCls + "__value"
126
- }, displayValue)) : ( /*#__PURE__*/React__default["default"].createElement("span", {
135
+ }, displayValue)) : appearance !== 'contained' && ( /*#__PURE__*/React__default["default"].createElement("span", {
127
136
  className: prefixCls + "__placeholder"
128
137
  }, placeholder)), suffix[1] ? /*#__PURE__*/React__default["default"].createElement("span", {
129
138
  className: prefixCls + "__secondary-suffix"
@@ -134,7 +143,7 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
134
143
  tabIndex: -1,
135
144
  className: classname.cx(prefixCls + "__clear", 'active'),
136
145
  onClick: handleClear
137
- }, /*#__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);
138
147
  });
139
148
  if (env.__DEV__) {
140
149
  MockInput.displayName = 'MockInput';
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".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-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, .hi-v4-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.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__prefix, .hi-v4-mock-input__suffix, .hi-v4-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-v4-color-gray-400, #b5bcc7);font-size: var(--hi-v4-text-size-lg, 1rem);text-align: center;}.hi-v4-mock-input__prefix {margin-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-mock-input__suffix {padding-left: var(--hi-v4-spacing-4, 8px);}.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;}";
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 {color: var(--hi-v5-color-gray-500, #91959e);}.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-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, #babcc2);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.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-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, #babcc2);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);}.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-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, .hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-gray-100, #edeff2);}.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, #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, #babcc2);}.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, #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-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);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.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__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-borderless .hi-v5-input__text {padding-left: 0;padding-right: 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-400, #babcc2);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, #babcc2);}.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, #babcc2);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, #babcc2);}.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;}";
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
@@ -56,7 +56,9 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
56
56
  type = _a.type,
57
57
  containerRef = _a.containerRef,
58
58
  waitCompositionEnd = _a.waitCompositionEnd,
59
- 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"]);
59
+ styles = _a.styles,
60
+ classNames = _a.classNames,
61
+ 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"]);
60
62
  // @TODO: 临时方案，后面迁移至 InputGroup
61
63
  var _useMemo = useMemo(function () {
62
64
  var shouldUnset = [false, false];
@@ -122,9 +124,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
122
124
  ref: containerRef
123
125
  }, /*#__PURE__*/React.createElement("div", {
124
126
  className: outerCls
125
- }, prepend ? /*#__PURE__*/React.createElement("div", {
126
- className: prefixCls + "__prepend"
127
- }, prepend) : null, /*#__PURE__*/React.createElement("div", {
127
+ }, prepend ? ( /*#__PURE__*/React.createElement("div", {
128
+ className: cx(prefixCls + "__prepend", classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
129
+ style: styles === null || styles === void 0 ? void 0 : styles.prepend
130
+ }, prepend)) : null, /*#__PURE__*/React.createElement("div", {
128
131
  className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid"),
129
132
  onMouseOver: function onMouseOver(e) {
130
133
  setHover(true);
@@ -132,13 +135,16 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
132
135
  onMouseLeave: function onMouseLeave(e) {
133
136
  setHover(false);
134
137
  }
135
- }, prefix ? /*#__PURE__*/React.createElement("span", {
136
- className: prefixCls + "__prefix"
137
- }, prefix) : null, /*#__PURE__*/React.createElement("input", Object.assign({
138
+ }, prefix ? ( /*#__PURE__*/React.createElement("span", {
139
+ className: cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
140
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
141
+ }, prefix)) : null, /*#__PURE__*/React.createElement("input", Object.assign({
138
142
  ref: mergedRef,
139
- className: prefixCls + "__text"
143
+ className: cx(prefixCls + "__text", classNames === null || classNames === void 0 ? void 0 : classNames.input),
144
+ style: styles === null || styles === void 0 ? void 0 : styles.input
140
145
  }, getInputProps(), rest)), suffix || showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
141
- className: prefixCls + "__suffix"
146
+ className: cx(prefixCls + "__suffix", classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
147
+ style: styles === null || styles === void 0 ? void 0 : styles.suffix
142
148
  }, showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
143
149
  ref: clearElementRef,
144
150
  className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
@@ -149,9 +155,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
149
155
  onClear === null || onClear === void 0 ? void 0 : onClear();
150
156
  focus();
151
157
  }
152
- }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), append ? /*#__PURE__*/React.createElement("div", {
153
- className: prefixCls + "__append"
154
- }, append) : null));
158
+ }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), append ? ( /*#__PURE__*/React.createElement("div", {
159
+ className: cx(prefixCls + "__append", classNames === null || classNames === void 0 ? void 0 : classNames.append),
160
+ style: styles === null || styles === void 0 ? void 0 : styles.append
161
+ }, append)) : null));
155
162
  });
156
163
  if (__DEV__) {
157
164
  Input.displayName = 'Input';
package/lib/esm/MockInput.js CHANGED
@@ -14,6 +14,7 @@ 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
  import { isArray } from '@hi-ui/type-assertion';
17
+ import { useLatestCallback } from '@hi-ui/use-latest';
17
18
  var _role = 'mock-input';
18
19
  var _prefix = getPrefixCls(_role);
19
20
  var NOOP_VALUE = '';
@@ -55,7 +56,11 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
55
56
  suffixProp = _a.suffix,
56
57
  _onMouseOver = _a.onMouseOver,
57
58
  _onMouseLeave = _a.onMouseLeave,
58
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave"]);
59
+ onClear = _a.onClear,
60
+ label = _a.label,
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"]);
59
64
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
60
65
  value = _useUncontrolledState[0],
61
66
  tryChangeValue = _useUncontrolledState[1];
@@ -76,11 +81,13 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
76
81
  }
77
82
  return displayItem.title;
78
83
  }, [displayItem, displayRender]);
84
+ var onClearLatest = useLatestCallback(onClear);
79
85
  var handleClear = useCallback(function (evt) {
80
86
  if (disabled) return;
81
87
  evt.stopPropagation();
82
88
  tryChangeValue(NOOP_VALUE, displayItem);
83
- }, [tryChangeValue, disabled, displayItem]);
89
+ onClearLatest === null || onClearLatest === void 0 ? void 0 : onClearLatest();
90
+ }, [tryChangeValue, disabled, displayItem, onClearLatest]);
84
91
  var _useState = useState(false),
85
92
  hover = _useState[0],
86
93
  setHover = _useState[1];
@@ -94,7 +101,7 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
94
101
  var showClearableIcon = useMemo(function () {
95
102
  return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
96
103
  }, [clearable, hasValue, disabled, clearableTrigger, hover]);
97
- var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
104
+ var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, hasValue && prefixCls + "--has-value", focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
98
105
  return /*#__PURE__*/React.createElement("div", Object.assign({
99
106
  ref: ref,
100
107
  role: role,
@@ -109,9 +116,11 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
109
116
  }
110
117
  }, rest), prefix ? /*#__PURE__*/React.createElement("span", {
111
118
  className: prefixCls + "__prefix"
112
- }, prefix) : null, hasValue ? ( /*#__PURE__*/React.createElement("span", {
119
+ }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React.createElement("span", {
120
+ className: prefixCls + "__label"
121
+ }, label, hasValue && '：')) : null, hasValue ? ( /*#__PURE__*/React.createElement("span", {
113
122
  className: prefixCls + "__value"
114
- }, displayValue)) : ( /*#__PURE__*/React.createElement("span", {
123
+ }, displayValue)) : appearance !== 'contained' && ( /*#__PURE__*/React.createElement("span", {
115
124
  className: prefixCls + "__placeholder"
116
125
  }, placeholder)), suffix[1] ? /*#__PURE__*/React.createElement("span", {
117
126
  className: prefixCls + "__secondary-suffix"
@@ -122,7 +131,7 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
122
131
  tabIndex: -1,
123
132
  className: cx(prefixCls + "__clear", 'active'),
124
133
  onClick: handleClear
125
- }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : suffix[0])) : null);
134
+ }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : showIndicator ? suffix[0] : null)) : null);
126
135
  });
127
136
  if (__DEV__) {
128
137
  MockInput.displayName = 'MockInput';
package/lib/esm/styles/index.scss.js CHANGED
@@ -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-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-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, .hi-v4-mock-input__value {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.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__prefix, .hi-v4-mock-input__suffix, .hi-v4-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-v4-color-gray-400, #b5bcc7);font-size: var(--hi-v4-text-size-lg, 1rem);text-align: center;}.hi-v4-mock-input__prefix {margin-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-mock-input__suffix {padding-left: var(--hi-v4-spacing-4, 8px);}.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;}";
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 {color: var(--hi-v5-color-gray-500, #91959e);}.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-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, #babcc2);}.hi-v5-mock-input--appearance-unset .hi-v5-mock-input__placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.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-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, #babcc2);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);}.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-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, .hi-v5-mock-input--appearance-unset.hi-v5-mock-input:not(.disabled).focused {background-color: var(--hi-v5-color-gray-100, #edeff2);}.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, #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, #babcc2);}.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, #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-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);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-webkit-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-moz-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::-ms-input-placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-input--appearance-unset .hi-v5-input__text::placeholder {color: var(--hi-v5-color-gray-400, #babcc2);}.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__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-borderless .hi-v5-input__text {padding-left: 0;padding-right: 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-400, #babcc2);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, #babcc2);}.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, #babcc2);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, #babcc2);}.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;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/Input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { HiBaseHTMLFieldProps } from '@hi-ui/core';
2
+ import { HiBaseHTMLFieldProps, HiBaseSizeEnum } from '@hi-ui/core';
3
3
  import { InputAppearanceEnum, InputTypeEnum } from './types';
4
4
  /**
5
5
  * 输入框
@@ -74,7 +74,7 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
74
74
  /**
75
75
  * 设置尺寸
76
76
  */
77
- size?: 'sm' | 'md' | 'lg';
77
+ size?: HiBaseSizeEnum;
78
78
  /**
79
79
  * 值改变时的回调
80
80
  */
@@ -93,6 +93,26 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
93
93
  * 是否等待文本段落组成完成
94
94
  */
95
95
  waitCompositionEnd?: boolean;
96
+ /**
97
+ * 语义化样式设置
98
+ */
99
+ styles?: {
100
+ input?: React.CSSProperties;
101
+ prefix?: React.CSSProperties;
102
+ suffix?: React.CSSProperties;
103
+ prepend?: React.CSSProperties;
104
+ append?: React.CSSProperties;
105
+ };
106
+ /**
107
+ * 语义化样式类名设置
108
+ */
109
+ classNames?: {
110
+ input?: string;
111
+ prefix?: string;
112
+ suffix?: string;
113
+ prepend?: string;
114
+ append?: string;
115
+ };
96
116
  }
97
117
  /**
98
118
  * 模拟伪装目标事件 target
package/lib/types/MockInput.d.ts CHANGED
@@ -3,7 +3,7 @@ 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" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
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" | "onSelect" | "title" | "size" | "prefix" | "data" | "label" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "onClear" | "displayRender" | "showIndicator"> & {
7
7
  prefixCls?: string | undefined;
8
8
  role?: string | undefined;
9
9
  } & {
@@ -27,6 +27,10 @@ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.
27
27
  * 清除按钮展示的触发形态
28
28
  */
29
29
  clearableTrigger?: "always" | "hover" | undefined;
30
+ /**
31
+ * 点击关闭按钮时触发
32
+ */
33
+ onClear?: (() => void) | undefined;
30
34
  /**
31
35
  * 是否禁止使用
32
36
  */
@@ -66,11 +70,19 @@ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.
66
70
  /**
67
71
  * 设置展现形式
68
72
  */
69
- appearance?: HiBaseAppearanceEnum | undefined;
73
+ appearance?: HiBaseAppearanceEnum | "contained" | undefined;
74
+ /**
75
+ * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
76
+ */
77
+ label?: React.ReactNode;
70
78
  /**
71
79
  * 设置输入框尺寸
72
80
  */
73
- size?: "sm" | "md" | "lg" | undefined;
81
+ size?: "xs" | "sm" | "md" | "lg" | undefined;
82
+ /**
83
+ * 是否展示箭头
84
+ */
85
+ showIndicator?: boolean | undefined;
74
86
  } & {
75
87
  invalid?: boolean | undefined;
76
88
  } & React.RefAttributes<HTMLDivElement | null>>;
@@ -105,6 +117,10 @@ export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
105
117
  * 清除按钮展示的触发形态
106
118
  */
107
119
  clearableTrigger?: 'always' | 'hover';
120
+ /**
121
+ * 点击关闭按钮时触发
122
+ */
123
+ onClear?: () => void;
108
124
  /**
109
125
  * 是否禁止使用
110
126
  */
@@ -144,9 +160,17 @@ export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
144
160
  /**
145
161
  * 设置展现形式
146
162
  */
147
- appearance?: HiBaseAppearanceEnum;
163
+ appearance?: HiBaseAppearanceEnum | 'contained';
164
+ /**
165
+ * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
166
+ */
167
+ label?: React.ReactNode;
148
168
  /**
149
169
  * 设置输入框尺寸
150
170
  */
151
- size?: 'sm' | 'md' | 'lg';
171
+ size?: 'xs' | 'sm' | 'md' | 'lg';
172
+ /**
173
+ * 是否展示箭头
174
+ */
175
+ showIndicator?: boolean;
152
176
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
3
- "version": "4.3.0",
3
+ "version": "5.0.0-alpha.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -19,6 +19,7 @@
19
19
  "typings": "lib/types/index.d.ts",
20
20
  "exports": {
21
21
  ".": {
22
+ "types": "./lib/types/index.d.ts",
22
23
  "require": "./lib/cjs/index.js",
23
24
  "default": "./lib/esm/index.js"
24
25
  }
@@ -43,24 +44,24 @@
43
44
  "url": "https://github.com/XiaoMi/hiui/issues"
44
45
  },
45
46
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.5",
47
- "@hi-ui/dom-utils": "^4.0.7",
48
- "@hi-ui/env": "^4.0.5",
49
- "@hi-ui/func-utils": "^4.0.4",
50
- "@hi-ui/icons": "^4.0.19",
51
- "@hi-ui/type-assertion": "^4.0.4",
52
- "@hi-ui/use-latest": "^4.0.4",
53
- "@hi-ui/use-merge-refs": "^4.0.4",
54
- "@hi-ui/use-uncontrolled-state": "^4.0.4"
47
+ "@hi-ui/classname": "^5.0.0-alpha.0",
48
+ "@hi-ui/dom-utils": "^5.0.0-alpha.0",
49
+ "@hi-ui/env": "^5.0.0-alpha.0",
50
+ "@hi-ui/func-utils": "^5.0.0-alpha.0",
51
+ "@hi-ui/icons": "^5.0.0-alpha.0",
52
+ "@hi-ui/type-assertion": "^5.0.0-alpha.0",
53
+ "@hi-ui/use-latest": "^5.0.0-alpha.0",
54
+ "@hi-ui/use-merge-refs": "^5.0.0-alpha.0",
55
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-alpha.0"
55
56
  },
56
57
  "peerDependencies": {
57
- "@hi-ui/core": ">=4.0.8",
58
+ "@hi-ui/core": ">=5.0.0-alpha.0",
58
59
  "react": ">=16.8.6",
59
60
  "react-dom": ">=16.8.6"
60
61
  },
61
62
  "devDependencies": {
62
- "@hi-ui/core": "^4.0.8",
63
- "@hi-ui/core-css": "^4.1.5",
63
+ "@hi-ui/core": "^5.0.0-alpha.0",
64
+ "@hi-ui/core-css": "^5.0.0-alpha.0",
64
65
  "react": "^17.0.1",
65
66
  "react-dom": "^17.0.1"
66
67
  }