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