@alfalab/core-components 38.4.0 → 39.0.0-beta.2

package/tag/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: yaech */
+/* hash: 1xjw9 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #0b1f35;
@@ -74,41 +74,41 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_18oy8.tag__outlined_18oy8 {
+} .tag__component_1q3wu.tag__outlined_1q3wu {
         color: var(--tag-text-color);
         border-color: var(--tag-border-color);
         background-color: var(--tag-outlined-background-color)
-    } .tag__component_18oy8.tag__outlined_18oy8:disabled {
+    } .tag__component_1q3wu.tag__outlined_1q3wu:disabled {
             border-color: var(--tag-border-color-disabled);
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-outlined-background-color-disabled);
-        } .tag__component_18oy8.tag__outlined_18oy8:hover:not(:disabled) {
+        } .tag__component_1q3wu.tag__outlined_1q3wu:hover:not(:disabled) {
             border-color: var(--tag-border-color-hover);
             background-color: var(--tag-outlined-background-color-hover);
-        } .tag__component_18oy8.tag__outlined_18oy8:active:not(:disabled) {
+        } .tag__component_1q3wu.tag__outlined_1q3wu:active:not(:disabled) {
             border-color: var(--tag-border-color-active);
             background-color: var(--tag-outlined-background-color-active);
-        } .tag__component_18oy8.tag__filled_18oy8 {
+        } .tag__component_1q3wu.tag__filled_1q3wu {
         color: var(--tag-text-color);
         border-color: var(--tag-filled-border-color);
         background-color: var(--tag-filled-background-color)
-    } .tag__component_18oy8.tag__filled_18oy8:disabled {
+    } .tag__component_1q3wu.tag__filled_1q3wu:disabled {
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-filled-background-color-disabled);
-        } .tag__component_18oy8.tag__filled_18oy8:hover:not(:disabled) {
+        } .tag__component_1q3wu.tag__filled_1q3wu:hover:not(:disabled) {
             background-color: var(--tag-filled-background-color-hover);
-        } .tag__component_18oy8.tag__filled_18oy8:active:not(:disabled) {
+        } .tag__component_1q3wu.tag__filled_1q3wu:active:not(:disabled) {
             background-color: var(--tag-filled-background-color-active);
-        } .tag__component_18oy8.tag__checked_18oy8 {
+        } .tag__component_1q3wu.tag__checked_1q3wu {
         border-color: var(--tag-border-color-checked);
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked)
-    } .tag__component_18oy8.tag__checked_18oy8:disabled {
+    } .tag__component_1q3wu.tag__checked_1q3wu:disabled {
             background-color: var(--tag-background-color-checked-disabled);
             border-color: var(--tag-border-color-checked-disabled);
             color: var(--tag-text-color-checked-disabled);
-        } .tag__component_18oy8.tag__checked_18oy8:hover:not(:disabled) {
+        } .tag__component_1q3wu.tag__checked_1q3wu:hover:not(:disabled) {
             background-color: var(--tag-background-color-checked-hover);
-        } .tag__component_18oy8.tag__checked_18oy8:active:not(:disabled) {
+        } .tag__component_1q3wu.tag__checked_1q3wu:active:not(:disabled) {
             background-color: var(--tag-background-color-checked-active);
         }

package/tag/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1d7yq */
+/* hash: 11m6v */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #007aff;
@@ -66,7 +66,7 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_1yt9n {
+} .tag__component_yim2w {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -82,144 +82,146 @@
     -webkit-user-select: none;
             user-select: none;
     cursor: pointer;
-    outline: none
-} .tag__component_1yt9n:disabled {
+    outline: none;
+    white-space: nowrap
+} .tag__component_yim2w:disabled {
         cursor: var(--disabled-cursor);
-    } .tag__focused_1yt9n {
+    } .tag__focused_yim2w {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tag__addons_1yt9n {
+} .tag__addons_yim2w {
     display: flex;
     flex-shrink: 0;
     align-items: center
-} .tag__addons_1yt9n:first-child {
+} .tag__addons_yim2w:first-child {
         margin-right: var(--gap-2xs);
-    } .tag__addons_1yt9n:last-child {
+    } .tag__addons_yim2w:last-child {
         margin-left: var(--gap-2xs);
-    } .tag__addons_1yt9n:only-child {
+    } .tag__addons_yim2w:only-child {
         margin: 0;
-    } .tag__s_1yt9n .tag__addons_1yt9n:first-child, .tag__m_1yt9n .tag__addons_1yt9n:first-child {
+    } .tag__s_yim2w .tag__addons_yim2w:first-child, .tag__m_yim2w .tag__addons_yim2w:first-child {
         margin-right: var(--gap-xs);
-    } .tag__s_1yt9n .tag__addons_1yt9n:last-child, .tag__m_1yt9n .tag__addons_1yt9n:last-child {
+    } .tag__s_yim2w .tag__addons_yim2w:last-child, .tag__m_yim2w .tag__addons_yim2w:last-child {
         margin-left: var(--gap-xs);
-    } .tag__l_1yt9n .tag__addons_1yt9n:first-child, .tag__xl_1yt9n .tag__addons_1yt9n:first-child {
+    } .tag__l_yim2w .tag__addons_yim2w:first-child, .tag__xl_yim2w .tag__addons_yim2w:first-child {
         margin-right: var(--gap-s);
-    } .tag__l_1yt9n .tag__addons_1yt9n:last-child, .tag__xl_1yt9n .tag__addons_1yt9n:last-child {
+    } .tag__l_yim2w .tag__addons_yim2w:last-child, .tag__xl_yim2w .tag__addons_yim2w:last-child {
         margin-left: var(--gap-s);
-    } .tag__xxs_1yt9n {
+    } .tag__xxs_yim2w {
     min-width: 60px;
     min-height: var(--size-xxs-height);
     padding: 0 var(--gap-m);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
-    } .tag__xs_1yt9n {
+    } .tag__xs_yim2w {
     min-width: 72px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-l);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
-    } .tag__s_1yt9n {
+    } .tag__s_yim2w {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
     font-size: 16px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
-    } .tag__m_1yt9n {
+    } .tag__m_yim2w {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     min-width: 96px;
     min-height: var(--size-m-height);
     padding: 0 28px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
-    } .tag__l_1yt9n {
+    } .tag__l_yim2w {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-l-height);
     padding: 0 var(--gap-2xl)
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
-    } .tag__xl_1yt9n {
+    } .tag__xl_yim2w {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-xl-height);
     padding: 0 36px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
-    } .tag__withRightAddons_1yt9n.tag__xxs_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xxs_yim2w {
         padding-right: var(--gap-s);
-    } .tag__withRightAddons_1yt9n.tag__xs_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xs_yim2w {
         padding-right: var(--gap-m);
-    } .tag__withRightAddons_1yt9n.tag__s_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__s_yim2w {
         padding-right: var(--gap-l);
-    } .tag__withRightAddons_1yt9n.tag__m_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__m_yim2w {
         padding-right: var(--gap-xl);
-    } .tag__withRightAddons_1yt9n.tag__l_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__l_yim2w {
         padding-right: 28px;
-    } .tag__withRightAddons_1yt9n.tag__xl_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xl_yim2w {
         padding-right: var(--gap-2xl);
-    } .tag__withLeftAddons_1yt9n.tag__xxs_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xxs_yim2w {
         padding-left: var(--gap-s);
-    } .tag__withLeftAddons_1yt9n.tag__xs_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xs_yim2w {
         padding-left: var(--gap-m);
-    } .tag__withLeftAddons_1yt9n.tag__s_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__s_yim2w {
         padding-left: var(--gap-l);
-    } .tag__withLeftAddons_1yt9n.tag__m_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__m_yim2w {
         padding-left: var(--gap-xl);
-    } .tag__withLeftAddons_1yt9n.tag__l_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__l_yim2w {
         padding-left: 28px;
-    } .tag__withLeftAddons_1yt9n.tag__xl_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xl_yim2w {
         padding-left: var(--gap-2xl);
-    } .tag__rounded_1yt9n.tag__xxs_1yt9n {
+    } .tag__rounded_yim2w.tag__xxs_yim2w {
         border-radius: var(--tag-rounded-xxs-border-radius);
-    } .tag__rounded_1yt9n.tag__xs_1yt9n {
+    } .tag__rounded_yim2w.tag__xs_yim2w {
         border-radius: var(--tag-rounded-xs-border-radius);
-    } .tag__rounded_1yt9n.tag__s_1yt9n {
+    } .tag__rounded_yim2w.tag__s_yim2w {
         border-radius: var(--tag-rounded-s-border-radius);
-    } .tag__rounded_1yt9n.tag__m_1yt9n,
-    .tag__rounded_1yt9n.tag__l_1yt9n,
-    .tag__rounded_1yt9n.tag__xl_1yt9n {
+    } .tag__rounded_yim2w.tag__m_yim2w,
+    .tag__rounded_yim2w.tag__l_yim2w,
+    .tag__rounded_yim2w.tag__xl_yim2w {
         border-radius: var(--tag-border-radius);
-    } .tag__rectangular_1yt9n.tag__xxs_1yt9n {
+    } .tag__rectangular_yim2w.tag__xxs_yim2w {
         border-radius: var(--tag-rectangular-xxs-border-radius);
-    } .tag__rectangular_1yt9n.tag__xs_1yt9n {
+    } .tag__rectangular_yim2w.tag__xs_yim2w {
         border-radius: var(--tag-rectangular-xs-border-radius);
-    } .tag__rectangular_1yt9n.tag__s_1yt9n {
+    } .tag__rectangular_yim2w.tag__s_yim2w {
         border-radius: var(--tag-rectangular-s-border-radius);
-    } .tag__rectangular_1yt9n.tag__m_1yt9n,
-    .tag__rectangular_1yt9n.tag__l_1yt9n,
-    .tag__rectangular_1yt9n.tag__xl_1yt9n {
+    } .tag__rectangular_yim2w.tag__m_yim2w,
+    .tag__rectangular_yim2w.tag__l_yim2w,
+    .tag__rectangular_yim2w.tag__xl_yim2w {
         border-radius: var(--tag-alt-border-radius);
     }
+

package/tag/esm/index.js

@@ -4,3 +4,4 @@ import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/hooks';
+import './utils.js';

package/tag/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: gojw3 */
+/* hash: 1fy1s */
 :root {
 } /* deprecated */ :root {
     --color-dark-bg-primary-inverted: #fff;
@@ -79,41 +79,41 @@
     --tag-inverted-text-color-checked: var(--color-dark-text-primary-inverted);
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
-} .tag__component_1m73j.tag__outlined_1m73j {
+} .tag__component_4ky3o.tag__outlined_4ky3o {
         color: var(--tag-inverted-text-color);
         border-color: var(--tag-inverted-border-color);
         background-color: var(--tag-inverted-outlined-background-color)
-    } .tag__component_1m73j.tag__outlined_1m73j:disabled {
+    } .tag__component_4ky3o.tag__outlined_4ky3o:disabled {
             border-color: var(--tag-inverted-border-color-disabled);
             color: var(--tag-inverted-text-color-disabled);
             background-color: var(--tag-inverted-outlined-background-color-disabled);
-        } .tag__component_1m73j.tag__outlined_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__outlined_4ky3o:hover:not(:disabled) {
             border-color: var(--tag-inverted-border-color-hover);
             background-color: var(--tag-inverted-outlined-background-color-hover);
-        } .tag__component_1m73j.tag__outlined_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__outlined_4ky3o:active:not(:disabled) {
             border-color: var(--tag-inverted-border-color-active);
             background-color: var(--tag-inverted-outlined-background-color-active);
-        } .tag__component_1m73j.tag__filled_1m73j {
+        } .tag__component_4ky3o.tag__filled_4ky3o {
         color: var(--tag-inverted-text-color);
         border-color: var(--tag-inverted-filled-border-color);
         background-color: var(--tag-inverted-filled-background-color)
-    } .tag__component_1m73j.tag__filled_1m73j:disabled {
+    } .tag__component_4ky3o.tag__filled_4ky3o:disabled {
             color: var(--tag-inverted-text-color-disabled);
             background-color: var(--tag-inverted-filled-background-color-disabled);
-        } .tag__component_1m73j.tag__filled_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__filled_4ky3o:hover:not(:disabled) {
             background-color: var(--tag-inverted-filled-background-color-hover);
-        } .tag__component_1m73j.tag__filled_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__filled_4ky3o:active:not(:disabled) {
             background-color: var(--tag-inverted-filled-background-color-active);
-        } .tag__component_1m73j.tag__checked_1m73j {
+        } .tag__component_4ky3o.tag__checked_4ky3o {
         border-color: var(--tag-inverted-border-color-checked);
         background-color: var(--tag-inverted-background-color-checked);
         color: var(--tag-inverted-text-color-checked)
-    } .tag__component_1m73j.tag__checked_1m73j:disabled {
+    } .tag__component_4ky3o.tag__checked_4ky3o:disabled {
             background-color: var(--tag-inverted-background-color-checked-disabled);
             border-color: var(--tag-inverted-border-color-checked-disabled);
             color: var(--tag-inverted-text-color-checked-disabled);
-        } .tag__component_1m73j.tag__checked_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__checked_4ky3o:hover:not(:disabled) {
             background-color: var(--tag-inverted-background-color-checked-hover);
-        } .tag__component_1m73j.tag__checked_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__checked_4ky3o:active:not(:disabled) {
             background-color: var(--tag-inverted-background-color-checked-active);
         }

package/tag/esm/utils.d.ts

@@ -0,0 +1,2 @@
+declare const calculatePaddingWidth: (element: HTMLElement) => number;
+export { calculatePaddingWidth };

package/tag/esm/utils.js

@@ -0,0 +1,10 @@
+var calculatePaddingWidth = function (element) {
+    var _a = getComputedStyle(element), paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight;
+    var result = parseInt(paddingLeft, 10) + parseInt(paddingRight, 10);
+    if (Number.isNaN(result)) {
+        return 0;
+    }
+    return result;
+};
+
+export { calculatePaddingWidth };

package/tag/index.css

@@ -1,4 +1,4 @@
-/* hash: 1d7yq */
+/* hash: 11m6v */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #007aff;
@@ -66,7 +66,7 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_1yt9n {
+} .tag__component_yim2w {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -82,144 +82,146 @@
     -webkit-user-select: none;
             user-select: none;
     cursor: pointer;
-    outline: none
-} .tag__component_1yt9n:disabled {
+    outline: none;
+    white-space: nowrap
+} .tag__component_yim2w:disabled {
         cursor: var(--disabled-cursor);
-    } .tag__focused_1yt9n {
+    } .tag__focused_yim2w {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tag__addons_1yt9n {
+} .tag__addons_yim2w {
     display: flex;
     flex-shrink: 0;
     align-items: center
-} .tag__addons_1yt9n:first-child {
+} .tag__addons_yim2w:first-child {
         margin-right: var(--gap-2xs);
-    } .tag__addons_1yt9n:last-child {
+    } .tag__addons_yim2w:last-child {
         margin-left: var(--gap-2xs);
-    } .tag__addons_1yt9n:only-child {
+    } .tag__addons_yim2w:only-child {
         margin: 0;
-    } .tag__s_1yt9n .tag__addons_1yt9n:first-child, .tag__m_1yt9n .tag__addons_1yt9n:first-child {
+    } .tag__s_yim2w .tag__addons_yim2w:first-child, .tag__m_yim2w .tag__addons_yim2w:first-child {
         margin-right: var(--gap-xs);
-    } .tag__s_1yt9n .tag__addons_1yt9n:last-child, .tag__m_1yt9n .tag__addons_1yt9n:last-child {
+    } .tag__s_yim2w .tag__addons_yim2w:last-child, .tag__m_yim2w .tag__addons_yim2w:last-child {
         margin-left: var(--gap-xs);
-    } .tag__l_1yt9n .tag__addons_1yt9n:first-child, .tag__xl_1yt9n .tag__addons_1yt9n:first-child {
+    } .tag__l_yim2w .tag__addons_yim2w:first-child, .tag__xl_yim2w .tag__addons_yim2w:first-child {
         margin-right: var(--gap-s);
-    } .tag__l_1yt9n .tag__addons_1yt9n:last-child, .tag__xl_1yt9n .tag__addons_1yt9n:last-child {
+    } .tag__l_yim2w .tag__addons_yim2w:last-child, .tag__xl_yim2w .tag__addons_yim2w:last-child {
         margin-left: var(--gap-s);
-    } .tag__xxs_1yt9n {
+    } .tag__xxs_yim2w {
     min-width: 60px;
     min-height: var(--size-xxs-height);
     padding: 0 var(--gap-m);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
-    } .tag__xs_1yt9n {
+    } .tag__xs_yim2w {
     min-width: 72px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-l);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
-    } .tag__s_1yt9n {
+    } .tag__s_yim2w {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
     font-size: 16px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
-    } .tag__m_1yt9n {
+    } .tag__m_yim2w {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     min-width: 96px;
     min-height: var(--size-m-height);
     padding: 0 28px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
-    } .tag__l_1yt9n {
+    } .tag__l_yim2w {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-l-height);
     padding: 0 var(--gap-2xl)
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
-    } .tag__xl_1yt9n {
+    } .tag__xl_yim2w {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-xl-height);
     padding: 0 36px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_1yt9n {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_yim2w {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
-    } .tag__withRightAddons_1yt9n.tag__xxs_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xxs_yim2w {
         padding-right: var(--gap-s);
-    } .tag__withRightAddons_1yt9n.tag__xs_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xs_yim2w {
         padding-right: var(--gap-m);
-    } .tag__withRightAddons_1yt9n.tag__s_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__s_yim2w {
         padding-right: var(--gap-l);
-    } .tag__withRightAddons_1yt9n.tag__m_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__m_yim2w {
         padding-right: var(--gap-xl);
-    } .tag__withRightAddons_1yt9n.tag__l_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__l_yim2w {
         padding-right: 28px;
-    } .tag__withRightAddons_1yt9n.tag__xl_1yt9n {
+    } .tag__withRightAddons_yim2w.tag__xl_yim2w {
         padding-right: var(--gap-2xl);
-    } .tag__withLeftAddons_1yt9n.tag__xxs_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xxs_yim2w {
         padding-left: var(--gap-s);
-    } .tag__withLeftAddons_1yt9n.tag__xs_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xs_yim2w {
         padding-left: var(--gap-m);
-    } .tag__withLeftAddons_1yt9n.tag__s_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__s_yim2w {
         padding-left: var(--gap-l);
-    } .tag__withLeftAddons_1yt9n.tag__m_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__m_yim2w {
         padding-left: var(--gap-xl);
-    } .tag__withLeftAddons_1yt9n.tag__l_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__l_yim2w {
         padding-left: 28px;
-    } .tag__withLeftAddons_1yt9n.tag__xl_1yt9n {
+    } .tag__withLeftAddons_yim2w.tag__xl_yim2w {
         padding-left: var(--gap-2xl);
-    } .tag__rounded_1yt9n.tag__xxs_1yt9n {
+    } .tag__rounded_yim2w.tag__xxs_yim2w {
         border-radius: var(--tag-rounded-xxs-border-radius);
-    } .tag__rounded_1yt9n.tag__xs_1yt9n {
+    } .tag__rounded_yim2w.tag__xs_yim2w {
         border-radius: var(--tag-rounded-xs-border-radius);
-    } .tag__rounded_1yt9n.tag__s_1yt9n {
+    } .tag__rounded_yim2w.tag__s_yim2w {
         border-radius: var(--tag-rounded-s-border-radius);
-    } .tag__rounded_1yt9n.tag__m_1yt9n,
-    .tag__rounded_1yt9n.tag__l_1yt9n,
-    .tag__rounded_1yt9n.tag__xl_1yt9n {
+    } .tag__rounded_yim2w.tag__m_yim2w,
+    .tag__rounded_yim2w.tag__l_yim2w,
+    .tag__rounded_yim2w.tag__xl_yim2w {
         border-radius: var(--tag-border-radius);
-    } .tag__rectangular_1yt9n.tag__xxs_1yt9n {
+    } .tag__rectangular_yim2w.tag__xxs_yim2w {
         border-radius: var(--tag-rectangular-xxs-border-radius);
-    } .tag__rectangular_1yt9n.tag__xs_1yt9n {
+    } .tag__rectangular_yim2w.tag__xs_yim2w {
         border-radius: var(--tag-rectangular-xs-border-radius);
-    } .tag__rectangular_1yt9n.tag__s_1yt9n {
+    } .tag__rectangular_yim2w.tag__s_yim2w {
         border-radius: var(--tag-rectangular-s-border-radius);
-    } .tag__rectangular_1yt9n.tag__m_1yt9n,
-    .tag__rectangular_1yt9n.tag__l_1yt9n,
-    .tag__rectangular_1yt9n.tag__xl_1yt9n {
+    } .tag__rectangular_yim2w.tag__m_yim2w,
+    .tag__rectangular_yim2w.tag__l_yim2w,
+    .tag__rectangular_yim2w.tag__xl_yim2w {
         border-radius: var(--tag-alt-border-radius);
     }
+

package/tag/index.js

@@ -4,6 +4,7 @@ require('react');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/hooks');
+require('./utils.js');
 
 
 

package/tag/inverted.css

@@ -1,4 +1,4 @@
-/* hash: gojw3 */
+/* hash: 1fy1s */
 :root {
 } /* deprecated */ :root {
     --color-dark-bg-primary-inverted: #fff;
@@ -79,41 +79,41 @@
     --tag-inverted-text-color-checked: var(--color-dark-text-primary-inverted);
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
-} .tag__component_1m73j.tag__outlined_1m73j {
+} .tag__component_4ky3o.tag__outlined_4ky3o {
         color: var(--tag-inverted-text-color);
         border-color: var(--tag-inverted-border-color);
         background-color: var(--tag-inverted-outlined-background-color)
-    } .tag__component_1m73j.tag__outlined_1m73j:disabled {
+    } .tag__component_4ky3o.tag__outlined_4ky3o:disabled {
             border-color: var(--tag-inverted-border-color-disabled);
             color: var(--tag-inverted-text-color-disabled);
             background-color: var(--tag-inverted-outlined-background-color-disabled);
-        } .tag__component_1m73j.tag__outlined_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__outlined_4ky3o:hover:not(:disabled) {
             border-color: var(--tag-inverted-border-color-hover);
             background-color: var(--tag-inverted-outlined-background-color-hover);
-        } .tag__component_1m73j.tag__outlined_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__outlined_4ky3o:active:not(:disabled) {
             border-color: var(--tag-inverted-border-color-active);
             background-color: var(--tag-inverted-outlined-background-color-active);
-        } .tag__component_1m73j.tag__filled_1m73j {
+        } .tag__component_4ky3o.tag__filled_4ky3o {
         color: var(--tag-inverted-text-color);
         border-color: var(--tag-inverted-filled-border-color);
         background-color: var(--tag-inverted-filled-background-color)
-    } .tag__component_1m73j.tag__filled_1m73j:disabled {
+    } .tag__component_4ky3o.tag__filled_4ky3o:disabled {
             color: var(--tag-inverted-text-color-disabled);
             background-color: var(--tag-inverted-filled-background-color-disabled);
-        } .tag__component_1m73j.tag__filled_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__filled_4ky3o:hover:not(:disabled) {
             background-color: var(--tag-inverted-filled-background-color-hover);
-        } .tag__component_1m73j.tag__filled_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__filled_4ky3o:active:not(:disabled) {
             background-color: var(--tag-inverted-filled-background-color-active);
-        } .tag__component_1m73j.tag__checked_1m73j {
+        } .tag__component_4ky3o.tag__checked_4ky3o {
         border-color: var(--tag-inverted-border-color-checked);
         background-color: var(--tag-inverted-background-color-checked);
         color: var(--tag-inverted-text-color-checked)
-    } .tag__component_1m73j.tag__checked_1m73j:disabled {
+    } .tag__component_4ky3o.tag__checked_4ky3o:disabled {
             background-color: var(--tag-inverted-background-color-checked-disabled);
             border-color: var(--tag-inverted-border-color-checked-disabled);
             color: var(--tag-inverted-text-color-checked-disabled);
-        } .tag__component_1m73j.tag__checked_1m73j:hover:not(:disabled) {
+        } .tag__component_4ky3o.tag__checked_4ky3o:hover:not(:disabled) {
             background-color: var(--tag-inverted-background-color-checked-hover);
-        } .tag__component_1m73j.tag__checked_1m73j:active:not(:disabled) {
+        } .tag__component_4ky3o.tag__checked_4ky3o:active:not(:disabled) {
             background-color: var(--tag-inverted-background-color-checked-active);
         }