@alfalab/core-components 38.3.0 → 38.4.0

package/select/presets/useSelectWithApply/hook.js

@@ -1,10 +1,10 @@
-require('../../tslib.es6-02aea180.js');
+require('tslib');
 require('react');
 require('../../Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('../../Component-7b7660bb.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-37583cc4.js');
+require('../../Component-4af19284.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-989a84db.js');
 require('../../../form-control');
 require('@alfalab/hooks');
 require('../../utils.js');
@@ -16,7 +16,7 @@ require('../../components/options-list/Component.js');
 require('react-virtual');
 require('../../../scrollbar');
 require('../../../skeleton');
-require('../../intersection-observer-f8b42f45.js');
+require('../../intersection-observer-230e176d.js');
 require('../../components/arrow/Component.js');
 require('../../components/field/Component.js');
 require('../../components/optgroup/Component.js');

package/select/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,10 +1,10 @@
-require('../../../tslib.es6-02aea180.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../../../button');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('../../../Component-7b7660bb.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-37583cc4.js');
+require('../../../Component-4af19284.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-989a84db.js');
 require('../../../../form-control');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
@@ -32,7 +32,7 @@ require('../../../components/checkmark/Component.js');
 require('../../../components/base-option/Component.js');
 require('../../../components/base-checkmark/Component.js');
 require('../../../../skeleton');
-require('../../../intersection-observer-f8b42f45.js');
+require('../../../intersection-observer-230e176d.js');
 require('../../../components/base-select-mobile/options-list/Component.js');
 require('../../../../base-modal');
 require('../../../components/base-select-mobile/virtual-options-list/Component.js');

package/select/presets/useSelectWithApply/options-list-with-apply/index.css

@@ -27,12 +27,12 @@
     /* checkmark */
 
     /* optgroup */
-} .select__footer_1ao0t {
+} .select__footer_1mpn0 {
     background: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_1ao0t > * + * {
+} .select__footer_1mpn0 > * + * {
         margin-left: var(--gap-xs);
-    } .select__withBorder_1ao0t {
+    } .select__withBorder_1mpn0 {
     box-shadow: inset 0 1px 0 var(--color-light-border-secondary);
 }

package/select/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../Component-37583cc4";
+export * from "../../../Component-989a84db";

package/select/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,5 +1,5 @@
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-37583cc4.js');
-require('../../../tslib.es6-02aea180.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-989a84db.js');
+require('tslib');
 require('react');
 require('../../../components/arrow/Component.js');
 require('classnames');
@@ -9,7 +9,7 @@ require('downshift');
 require('../../../../bottom-sheet');
 require('../../../../modal/mobile');
 require('../../../Component.js');
-require('../../../Component-7b7660bb.js');
+require('../../../Component-4af19284.js');
 require('@juggle/resize-observer');
 require('../../../../popover');
 require('@alfalab/hooks');
@@ -31,7 +31,7 @@ require('react-virtual');
 require('../../../components/base-option/Component.js');
 require('../../../components/base-checkmark/Component.js');
 require('../../../../skeleton');
-require('../../../intersection-observer-f8b42f45.js');
+require('../../../intersection-observer-230e176d.js');
 require('../../../../button');
 require('../../../components/base-select-mobile/options-list/Component.js');
 require('../../../../base-modal');

package/select/presets/useSelectWithLoading/hook.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-02aea180.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('../../../skeleton');
 var components_option_Component = require('../../components/option/Component.js');
@@ -14,12 +14,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_1cthx"};
+var styles = {"skeleton":"select__skeleton_1yfus"};
 require('./index.css');
 
 function useSelectWithLoading(_a) {
     var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.visibleOptions, visibleOptions = _c === void 0 ? 6 : _c, _d = _a.Option, Option = _d === void 0 ? components_option_Component.Option : _d;
-    var renderOption = function (props) { return (React__default.default.createElement(Option, tslib_es6.__assign({}, props, { Checkmark: null, highlighted: loading ? false : props.highlighted }))); };
+    var renderOption = function (props) { return (React__default.default.createElement(Option, tslib.__assign({}, props, { Checkmark: null, highlighted: loading ? false : props.highlighted }))); };
     var options = Array(visibleOptions)
         .fill(0)
         .map(function (_, key) { return ({

package/select/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
 /* hash: yn6m0 */
-.select__skeleton_1cthx {
+.select__skeleton_1yfus {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/select/responsive.js

@@ -1,12 +1,12 @@
 var Component_responsive = require('./Component.responsive.js');
-require('./tslib.es6-02aea180.js');
+require('tslib');
 require('react');
 require('@alfalab/hooks');
 require('./Component.js');
 require('./components/arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('./Component-7b7660bb.js');
+require('./Component-4af19284.js');
 require('react-merge-refs');
 require('@juggle/resize-observer');
 require('downshift');
@@ -25,14 +25,14 @@ require('../checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('./components/options-list/Component.js');
 require('../scrollbar');
-require('./Component-37583cc4.js');
+require('./Component-989a84db.js');
 require('../bottom-sheet');
 require('../modal/mobile');
 require('react-virtual');
 require('./components/base-option/Component.js');
 require('./components/base-checkmark/Component.js');
 require('../skeleton');
-require('./intersection-observer-f8b42f45.js');
+require('./intersection-observer-230e176d.js');
 require('../button');
 require('./components/base-select-mobile/options-list/Component.js');
 require('../base-modal');

package/select-with-tags/component.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('./tslib.es6-25dfba85.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSelect = require('../select');
 var components_tagList_component = require('./components/tag-list/component.js');
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onOpen = _a.onOpen, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib_es6.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag"]);
+    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onOpen = _a.onOpen, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag"]);
     var controlled = Boolean(selected);
     var _l = React.useState(selected || []), selectedTags = _l[0], setSelectedTags = _l[1];
     var _m = React.useState(false), isPopoverOpen = _m[0], setPopoverOpen = _m[1];
@@ -66,7 +66,7 @@ var SelectWithTags = React.forwardRef(function (_a, ref) {
     }, [onOpen, resetValue, value]);
     var filteredOptions = utils_match.filterOptions(options, value, match);
     var isAutocomplete = autocomplete || Boolean(match);
-    return (React__default.default.createElement(coreComponentsSelect.BaseSelect, tslib_es6.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
+    return (React__default.default.createElement(coreComponentsSelect.BaseSelect, tslib.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
             value: value,
             autocomplete: isAutocomplete,
             onInput: onInput,

package/select-with-tags/components/index.js

@@ -1,6 +1,6 @@
 var components_tagList_component = require('./tag-list/component.js');
 var components_tag_component = require('./tag/component.js');
-require('../tslib.es6-25dfba85.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../form-control');

package/select-with-tags/components/tag/component.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-25dfba85.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsTag = require('../../../tag');
@@ -9,18 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tag":"select-with-tags__tag_pvyp3","tagNoClose":"select-with-tags__tagNoClose_pvyp3","tagContentWrap":"select-with-tags__tagContentWrap_pvyp3","tagCross":"select-with-tags__tagCross_pvyp3"};
+var styles = {"tag":"select-with-tags__tag_1k1lm","tagNoClose":"select-with-tags__tagNoClose_1k1lm","tagContentWrap":"select-with-tags__tagContentWrap_1k1lm","tagCross":"select-with-tags__tagCross_1k1lm"};
 require('./index.css');
 
 var Tag = function (_a) {
     var _b;
-    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib_es6.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
+    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
     var handleClick = React.useCallback(function () {
         if (handleDeleteTag) {
             handleDeleteTag(key);
         }
     }, [handleDeleteTag, key]);
-    return (React__default.default.createElement(coreComponentsTag.Tag, tslib_es6.__assign({ key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default.default(styles.tag, (_b = {}, _b[styles.tagNoClose] = !handleDeleteTag, _b)) }, props),
+    return (React__default.default.createElement(coreComponentsTag.Tag, tslib.__assign({ key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default.default(styles.tag, (_b = {}, _b[styles.tagNoClose] = !handleDeleteTag, _b)) }, props),
         React__default.default.createElement("span", { className: styles.tagContentWrap },
             content,
             handleDeleteTag && (

package/select-with-tags/components/tag/index.css

@@ -22,7 +22,11 @@
 } :root {
     /* border */
 
-    /* background-color */
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
     --tag-background-color-checked: var(--color-light-bg-primary-inverted);
 
     /* text color */
@@ -32,38 +36,42 @@
 
     /* border */
 
-    /* background-color */
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
 
     /* text color */
-} .select-with-tags__tag_pvyp3 {
+} .select-with-tags__tag_1k1lm {
     padding: 0;
     padding-left: var(--gap-m);
     margin: var(--gap-2xs);
     cursor: default
-} .select-with-tags__tag_pvyp3:active:not(:disabled) {
+} .select-with-tags__tag_1k1lm:active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_pvyp3:hover:not(:disabled):not(:active) {
+    } .select-with-tags__tag_1k1lm:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_pvyp3 > span {
+    } .select-with-tags__tag_1k1lm > span {
         width: 100%;
         height: 100%;
-    } .select-with-tags__tagNoClose_pvyp3 {
+    } .select-with-tags__tagNoClose_1k1lm {
     padding-right: var(--gap-m);
-} .select-with-tags__tagContentWrap_pvyp3 {
+} .select-with-tags__tagContentWrap_1k1lm {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 100%;
     cursor: pointer;
-} .select-with-tags__tagCross_pvyp3 {
+} .select-with-tags__tagCross_1k1lm {
     padding-right: var(--gap-xs);
     height: 100%
-} .select-with-tags__tagCross_pvyp3:hover {
+} .select-with-tags__tagCross_1k1lm:hover {
         opacity: 0.7;
-    } .select-with-tags__tagCross_pvyp3:active {
+    } .select-with-tags__tagCross_1k1lm:active {
         opacity: 0.5;
-    } .select-with-tags__tagCross_pvyp3 svg {
+    } .select-with-tags__tagCross_1k1lm svg {
         height: 100%;
     }

package/select-with-tags/components/tag/index.js

@@ -1,5 +1,5 @@
 var components_tag_component = require('./component.js');
-require('../../tslib.es6-25dfba85.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../../tag');

package/select-with-tags/components/tag-list/component.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-25dfba85.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsFormControl = require('../../../form-control');
@@ -13,12 +13,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select-with-tags__component_x7ji8","xl":"select-with-tags__xl_x7ji8","contentWrapper":"select-with-tags__contentWrapper_x7ji8","l":"select-with-tags__l_x7ji8","m":"select-with-tags__m_x7ji8","s":"select-with-tags__s_x7ji8","contentWrapperVertical":"select-with-tags__contentWrapperVertical_x7ji8","hasLabel":"select-with-tags__hasLabel_x7ji8","hasTags":"select-with-tags__hasTags_x7ji8","addons":"select-with-tags__addons_x7ji8","field":"select-with-tags__field_x7ji8","input":"select-with-tags__input_x7ji8","block":"select-with-tags__block_x7ji8","focusVisible":"select-with-tags__focusVisible_x7ji8","placeholder":"select-with-tags__placeholder_x7ji8","addons-size-m":"select-with-tags__addons-size-m_x7ji8","addons-size-l":"select-with-tags__addons-size-l_x7ji8","addons-size-xl":"select-with-tags__addons-size-xl_x7ji8","label":"select-with-tags__label_x7ji8"};
+var styles = {"component":"select-with-tags__component_xujuh","xl":"select-with-tags__xl_xujuh","contentWrapper":"select-with-tags__contentWrapper_xujuh","l":"select-with-tags__l_xujuh","m":"select-with-tags__m_xujuh","s":"select-with-tags__s_xujuh","contentWrapperVertical":"select-with-tags__contentWrapperVertical_xujuh","hasInnerLabel":"select-with-tags__hasInnerLabel_xujuh","hasTags":"select-with-tags__hasTags_xujuh","addons":"select-with-tags__addons_xujuh","field":"select-with-tags__field_xujuh","input":"select-with-tags__input_xujuh","block":"select-with-tags__block_xujuh","focusVisible":"select-with-tags__focusVisible_xujuh","placeholder":"select-with-tags__placeholder_xujuh","addons-size-m":"select-with-tags__addons-size-m_xujuh","addons-size-l":"select-with-tags__addons-size-l_xujuh","addons-size-xl":"select-with-tags__addons-size-xl_xujuh","label":"select-with-tags__label_xujuh"};
 require('./index.css');
 
 var TagList = function (_a) {
     var _b, _c, _d;
-    var _e = _a.size, size = _e === void 0 ? 'xl' : _e, open = _a.open, disabled = _a.disabled, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, fieldClassName = _a.fieldClassName, _g = _a.value, value = _g === void 0 ? '' : _g, autocomplete = _a.autocomplete, label = _a.label; _a.valueRenderer; var onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isPopoverOpen = _a.isPopoverOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h; _a.setSelectedItems; _a.toggleMenu; var restProps = tslib_es6.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isPopoverOpen", "handleUpdatePopover", "Tag", "setSelectedItems", "toggleMenu"]);
+    var _e = _a.size, size = _e === void 0 ? 'xl' : _e, open = _a.open, disabled = _a.disabled, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, fieldClassName = _a.fieldClassName, _g = _a.value, value = _g === void 0 ? '' : _g, autocomplete = _a.autocomplete, label = _a.label; _a.valueRenderer; var onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isPopoverOpen = _a.isPopoverOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h; _a.setSelectedItems; _a.toggleMenu; var labelView = _a.labelView, restProps = tslib.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isPopoverOpen", "handleUpdatePopover", "Tag", "setSelectedItems", "toggleMenu", "labelView"]);
     var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
     var _k = React.useState(false), isShowMoreEnabled = _k[0], setShowMoreEnabled = _k[1];
     var _l = React.useState(1), visibleElements = _l[0], setVisibleElements = _l[1];
@@ -47,7 +47,7 @@ var TagList = function (_a) {
     var handleMouseDown = React.useCallback(function (event) {
         event.preventDefault();
     }, []);
-    var onClick = innerProps.onClick, restInnerProps = tslib_es6.__rest(innerProps, ["onClick"]);
+    var onClick = innerProps.onClick, restInnerProps = tslib.__rest(innerProps, ["onClick"]);
     var handleClick = React.useCallback(function (event) {
         if (onClick && contentWrapperRef.current) {
             var eventTarget = event.target;
@@ -99,23 +99,24 @@ var TagList = function (_a) {
         return "+".concat(selectedMultiple.length - visibleElements);
     }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
     var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
+    var hasInnerLabel = Boolean(label) && labelView !== 'outer';
     /**
      * Флаг который позволит добавлять класс с вертикальными
      * отступами если элементы не помещаются в один ряд,
      * для того чтобы не менялась высота инпута
      */
-    var shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !label);
+    var shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !hasInnerLabel);
     return (React__default.default.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn__default.default(className, styles.component, styles[size]) },
-        React__default.default.createElement(coreComponentsFormControl.FormControl, tslib_es6.__assign({}, restProps, { ref: innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles.field, (_b = {},
+        React__default.default.createElement(coreComponentsFormControl.FormControl, tslib.__assign({}, restProps, { ref: innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles.field, (_b = {},
                 _b[styles.focusVisible] = focusVisible,
-                _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default.default(styles.addons, styles["addons-size-".concat(size)]), label: label, labelClassName: styles.label }),
+                _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default.default(styles.addons, styles["addons-size-".concat(size)]), label: label, labelClassName: styles.label, labelView: labelView }),
             React__default.default.createElement("div", { className: cn__default.default(styles.contentWrapper, (_c = {},
-                    _c[styles.hasLabel] = Boolean(label),
+                    _c[styles.hasInnerLabel] = hasInnerLabel,
                     _c[styles.hasTags] = selectedMultiple.length > 0,
                     _c[styles.contentWrapperVertical] = shouldAddVerticalMargin,
                     _c)), ref: contentWrapperRef },
                 selectedMultiple.map(function (option, index) {
-                    return isShowMoreEnabled || index + 1 <= visibleElements ? (React__default.default.createElement(Tag, { option: tslib_es6.__assign(tslib_es6.__assign({}, option), { content: transformTagText
+                    return isShowMoreEnabled || index + 1 <= visibleElements ? (React__default.default.createElement(Tag, { option: tslib.__assign(tslib.__assign({}, option), { content: transformTagText
                                 ? transformTagText(option.content)
                                 : option.content }), key: option.key, handleDeleteTag: handleDeleteTag })) : null;
                 }),
@@ -123,7 +124,7 @@ var TagList = function (_a) {
                         key: 'collapse',
                         content: collapseTagTitle,
                     } })),
-                autocomplete && (React__default.default.createElement("input", tslib_es6.__assign({}, restInnerProps, { autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn__default.default(styles.input, (_d = {},
+                autocomplete && (React__default.default.createElement("input", tslib.__assign({}, restInnerProps, { autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn__default.default(styles.input, (_d = {},
                         _d[styles.focusVisible] = inputFocusVisible,
                         _d[styles.block] = inputOnNewLine,
                         _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),

package/select-with-tags/components/tag-list/index.css

@@ -28,45 +28,45 @@
     --focus-color: var(--color-light-border-link);
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .select-with-tags__component_x7ji8.select-with-tags__xl_x7ji8 .select-with-tags__contentWrapper_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__xl_xujuh .select-with-tags__contentWrapper_xujuh {
     padding: var(--gap-l) var(--gap-m);
-} .select-with-tags__component_x7ji8.select-with-tags__l_x7ji8 .select-with-tags__contentWrapper_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__l_xujuh .select-with-tags__contentWrapper_xujuh {
     padding: var(--gap-m) var(--gap-m);
-} .select-with-tags__component_x7ji8.select-with-tags__m_x7ji8 .select-with-tags__contentWrapper_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__m_xujuh .select-with-tags__contentWrapper_xujuh {
     padding: var(--gap-m) var(--gap-s);
-} .select-with-tags__component_x7ji8.select-with-tags__s_x7ji8 .select-with-tags__contentWrapper_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__s_xujuh .select-with-tags__contentWrapper_xujuh {
     padding: var(--gap-s) var(--gap-s);
-} .select-with-tags__component_x7ji8.select-with-tags__xl_x7ji8 .select-with-tags__contentWrapperVertical_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__xl_xujuh .select-with-tags__contentWrapperVertical_xujuh {
     padding-top: var(--gap-l);
     padding-bottom: var(--gap-l);
-} .select-with-tags__component_x7ji8.select-with-tags__l_x7ji8 .select-with-tags__contentWrapperVertical_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__l_xujuh .select-with-tags__contentWrapperVertical_xujuh {
     padding-top: var(--gap-m);
     padding-bottom: var(--gap-m);
-} .select-with-tags__component_x7ji8.select-with-tags__m_x7ji8 .select-with-tags__contentWrapperVertical_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__m_xujuh .select-with-tags__contentWrapperVertical_xujuh {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
-} .select-with-tags__component_x7ji8.select-with-tags__s_x7ji8 .select-with-tags__contentWrapperVertical_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__s_xujuh .select-with-tags__contentWrapperVertical_xujuh {
     padding-top: var(--gap-xs);
     padding-bottom: var(--gap-xs);
-} .select-with-tags__component_x7ji8 .select-with-tags__contentWrapper_x7ji8 {
+} .select-with-tags__component_xujuh .select-with-tags__contentWrapper_xujuh {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: var(--gap-2xs-neg)
-} .select-with-tags__component_x7ji8 .select-with-tags__contentWrapper_x7ji8:not(.select-with-tags__contentWrapperVertical_x7ji8):not(.select-with-tags__hasLabel_x7ji8) {
+} .select-with-tags__component_xujuh .select-with-tags__contentWrapper_xujuh:not(.select-with-tags__contentWrapperVertical_xujuh):not(.select-with-tags__hasInnerLabel_xujuh) {
         padding-top: 0;
         padding-bottom: 0;
-    } .select-with-tags__component_x7ji8 .select-with-tags__contentWrapper_x7ji8.select-with-tags__hasLabel_x7ji8 {
+    } .select-with-tags__component_xujuh .select-with-tags__contentWrapper_xujuh.select-with-tags__hasInnerLabel_xujuh {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
-    } .select-with-tags__component_x7ji8 .select-with-tags__contentWrapper_x7ji8.select-with-tags__hasTags_x7ji8.select-with-tags__hasLabel_x7ji8 {
+    } .select-with-tags__component_xujuh .select-with-tags__contentWrapper_xujuh.select-with-tags__hasTags_xujuh.select-with-tags__hasInnerLabel_xujuh {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
-    } .select-with-tags__component_x7ji8:hover .select-with-tags__addons_x7ji8 {
+    } .select-with-tags__component_xujuh:hover .select-with-tags__addons_xujuh {
     opacity: 0.7;
-} .select-with-tags__field_x7ji8 {
+} .select-with-tags__field_xujuh {
     cursor: pointer;
-} .select-with-tags__input_x7ji8 {
+} .select-with-tags__input_xujuh {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -80,46 +80,46 @@
     border: none;
     font-family: var(--font-family);
     color: var(--color-light-text-primary)
-} .select-with-tags__input_x7ji8:disabled {
+} .select-with-tags__input_xujuh:disabled {
         color: var(--color-light-text-secondary);
-    } .select-with-tags__input_x7ji8::placeholder {
+    } .select-with-tags__input_xujuh::placeholder {
         color: var(--color-light-text-secondary);
-    } .select-with-tags__input_x7ji8:focus::placeholder {
+    } .select-with-tags__input_xujuh:focus::placeholder {
         color: var(--color-light-text-tertiary);
-    } .select-with-tags__block_x7ji8 {
+    } .select-with-tags__block_xujuh {
     min-width: 100%;
-} .select-with-tags__focusVisible_x7ji8 {
+} .select-with-tags__focusVisible_xujuh {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .select-with-tags__placeholder_x7ji8 {
+} .select-with-tags__placeholder_xujuh {
     display: flex;
     align-items: center;
     min-height: 28px;
     padding-left: var(--gap-2xs);
     color: var(--color-light-text-tertiary);
     pointer-events: none;
-} .select-with-tags__addons_x7ji8 {
+} .select-with-tags__addons_xujuh {
     align-self: flex-start;
     padding-top: var(--gap-s);
-} .select-with-tags__addons-size-m_x7ji8 {
+} .select-with-tags__addons-size-m_xujuh {
     padding-top: var(--gap-m);
-} .select-with-tags__addons-size-l_x7ji8 {
+} .select-with-tags__addons-size-l_xujuh {
     padding-top: var(--gap-l);
-} .select-with-tags__addons-size-xl_x7ji8 {
+} .select-with-tags__addons-size-xl_xujuh {
     padding-top: var(--gap-xl);
-} .select-with-tags__component_x7ji8.select-with-tags__s_x7ji8 .select-with-tags__label_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__s_xujuh .select-with-tags__label_xujuh {
     top: 5px;
     left: 12px;
-} .select-with-tags__component_x7ji8.select-with-tags__m_x7ji8 .select-with-tags__label_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__m_xujuh .select-with-tags__label_xujuh {
     top: 8px;
     left: 12px;
-} .select-with-tags__component_x7ji8.select-with-tags__l_x7ji8 .select-with-tags__label_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__l_xujuh .select-with-tags__label_xujuh {
     top: 10px;
     left: 16px;
-} .select-with-tags__component_x7ji8.select-with-tags__xl_x7ji8 .select-with-tags__label_x7ji8 {
+} .select-with-tags__component_xujuh.select-with-tags__xl_xujuh .select-with-tags__label_xujuh {
     top: 14px;
     left: 16px;
-} .select-with-tags__component_x7ji8 .select-with-tags__label_x7ji8 {
+} .select-with-tags__component_xujuh .select-with-tags__label_xujuh {
     top: 14px;
     align-items: flex-start;
     height: auto;

package/select-with-tags/components/tag-list/index.js

@@ -1,5 +1,5 @@
 var components_tagList_component = require('./component.js');
-require('../../tslib.es6-25dfba85.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../../form-control');

package/select-with-tags/cssm/component.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('./tslib.es6-bbd6cd2a.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSelect = require('../../select/cssm');
 var components_tagList_component = require('./components/tag-list/component.js');
@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onOpen = _a.onOpen, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib_es6.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag"]);
+    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onOpen = _a.onOpen, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag"]);
     var controlled = Boolean(selected);
     var _l = React.useState(selected || []), selectedTags = _l[0], setSelectedTags = _l[1];
     var _m = React.useState(false), isPopoverOpen = _m[0], setPopoverOpen = _m[1];
@@ -68,7 +68,7 @@ var SelectWithTags = React.forwardRef(function (_a, ref) {
     }, [onOpen, resetValue, value]);
     var filteredOptions = utils_match.filterOptions(options, value, match);
     var isAutocomplete = autocomplete || Boolean(match);
-    return (React__default.default.createElement(coreComponentsSelect.BaseSelect, tslib_es6.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
+    return (React__default.default.createElement(coreComponentsSelect.BaseSelect, tslib.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
             value: value,
             autocomplete: isAutocomplete,
             onInput: onInput,

package/select-with-tags/cssm/components/index.js

@@ -1,6 +1,6 @@
 var components_tagList_component = require('./tag-list/component.js');
 var components_tag_component = require('./tag/component.js');
-require('../tslib.es6-bbd6cd2a.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../../form-control/cssm');

package/select-with-tags/cssm/components/tag/component.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-bbd6cd2a.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsTag = require('../../../../tag/cssm');
@@ -13,13 +13,13 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Tag = function (_a) {
     var _b;
-    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib_es6.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
+    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
     var handleClick = React.useCallback(function () {
         if (handleDeleteTag) {
             handleDeleteTag(key);
         }
     }, [handleDeleteTag, key]);
-    return (React__default.default.createElement(coreComponentsTag.Tag, tslib_es6.__assign({ key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default.default(styles__default.default.tag, (_b = {}, _b[styles__default.default.tagNoClose] = !handleDeleteTag, _b)) }, props),
+    return (React__default.default.createElement(coreComponentsTag.Tag, tslib.__assign({ key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default.default(styles__default.default.tag, (_b = {}, _b[styles__default.default.tagNoClose] = !handleDeleteTag, _b)) }, props),
         React__default.default.createElement("span", { className: styles__default.default.tagContentWrap },
             content,
             handleDeleteTag && (

package/select-with-tags/cssm/components/tag/index.js

@@ -1,5 +1,5 @@
 var components_tag_component = require('./component.js');
-require('../../tslib.es6-bbd6cd2a.js');
+require('tslib');
 require('react');
 require('classnames');
 require('../../../../tag/cssm');

package/select-with-tags/cssm/components/tag/index.module.css

@@ -21,7 +21,11 @@
 } :root {
     /* border */
 
-    /* background-color */
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
     --tag-background-color-checked: var(--color-light-bg-primary-inverted);
 
     /* text color */
@@ -31,7 +35,11 @@
 
     /* border */
 
-    /* background-color */
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
 
     /* text color */
 } .tag {