@hi-ui/tag-input 4.0.4 → 4.0.6

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @hi-ui/tag-input
+
+## 4.0.6
+
+### Patch Changes
+
+- [#2531](https://github.com/XiaoMi/hiui/pull/2531) [`0a9d90ac5`](https://github.com/XiaoMi/hiui/commit/0a9d90ac53bdf66aa2b83b698b58d2cdeb98d912) Thanks [@zyprepare](https://github.com/zyprepare)! - 优化 wrap 模式下代码

package/lib/cjs/TagInput.js

@@ -49,7 +49,7 @@ var _prefix = classname.getPrefixCls(_role);
 
 var NOOP_ARRAY = [];
 /**
- * TODO: What is TagInput
+ * 标签输入框
  */
 
 var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {

package/lib/cjs/TagInputMock.js

@@ -48,10 +48,6 @@ var _role = 'tag-input-mock';
 var _prefix = classname.getPrefixCls(_role);
 
 var NOOP_ARRAY = [];
-/**
- * TODO: What is TagInputMock
- */
-
 var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
@@ -175,7 +171,18 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 
     setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
-  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
+  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]); // mergedTagList 更新后同步更新 tagsWidth
+
+  React.useEffect(function () {
+    var updatedTagsWidth = {};
+    mergedTagList.forEach(function (item) {
+      var _a;
+
+      var id = item.id;
+      updatedTagsWidth[id] = (_a = tagsWidth[id]) !== null && _a !== void 0 ? _a : 0;
+    });
+    setTagsWidth(updatedTagsWidth);
+  }, [mergedTagList]);
   var onClearLatest = useLatest.useLatestCallback(onClear);
   var handleClear = React.useCallback(function (evt) {
     if (disabled) return;

package/lib/cjs/styles/index.scss.js

@@ -12,9 +12,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-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 .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__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 {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px); }.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 {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-tag-input-mock--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.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;-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); }";
+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); }";
 
-var __styleInject__ = require('inject-head-style')["default"];
+var __styleInject__ = require('style-inject')["default"];
 
 __styleInject__(css_248z);
 

package/lib/esm/TagInput.js

@@ -23,7 +23,7 @@ var _prefix = getPrefixCls(_role);
 
 var NOOP_ARRAY = [];
 /**
- * TODO: What is TagInput
+ * 标签输入框
  */
 
 var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {

package/lib/esm/TagInputMock.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useMemo, useState, useCallback, useLayoutEffect } from 'react';
+import React, { forwardRef, useMemo, useState, useCallback, useLayoutEffect, useEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -21,10 +21,6 @@ var _role = 'tag-input-mock';
 var _prefix = getPrefixCls(_role);
 
 var NOOP_ARRAY = [];
-/**
- * TODO: What is TagInputMock
- */
-
 var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
@@ -148,7 +144,18 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
 
 
     setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
-  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
+  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]); // mergedTagList 更新后同步更新 tagsWidth
+
+  useEffect(function () {
+    var updatedTagsWidth = {};
+    mergedTagList.forEach(function (item) {
+      var _a;
+
+      var id = item.id;
+      updatedTagsWidth[id] = (_a = tagsWidth[id]) !== null && _a !== void 0 ? _a : 0;
+    });
+    setTagsWidth(updatedTagsWidth);
+  }, [mergedTagList]);
   var onClearLatest = useLatestCallback(onClear);
   var handleClear = useCallback(function (evt) {
     if (disabled) return;

package/lib/esm/styles/index.scss.js

@@ -7,8 +7,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import __styleInject__ from 'inject-head-style';
-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 .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__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 {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px); }.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 {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-tag-input-mock--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.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;-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); }";
+import __styleInject__ from 'style-inject';
+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); }";
 
 __styleInject__(css_248z);
 

package/lib/types/TagInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TagInputOption } from './types';
 import { HiBaseHTMLProps } from '@hi-ui/core';
 /**
- * TODO: What is TagInput
+ * 标签输入框
  */
 export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface TagInputProps extends Omit<HiBaseHTMLProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {

package/lib/types/TagInputMock.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { TagInputOption } from './types';
 import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core';
-/**
- * TODO: What is TagInputMock
- */
 export declare const TagInputMock: React.ForwardRefExoticComponent<TagInputMockProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface TagInputMockProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tag-input",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -62,9 +62,7 @@
   "devDependencies": {
     "@hi-ui/core": "^4.0.4",
     "@hi-ui/core-css": "^4.0.1",
-    "@hi-ui/hi-build": "^4.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  },
-  "gitHead": "686243832edd8a2d114ac385d0910838233c1e85"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Xiaomi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.