@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/cjs/TagInputMock.js CHANGED
@@ -9,92 +9,63 @@
9
9
  */
10
10
  'use strict';
11
11
 
12
- var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
- Object.defineProperty(exports, '__esModule', {
15
- value: true
16
- });
17
-
18
12
  var tslib = require('tslib');
19
-
20
13
  var React = require('react');
21
-
22
14
  var classname = require('@hi-ui/classname');
23
-
24
15
  var env = require('@hi-ui/env');
25
-
26
16
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
27
-
28
17
  var icons = require('@hi-ui/icons');
29
-
30
18
  var useLatest = require('@hi-ui/use-latest');
31
-
32
19
  var typeAssertion = require('@hi-ui/type-assertion');
33
-
34
20
  var ResizeDetector = require('react-resize-detector');
35
-
36
- function _interopDefaultLegacy(e) {
37
- return e && _typeof(e) === 'object' && 'default' in e ? e : {
38
- 'default': e
39
- };
40
- }
41
-
42
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
43
-
44
- var ResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ResizeDetector);
45
-
46
21
  var _role = 'tag-input-mock';
47
-
48
22
  var _prefix = classname.getPrefixCls(_role);
49
-
50
23
  var NOOP_ARRAY = [];
51
24
  var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
52
25
  var _a$prefixCls = _a.prefixCls,
53
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
54
- _a$role = _a.role,
55
- role = _a$role === void 0 ? _role : _a$role,
56
- className = _a.className,
57
- _a$defaultValue = _a.defaultValue,
58
- defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
59
- valueProp = _a.value,
60
- onChange = _a.onChange,
61
- placeholder = _a.placeholder,
62
- _a$data = _a.data,
63
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
64
- _a$disabled = _a.disabled,
65
- disabled = _a$disabled === void 0 ? false : _a$disabled,
66
- _a$clearable = _a.clearable,
67
- clearable = _a$clearable === void 0 ? true : _a$clearable,
68
- _a$focused = _a.focused,
69
- focused = _a$focused === void 0 ? false : _a$focused,
70
- _a$invalid = _a.invalid,
71
- invalid = _a$invalid === void 0 ? false : _a$invalid,
72
- _a$readOnly = _a.readOnly,
73
- readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
74
- _a$size = _a.size,
75
- size = _a$size === void 0 ? 'md' : _a$size,
76
- _a$appearance = _a.appearance,
77
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
78
- _a$wrap = _a.wrap,
79
- wrap = _a$wrap === void 0 ? false : _a$wrap,
80
- _a$expandable = _a.expandable,
81
- expandable = _a$expandable === void 0 ? false : _a$expandable,
82
- _a$activeExpandable = _a.activeExpandable,
83
- activeExpandable = _a$activeExpandable === void 0 ? false : _a$activeExpandable,
84
- suffix = _a.suffix,
85
- _a$tagWidth = _a.tagWidth,
86
- tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
87
- displayRender = _a.displayRender,
88
- _onMouseOver = _a.onMouseOver,
89
- _onMouseLeave = _a.onMouseLeave,
90
- onClear = _a.onClear,
91
- onExpand = _a.onExpand,
92
- rest = tslib.__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"]);
93
-
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 = tslib.__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"]);
94
66
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
95
- value = _useUncontrolledState[0],
96
- tryChangeValue = _useUncontrolledState[1];
97
-
67
+ value = _useUncontrolledState[0],
68
+ tryChangeValue = _useUncontrolledState[1];
98
69
  var tagList = React.useMemo(function () {
99
70
  return value.map(function (id) {
100
71
  return data.find(function (item) {
@@ -106,57 +77,44 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
106
77
  });
107
78
  }, [value, data]);
108
79
  var tagCount = tagList.length;
109
-
110
80
  var _useState = React.useState(),
111
- _useState$ = _useState[0],
112
- containerWidth = _useState$ === void 0 ? 0 : _useState$,
113
- setContainerWidth = _useState[1];
114
-
81
+ _useState$ = _useState[0],
82
+ containerWidth = _useState$ === void 0 ? 0 : _useState$,
83
+ setContainerWidth = _useState[1];
115
84
  var mergedTagList = React.useMemo(function () {
116
85
  if (wrap) {
117
86
  return tagList;
118
87
  }
119
-
120
88
  return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
121
89
  }, [tagList, tagWidth, containerWidth, wrap]);
122
90
  var showTags = mergedTagList.length > 0;
123
91
  var showTagCount = !wrap && showTags;
124
-
125
92
  var _useState2 = React.useState({}),
126
- tagsWidth = _useState2[0],
127
- setTagsWidth = _useState2[1];
128
-
93
+ tagsWidth = _useState2[0],
94
+ setTagsWidth = _useState2[1];
129
95
  var getTagWidth = React.useCallback(function (index) {
130
96
  return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
131
97
  }, [tagsWidth, mergedTagList]);
132
-
133
98
  var _useState3 = React.useState(0),
134
- suffixWidth = _useState3[0],
135
- setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略，预防无展示
99
+ suffixWidth = _useState3[0],
100
+ setSuffixWidth = _useState3[1];
101
+ // TODO: 设置第一个 tagWidth 超出省略，预防无展示
136
102
  // const [tagMaxWidth, setTagMaxWidth] = useState(0)
137
-
138
-
139
103
  var _useState4 = React.useState(0),
140
- tagMaxCount = _useState4[0],
141
- setTagMaxCount = _useState4[1];
142
-
104
+ tagMaxCount = _useState4[0],
105
+ setTagMaxCount = _useState4[1];
143
106
  React.useLayoutEffect(function () {
144
107
  var tagMaxCount = 0;
145
-
146
108
  if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
147
109
  var len = mergedTagList.length;
148
110
  var lastIndex = len - 1;
149
111
  var totalWidth = suffixWidth;
150
-
151
112
  for (var i = 0; i < len; ++i) {
152
113
  var currentTagWidth = getTagWidth(i);
153
-
154
114
  if (currentTagWidth === undefined) {
155
115
  break;
156
116
  }
157
-
158
117
  totalWidth += currentTagWidth;
159
-
160
118
  if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
161
119
  tagMaxCount = lastIndex;
162
120
  break;
@@ -167,17 +125,15 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
167
125
  }
168
126
  } else {
169
127
  tagMaxCount = 0;
170
- } // 保底要展示 1 个
171
-
172
-
128
+ }
129
+ // 保底要展示 1 个
173
130
  setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
174
- }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]); // mergedTagList 更新后同步更新 tagsWidth
175
-
131
+ }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
132
+ // mergedTagList 更新后同步更新 tagsWidth
176
133
  React.useEffect(function () {
177
134
  var updatedTagsWidth = {};
178
135
  mergedTagList.forEach(function (item) {
179
136
  var _a;
180
-
181
137
  var id = item.id;
182
138
  updatedTagsWidth[id] = (_a = tagsWidth[id]) !== null && _a !== void 0 ? _a : 0;
183
139
  });
@@ -190,27 +146,25 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
190
146
  tryChangeValue(NOOP_ARRAY, tagList, false);
191
147
  onClearLatest();
192
148
  }, [tryChangeValue, disabled, onClearLatest, tagList]);
193
-
194
149
  var _useState5 = React.useState(false),
195
- hover = _useState5[0],
196
- setHover = _useState5[1];
197
-
150
+ hover = _useState5[0],
151
+ setHover = _useState5[1];
198
152
  var trySetHover = React.useCallback(function (hovered) {
199
153
  if (disabled) return;
200
154
  setHover(hovered);
201
- }, [disabled]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
202
-
155
+ }, [disabled]);
156
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
203
157
  var showClearableIcon = clearable && showTags && !disabled;
204
158
  var maxTagWidth = containerWidth - suffixWidth;
205
159
  var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap", expandable && prefixCls + "--expandable");
206
- return /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
160
+ return /*#__PURE__*/React.createElement(ResizeDetector, {
207
161
  skipOnMount: false,
208
162
  onResize: function onResize(w) {
209
163
  if (w) {
210
164
  setContainerWidth(w);
211
165
  }
212
166
  }
213
- }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
167
+ }, /*#__PURE__*/React.createElement("div", Object.assign({
214
168
  ref: ref,
215
169
  role: role,
216
170
  className: cls,
@@ -222,10 +176,10 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
222
176
  trySetHover(false);
223
177
  _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
224
178
  }
225
- }, rest), showTags ? /*#__PURE__*/React__default["default"].createElement("span", {
179
+ }, rest), showTags ? /*#__PURE__*/React.createElement("span", {
226
180
  className: prefixCls + "__tags"
227
181
  }, mergedTagList.map(function (option, index) {
228
- return /*#__PURE__*/React__default["default"].createElement(MockTag, {
182
+ return /*#__PURE__*/React.createElement(MockTag, {
229
183
  hidden: wrap ? false : index > tagMaxCount,
230
184
  maxWidth: maxTagWidth,
231
185
  key: option.id,
@@ -238,37 +192,34 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
238
192
  onTagResize: function onTagResize(id, w) {
239
193
  return setTagsWidth(function (prev) {
240
194
  var _Object$assign;
241
-
242
195
  return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
243
196
  });
244
197
  }
245
198
  });
246
- })) : /*#__PURE__*/React__default["default"].createElement("span", {
199
+ })) : /*#__PURE__*/React.createElement("span", {
247
200
  className: prefixCls + "__placeholder"
248
- }, placeholder), /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
201
+ }, placeholder), /*#__PURE__*/React.createElement(ResizeDetector, {
249
202
  skipOnMount: false,
250
203
  onResize: function onResize(w) {
251
204
  if (w) {
252
205
  setSuffixWidth(w);
253
206
  }
254
207
  }
255
- }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
208
+ }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
256
209
  className: prefixCls + "__suffix"
257
- }, showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
210
+ }, showTagCount ? /*#__PURE__*/React.createElement("span", {
258
211
  className: classname.cx(prefixCls + "__tag--total", activeExpandable && prefixCls + "__tag--active"),
259
212
  onClick: onExpand
260
- }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React__default["default"].createElement("span", {
213
+ }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
261
214
  className: prefixCls + "__clear",
262
215
  role: "button",
263
216
  tabIndex: -1,
264
217
  onClick: handleClear
265
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
218
+ }, /*#__PURE__*/React.createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
266
219
  });
267
-
268
220
  if (env.__DEV__) {
269
221
  TagInputMock.displayName = 'TagInputMock';
270
222
  }
271
-
272
223
  var hiddenStyle = {
273
224
  position: 'absolute',
274
225
  opacity: 0,
@@ -277,44 +228,42 @@ var hiddenStyle = {
277
228
  overflow: 'hidden',
278
229
  display: 'none'
279
230
  };
280
-
281
231
  function MockTag(_ref) {
282
232
  var prefixCls = _ref.prefixCls,
283
- option = _ref.option,
284
- disabled = _ref.disabled,
285
- value = _ref.value,
286
- onTagResize = _ref.onTagResize,
287
- tryChangeValue = _ref.tryChangeValue,
288
- displayRender = _ref.displayRender,
289
- maxWidth = _ref.maxWidth,
290
- _ref$hidden = _ref.hidden,
291
- hidden = _ref$hidden === void 0 ? false : _ref$hidden;
233
+ option = _ref.option,
234
+ disabled = _ref.disabled,
235
+ value = _ref.value,
236
+ onTagResize = _ref.onTagResize,
237
+ tryChangeValue = _ref.tryChangeValue,
238
+ displayRender = _ref.displayRender,
239
+ maxWidth = _ref.maxWidth,
240
+ _ref$hidden = _ref.hidden,
241
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden;
292
242
  var title = typeAssertion.isFunction(displayRender) ? displayRender(option) : true;
293
243
  var closeable = !option.disabled;
294
- return /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
244
+ return /*#__PURE__*/React.createElement(ResizeDetector, {
295
245
  skipOnMount: false,
296
246
  onResize: function onResize(width) {
297
247
  // 隐藏后就不允许设置 tagSize，避免无限循环触发“宽度计算响应式策略”
298
248
  if (hidden) return;
299
-
300
249
  if (width !== undefined) {
301
250
  onTagResize(option.id, width);
302
251
  }
303
252
  }
304
- }, /*#__PURE__*/React__default["default"].createElement("div", {
253
+ }, /*#__PURE__*/React.createElement("div", {
305
254
  style: {
306
255
  display: 'inline-block',
307
256
  verticalAlign: 'middle'
308
257
  }
309
- }, /*#__PURE__*/React__default["default"].createElement("span", {
258
+ }, /*#__PURE__*/React.createElement("span", {
310
259
  className: prefixCls + "__tag",
311
260
  style: hidden ? hiddenStyle : {
312
261
  maxWidth: maxWidth
313
262
  },
314
263
  key: option.id
315
- }, /*#__PURE__*/React__default["default"].createElement("span", {
264
+ }, /*#__PURE__*/React.createElement("span", {
316
265
  className: prefixCls + "__tag-content"
317
- }, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default["default"].createElement("span", {
266
+ }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
318
267
  className: prefixCls + "__tag-closed",
319
268
  onClick: function onClick(evt) {
320
269
  if (disabled) return;
@@ -324,7 +273,6 @@ function MockTag(_ref) {
324
273
  });
325
274
  tryChangeValue(nextValue, [option], false);
326
275
  }
327
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)) : null)));
276
+ }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null)) : null)));
328
277
  }
329
-
330
278
  exports.TagInputMock = TagInputMock;
package/lib/cjs/index.js CHANGED
@@ -12,13 +12,9 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  require('./styles/index.scss.js');
17
-
18
16
  var TagInput = require('./TagInput.js');
19
-
20
17
  var TagInputMock = require('./TagInputMock.js');
21
-
22
18
  exports.TagInput = TagInput.TagInput;
23
19
  exports["default"] = TagInput.TagInput;
24
20
  exports.TagInputMock = TagInputMock.TagInputMock;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,10 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- 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); }";
16
-
15
+ 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);}";
17
16
  var __styleInject__ = require('style-inject')["default"];
18
-
19
17
  __styleInject__(css_248z);
20
-
21
18
  exports["default"] = css_248z;
package/lib/cjs/use-tag-input.js CHANGED
@@ -9,32 +9,24 @@
9
9
  */
10
10
  'use strict';
11
11
 
12
- Object.defineProperty(exports, '__esModule', {
13
- value: true
14
- });
15
-
16
12
  var React = require('react');
17
-
18
13
  var funcUtils = require('@hi-ui/func-utils');
19
14
 
20
- var TAG_MARGIN_RIGHT = 4; // 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
21
-
15
+ // 表示 tag 的 marginRight
16
+ var TAG_MARGIN_RIGHT = 4;
17
+ // 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
22
18
  var LEFT_SPACE_WIDTH = 100 + TAG_MARGIN_RIGHT;
23
-
24
19
  var useTagInput = function useTagInput(tags, ref) {
25
20
  var inputWidth = useResizeWidth(ref);
26
21
  var tagMaxWidth = inputWidth ? inputWidth - (LEFT_SPACE_WIDTH + 1) : undefined;
27
22
  return [tagMaxWidth];
28
23
  };
29
-
30
24
  var useResizeWidth = function useResizeWidth(ref) {
31
25
  var _useState = React.useState(0),
32
- width = _useState[0],
33
- setWidth = _useState[1];
34
-
26
+ width = _useState[0],
27
+ setWidth = _useState[1];
35
28
  var tryUpdateWidth = React.useCallback(function () {
36
29
  var _a;
37
-
38
30
  var nextWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
39
31
  setWidth(function (prev) {
40
32
  return nextWidth || prev || 0;
@@ -52,6 +44,5 @@ var useResizeWidth = function useResizeWidth(ref) {
52
44
  }, [tryUpdateWidth]);
53
45
  return width;
54
46
  };
55
-
56
47
  exports.useResizeWidth = useResizeWidth;
57
48
  exports.useTagInput = useTagInput;