@hi-ui/tag-input 4.0.7 → 4.0.9

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

@@ -12,10 +12,7 @@
 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: rgb(142, 142, 142);cursor: pointer;}.disabled .hi-v4-tag-input__tag-closed {cursor: not-allowed;}.hi-v4-tag-input__tag--left {margin: 0;max-width: 54px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;}.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {width: calc(100% - 64px);overflow-x: hidden;}.hi-v4-tag-input--wrap .hi-v4-tag-input__value {height: auto;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded {position: relative;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {position: absolute;top: 0;left: 0;height: auto;z-index: 1;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: use-color-statc(\"white\");-webkit-transition: all 0.3s;transition: all 0.3s;padding: 3px 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;min-height: 32px;overflow: hidden;border-radius: 4px;border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;max-height: 74px;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;overflow: scroll;padding-left: 10px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 4px 10px 4px 0;position: -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, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-tag-input-mock__tag {max-width: 100%;margin-right: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v4-spacing-4, 8px);vertical-align: middle;font-size: var(--hi-v4-text-size-sm, 0.75rem);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: var(--hi-v4-border-radius-md, 4px);position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 0;-ms-flex: none;flex: none;line-height: inherit;}.hi-v4-tag-input-mock__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tag-input-mock__tag-closed {margin-left: var(--hi-v4-spacing-2, 4px);font-size: var(--hi-v4-text-size-sm, 0.75rem);-webkit-box-sizing: border-box;box-sizing: border-box;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {cursor: not-allowed;color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--size-sm {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-sm:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-6, 24px);}.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {margin-top: 1px;margin-bottom: 1px;}.hi-v4-tag-input-mock--size-md {font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-md:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-8, 32px);}.hi-v4-tag-input-mock--size-lg {font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-lg:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-10, 40px);}.hi-v4-tag-input-mock--appearance-line {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-unset {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-filled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}";
-
+var css_248z = ".hi-v4-tag-input {position: relative;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-tag-input__container {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition: all 0.3s;transition: all 0.3s;padding: 4px 10px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;min-height: 32px;overflow: hidden;border-color: var(--hi-v4-color-gray-300, #dfe2e8);border-radius: 4px;}.hi-v4-tag-input__container:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input__container:not(.disabled).focused {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input__container.disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {background-color: var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-tag-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tag-input__suffix {font-size: 16px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;min-width: 32px;}.hi-v4-tag-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: 14px;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tag-input__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-tag-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 22px;line-height: 22px;}.hi-v4-tag-input__tags {-webkit-box-flex: 0;-ms-flex: 0 1 auto;flex: 0 1 auto;display: inline-block;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;white-space: nowrap;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top: -4px;position: relative;}.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {display: inline-block;margin-right: 4px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;color: #333;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: 4px;}.hi-v4-tag-input__tag--total {display: inline-block;margin-right: 6px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 8px;vertical-align: middle;font-size: 12px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 4px;line-height: 22px;cursor: inherit;}.hi-v4-tag-input__tag {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tag-input__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tag-input__tag-closed {margin-left: var(--hi-v4-spacing-4, 8px);font-size: 12px;-webkit-box-sizing: border-box;box-sizing: border-box;color: rgb(142, 142, 142);cursor: pointer;}.disabled .hi-v4-tag-input__tag-closed {cursor: not-allowed;}.hi-v4-tag-input__tag--left {margin: 0;max-width: 54px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;}.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {width: calc(100% - 64px);overflow-x: hidden;}.hi-v4-tag-input--wrap .hi-v4-tag-input__value {height: auto;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded {position: relative;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {position: absolute;top: 0;left: 0;height: auto;z-index: 1;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;min-width: 160px;font-size: 14px;vertical-align: middle;color: var(--hi-v4-color-static-black, #000);border: 1px solid transparent;background-color: use-color-statc(\"white\");-webkit-transition: all 0.3s;transition: all 0.3s;padding: 3px 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;min-height: 32px;overflow: hidden;border-radius: 4px;border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;max-height: 74px;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;overflow: scroll;padding-left: 10px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {white-space: normal;margin-top: -4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {margin-top: 4px;}.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 4px 10px 4px 0;position: sticky;top: 0;}.hi-v4-tag-input-mock {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled {cursor: not-allowed;}.hi-v4-tag-input-mock--wrap {height: auto;}.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__value {height: auto;}.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__tags {white-space: normal;}.hi-v4-tag-input-mock__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-static-black, #000);font-size: var(--hi-v4-text-size-lg, 1rem);padding: 0;text-align: center;}.hi-v4-tag-input-mock__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);text-align: center;-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-tag-input-mock__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-tag-input-mock__tags {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;white-space: nowrap;overflow: hidden;height: 100%;}.hi-v4-tag-input-mock__tag--total {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: inherit;margin-left: var(--hi-v4-spacing-4, 8px);margin-right: var(--hi-v4-spacing-3, 6px);padding: 0 var(--hi-v4-spacing-4, 8px);font-size: var(--hi-v4-text-size-sm, 0.75rem);border-radius: var(--hi-v4-border-radius-md, 4px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-transition-property: background-color, color;transition-property: background-color, color;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total.hi-v4-tag-input-mock__tag--active {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock--appearance-unset .hi-v4-tag-input-mock__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-tag-input-mock__tag {max-width: 100%;margin-right: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v4-spacing-4, 8px);vertical-align: middle;font-size: var(--hi-v4-text-size-sm, 0.75rem);color: var(--hi-v4-color-gray-700, #1f2733);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--hi-v4-color-gray-100, #f2f4f7);border-radius: var(--hi-v4-border-radius-md, 4px);position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-flex: 0;-ms-flex: none;flex: none;line-height: inherit;}.hi-v4-tag-input-mock__tag-content {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tag-input-mock__tag-closed {margin-left: var(--hi-v4-spacing-2, 4px);font-size: var(--hi-v4-text-size-sm, 0.75rem);-webkit-box-sizing: border-box;box-sizing: border-box;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {cursor: not-allowed;color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--size-sm {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-sm:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-6, 24px);}.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {margin-top: 1px;margin-bottom: 1px;}.hi-v4-tag-input-mock--size-md {font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-md:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-8, 32px);}.hi-v4-tag-input-mock--size-lg {font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-tag-input-mock--size-lg:not(.hi-v4-tag-input-mock--wrap) {height: var(--hi-v4-height-10, 40px);}.hi-v4-tag-input-mock--appearance-line {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-unset {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-filled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag--total {background-color: var(--hi-v4-color-gray-100, #f2f4f7);color: var(--hi-v4-color-gray-400, #b5bcc7);}";
 var __styleInject__ = require('style-inject')["default"];
-
 __styleInject__(css_248z);
-
 exports["default"] = css_248z;

package/lib/cjs/use-tag-input.js

@@ -12,29 +12,24 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-
 var React = require('react');
-
 var funcUtils = require('@hi-ui/func-utils');
 
-var TAG_MARGIN_RIGHT = 4; // 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
-
+// 表示 tag 的 marginRight
+var TAG_MARGIN_RIGHT = 4;
+// 留给显示剩余选项的宽度：suffix + paddingLeft + paddingRight + leftCountTag (16 + 10 + + 10 + 54)
 var LEFT_SPACE_WIDTH = 100 + TAG_MARGIN_RIGHT;
-
 var useTagInput = function useTagInput(tags, ref) {
   var inputWidth = useResizeWidth(ref);
   var tagMaxWidth = inputWidth ? inputWidth - (LEFT_SPACE_WIDTH + 1) : undefined;
   return [tagMaxWidth];
 };
-
 var useResizeWidth = function useResizeWidth(ref) {
   var _useState = React.useState(0),
-      width = _useState[0],
-      setWidth = _useState[1];
-
+    width = _useState[0],
+    setWidth = _useState[1];
   var tryUpdateWidth = React.useCallback(function () {
     var _a;
-
     var nextWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
     setWidth(function (prev) {
       return nextWidth || prev || 0;
@@ -52,6 +47,5 @@ var useResizeWidth = function useResizeWidth(ref) {
   }, [tryUpdateWidth]);
   return width;
 };
-
 exports.useResizeWidth = useResizeWidth;
 exports.useTagInput = useTagInput;

package/lib/esm/TagInput.js

@@ -18,50 +18,43 @@ import { useTagInput } from './use-tag-input.js';
 import { useOutsideClick } from '@hi-ui/use-outside-click';
 import { useLatestCallback } from '@hi-ui/use-latest';
 var _role = 'tag-input';
-
 var _prefix = getPrefixCls(_role);
-
 var NOOP_ARRAY = [];
 /**
  * 标签输入框
  */
-
 var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      _a$role = _a.role,
-      role = _a$role === void 0 ? _role : _a$role,
-      className = _a.className,
-      _a$defaultValue = _a.defaultValue,
-      defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
-      valueProp = _a.value,
-      onChange = _a.onChange,
-      placeholder = _a.placeholder,
-      _a$data = _a.data,
-      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
-      _a$wrap = _a.wrap,
-      wrap = _a$wrap === void 0 ? true : _a$wrap,
-      _a$clearable = _a.clearable,
-      clearable = _a$clearable === void 0 ? true : _a$clearable,
-      _a$disabled = _a.disabled,
-      disabled = _a$disabled === void 0 ? false : _a$disabled,
-      suffix = _a.suffix,
-      displayRender = _a.displayRender,
-      onClick = _a.onClick,
-      _onMouseOver = _a.onMouseOver,
-      _onMouseLeave = _a.onMouseLeave,
-      onClear = _a.onClear,
-      rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
-
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? _role : _a$role,
+    className = _a.className,
+    _a$defaultValue = _a.defaultValue,
+    defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
+    valueProp = _a.value,
+    onChange = _a.onChange,
+    placeholder = _a.placeholder,
+    _a$data = _a.data,
+    data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
+    _a$wrap = _a.wrap,
+    wrap = _a$wrap === void 0 ? true : _a$wrap,
+    _a$clearable = _a.clearable,
+    clearable = _a$clearable === void 0 ? true : _a$clearable,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    suffix = _a.suffix,
+    displayRender = _a.displayRender,
+    onClick = _a.onClick,
+    _onMouseOver = _a.onMouseOver,
+    _onMouseLeave = _a.onMouseLeave,
+    onClear = _a.onClear,
+    rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
   var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
-      value = _useUncontrolledState[0],
-      tryChangeValue = _useUncontrolledState[1];
-
+    value = _useUncontrolledState[0],
+    tryChangeValue = _useUncontrolledState[1];
   var tagInputRef = useRef(null);
-
   var _useTagInput = useTagInput(data, tagInputRef),
-      tagMaxWidth = _useTagInput[0];
-
+    tagMaxWidth = _useTagInput[0];
   var onClearLatest = useLatestCallback(onClear);
   var tagList = useMemo(function () {
     return value.map(function (id) {
@@ -79,24 +72,20 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     tryChangeValue(NOOP_ARRAY, tagList, false);
     onClearLatest();
   }, [tryChangeValue, disabled, onClearLatest, tagList]);
-
   var _useState = useState(false),
-      hover = _useState[0],
-      setHover = _useState[1];
-
+    hover = _useState[0],
+    setHover = _useState[1];
   var trySetHover = useCallback(function (hovered) {
     if (disabled) return;
     setHover(hovered);
   }, [disabled]);
-  var tagCount = tagList.length; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
-
+  var tagCount = tagList.length;
+  // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
   var showClearableIcon = clearable && tagCount > 0 && !disabled;
   var showTagCount = !wrap && tagCount > 0;
-
   var _useState2 = useState(false),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
   useOutsideClick(tagInputRef, function () {
     return setExpanded(false);
   });
@@ -120,7 +109,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__container", disabled && 'disabled'),
     onClick: onClick
-  }, value.length !== 0 ? /*#__PURE__*/React.createElement("span", {
+  }, value.length !== 0 ? ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__value"
   }, /*#__PURE__*/React.createElement("span", {
     className: cx(prefixCls + "__tags", wrap && prefixCls + "__tags--all")
@@ -135,7 +124,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       style: {
         maxWidth: tagMaxWidth
       }
-    }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
+    }, title === true ? option.title : title), closeable ? ( /*#__PURE__*/React.createElement("span", {
       className: prefixCls + "__tag-closed",
       onClick: function onClick(evt) {
         if (disabled) return;
@@ -145,20 +134,20 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         });
         tryChangeValue(nextValue, [option], false);
       }
-    }, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null);
-  }))) : /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(CloseOutlined, null))) : null);
+  })))) : ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__placeholder"
-  }, placeholder), !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
+  }, placeholder)), !!suffix || showClearableIcon && hover || showTagCount ? ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__suffix"
-  }, showTagCount ? /*#__PURE__*/React.createElement("span", {
+  }, showTagCount ? ( /*#__PURE__*/React.createElement("span", {
     className: cx(prefixCls + "__tag--total"),
     onClick: handleExpand
-  }, "" + (tagCount > 99 ? '+99' : tagCount)) : showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
+  }, "" + (tagCount > 99 ? '+99' : tagCount))) : showClearableIcon && hover ? ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__clear",
     role: "button",
     tabIndex: -1,
     onClick: handleClear
-  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : null, suffix) : null), value.length !== 0 && expanded ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), value.length !== 0 && expanded ? ( /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "__container__expand"
   }, /*#__PURE__*/React.createElement("span", {
     className: cx(prefixCls + "__value")
@@ -175,7 +164,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       style: {
         maxWidth: tagMaxWidth
       }
-    }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
+    }, title === true ? option.title : title), closeable ? ( /*#__PURE__*/React.createElement("span", {
       className: prefixCls + "__tag-closed",
       onClick: function onClick(evt) {
         if (disabled) return;
@@ -185,19 +174,17 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         });
         tryChangeValue(nextValue);
       }
-    }, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null);
-  }))), showClearableIcon ? /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(CloseOutlined, null))) : null);
+  }))), showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__suffix"
   }, /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__clear",
     role: "button",
     tabIndex: -1,
     onClick: handleClear
-  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null) : null);
+  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)))) : null)) : null);
 });
-
 if (__DEV__) {
   TagInput.displayName = 'TagInput';
 }
-
 export { TagInput };