@alfalab/core-components 46.3.0-beta.0 → 46.3.0-beta.1

package/filter-tag/components/base-filter-tag/index.css

@@ -96,49 +96,49 @@
     /* mobile inverted */
 } :root {
     --filter-tag-separator-background-color-hover: transparent;
-} .filter-tag__component_1szok {
+} .filter-tag__component_2ohqq {
     display: flex;
     width: max-content;
     max-width: 100%;
     box-sizing: border-box
-} .filter-tag__component_1szok.filter-tag__block_1szok {
+} .filter-tag__component_2ohqq.filter-tag__block_2ohqq {
         width: 100%;
-    } .filter-tag__component_1szok.filter-tag__disabled_1szok {
+    } .filter-tag__component_2ohqq.filter-tag__disabled_2ohqq {
         background-color: var(--tag-outlined-background-color-disabled);
-    } .filter-tag__component_1szok.filter-tag__rounded_1szok.filter-tag__size-32_1szok {
+    } .filter-tag__component_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-32_2ohqq {
             border-radius: var(--tag-rounded-xxs-border-radius);
-        } .filter-tag__component_1szok.filter-tag__rounded_1szok.filter-tag__size-40_1szok {
+        } .filter-tag__component_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-40_2ohqq {
             border-radius: var(--tag-rounded-xs-border-radius);
-        } .filter-tag__component_1szok.filter-tag__rounded_1szok.filter-tag__size-48_1szok {
+        } .filter-tag__component_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-48_2ohqq {
             border-radius: var(--tag-rounded-s-border-radius);
-        } .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok) {
+        } .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq) {
             background-color: var(--tag-background-color-checked);
-        } .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok).filter-tag__size-32_1szok {
+        } .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq).filter-tag__size-32_2ohqq {
             min-width: 84px;
-        } .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok).filter-tag__size-40_1szok {
+        } .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq).filter-tag__size-40_2ohqq {
             min-width: 104px;
-        } .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok).filter-tag__size-48_1szok {
+        } .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq).filter-tag__size-48_2ohqq {
             min-width: 116px;
         } @media (hover: hover) {
-            .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok):hover {
+            .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq):hover {
                 background-color: var(--tag-background-color-checked-hover);
             }
-        } .filter-tag__component_1szok.filter-tag__checked_1szok:not(.filter-tag__disabled_1szok):active {
+        } .filter-tag__component_2ohqq.filter-tag__checked_2ohqq:not(.filter-tag__disabled_2ohqq):active {
             background-color: var(--tag-background-color-checked-active);
-        } .filter-tag__content_1szok {
+        } .filter-tag__content_2ohqq {
     overflow: hidden;
     text-overflow: ellipsis;
-} .filter-tag__focused_1szok {
+} .filter-tag__focused_2ohqq {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .filter-tag__chevron_1szok {
+} .filter-tag__chevron_2ohqq {
     position: relative;
     transition: transform 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-light-neutral-translucent-1300);
-} .filter-tag__valueButton_1szok {
+} .filter-tag__valueButton_2ohqq {
     display: flex;
     align-items: center;
     box-shadow: none;
@@ -155,129 +155,129 @@
     border-style: solid;
     transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
     margin: 0
-} .filter-tag__valueButton_1szok.filter-tag__block_1szok {
+} .filter-tag__valueButton_2ohqq.filter-tag__block_2ohqq {
         width: inherit;
         justify-content: center;
-    } .filter-tag__valueButton_1szok:disabled {
+    } .filter-tag__valueButton_2ohqq:disabled {
         cursor: var(--disabled-cursor)
-    } .filter-tag__valueButton_1szok:disabled > .filter-tag__chevron_1szok {
+    } .filter-tag__valueButton_2ohqq:disabled > .filter-tag__chevron_2ohqq {
             color: var(--color-light-graphic-tertiary);
-        } .filter-tag__valueButton_1szok.filter-tag__rounded_1szok.filter-tag__size-32_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-32_2ohqq {
             border-radius: var(--tag-rounded-xxs-border-radius);
-        } .filter-tag__valueButton_1szok.filter-tag__rounded_1szok.filter-tag__size-40_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-40_2ohqq {
             border-radius: var(--tag-rounded-xs-border-radius);
-        } .filter-tag__valueButton_1szok.filter-tag__rounded_1szok.filter-tag__size-48_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-48_2ohqq {
             border-radius: var(--tag-rounded-s-border-radius);
-        } .filter-tag__valueButton_1szok.filter-tag__size-32_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__size-32_2ohqq {
         min-width: 60px;
         min-height: var(--size-xxs-height);
-    } .filter-tag__valueButton_1szok.filter-tag__size-40_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__size-40_2ohqq {
         min-width: 72px;
         min-height: var(--size-xs-height);
-    } .filter-tag__valueButton_1szok.filter-tag__size-48_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__size-48_2ohqq {
         min-width: 80px;
         min-height: var(--size-s-height);
-    } .filter-tag__valueButton_1szok.filter-tag__outlined_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__outlined_2ohqq {
         color: var(--tag-text-color);
         border-color: var(--tag-border-color);
         background-color: var(--tag-outlined-background-color)
-    } .filter-tag__valueButton_1szok.filter-tag__outlined_1szok:disabled {
+    } .filter-tag__valueButton_2ohqq.filter-tag__outlined_2ohqq:disabled {
             border-color: var(--tag-border-color-disabled);
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-outlined-background-color-disabled);
         } @media (hover: hover) {
-            .filter-tag__valueButton_1szok.filter-tag__outlined_1szok:not(:disabled):hover {
+            .filter-tag__valueButton_2ohqq.filter-tag__outlined_2ohqq:not(:disabled):hover {
                 border-color: var(--tag-border-color-hover);
                 background-color: var(--tag-outlined-background-color-hover);
             }
-        } .filter-tag__valueButton_1szok.filter-tag__outlined_1szok:not(:disabled):active {
+        } .filter-tag__valueButton_2ohqq.filter-tag__outlined_2ohqq:not(:disabled):active {
             border-color: var(--tag-border-color-active);
             background-color: var(--tag-outlined-background-color-active);
-        } .filter-tag__valueButton_1szok.filter-tag__filled_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__filled_2ohqq {
         color: var(--tag-text-color);
         border-color: var(--tag-filled-border-color)
-    } .filter-tag__valueButton_1szok.filter-tag__filled_1szok:disabled {
+    } .filter-tag__valueButton_2ohqq.filter-tag__filled_2ohqq:disabled {
             color: var(--tag-text-color-disabled);
-        } .filter-tag__valueButton_1szok.filter-tag__size-48_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__size-48_2ohqq {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
         padding-right: var(--gap-s);
         padding-left: var(--gap-xl)
-    } .filter-tag__valueButton_1szok.filter-tag__size-48_1szok .filter-tag__chevron_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__size-48_2ohqq .filter-tag__chevron_2ohqq {
             margin: 0 var(--gap-xs);
-        } .filter-tag__valueButton_1szok.filter-tag__size-40_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__size-40_2ohqq {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
         padding-right: var(--gap-xs);
         padding-left: var(--gap-l)
-    } .filter-tag__valueButton_1szok.filter-tag__size-40_1szok .filter-tag__chevron_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__size-40_2ohqq .filter-tag__chevron_2ohqq {
             margin: 0 var(--gap-s) 0 6px;
-        } .filter-tag__valueButton_1szok.filter-tag__size-32_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__size-32_2ohqq {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
         padding-right: var(--gap-2xs);
         padding-left: var(--gap-m)
-    } .filter-tag__valueButton_1szok.filter-tag__size-32_1szok .filter-tag__chevron_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__size-32_2ohqq .filter-tag__chevron_2ohqq {
             margin: 0 var(--gap-xs) 0 6px;
-        } .filter-tag__valueButton_1szok.filter-tag__open_1szok .filter-tag__chevron_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__open_2ohqq .filter-tag__chevron_2ohqq {
         transform: rotateZ(180deg);
-    } .filter-tag__valueButton_1szok.filter-tag__checked_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq {
         border-width: 0;
         color: var(--tag-text-color-checked);
         background-color: var(--tag-background-color-checked)
-    } .filter-tag__valueButton_1szok.filter-tag__checked_1szok > .filter-tag__chevron_1szok {
+    } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq > .filter-tag__chevron_2ohqq {
             color: var(--color-light-neutral-translucent-1300-inverted);
-        } .filter-tag__valueButton_1szok.filter-tag__checked_1szok.filter-tag__rounded_1szok.filter-tag__size-32_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-32_2ohqq {
                 border-radius: var(--tag-rounded-xxs-border-radius) 0 0
                     var(--tag-rounded-xxs-border-radius);
-            } .filter-tag__valueButton_1szok.filter-tag__checked_1szok.filter-tag__rounded_1szok.filter-tag__size-40_1szok {
+            } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-40_2ohqq {
                 border-radius: var(--tag-rounded-xs-border-radius) 0 0
                     var(--tag-rounded-xs-border-radius);
-            } .filter-tag__valueButton_1szok.filter-tag__checked_1szok.filter-tag__rounded_1szok.filter-tag__size-48_1szok {
+            } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-48_2ohqq {
                 border-radius: var(--tag-rounded-s-border-radius) 0 0
                     var(--tag-rounded-s-border-radius);
-            } .filter-tag__valueButton_1szok.filter-tag__checked_1szok.filter-tag__rounded_1szok:disabled,
-            .filter-tag__valueButton_1szok.filter-tag__checked_1szok.filter-tag__rounded_1szok.filter-tag__close_1szok {
+            } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq.filter-tag__rounded_2ohqq:disabled,
+            .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq.filter-tag__rounded_2ohqq.filter-tag__close_2ohqq {
                 border-radius: var(--tag-border-radius);
-            } .filter-tag__valueButton_1szok.filter-tag__checked_1szok:not(:disabled) {
+            } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:not(:disabled) {
             padding-right: 0;
             border-right-width: 0;
         } @media (hover: hover) {
-            .filter-tag__valueButton_1szok.filter-tag__checked_1szok:not(:disabled):hover {
+            .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:not(:disabled):hover {
                 background-color: var(--tag-background-color-checked-hover);
             }
-        } .filter-tag__valueButton_1szok.filter-tag__checked_1szok:not(:disabled):active {
+        } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:not(:disabled):active {
             background-color: var(--tag-background-color-checked-active);
         } @media (hover: hover) {
-            .filter-tag__valueButton_1szok.filter-tag__checked_1szok:not(:disabled):hover + .filter-tag__clear_1szok:before {
+            .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:not(:disabled):hover + .filter-tag__clear_2ohqq:before {
                 background-color: var(--filter-tag-separator-background-color-hover);
             }
-        } .filter-tag__valueButton_1szok.filter-tag__checked_1szok:not(:disabled):active + .filter-tag__clear_1szok:before {
+        } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:not(:disabled):active + .filter-tag__clear_2ohqq:before {
             background-color: transparent;
-        } .filter-tag__valueButton_1szok.filter-tag__checked_1szok:disabled {
+        } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:disabled {
             color: var(--tag-text-color-checked-disabled);
             background-color: var(--tag-background-color-checked-disabled)
-        } .filter-tag__valueButton_1szok.filter-tag__checked_1szok:disabled > .filter-tag__chevron_1szok {
+        } .filter-tag__valueButton_2ohqq.filter-tag__checked_2ohqq:disabled > .filter-tag__chevron_2ohqq {
                 color: var(--color-light-graphic-tertiary);
-            } .filter-tag__clear_1szok {
+            } .filter-tag__clear_2ohqq {
     position: relative;
     cursor: pointer;
     display: flex;
     align-items: center;
     color: var(--color-light-neutral-translucent-700-inverted);
     background-color: var(--tag-background-color-checked)
-} .filter-tag__clear_1szok.filter-tag__rounded_1szok.filter-tag__size-32_1szok {
+} .filter-tag__clear_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-32_2ohqq {
             border-radius: 0 var(--tag-rounded-xxs-border-radius)
                 var(--tag-rounded-xxs-border-radius) 0;
-        } .filter-tag__clear_1szok.filter-tag__rounded_1szok.filter-tag__size-40_1szok {
+        } .filter-tag__clear_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-40_2ohqq {
             border-radius: 0 var(--tag-rounded-xs-border-radius) var(--tag-rounded-xs-border-radius)
                 0;
-        } .filter-tag__clear_1szok.filter-tag__rounded_1szok.filter-tag__size-48_1szok {
+        } .filter-tag__clear_2ohqq.filter-tag__rounded_2ohqq.filter-tag__size-48_2ohqq {
             border-radius: 0 var(--tag-rounded-s-border-radius) var(--tag-rounded-s-border-radius) 0;
-        } .filter-tag__clear_1szok:before {
+        } .filter-tag__clear_2ohqq:before {
         content: '';
         position: absolute;
         left: 0;
@@ -288,32 +288,32 @@
         width: 1px;
         transition: background-color 0.2s ease;
     } @media (hover: hover) {
-        .filter-tag__clear_1szok:hover:before {
+        .filter-tag__clear_2ohqq:hover:before {
             background-color: var(--filter-tag-separator-background-color-hover);
         }
-    } .filter-tag__clear_1szok:active:before {
+    } .filter-tag__clear_2ohqq:active:before {
         background-color: transparent;
     } @media (hover: hover) {
-        .filter-tag__clear_1szok:hover {
+        .filter-tag__clear_2ohqq:hover {
             color: var(--color-light-neutral-translucent-700-inverted-hover);
             background-color: var(--tag-background-color-checked-hover);
         }
-    } .filter-tag__clear_1szok:active {
+    } .filter-tag__clear_2ohqq:active {
         color: var(--color-light-neutral-translucent-700-inverted-press);
         background-color: var(--tag-background-color-checked-active);
-    } .filter-tag__clear_1szok.filter-tag__size-48_1szok {
+    } .filter-tag__clear_2ohqq.filter-tag__size-48_2ohqq {
         padding: 0 var(--gap-s) 0 var(--gap-xs)
-    } .filter-tag__clear_1szok.filter-tag__size-48_1szok:before {
+    } .filter-tag__clear_2ohqq.filter-tag__size-48_2ohqq:before {
             height: 24px;
-        } .filter-tag__clear_1szok.filter-tag__size-40_1szok {
+        } .filter-tag__clear_2ohqq.filter-tag__size-40_2ohqq {
         padding: 0 var(--gap-xs)
-    } .filter-tag__clear_1szok.filter-tag__size-40_1szok:before {
+    } .filter-tag__clear_2ohqq.filter-tag__size-40_2ohqq:before {
             height: 24px;
-        } .filter-tag__clear_1szok.filter-tag__size-32_1szok {
+        } .filter-tag__clear_2ohqq.filter-tag__size-32_2ohqq {
         padding: 0 3px 0 var(--gap-2xs)
-    } .filter-tag__clear_1szok.filter-tag__size-32_1szok:before {
+    } .filter-tag__clear_2ohqq.filter-tag__size-32_2ohqq:before {
             height: 20px;
-        } .filter-tag__iconWrapper_1szok {
+        } .filter-tag__iconWrapper_2ohqq {
     width: 24px;
     height: 24px;
     display: flex;

package/filter-tag/cssm/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var FilterTag = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.FilterTagDesktop : mobile_Component_mobile.FilterTagMobile;

package/filter-tag/desktop/Component.desktop.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"filter-tag__component_l7s6c","rectangular":"filter-tag__rectangular_l7s6c","size-32":"filter-tag__size-32_l7s6c","size-40":"filter-tag__size-40_l7s6c","size-48":"filter-tag__size-48_l7s6c","valueButton":"filter-tag__valueButton_l7s6c","filled":"filter-tag__filled_l7s6c","checked":"filter-tag__checked_l7s6c","close":"filter-tag__close_l7s6c","clear":"filter-tag__clear_l7s6c"};
+var styles = {"component":"filter-tag__component_56q28","rectangular":"filter-tag__rectangular_56q28","size-32":"filter-tag__size-32_56q28","size-40":"filter-tag__size-40_56q28","size-48":"filter-tag__size-48_56q28","valueButton":"filter-tag__valueButton_56q28","filled":"filter-tag__filled_56q28","checked":"filter-tag__checked_56q28","close":"filter-tag__close_56q28","clear":"filter-tag__clear_56q28"};
 require('./desktop.css');
 
 var FilterTagDesktop = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_baseFilterTag_Component.BaseFilterTag, tslib.__assign({}, restProps, { ref: ref, styles: styles })); });

package/filter-tag/desktop/desktop.css

@@ -52,50 +52,50 @@
     /* mobile */
 
     /* mobile inverted */
-} .filter-tag__component_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-32_l7s6c {
+} .filter-tag__component_56q28.filter-tag__rectangular_56q28.filter-tag__size-32_56q28 {
             border-radius: var(--tag-rectangular-xxs-border-radius);
-        } .filter-tag__component_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-40_l7s6c {
+        } .filter-tag__component_56q28.filter-tag__rectangular_56q28.filter-tag__size-40_56q28 {
             border-radius: var(--tag-rectangular-xs-border-radius);
-        } .filter-tag__component_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-48_l7s6c {
+        } .filter-tag__component_56q28.filter-tag__rectangular_56q28.filter-tag__size-48_56q28 {
             border-radius: var(--tag-rectangular-s-border-radius);
-        } .filter-tag__valueButton_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-32_l7s6c {
+        } .filter-tag__valueButton_56q28.filter-tag__rectangular_56q28.filter-tag__size-32_56q28 {
             border-radius: var(--tag-rectangular-xxs-border-radius);
-        } .filter-tag__valueButton_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-40_l7s6c {
+        } .filter-tag__valueButton_56q28.filter-tag__rectangular_56q28.filter-tag__size-40_56q28 {
             border-radius: var(--tag-rectangular-xs-border-radius);
-        } .filter-tag__valueButton_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-48_l7s6c {
+        } .filter-tag__valueButton_56q28.filter-tag__rectangular_56q28.filter-tag__size-48_56q28 {
             border-radius: var(--tag-rectangular-s-border-radius);
-        } .filter-tag__valueButton_l7s6c.filter-tag__filled_l7s6c {
+        } .filter-tag__valueButton_56q28.filter-tag__filled_56q28 {
         background-color: var(--tag-filled-background-color)
-    } .filter-tag__valueButton_l7s6c.filter-tag__filled_l7s6c:disabled {
+    } .filter-tag__valueButton_56q28.filter-tag__filled_56q28:disabled {
             background-color: var(--tag-filled-background-color-disabled);
         } @media (hover: hover) {
-            .filter-tag__valueButton_l7s6c.filter-tag__filled_l7s6c:not(:disabled):hover {
+            .filter-tag__valueButton_56q28.filter-tag__filled_56q28:not(:disabled):hover {
                 background-color: var(--tag-filled-background-color-hover);
             }
-        } .filter-tag__valueButton_l7s6c.filter-tag__filled_l7s6c:not(:disabled):active {
+        } .filter-tag__valueButton_56q28.filter-tag__filled_56q28:not(:disabled):active {
             background-color: var(--tag-filled-background-color-active);
-        } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-32_l7s6c {
+        } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__size-32_56q28 {
                 border-radius: var(--tag-rectangular-xxs-border-radius) 0 0
                     var(--tag-rectangular-xxs-border-radius);
-            } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-40_l7s6c {
+            } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__size-40_56q28 {
                 border-radius: var(--tag-rectangular-xs-border-radius) 0 0
                     var(--tag-rectangular-xs-border-radius);
-            } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-48_l7s6c {
+            } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__size-48_56q28 {
                 border-radius: var(--tag-rectangular-s-border-radius) 0 0
                     var(--tag-rectangular-s-border-radius);
-            } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c:disabled.filter-tag__size-32_l7s6c, .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__close_l7s6c.filter-tag__size-32_l7s6c {
+            } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28:disabled.filter-tag__size-32_56q28, .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__close_56q28.filter-tag__size-32_56q28 {
                     border-radius: var(--tag-rectangular-xxs-border-radius);
-                } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c:disabled.filter-tag__size-40_l7s6c, .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__close_l7s6c.filter-tag__size-40_l7s6c {
+                } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28:disabled.filter-tag__size-40_56q28, .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__close_56q28.filter-tag__size-40_56q28 {
                     border-radius: var(--tag-rectangular-xs-border-radius);
-                } .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c:disabled.filter-tag__size-48_l7s6c, .filter-tag__valueButton_l7s6c.filter-tag__checked_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__close_l7s6c.filter-tag__size-48_l7s6c {
+                } .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28:disabled.filter-tag__size-48_56q28, .filter-tag__valueButton_56q28.filter-tag__checked_56q28.filter-tag__rectangular_56q28.filter-tag__close_56q28.filter-tag__size-48_56q28 {
                     border-radius: var(--tag-rectangular-s-border-radius);
-                } .filter-tag__clear_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-32_l7s6c {
+                } .filter-tag__clear_56q28.filter-tag__rectangular_56q28.filter-tag__size-32_56q28 {
             border-radius: 0 var(--tag-rectangular-xxs-border-radius)
                 var(--tag-rectangular-xxs-border-radius) 0;
-        } .filter-tag__clear_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-40_l7s6c {
+        } .filter-tag__clear_56q28.filter-tag__rectangular_56q28.filter-tag__size-40_56q28 {
             border-radius: 0 var(--tag-rectangular-xs-border-radius)
                 var(--tag-rectangular-xs-border-radius) 0;
-        } .filter-tag__clear_l7s6c.filter-tag__rectangular_l7s6c.filter-tag__size-48_l7s6c {
+        } .filter-tag__clear_56q28.filter-tag__rectangular_56q28.filter-tag__size-48_56q28 {
             border-radius: 0 var(--tag-rectangular-s-border-radius)
                 var(--tag-rectangular-s-border-radius) 0;
         }

package/filter-tag/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { FilterTagDesktop } from './desktop/Component.desktop.js';
 import { FilterTagMobile } from './mobile/Component.mobile.js';
 import './components/base-filter-tag/Component.js';
@@ -12,7 +13,7 @@ import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
 
 var FilterTag = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? FilterTagDesktop : FilterTagMobile;

package/filter-tag/esm/components/base-filter-tag/Component.js

@@ -6,7 +6,7 @@ import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
 
-var commonStyles = {"component":"filter-tag__component_1szok","block":"filter-tag__block_1szok","disabled":"filter-tag__disabled_1szok","rounded":"filter-tag__rounded_1szok","size-32":"filter-tag__size-32_1szok","size-40":"filter-tag__size-40_1szok","size-48":"filter-tag__size-48_1szok","checked":"filter-tag__checked_1szok","content":"filter-tag__content_1szok","focused":"filter-tag__focused_1szok","chevron":"filter-tag__chevron_1szok","valueButton":"filter-tag__valueButton_1szok","outlined":"filter-tag__outlined_1szok","filled":"filter-tag__filled_1szok","open":"filter-tag__open_1szok","close":"filter-tag__close_1szok","clear":"filter-tag__clear_1szok","iconWrapper":"filter-tag__iconWrapper_1szok"};
+var commonStyles = {"component":"filter-tag__component_2ohqq","block":"filter-tag__block_2ohqq","disabled":"filter-tag__disabled_2ohqq","rounded":"filter-tag__rounded_2ohqq","size-32":"filter-tag__size-32_2ohqq","size-40":"filter-tag__size-40_2ohqq","size-48":"filter-tag__size-48_2ohqq","checked":"filter-tag__checked_2ohqq","content":"filter-tag__content_2ohqq","focused":"filter-tag__focused_2ohqq","chevron":"filter-tag__chevron_2ohqq","valueButton":"filter-tag__valueButton_2ohqq","outlined":"filter-tag__outlined_2ohqq","filled":"filter-tag__filled_2ohqq","open":"filter-tag__open_2ohqq","close":"filter-tag__close_2ohqq","clear":"filter-tag__clear_2ohqq","iconWrapper":"filter-tag__iconWrapper_2ohqq"};
 require('./index.css');
 
 var isKeyBoardEvent = function (event) {