@hi-ui/tag-input 4.0.6 → 4.0.8

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 +24 -0
  2. package/lib/cjs/TagInput.js +55 -92
  3. package/lib/cjs/TagInputMock.js +85 -137
  4. package/lib/cjs/index.js +0 -4
  5. package/lib/cjs/styles/index.scss.js +1 -4
  6. package/lib/cjs/use-tag-input.js +5 -14
  7. package/lib/esm/TagInput.js +33 -46
  8. package/lib/esm/TagInputMock.js +69 -96
  9. package/lib/esm/styles/index.scss.js +1 -3
  10. package/lib/esm/use-tag-input.js +5 -8
  11. package/package.json +13 -13
package/lib/esm/TagInput.js CHANGED
@@ -18,50 +18,43 @@ import { useTagInput } from './use-tag-input.js';
18
18
  import { useOutsideClick } from '@hi-ui/use-outside-click';
19
19
  import { useLatestCallback } from '@hi-ui/use-latest';
20
20
  var _role = 'tag-input';
21
-
22
21
  var _prefix = getPrefixCls(_role);
23
-
24
22
  var NOOP_ARRAY = [];
25
23
  /**
26
24
  * 标签输入框
27
25
  */
28
-
29
26
  var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
30
27
  var _a$prefixCls = _a.prefixCls,
31
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
32
- _a$role = _a.role,
33
- role = _a$role === void 0 ? _role : _a$role,
34
- className = _a.className,
35
- _a$defaultValue = _a.defaultValue,
36
- defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
37
- valueProp = _a.value,
38
- onChange = _a.onChange,
39
- placeholder = _a.placeholder,
40
- _a$data = _a.data,
41
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
42
- _a$wrap = _a.wrap,
43
- wrap = _a$wrap === void 0 ? true : _a$wrap,
44
- _a$clearable = _a.clearable,
45
- clearable = _a$clearable === void 0 ? true : _a$clearable,
46
- _a$disabled = _a.disabled,
47
- disabled = _a$disabled === void 0 ? false : _a$disabled,
48
- suffix = _a.suffix,
49
- displayRender = _a.displayRender,
50
- onClick = _a.onClick,
51
- _onMouseOver = _a.onMouseOver,
52
- _onMouseLeave = _a.onMouseLeave,
53
- onClear = _a.onClear,
54
- rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
55
-
28
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
29
+ _a$role = _a.role,
30
+ role = _a$role === void 0 ? _role : _a$role,
31
+ className = _a.className,
32
+ _a$defaultValue = _a.defaultValue,
33
+ defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
34
+ valueProp = _a.value,
35
+ onChange = _a.onChange,
36
+ placeholder = _a.placeholder,
37
+ _a$data = _a.data,
38
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
39
+ _a$wrap = _a.wrap,
40
+ wrap = _a$wrap === void 0 ? true : _a$wrap,
41
+ _a$clearable = _a.clearable,
42
+ clearable = _a$clearable === void 0 ? true : _a$clearable,
43
+ _a$disabled = _a.disabled,
44
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
45
+ suffix = _a.suffix,
46
+ displayRender = _a.displayRender,
47
+ onClick = _a.onClick,
48
+ _onMouseOver = _a.onMouseOver,
49
+ _onMouseLeave = _a.onMouseLeave,
50
+ onClear = _a.onClear,
51
+ rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
56
52
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
57
- value = _useUncontrolledState[0],
58
- tryChangeValue = _useUncontrolledState[1];
59
-
53
+ value = _useUncontrolledState[0],
54
+ tryChangeValue = _useUncontrolledState[1];
60
55
  var tagInputRef = useRef(null);
61
-
62
56
  var _useTagInput = useTagInput(data, tagInputRef),
63
- tagMaxWidth = _useTagInput[0];
64
-
57
+ tagMaxWidth = _useTagInput[0];
65
58
  var onClearLatest = useLatestCallback(onClear);
66
59
  var tagList = useMemo(function () {
67
60
  return value.map(function (id) {
@@ -79,24 +72,20 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
79
72
  tryChangeValue(NOOP_ARRAY, tagList, false);
80
73
  onClearLatest();
81
74
  }, [tryChangeValue, disabled, onClearLatest, tagList]);
82
-
83
75
  var _useState = useState(false),
84
- hover = _useState[0],
85
- setHover = _useState[1];
86
-
76
+ hover = _useState[0],
77
+ setHover = _useState[1];
87
78
  var trySetHover = useCallback(function (hovered) {
88
79
  if (disabled) return;
89
80
  setHover(hovered);
90
81
  }, [disabled]);
91
- var tagCount = tagList.length; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
92
-
82
+ var tagCount = tagList.length;
83
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
93
84
  var showClearableIcon = clearable && tagCount > 0 && !disabled;
94
85
  var showTagCount = !wrap && tagCount > 0;
95
-
96
86
  var _useState2 = useState(false),
97
- expanded = _useState2[0],
98
- setExpanded = _useState2[1];
99
-
87
+ expanded = _useState2[0],
88
+ setExpanded = _useState2[1];
100
89
  useOutsideClick(tagInputRef, function () {
101
90
  return setExpanded(false);
102
91
  });
@@ -195,9 +184,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
195
184
  onClick: handleClear
196
185
  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null) : null);
197
186
  });
198
-
199
187
  if (__DEV__) {
200
188
  TagInput.displayName = 'TagInput';
201
189
  }
202
-
203
190
  export { TagInput };
package/lib/esm/TagInputMock.js CHANGED
@@ -17,57 +17,53 @@ import { useLatestCallback } from '@hi-ui/use-latest';
17
17
  import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
18
18
  import ResizeDetector from 'react-resize-detector';
19
19
  var _role = 'tag-input-mock';
20
-
21
20
  var _prefix = getPrefixCls(_role);
22
-
23
21
  var NOOP_ARRAY = [];
24
22
  var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
25
23
  var _a$prefixCls = _a.prefixCls,
26
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
27
- _a$role = _a.role,
28
- role = _a$role === void 0 ? _role : _a$role,
29
- className = _a.className,
30
- _a$defaultValue = _a.defaultValue,
31
- defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
32
- valueProp = _a.value,
33
- onChange = _a.onChange,
34
- placeholder = _a.placeholder,
35
- _a$data = _a.data,
36
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
37
- _a$disabled = _a.disabled,
38
- disabled = _a$disabled === void 0 ? false : _a$disabled,
39
- _a$clearable = _a.clearable,
40
- clearable = _a$clearable === void 0 ? true : _a$clearable,
41
- _a$focused = _a.focused,
42
- focused = _a$focused === void 0 ? false : _a$focused,
43
- _a$invalid = _a.invalid,
44
- invalid = _a$invalid === void 0 ? false : _a$invalid,
45
- _a$readOnly = _a.readOnly,
46
- readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
47
- _a$size = _a.size,
48
- size = _a$size === void 0 ? 'md' : _a$size,
49
- _a$appearance = _a.appearance,
50
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
51
- _a$wrap = _a.wrap,
52
- wrap = _a$wrap === void 0 ? false : _a$wrap,
53
- _a$expandable = _a.expandable,
54
- expandable = _a$expandable === void 0 ? false : _a$expandable,
55
- _a$activeExpandable = _a.activeExpandable,
56
- activeExpandable = _a$activeExpandable === void 0 ? false : _a$activeExpandable,
57
- suffix = _a.suffix,
58
- _a$tagWidth = _a.tagWidth,
59
- tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
60
- displayRender = _a.displayRender,
61
- _onMouseOver = _a.onMouseOver,
62
- _onMouseLeave = _a.onMouseLeave,
63
- onClear = _a.onClear,
64
- onExpand = _a.onExpand,
65
- rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "activeExpandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
66
-
24
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
25
+ _a$role = _a.role,
26
+ role = _a$role === void 0 ? _role : _a$role,
27
+ className = _a.className,
28
+ _a$defaultValue = _a.defaultValue,
29
+ defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
30
+ valueProp = _a.value,
31
+ onChange = _a.onChange,
32
+ placeholder = _a.placeholder,
33
+ _a$data = _a.data,
34
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
35
+ _a$disabled = _a.disabled,
36
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
37
+ _a$clearable = _a.clearable,
38
+ clearable = _a$clearable === void 0 ? true : _a$clearable,
39
+ _a$focused = _a.focused,
40
+ focused = _a$focused === void 0 ? false : _a$focused,
41
+ _a$invalid = _a.invalid,
42
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
43
+ _a$readOnly = _a.readOnly,
44
+ readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
45
+ _a$size = _a.size,
46
+ size = _a$size === void 0 ? 'md' : _a$size,
47
+ _a$appearance = _a.appearance,
48
+ appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
49
+ _a$wrap = _a.wrap,
50
+ wrap = _a$wrap === void 0 ? false : _a$wrap,
51
+ _a$expandable = _a.expandable,
52
+ expandable = _a$expandable === void 0 ? false : _a$expandable,
53
+ _a$activeExpandable = _a.activeExpandable,
54
+ activeExpandable = _a$activeExpandable === void 0 ? false : _a$activeExpandable,
55
+ suffix = _a.suffix,
56
+ _a$tagWidth = _a.tagWidth,
57
+ tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
58
+ displayRender = _a.displayRender,
59
+ _onMouseOver = _a.onMouseOver,
60
+ _onMouseLeave = _a.onMouseLeave,
61
+ onClear = _a.onClear,
62
+ onExpand = _a.onExpand,
63
+ rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "activeExpandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
67
64
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
68
- value = _useUncontrolledState[0],
69
- tryChangeValue = _useUncontrolledState[1];
70
-
65
+ value = _useUncontrolledState[0],
66
+ tryChangeValue = _useUncontrolledState[1];
71
67
  var tagList = useMemo(function () {
72
68
  return value.map(function (id) {
73
69
  return data.find(function (item) {
@@ -79,57 +75,44 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
79
75
  });
80
76
  }, [value, data]);
81
77
  var tagCount = tagList.length;
82
-
83
78
  var _useState = useState(),
84
- _useState$ = _useState[0],
85
- containerWidth = _useState$ === void 0 ? 0 : _useState$,
86
- setContainerWidth = _useState[1];
87
-
79
+ _useState$ = _useState[0],
80
+ containerWidth = _useState$ === void 0 ? 0 : _useState$,
81
+ setContainerWidth = _useState[1];
88
82
  var mergedTagList = useMemo(function () {
89
83
  if (wrap) {
90
84
  return tagList;
91
85
  }
92
-
93
86
  return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
94
87
  }, [tagList, tagWidth, containerWidth, wrap]);
95
88
  var showTags = mergedTagList.length > 0;
96
89
  var showTagCount = !wrap && showTags;
97
-
98
90
  var _useState2 = useState({}),
99
- tagsWidth = _useState2[0],
100
- setTagsWidth = _useState2[1];
101
-
91
+ tagsWidth = _useState2[0],
92
+ setTagsWidth = _useState2[1];
102
93
  var getTagWidth = useCallback(function (index) {
103
94
  return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
104
95
  }, [tagsWidth, mergedTagList]);
105
-
106
96
  var _useState3 = useState(0),
107
- suffixWidth = _useState3[0],
108
- setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略，预防无展示
97
+ suffixWidth = _useState3[0],
98
+ setSuffixWidth = _useState3[1];
99
+ // TODO: 设置第一个 tagWidth 超出省略，预防无展示
109
100
  // const [tagMaxWidth, setTagMaxWidth] = useState(0)
110
-
111
-
112
101
  var _useState4 = useState(0),
113
- tagMaxCount = _useState4[0],
114
- setTagMaxCount = _useState4[1];
115
-
102
+ tagMaxCount = _useState4[0],
103
+ setTagMaxCount = _useState4[1];
116
104
  useLayoutEffect(function () {
117
105
  var tagMaxCount = 0;
118
-
119
106
  if (isArrayNonEmpty(mergedTagList)) {
120
107
  var len = mergedTagList.length;
121
108
  var lastIndex = len - 1;
122
109
  var totalWidth = suffixWidth;
123
-
124
110
  for (var i = 0; i < len; ++i) {
125
111
  var currentTagWidth = getTagWidth(i);
126
-
127
112
  if (currentTagWidth === undefined) {
128
113
  break;
129
114
  }
130
-
131
115
  totalWidth += currentTagWidth;
132
-
133
116
  if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
134
117
  tagMaxCount = lastIndex;
135
118
  break;
@@ -140,17 +123,15 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
140
123
  }
141
124
  } else {
142
125
  tagMaxCount = 0;
143
- } // 保底要展示 1 个
144
-
145
-
126
+ }
127
+ // 保底要展示 1 个
146
128
  setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
147
- }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]); // mergedTagList 更新后同步更新 tagsWidth
148
-
129
+ }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
130
+ // mergedTagList 更新后同步更新 tagsWidth
149
131
  useEffect(function () {
150
132
  var updatedTagsWidth = {};
151
133
  mergedTagList.forEach(function (item) {
152
134
  var _a;
153
-
154
135
  var id = item.id;
155
136
  updatedTagsWidth[id] = (_a = tagsWidth[id]) !== null && _a !== void 0 ? _a : 0;
156
137
  });
@@ -163,16 +144,14 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
163
144
  tryChangeValue(NOOP_ARRAY, tagList, false);
164
145
  onClearLatest();
165
146
  }, [tryChangeValue, disabled, onClearLatest, tagList]);
166
-
167
147
  var _useState5 = useState(false),
168
- hover = _useState5[0],
169
- setHover = _useState5[1];
170
-
148
+ hover = _useState5[0],
149
+ setHover = _useState5[1];
171
150
  var trySetHover = useCallback(function (hovered) {
172
151
  if (disabled) return;
173
152
  setHover(hovered);
174
- }, [disabled]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
175
-
153
+ }, [disabled]);
154
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
176
155
  var showClearableIcon = clearable && showTags && !disabled;
177
156
  var maxTagWidth = containerWidth - suffixWidth;
178
157
  var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap", expandable && prefixCls + "--expandable");
@@ -211,7 +190,6 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
211
190
  onTagResize: function onTagResize(id, w) {
212
191
  return setTagsWidth(function (prev) {
213
192
  var _Object$assign;
214
-
215
193
  return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
216
194
  });
217
195
  }
@@ -237,11 +215,9 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
237
215
  onClick: handleClear
238
216
  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null)));
239
217
  });
240
-
241
218
  if (__DEV__) {
242
219
  TagInputMock.displayName = 'TagInputMock';
243
220
  }
244
-
245
221
  var hiddenStyle = {
246
222
  position: 'absolute',
247
223
  opacity: 0,
@@ -250,18 +226,17 @@ var hiddenStyle = {
250
226
  overflow: 'hidden',
251
227
  display: 'none'
252
228
  };
253
-
254
229
  function MockTag(_ref) {
255
230
  var prefixCls = _ref.prefixCls,
256
- option = _ref.option,
257
- disabled = _ref.disabled,
258
- value = _ref.value,
259
- onTagResize = _ref.onTagResize,
260
- tryChangeValue = _ref.tryChangeValue,
261
- displayRender = _ref.displayRender,
262
- maxWidth = _ref.maxWidth,
263
- _ref$hidden = _ref.hidden,
264
- hidden = _ref$hidden === void 0 ? false : _ref$hidden;
231
+ option = _ref.option,
232
+ disabled = _ref.disabled,
233
+ value = _ref.value,
234
+ onTagResize = _ref.onTagResize,
235
+ tryChangeValue = _ref.tryChangeValue,
236
+ displayRender = _ref.displayRender,
237
+ maxWidth = _ref.maxWidth,
238
+ _ref$hidden = _ref.hidden,
239
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden;
265
240
  var title = isFunction(displayRender) ? displayRender(option) : true;
266
241
  var closeable = !option.disabled;
267
242
  return /*#__PURE__*/React.createElement(ResizeDetector, {
@@ -269,7 +244,6 @@ function MockTag(_ref) {
269
244
  onResize: function onResize(width) {
270
245
  // 隐藏后就不允许设置 tagSize，避免无限循环触发“宽度计算响应式策略”
271
246
  if (hidden) return;
272
-
273
247
  if (width !== undefined) {
274
248
  onTagResize(option.id, width);
275
249
  }
@@ -299,5 +273,4 @@ function MockTag(_ref) {
299
273
  }
300
274
  }, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null)));
301
275
  }
302
-
303
276
  export { TagInputMock };
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,8 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'style-inject';
11
- var css_248z = ".hi-v4-tag-input {position: relative;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1; }.hi-v4-tag-input__container {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition: all 0.3s;transition: all 0.3s;padding: 4px 10px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;min-height: 32px;overflow: hidden;border-color: var(--hi-v4-color-gray-300, #dfe2e8);border-radius: 4px; }.hi-v4-tag-input__container:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input__container:not(.disabled).focused {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input__container.disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {background-color: var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-tag-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tag-input__suffix {font-size: 16px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;min-width: 32px; }.hi-v4-tag-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: 14px;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tag-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-tag-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 22px;line-height: 22px; }.hi-v4-tag-input__tags {-webkit-box-flex: 0;-ms-flex: 0 1 auto;flex: 0 1 auto;display: inline-block;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;white-space: nowrap;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top: -4px;position: relative; }.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {display: inline-block;margin-right: 4px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;color: #333;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: 4px; }.hi-v4-tag-input__tag--total {display: inline-block;margin-right: 6px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 4px;line-height: 22px;cursor: inherit; }.hi-v4-tag-input__tag {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; }.hi-v4-tag-input__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-tag-input__tag-closed {margin-left: var(--hi-v4-spacing-4, 8px);font-size: 12px;-webkit-box-sizing: border-box;box-sizing: border-box;color: #8e8e8e;cursor: pointer; }.disabled .hi-v4-tag-input__tag-closed {cursor: not-allowed; }.hi-v4-tag-input__tag--left {margin: 0;max-width: 54px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle; }.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {width: calc(100% - 64px);overflow-x: hidden; }.hi-v4-tag-input--wrap .hi-v4-tag-input__value {height: auto; }.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px; }.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {margin-top: 4px; }.hi-v4-tag-input--expanded {position: relative; }.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {position: absolute;top: 0;left: 0;height: auto;z-index: 1;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: use-color-statc(\"white\");-webkit-transition: all 0.3s;transition: all 0.3s;padding: 3px 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;min-height: 32px;overflow: hidden;border-radius: 4px;border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;max-height: 74px;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;overflow: scroll;padding-left: 10px; }.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px; }.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {margin-top: 4px; }.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 4px 10px 4px 0;position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-tag-input-mock {-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-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled {cursor: not-allowed; }.hi-v4-tag-input-mock--wrap {height: auto; }.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__value {height: auto; }.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__tags {white-space: normal; }.hi-v4-tag-input-mock__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-static-black, #000);font-size: var(--hi-v4-text-size-lg, 1rem);padding: 0;text-align: center; }.hi-v4-tag-input-mock__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);text-align: center;-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-tag-input-mock__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-tag-input-mock__tags {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;white-space: nowrap;overflow: hidden;height: 100%; }.hi-v4-tag-input-mock__tag--total {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: inherit;margin-left: var(--hi-v4-spacing-4, 8px);margin-right: var(--hi-v4-spacing-3, 6px);padding: 0 var(--hi-v4-spacing-4, 8px);font-size: var(--hi-v4-text-size-sm, 0.75rem);border-radius: var(--hi-v4-border-radius-md, 4px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-transition-property: background-color, color;transition-property: background-color, color;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total.hi-v4-tag-input-mock__tag--active {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px); }.hi-v4-tag-input-mock__tag {max-width: 100%;margin-right: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v4-spacing-4, 8px);vertical-align: middle;font-size: var(--hi-v4-text-size-sm, 0.75rem);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: var(--hi-v4-border-radius-md, 4px);position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 0;-ms-flex: none;flex: none;line-height: inherit; }.hi-v4-tag-input-mock__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-tag-input-mock__tag-closed {margin-left: var(--hi-v4-spacing-2, 4px);font-size: var(--hi-v4-text-size-sm, 0.75rem);-webkit-box-sizing: border-box;box-sizing: border-box;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {cursor: not-allowed;color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--size-sm {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-tag-input-mock--size-sm:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-6, 24px); }.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {margin-top: 1px;margin-bottom: 1px; }.hi-v4-tag-input-mock--size-md {font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-tag-input-mock--size-md:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-8, 32px); }.hi-v4-tag-input-mock--size-lg {font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-tag-input-mock--size-lg:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-10, 40px); }.hi-v4-tag-input-mock--appearance-line {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-tag-input-mock--appearance-unset {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-tag-input-mock--appearance-filled {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #c9ced6); }";
12
-
11
+ var css_248z = ".hi-v4-tag-input {position: relative;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-tag-input__container {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition: all 0.3s;transition: all 0.3s;padding: 4px 10px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;min-height: 32px;overflow: hidden;border-color: var(--hi-v4-color-gray-300, #dfe2e8);border-radius: 4px;}.hi-v4-tag-input__container:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input__container:not(.disabled).focused {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input__container.disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {background-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-tag-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tag-input__suffix {font-size: 16px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;min-width: 32px;}.hi-v4-tag-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: 14px;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tag-input__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-tag-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 22px;line-height: 22px;}.hi-v4-tag-input__tags {-webkit-box-flex: 0;-ms-flex: 0 1 auto;flex: 0 1 auto;display: inline-block;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;white-space: nowrap;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top: -4px;position: relative;}.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {display: inline-block;margin-right: 4px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;color: #333;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: 4px;}.hi-v4-tag-input__tag--total {display: inline-block;margin-right: 6px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 4px;line-height: 22px;cursor: inherit;}.hi-v4-tag-input__tag {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tag-input__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tag-input__tag-closed {margin-left: var(--hi-v4-spacing-4, 8px);font-size: 12px;-webkit-box-sizing: border-box;box-sizing: border-box;color: rgb(142, 142, 142);cursor: pointer;}.disabled .hi-v4-tag-input__tag-closed {cursor: not-allowed;}.hi-v4-tag-input__tag--left {margin: 0;max-width: 54px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;}.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {width: calc(100% - 64px);overflow-x: hidden;}.hi-v4-tag-input--wrap .hi-v4-tag-input__value {height: auto;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded {position: relative;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {position: absolute;top: 0;left: 0;height: auto;z-index: 1;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: use-color-statc(\"white\");-webkit-transition: all 0.3s;transition: all 0.3s;padding: 3px 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;min-height: 32px;overflow: hidden;border-radius: 4px;border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;max-height: 74px;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;overflow: scroll;padding-left: 10px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 4px 10px 4px 0;position: sticky;top: 0;}.hi-v4-tag-input-mock {-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-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled {cursor: not-allowed;}.hi-v4-tag-input-mock--wrap {height: auto;}.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__value {height: auto;}.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__tags {white-space: normal;}.hi-v4-tag-input-mock__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-static-black, #000);font-size: var(--hi-v4-text-size-lg, 1rem);padding: 0;text-align: center;}.hi-v4-tag-input-mock__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);text-align: center;-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-tag-input-mock__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-tag-input-mock__tags {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;white-space: nowrap;overflow: hidden;height: 100%;}.hi-v4-tag-input-mock__tag--total {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: inherit;margin-left: var(--hi-v4-spacing-4, 8px);margin-right: var(--hi-v4-spacing-3, 6px);padding: 0 var(--hi-v4-spacing-4, 8px);font-size: var(--hi-v4-text-size-sm, 0.75rem);border-radius: var(--hi-v4-border-radius-md, 4px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-transition-property: background-color, color;transition-property: background-color, color;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total.hi-v4-tag-input-mock__tag--active {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-tag-input-mock__tag {max-width: 100%;margin-right: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v4-spacing-4, 8px);vertical-align: middle;font-size: var(--hi-v4-text-size-sm, 0.75rem);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: var(--hi-v4-border-radius-md, 4px);position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 0;-ms-flex: none;flex: none;line-height: inherit;}.hi-v4-tag-input-mock__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tag-input-mock__tag-closed {margin-left: var(--hi-v4-spacing-2, 4px);font-size: var(--hi-v4-text-size-sm, 0.75rem);-webkit-box-sizing: border-box;box-sizing: border-box;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {cursor: not-allowed;color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--size-sm {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-sm:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-6, 24px);}.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {margin-top: 1px;margin-bottom: 1px;}.hi-v4-tag-input-mock--size-md {font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-md:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-8, 32px);}.hi-v4-tag-input-mock--size-lg {font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-lg:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-10, 40px);}.hi-v4-tag-input-mock--appearance-line {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-unset {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-filled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}";
13
12
  __styleInject__(css_248z);
14
-
15
13
  export { css_248z as default };
package/lib/esm/use-tag-input.js CHANGED
@@ -9,24 +9,22 @@
9
9
  */
10
10
  import { useState, useCallback, useLayoutEffect } from 'react';
11
11
  import { debounce } from '@hi-ui/func-utils';
12
- var TAG_MARGIN_RIGHT = 4; // 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
13
12
 
13
+ // 表示 tag 的 marginRight
14
+ var TAG_MARGIN_RIGHT = 4;
15
+ // 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
14
16
  var LEFT_SPACE_WIDTH = 100 + TAG_MARGIN_RIGHT;
15
-
16
17
  var useTagInput = function useTagInput(tags, ref) {
17
18
  var inputWidth = useResizeWidth(ref);
18
19
  var tagMaxWidth = inputWidth ? inputWidth - (LEFT_SPACE_WIDTH + 1) : undefined;
19
20
  return [tagMaxWidth];
20
21
  };
21
-
22
22
  var useResizeWidth = function useResizeWidth(ref) {
23
23
  var _useState = useState(0),
24
- width = _useState[0],
25
- setWidth = _useState[1];
26
-
24
+ width = _useState[0],
25
+ setWidth = _useState[1];
27
26
  var tryUpdateWidth = useCallback(function () {
28
27
  var _a;
29
-
30
28
  var nextWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
31
29
  setWidth(function (prev) {
32
30
  return nextWidth || prev || 0;
@@ -44,5 +42,4 @@ var useResizeWidth = function useResizeWidth(ref) {
44
42
  }, [tryUpdateWidth]);
45
43
  return width;
46
44
  };
47
-
48
45
  export { useResizeWidth, useTagInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tag-input",
3
- "version": "4.0.6",
3
+ "version": "4.0.8",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,25 +43,25 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.1",
47
- "@hi-ui/env": "^4.0.1",
48
- "@hi-ui/func-utils": "^4.0.1",
49
- "@hi-ui/icons": "^4.0.4",
50
- "@hi-ui/type-assertion": "^4.0.1",
51
- "@hi-ui/use-latest": "^4.0.1",
52
- "@hi-ui/use-merge-refs": "^4.0.1",
53
- "@hi-ui/use-outside-click": "^4.0.1",
54
- "@hi-ui/use-uncontrolled-state": "^4.0.1",
46
+ "@hi-ui/classname": "^4.0.2",
47
+ "@hi-ui/env": "^4.0.2",
48
+ "@hi-ui/func-utils": "^4.0.2",
49
+ "@hi-ui/icons": "^4.0.16",
50
+ "@hi-ui/type-assertion": "^4.0.2",
51
+ "@hi-ui/use-latest": "^4.0.2",
52
+ "@hi-ui/use-merge-refs": "^4.0.2",
53
+ "@hi-ui/use-outside-click": "^4.0.2",
54
+ "@hi-ui/use-uncontrolled-state": "^4.0.2",
55
55
  "react-resize-detector": "^6.7.6"
56
56
  },
57
57
  "peerDependencies": {
58
- "@hi-ui/core": ">=4.0.0",
58
+ "@hi-ui/core": ">=4.0.6",
59
59
  "react": ">=16.8.6",
60
60
  "react-dom": ">=16.8.6"
61
61
  },
62
62
  "devDependencies": {
63
- "@hi-ui/core": "^4.0.4",
64
- "@hi-ui/core-css": "^4.0.1",
63
+ "@hi-ui/core": "^4.0.6",
64
+ "@hi-ui/core-css": "^4.1.3",
65
65
  "react": "^17.0.1",
66
66
  "react-dom": "^17.0.1"
67
67
  }